Table of Contentseduteka.icesi.edu.co/gp/upload/1538608962_web-47.pdf · Estilos CSS básicos Pseudo-clases Capas Ejemplo Introducción a HTML 5 Navegadores que lo soportan Doctype

1.1

1.2

1.2.1

1.2.2

1.2.3

1.2.4

1.2.5

1.2.6

1.2.7

1.2.8

1.2.9

1.2.10

1.2.11

1.2.12

1.2.13

1.3

1.3.1

1.3.2

1.3.3

1.3.4

1.3.4.1

1.3.4.2

1.3.4.3

1.3.4.4

1.3.5

1.3.6

1.3.7

1.4

1.4.1

1.4.2

TableofContentsContenidos

IntroducciónaHTML

EditoresHTML

Sintaxisdellenguaje

EstructurabásicadeunaWeb

Elementosdelacabecera

Etiquetasbásicas

Listas

Tablas

Cajas,etiquetaDIV

Enlaces

Imágenes

Formularios

Eventos

SímbolosHTML

IntroducciónaCSS

Adjuntarunahojadeestilo

DefinicióndeestilosparaetiquetasHTML

Identificadoresyclases

EstilosCSSbásicos

Estilosparatextos

Estilosparapárrafos

Estilosparafondos

Estilosparacajas

Pseudo-clases

Capas

Ejemplodeuso

IntroducciónaHTML5

Navegadoresquelosoportan

Doctype

2

1.4.3

1.4.4

1.4.5

1.4.6

1.4.7

1.4.8

1.4.9

1.4.10

1.4.11

1.5

1.5.1

1.5.2

1.5.3

1.5.4

1.5.5

1.5.6

1.5.7

1.5.8

1.5.9

1.5.10

1.6

1.6.1

1.6.2

1.6.3

1.6.4

1.6.5

1.6.6

1.6.7

1.6.8

1.6.9

1.6.10

1.6.11

1.7

1.8

Estructurasemántica

Formularios

EtiquetaMark

Canvas

Audio

Vídeo

Geolocalización

AlmacenamientoOffline

DetectarfuncionalidadesdeHTML5

IntroducciónaCSS3

Nuevosselectoresdeatributos

Nuevaspseudo-clases

Color

Bordes

Fondos

Texto

Columnas

Modelodecajabásico

Transiciones

Transformaciones

IntroducciónaJavaScript

InclusióndeJavaScriptenHTML

Etiquetanoscript

Consideracionessobreellenguaje

Variables

Operadores

Estructurasdecontroldeflujo

Funcionesútiles

Funciones

DOM

Eventos

Deteccióndeerrores

Másinformación

Ejercicios1

3

1.9Ejercicios2

4

ContenidosElobjetivodeestelibroesrealizarunaintroducciónalosconceptosmásbásicosdelaprogramaciónweb,comosonHTMLyCSS,hastaotrosmásavanzadosynovedososdeHTML5,CSS3oJavaScript.

Enlasprimerasseccionesserealizaunaintroducciónalosconceptosfundamentales,desdelasintaxisdellenguaje,etiquetas,editoresdeHTML,estructurabásicadeunapáginaweb,etc.Seincluyenpequeñosejemplosparacadaunodelosapartadosademásdealgúnejemplomáselaboradoyejerciciosfinales.

TambiénsetratanaspectosmásavanzadoscomoeventosHTML,procesamientodeformularios,pseudo-clasesCSS,disposiciónoestructuracióndeunawebencapas,yserealizaunaintroducciónalosúltimoselementosdellenguajeintroducidosconHTML5yCSS:transiciones,transformaciones,audio,vídeo,geolocalización,etc.

PorúltimoseincluyeunaseccióndeintroducciónaJavaScriptenlaquetambiénsepartedesdelosconceptosmásbásicos(inclusióndescriptsenHTML,variables,operadores,etc.)hastaalgunosmásavanzadoscomofunciones,eventosocomotrabajarconelDOMdeunapáginaWeb.

Loscontenidosprincipalesdeestelibroson:

IntroducciónaHTMLEditoresHTMLSintaxisdellenguajeEstructurabásicadeunaWebElementosdecabeceraEtiquetasbásicasListasTablasCajas,etiquetaDIVEnlacesImágenesFormulariosEventosSímbolosHTML

IntroducciónaCSSAdjuntarunahojadeestiloDefinicióndeestilosparaetiquetasHTML

Contenidos

5

IdentificadoresyclasesEstilosCSSbásicosPseudo-clasesCapasEjemplo

IntroducciónaHTML5NavegadoresquelosoportanDoctypeEstructurasemánticaFormulariosEtiquetaMarkCanvasAudioVídeoGeolocalizaciónAlmacenamientoOfflineDetectarfuncionalidadesdeHTML5

IntroducciónaCSS3NuevosselectoresdeatributosNuevaspseudo-clasesColorBordesFondosTextoColumnasModelodecajabásicoTransicionesTransformaciones

IntroducciónaJavaScriptInclusióndeJavaScriptenHTMLEtiquetanoscriptConsideracionessobreellenguajeVariablesOperadoresEstructurasdecontroldeflujoFuncionesútilesFuncionesDOMEventosDeteccióndeerrores

Contenidos

6

MásinformaciónEjercicios

Contenidos

7

IntroducciónaHTMLHTML,siglasdeHyperTextMarkupLanguage(Lenguajedemarcadodehipertexto),esellenguajedemarcadopredominanteparalaelaboracióndepáginasweb.Esusadoparadescribirlaestructurayelcontenidoenformadetexto,asícomoparacomplementareltextoconobjetostalescomoimágenes.

ElcódigoHTMLseescribeenformade"etiquetas",mediantelascualespodemosdescribirlaestructuralógicayaparienciadelcontenido.LaaparienciaquepodemosdescribirconHTMLestábastantelimitada,peroelcódigosepuedecomplementarymejorarmedianteelusodeotroslenguajescomoJavaScriptoCSS.

EnlassiguientesseccionesserealizaunaintroducciónalasprincipalescaracterísticasdeHTML,partiendodesdelosposibleseditoresmásadecuadosparaescribircódigoolaestructurabásicaqueunapáginaHTMLdebetener,hastaconceptosmásavanzadoscomolainclusióndeformulariosoelmanejodeloseventosproducidosenunapágina.

IntroducciónaHTML

8

EditoresHTMLEllenguajeHTMLpuedesercreadoyeditadoconcualquiereditordetextosbásico,comopuedeserGeditenLinuxoelBlocdenotasdeWindows.ExistenademásotroseditoresparalarealizacióndesitioswebconcaracterísticasWYSIWYG(WhatYouSeeIsWhatYouGet,oenespañol:"loquevesesloqueobtienes").Estoseditorespermitenverelresultadodeloqueseestáeditandoentiemporeal,amedidaquesevadesarrollandoeldocumento.Ahorabien,estonosignificaunamaneradistintaderealizarsitiosweb,sinoqueunaformauntantomássimpleyaqueestosprogramas,ademásdetenerlaopcióndetrabajarconlavistapreliminar,tienesupropiasecciónHTML,lacualvagenerandotodoelcódigoamedidaquesevatrabajando.AlgunosejemplosdeeditoressonAdobeDreamweaver,KompoZeroMicrosoftFrontPage.

EstoseditoresaceleranofacilitanlacreacióndecódigoHTML,peroenalgunasocasionestambiéngeneranmuchomáscódigodelnecesario(comoeselcasodeMicrosoftFrontPage).Loidealesteneruncontroltotalsobreelcódigoqueseescribeyutilizarestoseditoressólocomounapequeñaayuda.TambiénpodemosutilizarotrotipodeeditoresquesimplementecompruebenqueelcódigoHTMLescritoescorrecto(quelasetiquetasyatributossoncorrectos,lasetiquetassecierrancorrectamente,etc.).

EditoresHTML

9

SintaxisdellenguajeLasetiquetasHTMLdebendeirencerradasentrecorchetesangulares<>,ypuedenserdedostipos:

Seabrenysecierran,comoporejemplo:<b>negrita</b>o<p>texto</p>.

Seabrenycierranenlamismaetiqueta,como:<br/>o<hr/>.

Encasodequenocerremosunaetiquetaquedebasercerradaseproduciráunerrorenlaestructuradeldocumentoyprobablementetambiéngenereerroresenlavisualización.

Hayetiquetasqueademáspuedenconteneratributos,enestecasolosatributossedebendecolocarenlaetiquetadeinicio,delaforma:

<etiquetaatributo1="valor1"atributo2="valor2">...</etiqueta>

Oparalasetiquetasdesoloapertura:

<etiquetaatributo1="valor1"atributo2="valor2"/>

Porejemplo:

<imgsrc="imagen.jpg"alt="Imagendecabecera"/>

Sintaxisdellenguaje

10

EstructurabásicadeunaWebUndocumentoHTMLcomienzaconlaetiqueta<html>yterminacon</html>.Dentrodeldocumento(entrelasetiquetasdeprincipioyfindehtml)haydoszonasbiendiferenciadas:elencabezamiento,delimitadopor<head>y</head>,quesirveparaincluirdefinicionesinicialesválidasparatodoeldocumento;yelcuerpo,delimitadopor<body>y</body>,donderesidelainformacióndeldocumento.

Lasetiquetasbásicasomínimasson:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d

td">

<html>

<head>

<title>Ejemplo</title>

</head>

<body>

¡Holamundo!

</body>

</html>

LaprimeralíneaeselDOCTYPE,oeltipodedocumentoquevieneacontinuación.EnestecasoseusaelestándardeHTML4.01(elúltimoestándaradoptadoen1999,yaqueHTML5afechade2011siguesiendounborrador).Lasiguienteetiqueta,<html>,defineeliniciodeldocumentoHTML,eindicaqueloquevieneacontinuacióndebeserinterpretadocomocódigoHTML.Comopodemosverenlaúltimalínea,secierralaetiqueta</html>.

Dentrodeestasetiquetas<html>...</html>encontramoslasdosseccionesmencionadas:

Encabezamiento(head):Estaseccióninicialcontienetodosloselementosnovisualesdenuestraweb,comoporejemplolosmetadatosdescriptivos(autor,palabrasclave,descripcióndelcontenido,etc.),losestilosautilizarenloselementosvisualesdelcuerpo,eltítuloqueapareceráenlabarrasuperiordelnavegador(comoenelejemplosuperior),yotraseriedeelementosqueseestudiaránmásendetalleenlasiguientesección.

Cuerpo(body):Aquíhemosdeincluirtodosloscontenidosvisualesdenuestraweb,todoslostextos,imágenes,enlaces,etc.Enelejemplodearribaloúnicoqueseincluyeeseltexto"¡Holamundo!"porloquealabrirestawebnosapareceráunapáginawebqueincluiráúnicamenteesetexto.


11

Enlossiguientesapartadossedescribiránmásendetalleloselementosquepodemosutilizardentrodelencabezamientoodelcuerpodeunaweb.EnprimerlugarseestudiaránloselementosdelacabecerayacontinuacióntodaslasetiquetasHTMLquesesuelenutilizarparalaconstruccióndeunaweb.


12

ElementosdelacabeceraLaseccióndecabecera<head>...</head>seutilizaparadescribireltipodecontenidoyaspectovisualquetendrálaweb.Esimportantedestacarquetodoelcontenidodelaseccióndecabeceranosemuestradirectamentealusuario,sinoqueesúnicamenteinformacióndescriptivaymetadatos.Porejemplo,nospermitiráindicarmetadatosquesonmuyútilesparalaindexacióndelawebenbuscadores,comoeltipodecontenido,palabrasclaveoelautor,oindicarlosestilosconloscualessemostraránloselementosvisuales,entreotrainformación.

Algunasdelasprincipalesetiquetasquepodemosutilizardentrodelacabecerason:

<title></title>:defineeltítulodelapágina.Porlogeneraleltítuloapareceenlabarradetítuloencimadelaventana.

<link/>:paravincularelsitioconhojasdeestiloexternas(verlaseccióndeCSSparamásinformación):

<linkrel="stylesheet"href="style.css"type="text/css"/>

Elatributorelesrequeridoydescribeeltipodedocumentoenlazado(enestecasounahojadeestilo).Elatributotypeessimplementeindicativodeltipodehojadeestiloenlazada(enestecasoCSS).

<style></style>:seutilizaparaañadirdefinicióndeestiloenlínea.Noesnecesariocolocarlosisevaautilizarunahojadeestiloexternausandolaetiqueta<link/>(queeslomáshabitualyrecomendable).Elusocorrectoseríadelaforma:

<html>

<head>

...

<styletype="text/css">

EstilosCSS

</style>

</head>

<body></body>

</html>

ParamásinformaciónverlasecciónCSSdelmanual.

<meta/>:paraindicarmetadatoscomoladescripcióndelaweb,loskeywords,oelautor:


13

<metaname="description"content="Descripcióndelaweb"/>

<metaname="keywords"content="key1,key2,key3"/>

<metaname="author"content="Nombredelautor"/>

Unaetiqueta"meta"muyútilesladelacodificación,quenospermitiráescribirtextoconacentosyseseveabien(sinsímbolosextraños)entodoslosnavegadores:

<metacharset="utf-8"/>

<script></script>:permiteincluirunscriptenlaWeb.Elcódigosepuedeescribirdirectamenteentrelasetiquetasde<script>ocargardesdeunficheroexternoutilizandoelatributosrc="urldelscript"paraindicarladireccióndelfichero.SerecomiendaincluireltipoMIMEenelatributotype,queenelcasodecódigoJavaScriptseríatext/javascript.Acontinuaciónseincluyenalgunosejemplosdeuso:

<scriptsrc="fichero.js"type="text/javascript"></script>

<scripttype="text/javascript">

Códigodeunscriptintegradoenlapágina

</script>

Cuandousamoselatributosrcelcontenidodeestasetiquetasestávacío(noencierranada),estoesporquelocargadirectamentedesdeelficheroindicado.EnelcapítulosobreJavaScriptpodréisencontrarmuchamásinformaciónsobrecomoutilizarestasetiquetas.

AcontinuaciónseincluyeuncódigodeejemploenelquesehaampliadolaestructuraHTMLbásicadeunawebquevimosenlasecciónanteriorparaañadiralgunasdeestasetiquetas:


14


td">

<html>

<head>



<metaname="description"content="Descripcióndelaweb"/>

<metaname="keywords"content="key1,key2,key3"/>

<metaname="author"content="Nombredelautor"/>

<linkrel="stylesheet"href="style.css"type="text/css"/>

<scriptsrc="javascript.js"type="text/javascript"></script>

</head>

<body>

¡Holamundo!

</body>

</html>


15

EtiquetasbásicasHTMLDentrodelaseccióndelcuerpo(<body>...</body>)utilizaremosetiquetasHTMLparacrearelcontenidovisualdelaweb.Estasetiquetasnospermitiránirañadiendotextos,imágenes,encabezados,tablas,etc.paracomponereldiseñodelaweb.Enprimerlugarveremoslasetiquetasmásbásicasquesesuelenutilizar,estasson:

<h1></h1>a<h6></h6>:encabezadosotítulosdeldocumentocondiferenterelevancia,siendo<h1>lacabecerademayornivel.

<p></p>:definicióndeunpárrafo.

<br/>:saltodelínea.

<b></b>:textoennegrita(etiquetadesaprobada.Serecomiendausarlaetiqueta<strong></strong>).

<i></i>:textoencursiva(etiquetadesaprobada.Serecomiendausarlaetiqueta<em></em>).

<s></s>:textotachado(etiquetadesaprobada.Serecomiendausarlaetiqueta<del></del>).

<u></u>:textosubrayado.

<center></center>:textocentrado.

<pre></pre>:textopreformateado,respetalosespaciosysaltosdelínea.

<sup></sup>:Superíndice.

<sub></sub>:Subíndice.

<blockquote></blockquote>:Indicaunacitatextual,serepresentacomounpárrafoindexadoconrespectoalmargen.

<hr/>:Líneahorizontal,usada,porejemplo,paraseparardiferentessecciones.

:ComentariosenHTML.Eltextodelcomentarionoserávisibleenelnavegador.

<span></span>:Estaetiquetanoaplicaningúnformatoporsimisma,sinoqueproveeunaformadedefinirunestilooformatoauntrozodetexto.Seutilizajuntoconunahojadeestilo.Porejemplo,lopodemosutilizarparamarcarpalabrasenalgúncoloroconalgúnformatoespecial.

Etiquetasbásicas

16

Acontinuaciónseincluyeuncódigodeejemploenelquesehaampliadoelejemplodel"HolaMundo"ysehanañadidoalgunasdelasetiquetasHTMLquehemosvisto:


td">

<html>

<head>


<metacharset="utf-8">

</head>

<body>

<h1>¡MiprimeraWeb!</h1>

<p>

Ejemplodewebcontextosen<strong>negrita</strong>,<em>cursiva</em>

y<u>subrayado</u>.

</p>

<blockquote>

Ejemplodenota,comosepuedeverseleaplicaunmargenporlaizquierda.

</blockquote>

<hr/>



<h2>Otroencabezado</h2>

<p>

Textodeejemploconsuperíndices(m<sup>2</sup>)ysubíndices(H<sub>2</sub

>O).

</p>

</body>

</html>

Siguardamosestecódigoenunficheroconextensión"html"(porejemplo"index.html")yloabrimossenosmostraríaunresultadosimilaralsiguiente:

Etiquetasbásicas

17

Etiquetasbásicas

18

ListasParadefinirunalistautilizamoslassiguientesetiquetas:

<ol></ol>:Listaordenada(connumeración).<ul></ul>:Listaconpuntos(oviñetas).

Lasetiquetas<ol></ol>y<ul></ul>seutilizancomoetiquetascontenedorasdeloselementosdelalista,dentrodelascualestendremosqueutilizarlaetiqueta<li></li>parairañadiendocadaunodeloselementosdelamisma.

Porejemplo,paracrearunalistaordenadacondoselementos:

<ol>

<li>Elemento1</li>

<li>Elemento2</li>

</ol>

Conloqueobtendríamosunresultadosimilaralsiguiente:

1. Elemento12. Elemento2

Oporejemplo,paracrearunalistaconpuntosoviñetasdetreselementosusaríamoselsiguientecódigo:

<ul>

<li>Elemento1</li>

<li>Elemento2</li>

<li>Elemento3</li>

</ul>


Elemento1Elemento2Elemento3

Dentrodelasetiquetas<li>asuvezpodemosusarotrasetiquetas,comoporejemploponernegritas,cursivas,encabezados,ocualquierotracosaquesenosocurra,porejemplo:

Listas

19

<ul>

<li><em>Elemento1</em>:Elelemento1esel<u>principal</u>delalista.</li>

<li><em>Elemento2</em>:Elelemento2esmuy<strong>peligroso!</strong></li>

</ul>

ConestecódigoHTMLobtendríamosunresultadosimilaralsiguiente:

Elemento1:Elelemento1eselprincipaldelalista.Elemento2:Elelemento2esmuypeligroso!

Dadoquedentrodeunelementodelalistapodemosponercualquierotraetiqueta,tambiénpodremosponerotraslistas.Estonospermitiráeshacerlistasanidadasdelaforma:

<h1>Menú</h1>

<ol>

<li>

Primerplato

<ul>

<li>Ensalada</li>

<li>Gazpachoandaluz</li>

</ul>

</li>

<li>

Segundoplato

<ul>

<li>Macarrones</li>

<li>Polloalhorno</li>

<li>Pescado</li>

</ul>

</li>

<li>

Postre

<ul>

<li>Tarta</li>

<li>Yogur</li>

<li>Café</li>

</ul>

</li>

</ol>

Conloqueobtendríamosunalistacomolasiguiente:

Listas

20

Listas

21

TablasLastablassedefinenbásicamentemediantetresetiquetas:

<table></table>:defineunatabla.<tr></tr>:filadeunatabla,debedeestardentrodelasetiquetasdeunatabla.<td></td>:celdadeunatabla,debeestardentrodeunafila.

Ejemplodeunatabla:

<table>

<tr>

<td>Fila1izquierda</td>

<td>Fila1derecha</td>

</tr>

<tr>

<td>Fila2izquierda</td>

<td>Fila2derecha</td>

</tr>

</table>


Fila1izquierda Fila1derecha

Fila2izquierda Fila2derecha

Ademástambiénpodemosutilizarlaetiqueta<th>enlugarde<td>paraindicarunaceldade"cabecera",deestaformaelcontenidoseráresaltadoennegritayenuntamañoligeramentesuperioralnormal.Porejemplo,paracrearunatablacondoselementosdecabeceraydosceldasnormales:

<table>

<tr>

<th>Cabecera1</th>

<th>Cabecera2</th>

</tr>

<tr>

<td>Celda1</td>

<td>Celda2</td>

</tr>

</table>

Enlaetiquetadeapertura<table>podemosutilizarlossiguientesatributos:

Tablas

22

border="num":Anchodelbordedelatablaenpuntos.Siindicamosborder="0"tendremosunatablacuyasdivisionesnoseránvisibles,estapropiedadsesueleutilizarparadistribuirloselementosenunapáginaWeb.

cellspacing="num":Espacioenpuntosqueseparalasceldasqueestándentrodelatabla.

cellpadding="num":Espacioenpuntosqueseparaelbordedecadaceldayelcontenidodeesta.

width="num":Indicalaanchuradelatablaenpuntosoenporcentajeenfuncióndelanchodelaventana.Sinoseindicaesteparámetro,elanchodependerádeloscontenidosdelasceldas.

height="num":Indicalaalturadelatablaenpuntosoenporcentajeenfuncióndelaltodelaventana.Sinoseindicaesteparámetro,laalturadependerádeloscontenidosdelasceldas.Esteatributotambiénsepuedeutilizarenlasetiquetas<tr>paraindicarlaalturadecadafiladeformaindividual.

Enlasetiquetasdeaperturadecelda(<td>o<th>)podemosutilizarlossiguientesatributos:

align="pos":Indicacomosedebealinearelcontenidodelacelda,alaizquierda(left),aladerecha(right),centrado(center)ojustificado(justify).

valign="pos":Indicalaalineaciónverticaldelcontenidodelacelda,enlapartesuperior(top),enlainferior(bottom),oenelcentro(middle).

rowspan="num":Indicaelnúmerodefilasqueocuparálacelda.Pordefectoocupaunasolafila.Esteatributoseutilizaparacrearceldas"multifila",esdecir,unaceldaqueporejemploocupe3filas.Tendremosquetenerencuentaqueesaceldanosedeberádedefinirenlassiguientes2filas(paraesasfilassedefiniráunaceldamenos).

colspan="num":Indicaelnúmerodecolumnasqueocuparálacelda.Pordefectoocupaunasolacolumna.Esteatributoseutilizaparacrearceldas"multicolumna",esdecir,unaceldaqueporejemploocupe3columnas.Tendremosquetenerencuentaqueenesafilatendremosquedefinir2celdasmenos.

width="num":Indicalaanchuradelacolumnaenpuntosoenporcentajeenfuncióndelanchodelaventana.Sinoseindicaesteparámetro,elanchodependerádeltamañodeloscontenidos.

Tablas

23

Cajas(etiqueta <div>)Laetiqueta<div></div>permitecrearcajascontenedorasdeotroselementos.Estaetiquetanomuestra(pordefecto)ningúnestiloniformatovisual,sinoqueesutilizadaúnicamenteparaorganizarladisposicióndeloselementosenlapágina.Esmuysencilloindicarsuposicióndeformaabsolutaorelativaenlapáginaycreardivisionesdelespacioparadistribuirloselementos.

Estascajaspuedencontenercualquiertipodeelemento(texto,imágenes,etc.)uotrasetiquetas<div>paracrearsubdivisiones.

Acontinuaciónseincluyeunpequeñoejemplodesuuso:


td">

<html>

<head>

<title>EjemplodeusodelaetiquetaDIV</title>


</head>

<body>

<div>Menusuperior</div>

<div>

<h1>Contenidocentral</h1>

<div>

Artículo1

</div>

<div>

Artículo2

</div>

</div>

<div>Piedepágina</div>

</body>

</html>

Comosepuedeversehautilizadounaetiqueta<div>paracrearunasecciónquecontendráelmenúsuperior,otraparaelcontenidocentralyotraparaelpiedepágina.Lasecciónconelcontenidocentralsedivideasuvezenotrasdosseccionesocajasquecontendránlosartículos.

Cajas,etiquetaDIV

24

Siguardamosestecódigodeejemploenunarchivoyloabrimosveremosqueestaetiquetanomuestraningúnformatoniestilo,solamentenosapareceránlostextosquehemospuesto.ParapodercompletarestecódigoeindicarlaposiciónyestilosnosharáfaltautilizarCSS.Enlasecciónde"IntroducciónaCSS>Capas"seexplicamásafondoelusodeestaetiquetaycomolapodemosutilizarparaalinearloscontenidosocrearseccionesconestilosdefinidos.

Paraalinearelcontenidodeunapáginaserecomiendaelusodelaetiqueta<div>juntoconCSS.Noesrecomentableelusodelaetiqueta<table>paracrearalineaciones.

Cajas,etiquetaDIV

25

EnlacesLosenlacespermitenvincularpartesdeldocumentoconotrosdocumentosoconotraspartesdelmismodocumento.Porejemplo,quealpulsarconelratónsobreuntextoosobreunaimagensenosredirijaaunanuevaWebconuncontenidodiferente.

Paracrearunenlaceseutilizalaetiqueta<ahref=""></a>cuyoatributohrefestableceladirecciónURLalaqueapuntaelenlace.Porejemplo,unenlacealaWikipediaseríadelaforma:

<ahref="http://es.wikipedia.org">Wikipedia</a>

ParacrearunenlaceaunaseccióndenuestrapropiawebúnicamentenosharáfaltaescribirelnombredelficheroHTML,porejemplo:

<ahref="pagina2.html">Pulsaaquí</a>

EjemploEnesteejemplovamosacrearunenlacedesdelapáginaprincipaldenuestrositioweb(almacenadaenelficheroindex.html)aunapáginasecundariaconunartículo(queestaríaenelficheroarticulo1.html).Además,enlapáginasecundariaañadiremostambiénunenlaceparavolveralapáginaprincipal.

Elcontenidodelapáginaprincipal(ficheroindex.html)seríaelsiguiente:


td">

<html>

<head>



</head>

<body>

<h1>Webdeejemplo</h1>

<p>Pulsaen<ahref="articulo1.html">esteenlace</a>

paraconsultarnuestroprimerartículo.</p>

</body>

</html>

Elcontenidodelapáginasecundaria(ficheroarticulo1.html)seríaelsiguiente:

Enlaces

26


td">

<html>

<head>



</head>

<body>

<h1>Artículo1</h1>

<p>Textodeejemplodelartículo1.</p>

<p>Pulsaen<ahref="index.html">esteenlace</a>paravolveralapáginaprincipal.

</p>

</body>

</html>

EnlacessobreotroselementosTambiénsepuedencrearenlacessobreotroselementos,comoporejemploimágenes.Paraestosimplementetenemosqueescribirla/setiqueta/sdedichoelementodentrodelenlace:

<ahref="dirección_URL"><imgsrc="imagen.jpg"/></a>

Abrirunanuevaventana(opestañadelnavegador)Laetiquetadeenlace<a>tambiénpermiteelatributotarget="_blank",medianteelcualindicamosqueelenlacesetienequeabrirenunanuevaventanaoenunapestañanuevadelnavegador.Estaopciónsesueleutilizaramenudoparalosenlacesexternosparaquenosecierrelawebactual.

Porejemplo,paraañadirunenlaceaunawebexternaqueseabraenotraventanaparaqueelusuarioconsultemásinformaciónescribiríamoselsiguientecódigo:

<ahref="https://es.wikipedia.org/wiki/Polinomio"target="_blank">

Paramásinformaciónpulsaaquí

</a>

Direcciónbase

Enlaces

27

Ladirecciónprincipaldelawebnoesnecesarioescribirlayaqueseañadiráautomáticamente.Porejemplo,sinuestrawebes"http://www.webejemplo.es"yenelenlaceescribímosúnicamente<ahref="pagina2.html">Pulsaaquí</a>,alpulsarnosredirigiráalaweb"http://www.webejemplo.es/pagina2.html".

Hayquetenercuidadocuandocolocamoslaspáginasdentrodecarpetas.Porejemplo,sicreamosunacarpetaparametertodaslaspáginasconartículosyescribimosunenlacedelaforma:<ahref="articulos/articulo1.html">Iralartículo1</a>,estonosredirigiráaladirección"http://www.webejemplo.es/articulos/articulo1.html".Elproblemaestáenlosenlacesquecoloquemosdentrodeunapáginaqueestéenunasubcarpeta.Porejemplo,sienlapágina"articulo1.html"(queestáenlacarpeta"articulos")añadimosunenlaceparavolveralíndicedelaforma:<ahref="index.html">Volver</a>,esteenlaceenrealidadnosllevaríaaladirección"http://www.webejemplo.es/**articulos/index.html**".Esdecir,buscaríalapágina"index.html"dentrodelacarpetaactual.

Parasolucionaresteproblemayhacerreferenciaalaraízdenuestrositioweb,sesueleanteponersiemprelabarra"/"atodaslasdirecciones.Porejemplo,enelcasodelenlaceerróneoanteriortendríamosqueescribir:<ahref="/index.html">Volver</a>.Peroestabarraesrecomendableescribirlasiempre,entodaslasdirecciones,paraevitarerrores.

Enlaces

28

http://www.webejemplo.es

http://www.webejemplo.es/pagina2.html

http://www.webejemplo.es/articulos/articulo1.html

http://www.webejemplo.es/**articulos/index.html**

ImágenesParaincluirunaimagenseutilizalaetiqueta<imgsrc=""alt=""/>,lacualrequiereelatributosrcconlarutaenlaqueseencuentralaimagen.Esconvenienteponersiempreelatributoalt="textoalternativo",elcualindicaeltextoamostrarencasodenopodercargarlaimagenytambiénseutilizaparaopcionesdeaccesibilidad.

Porejemplo,paracargarunaimagenllamada"cabecera.jpg"utilizaremoslaetiquetadelaforma:

<imgsrc="cabecera.jpg"alt="Imagendecabecera"/>

Ademásexistenotrosatributosinteresantescomowidthyheightpararedefinirelanchoylaalturadelaimagen.Sinembargoserecomiendaindicarestaspropiedades(anchoyalto)modificandolosestilosdelaetiqueta(vercapítulo"IntroducciónaCSS").

Imágenes

29

FormulariosLosformulariospermitensolicitarinformaciónalvisitantedeunapáginaWeb.Estáncompuestosporcamposdediferentetipo,cuyainformaciónseenviaráaunadirecciónURL(indicadaenelcódigo)alpulsarelbotóndeenvío.

Ladeclaracióndeformularioquedarecogidaporlasetiquetas<form></form>,lascualesdebenencerrarladefinicióndetodosloscamposdelformulario.Enlaetiquetadeapertura<form>tenemosqueindicarlosatributosbásicos:

action="":Entrecomillasseindicalaacciónarealizaralenviarelformulario.Engeneralseindicaráelnombredeunficheroalojadoenelservidor,elcualseencargarádeprocesarlainformación.Aunquetambiénselepuedeindicarunadireccióndecorreoparaqueenvíedirectamentetodoelcontenido,delaforma:mailto:direccion_de_correo.

method=""(postoget):Indicaelmétododetransferenciadelasvariables.Elmétodo"post"envíalosdatosdeformanovisible,mientrasqueelmétodo"get"losadjuntaalaURLalaqueseredirige.

enctype="":Especificaeltipodecodificacióndelainformaciónenviada.Conmethod="get"noserealizacodificación,solosecambiancaracteresespecialescomoelespacio,porloquenoesnecesarioindicarenctype.Cuandoelvalordelatributo"method"es"post",podemosutilizarlossiguientesvalores:

application/x-www-form-urlencoded:Eselvalorpredeterminado.Codificatodosloscaracteresantesdeenviarlos.

multipart/form-data:Esrequeridoalenviararchivosmedianteunformulario.Nocodificalainformación.

text/plain:Nocodificalainformación,solocambialosespaciosporelsímbolo"+".

Porejemplo,unaposiblecabeceradeunformlariosería:

Formularios

30

<formaction="http://www.miweb.com/procesarformulario"method="POST">







</form>

TiposdecamposbásicosParaañadircamposalformularioseutilizalaetiqueta<input/>,estaetiquetadebedetenersiempredosatributos:

name="":Indicaelnombrequeseasignaaundeterminadocampo.EstenombrenoaparecevisibleenlaWeb,puesseutilizaparapoderdistinguircadacampoalenviarlainformaciónalservidoroporcorreo.Escomosifueraelnombredelavariablealaqueseasignaelvalordelcampo.

type="":Indicaeltipodecampoautilizar.Puedeserdemuchostipos:text,password,checkbox,radio,file,hidden,submit,reset.

Acontinuaciónsedescribenmásdetalladamentelosdiferentestiposdecampos<input/>segúnsuvalortype:

type="text":campodetipotextodeunalínea.Susatributosson:

maxlenght="":Seguidodeunvalorquelimitaráelnúmeromáximodecaracteres.size="":Seguidodeunvalorquelimitaráelnúmerodecaracteresamostrarenpantalla.Adiferenciademaxlenghtesteatributonolimitalalongituddeltextoquesepuedeintroducir,sinoquemodificaeltamañovisibledelcampo.value="":Indicaelvalorinicialdelcampo.Acontinuaciónseincluyeunejemplodeuso:

<inputname="usuario"type="text"maxlenght="24"/>

type="password":Estecampofuncionaexactamenteigualqueeldetipo"text",peroocultaráeltextointroducidocambiandolasletrasporasteriscosopuntos.Susatributossonlosmismosquepara"text".

type="checkbox":Estecampomostraráunacasillacuadradaquenospermitirámarcaropcionesdeunalista(podremosmarcarvariasopcionesalavez).Paraindicarquevariascasillaspertenecenalmismogruposelesdebededarelmismonombreparael

Formularios

31

atributo"name".Eltextoquequeramosqueaparezcaacontinuacióndelacasilladel"checkbox"setendráqueescribirdespuésdecerrarlaetiqueta<input/>.Susatributosson:

value="":Defineelvalorqueseráenviadosilacasillaestámarcada.checked:Esteatributoesopcional,yhacequelacasillaaparezcamarcadapordefecto.Nonecesitaindicarleningúnvalor.Ejemplo:

<inputtype="checkbox"name="option1"value="leche"/>Leche<br/>

<inputtype="checkbox"name="option1"value="pan"checked/>Pan<br/>

<inputtype="checkbox"name="option1"value="queso"/>Queso<br/>

type="radio":Elcamposeelegirámarcandodeentrevariasopcionesunacasillacircular.Almarcarunacasillaelrestodecasillasdeesegrupodedesmarcaránautomáticamente.Paraindicarquevariascasillaspertenecenalmismogruposelesdebededarelmismonombreparaelatributo"name"(verejemplo).Ademásdebemosdeindicar:

value="":Defineelvalorqueseráenviadosilacasillaestámarcada.checked:Esteatributoesopcional,yhacequelacasillaaparezcamarcadapordefecto.Solosepodráusarparaunacasilla.Nonecesitaindicarleningúnvalor.Ejemplo:

<inputtype="radio"name="group1"value="leche"/>Leche<br/>

<inputtype="radio"name="group1"value="pan"checked/>Pan<br/>

<inputtype="radio"name="group1"value="queso"/>Queso<br/>

type="file":Elatributofilepermitealusuariosubirarchivos.NecesitaremosunprogramaquegestioneestosarchivosenelservidormedianteunlenguajediferentealHTML.Elúnicoatributoopcionalquepodemosutilizaressize=""medianteelcualpodremosindicarlaanchuravisualdeestecampo.Ejemplo:

<inputtype="file"name="datafile"size="40"/>

type="hidden":Estevalornopuedesermodificado,puespermaneceoculto.Sesueleutilizarparaenviaralmétodoencargadodeprocesarelformularioalgúndatoadicionalnecesarioparasuprocesamiento.Paraindicarelvalordeestecampoutilizamoselatributo:value="valor".

type="submit":Representaelbotónde"Enviar".Alpulsarestebotónlainformacióndetodosloscamposseenviarárealizandolaacciónindicadaen<form>.Medianteelatributo:

value="texto":podemosindicareltextoqueapareceráenelbotón.

Formularios

32

type="reset":Alpulsarestebotónseborraelcontenidodetodosloscamposdelformulario.Medianteelatributo:

value="texto":podemosindicareltextoqueapareceráenelbotón.

EtiquetasLasetiquetasseutilizanparaponeruntextoodescripcióndeloscamposdeunformulario.SeescribenusandolaetiquetaHTML<label>ytienenunúnicoatributo"for"queseutilizaparaindicarelnombre(atributoname)delcampoasociado.Porejemplo:

<labelfor="campo1">Etiqueta</label>

<inputname="campo1"type="text"/>

CamposdeSelecciónMediantelaetiqueta<select></select>podemoscrearlistasdeopciones,quenospermitiránseleccionarentreunaovariasdeellas.Susatributosson:

name="":Nombredelcampo.size="":Númerodeopcionesvisiblesalavez.Sinoseindicanadaoseleasignaunvalordeunosepresentarácomounmenúdesplegable.Enelcasodevaloresmayoresqueunoaparecerácomounalistaconunabarradedesplazamiento.multiple:Permiteseleccionarmasdeunvaloralavezparaelcampo.

Lasdiferentesopcionesdelalistaseindicaránmediantelaetiqueta<option></option>.Elnombrequesevisualizarádebedeindicarsedentrodeestasetiquetas.Medianteelatributovalue=""podemosindicarelvalorqueseenviaráconelformulario.Tambiénpodemosutilizarelatributoselectedparaindicarlaopciónseleccionadapordefecto.Sinoloespecificamos,siempreaparecerácomoseleccionadoelprimerelementodelalista.

<selectname="Colores"multiple>

<optionvalue="r">Rojo</option>

<optionvalue="g">Verde</option>

<optionvalue="b">Azul</option>

</select>

<selectname="Colores"SIZE="1">

<optionvalue="r">Rojo</option>

<optionvalue="g"selected>Verde</option>

<optionvalue="b">Azul</option>

</select>

Formularios

33

ÁreasdetextoMediantelasetiquetas<textarea></textarea>podemoscrearuncampodetextodemúltipleslíneas.Losatributosquepodemosutilizarson:

name="":Nombredelcampo.cols="num":Númerodecolumnasdetextovisibles.Esteatributoesopcional.rows="num":Númerodefilasdetextovisibles.Esteatributoesopcional.

EjemploAcontinuaciónseincluyeunejemplodeusodelosformulariosenelquesehanincluidolamayoríadeloscamposquehemosvisto:


td">

<html>

<head>



</head>

<body>

<h2>Formularioderegistro</h2>

<p>Escribetusdatosdeusuarioenelsiguienteformularioy

porúltimoaprietaelbotónenviar.</p>

<formaction="http://www.miweb.com/procesarformulario"method="POST">

<p>

<labelfor="usuario">Usuario:</label>

<inputname="usuario"type="text"maxlenght="32"/>

</p>

<p>

<labelfor="password">Contraseña:</label>

<inputname="password"type="password"maxlenght="16"/>

</p>

<p>

<labelfor="nombre">Nombrecompleto:</label>

<inputname="nombre"type="text"maxlenght="64"/>

</p>

<p>

<labelfor="direccion">Dirección:</label>

<inputname="direccion"type="text"maxlenght="128"/>

</p>

<p>

<labelfor="ciudad">Ciudad:</label>

<selectname="ciudad">

<optionvalue="ACoruña">ACoruña</option>

<optionvalue="Álava">Álava</option>

Formularios

34

<optionvalue="Albacete">Albacete</option>

<optionvalue="Alicante">Alicante</option>

<optionvalue="Almería">Almería</option>

<optionvalue="Asturias">Asturias</option>



</select>

</p>

<p>

<labelfor="tipo">Tipodecliente:</label><br/>

<inputtype="radio"name="tipo"value="particular"checked/>Particular<br

/>

<inputtype="radio"name="tipo"value="profesional"/>Profesional<br/>

</p>

<p>

<labelfor="comentarios">Comentarios:</label><br/>

<textareaname="comentarios"rows="4"cols="50"></textarea>

</p>

<p>

<inputtype="checkbox"name="terminos"value="terminos"/>

<labelfor="terminos">Aceptolostérminosycondicionesdeuso</label>

</p>

<p>

<inputtype="submit"value="Enviar"/>

<inputtype="reset"value="Borrarformulario"/>

</p>

</form>

</body>

</html>

Comosepuedevercadapardeetiquetaycampodeformulariosehaencerradodentrodeunpárrafo<p>paraqueocupeunaúnicalíneayqueelsiguientecampobajealalíneasiguiente.Estemismoefectosepodríaconseguirusandolaetiqueta<div>.ParamejorarelaspectovisualdelformulariosetendríanqueaplicarestilosCSS,loscualessetrataránenelsiguientecapítulo.

Siguardamosestecódigoenunfichero".html"yloabrimosconelnavegadorobtendríamosunresultadosimilaralsiguiente:

Formularios

35

Formularios

36

EventosEnestaseccióndedescribeunconceptounpocomásavanzado:loseventos.Unevento,comosunombreindica,escuandosucedeunadeterminadaacciónsobreunelemento.HTMLpermiteescucharestoseventosyasociarlesuncomportamientooacciónqueserealizarácuandosucedadichoevento.Laformadedefinirlosessimilaralosatributos(evento="ACCION"),laacciónharáreferenciaaunafunciónométodoenlenguajeJavaScript.Algunosdeloseventosquepodemosutilizarson:

onload:seactivacuandoelnavegadorterminadecargartodosloselementosdelapágina.

onclick:cuandosepresionaelbotóndelratónsobreunelemento.

onmouseover:sedisparacuandoelcursordelratónpasasobreunelemento.

onmousemove:cuandosemueveelcursordelratónmientrasestásobreunelemento.

onmouseout:seactivacuandoelcursordelratónsalefueradeunelemento(sobreelqueestaba).

onfocus:ocurrecuandounelementorecibeelenfoque(elcursordeescritura),yaseaconelpunterooconmediantelateclatabulador.

onkeypress:ocurrecuandosepresionaunatecla(dentrodeunelemento,porejemplouncampodeescritura).

onkeydown:sedisparacuandounateclaespresionada(dentrodeunelemento)

onkeyup:cuandounateclaessoltada.

onsubmit:seactivacuandounformularioesenviado.

onreset:ocurrecuandounformularioesreseteado.

onchange:ocurrecuandouncontrolpierdeelenfoqueysuvalorhasidomodificadodesdequerecibióelenfoque.

etc.(VerseccióneventosenelcapítulodeJavaScript)

Porejemplo,podemosenlazarelevento"onkeyup"deuntextareaconunafuncióndeJavaScriptdelaforma:

Eventos

37


functionsaveText(){

//accionesJavaScript

}

</script>

<textareaid="myarea"cols="80"rows="15"onkeyup="saveText()"></textarea>

LoseventosseveránmásendetalleenelcapítulocorrespondientedelaseccióndedicadaaJavascript(Verseccióneventos).Demomento,soloesimportantequeaprendráisquesepuedeasociarcódigoJavaScriptadeterminadoseventosoaccionesqueseproducenenloscamposHTMLdeunapáginaWeb.

Eventos

38

SímbolosHTMLLoscaracteresespecialescomosignodepuntuación,letrascontildeodiéresis,osímbolosdellenguaje;sedebenconvertirenentidadesHTMLparaquesemuestrencorrectamenteenunnavegador.LasiguienteesunalistadecaracteresespañolesjuntoconalgunossímbolosespecialesysucorrespondienteentidadHTML:

Caracter Código Caracter Código

á á Á Á

é é É É

í í Í Í

ó ó Ó Ó

ú ú Ú Ú

ü ü Ü Ü

ñ ñ Ñ Ñ

espacioenblanco € €

<(Menorque) < >(Mayorque) >

& & º(grados) °

Recordadqueparaescribirletrasacentuadasuotrossímbolosyqueelnavegadorlosmuestrecorrectamentesímplementetenemosqueañadirlacabecerametaconlacodificación:


Sinembargohaydeterminadoscaracteresquesiqueremosescribirlosnosveremosobligadosaescribirelcódigodelsímbolo.Porejemplo,HTMLsolamentemuestraorenderizaunespacioenelnavegadoraunquenosotrosescribamosmuchosespacios.Siporalgunarazónqueremosdarvariosespaciostendremosqueescibirelsímbolo" ".Osiporejemploqueremosponerlossímbolosdemayor(>)omenor(<)ynocorrerelriesgodequeseconfundaconelinicioocierredeunaetiquetaHTML,tambiéntendremosqueescribirelcódigocorrespondiente.

ParaobtenerunalistamuchomáscompletadesímbolospodemosbuscarenGoogle:"HTMLsymbols"ovisitarlasiguientedirecciónhttp://www.ascii.cl/htmlcodes.htm.

SímbolosHTML

39

http://www.ascii.cl/htmlcodes.htm

SímbolosHTML

40

IntroducciónaCSSElnombrehojasdeestiloencascadavienedelinglésCascadingStyleSheets,delquetomasussiglas.CSSesunlenguajeusadoparadefinirlapresentaciónolaaparienciadeundocumentoestructuradoescritoenHTMLoXML(yporextensiónenXHTML).CSSsecreóparasepararelcontenidodelaforma,alavezquepermitealosdiseñadoresmanteneruncontrolmuchomásprecisosobrelaaparienciadelaspáginas.ElW3C(WorldWideWebConsortium)eselencargadodeformularlaespecificacióndelashojasdeestiloquesirvendeestándarparalosnavegadores.

EnversionesantiguasdeHTMLsedebíadeañadirelformatodentrodelaspropiasetiquetas,paraindicarporejemplosucolorotamaño.Estoobligabaatenerqueespecificarelmismoformatoentodaslasetiquetasparatenerundiseñoconsistente,además,alcambiarunformatotambiénhabíaquecambiarloparatodaslasetiquetas.

CuandoseutilizaCSS,lasetiquetasHTMLnodeberíanproporcionarinformaciónsobrecómoseránvisualizadas.Lainformacióndelahojadeestiloserálaqueespecifiquecómosehandemostrar:color,fuente,alineacióndeltexto,tamaño,etc.

LasventajasdeutilizarCSS(uotrolenguajedeestilo)son:

Controlcentralizadodelaaparienciadeunsitiowebcompleto,conloqueseagilizadeformaconsiderablelaactualizacióndelmismo.

Losnavegadorespermitenalosusuariosespecificarsupropiahojadeestilolocal,queseráaplicadaaunsitioweb,conloqueaumentaconsiderablementelaaccesibilidad.Porejemplo,personascondeficienciasvisualespuedenconfigurarsupropiahojadeestiloparaaumentareltamañodeltextooremarcarmáslosenlaces.

Unapáginapuededisponerdediferenteshojasdeestilosegúneldispositivoquelamuestreo,incluso,aeleccióndelusuario.Porejemplo,paraserimpresaomostradaenundispositivomóvil.

EldocumentoHTMLensimismoesmásclarodeentenderyseconsiguereducirconsiderablementesutamaño.

IntroducciónaCSS

41

AdjuntarunahojadeestiloLainformacióndeestilopuedeseradjuntadadetresformasdiferentes:

Hojadeestiloexterna:esunahojadeestiloqueestáalmacenadaenunarchivodiferentealarchivoHTML(porejemplollamado"estilo.css").Estaeslamaneradeprogramarmáspotenteylaquedeberemosdeutilizarpordefecto,yaqueseparacompletamentelasreglasdeestilodelapáginaHTMLyademásnospermiteusardichahojadeestiloentodaslaspáginasHTMLquequeramos.LahojadeestilodebedeserenlazadaconelcódigoHTMLdelaforma:

<html>

<head>

<linkrel="stylesheet"type="text/css"href="estilo.css"/>

...

</head>

...

Hojadeestilointerna:esunahojadeestiloqueestáincrustadadentrodeldocumentoHTML.Engeneral,elmotivoparausarunahojadeestilointerna,escuandosequierediferenciarconalgúnestilounodelosficherosHTMLdenuestraWeb.Estecódigodebedeestarincluidoenlaseccióndecabecera<head>yentrelasetiquetas<style>.Laformadeincluirelcódigoseríadelaforma:

<html>

<head>


H1{color:blue;text-align:center}

</style>

</head>

...

Estiloenlínea(inline):esunmétodoparainsertarlosestilosCSSdirectamentedentrodeunaetiquetaHTML.Estaopciónlausaremosúnicamentecuandoqueramosaplicarunestilosobreunaúnicaetiquetaounúnicoelemento.Encualquierotrocasousaremosalgunadelasopcionesanteriores,yaquesiporejemploaplicamosunmismoestiloamuchasetiquetasusandoestaopciónydespuésqueremoscambiaralgodeeseestilotendríamosquecambiarloentodaslasetiquetas,mientrasquesitenemosunahojadeestilocentralizadaconunúnicocambioserásuficiente.Paraincluirunestiloenlíneaoinlineseusaelatributostyledelaforma:


42

<h1style="color:blue;text-align:center">...</h1>


43

DefinicióndeestilosparaetiquetasHTMLSiloquequeremosesdarformatooredefinirunaetiquetaHTMLexistente,usaríamoslasintaxis:

etiqueta{

estiloCSS1;

estiloCSS2;

...

}

En"etiqueta"pondríamoselnombredelaetiqueta(porejemplo"h1","p",etc.perosinlossignos<>)ylosestilosquedefiniríanesaetiquetairíanencerradosentrelasllaves"{...}".Porejemplo:

h1{

estiloCSS1;

estiloCSS2;

...

}

ComentariosEnlashojasdeestilotambiénsepuedenescribircomentariosusandolossímbolos:/*textodelcomentario*/.Peroesimportanteusarestanotaciónynoningunaotra,yaqueeslaúnicasoportada.Acontinuaciónseincluyeunejemploconcomentarios:

/*Definimoselestilodelacabeceraprincipal*/

h1{

estiloCSS1;/*Cambiamoselestilodesu...*/

/*Tambiéncambiamosesteotroestiloporque...*/

estiloCSS2;

}

DefinicióndevariosestilosalavezTambiénpodemosredefinirvariasetiquetasalavezquecompartiránlosmismosestilos,separándolasporcomas,delaforma:


44

etiqueta1,etiqueta2,etiqueta3{

/*estilosCSS*/

}

EnestasecciónylasiguientenoscentraremoslascabecerasdelosestilosydejaremoslosestilosCSSquepodemosutilizarparalasección"estilosCSSbásicos"ysiguientes.Porestemotivoescribiremos/*estilosCSS*/enellugardondeiránlosestilosquedefinirálaetiqueta.

Imaginadporejemploquequeréiscambiarelcolordetodaslascabeceras,lopodéishaceralavezescribiendo:

h1,h2,h3,h4,h5,h6{

/*estilosCSS*/

}

EstilosanidadosOtraopcióninteresanteesdefinirelestilodeetiquetas"dentro"deotrasetiquetas.Paraestotenemosqueescribirprimerolaetiquetacontendora,seguidadeunespacioyporúltimolaetiquetaadefinir.EnestecasoelestiloCSSsoloseaplicarácuandolaetiquetadefinidaseencuentredentrodelaetiquetacontenedora:

contenedoretiqueta{

/*estilosCSS*/

}

Porejemplo,unaetiqueta<span>dentrodeunasección<p>:

pspan{

/*estilosCSS*/

}

Esteestilosoloseaplicaríacuandoseencuentrelaetiqueta<span>dentrodeunasección<p>delaforma:

<p>

Párrafodeejemplodonde

<span>elestilosoloseaplicarásobreestetexto</span>

ynosobreelrestodeltexto.

</p>


45

Estaopciónesmuyútilpuesnospermitirádefinirdiferentesestilosparalamismaetiquetadependiendodedondeseencuentre.


46

IdentificadoresyClasesAvecestenemosvariasetiquetasdelmismotipoperoqueremosaplicardiferentesestilossegúndondeestén.Paraestousamoslosidentificadoresylasclases.

LaprincipaldiferenciaentreellosesquelosidentificadorestienenqueserúnicosentodoeldocumentoHTMLmientrasquelasclasespuedenrepetirsetodaslasvecesquequeramos.Laotradiferenciaeslaformadedefinirlosydeutilizarlos:EnHTMLparaindicarelidentificadordeunaetiquetausaremoselatributo"id",mientrasqueparaindicarlaclaseusaremos"class":

<divid="capitulo2">

<p>...</p>

<pclass="parrafogris">....</p>

<p>...</p>


<p>...</p>


</div>

Enesteejemploseasignaelidentificador"capitulo2"alaetiqueta<div>inicial.Estaetiquetaseríaunasecciónúnicaentodoeldocumentosobrelacualpodemosaplicarunestiloconcreto.Elestilodelaclase"parrafogris"seaplicaríasobrelasetiquetas"p"indicadas,ycomosepuedeversihaaplicadovariasveces.

OtradiferenciaentreidentificadoresyclaseseslaformadedefinirsusestilosCSSenlahojadeestilos.Paraindicarunidentificadorescribiremossunombreprecedidoporunaalmohadilla"#",yparareferenciarunaclaseusaremoscomoprefijoelpunto".",porejemplo:

#identificador{

/*estilosCSS*/

}

.clase{

/*estilosCSS*/

}

Porejemplo,paraindicarlosestilosdelejemploanterior,escribiríamoselsiguientecódigo:


47

#capitulo2{

/*estilosCSS*/

}

.parrafogris{

/*estilosCSS*/

}

Esimportantediferenciarcuandotenemosqueusarlaalmohadilla"#"yelpunto".",loscualessololospondremosenlahojadeestilosynoenelcódigoHTML.Estoesunerrorcomúnyharíaquelosestilosnofuncionasen.Esdecir,siescribimos<divid="#capitulo2">(con"#")oescribimos<pclass=".parrafogris">(con".")seríaunerrorynofuncionaría.

Losidentificadoressesuelenusarmenosquelasclasesysoloparaelementosespecíficosquesequierendiferenciar.Normalmenteseaplicansobreetiquetas"neutras"como<div>o<span>paramarcarpartesdeundocumentoydespuésindicarsusestilos(comoporejemploidentificarlacabecera,unlogotipo,elmenúprincipal,etc.).

DefinicióndevariosestilosalavezIgualquehemosvistoantes,podemosdefinirestilosalavezparavariosidentificadoresyclases:

#capitulo1,#capitulo2,#capitulo3{

/*estilosCSS*/

}

.parrafogris,.parraforojo,.parrafoverde{

/*estilosCSS*/

}

Podemosmezclaridentificadores,conclasesyconetiquetassinproblema:

#capitulo1,.parrafogris,h1{

/*estilosCSS*/

}

AnidacióndeestilosPodemosaplicarestilosaidentificadoresyclasessolocuandocuandoesténdentrodeotros:


48

#capitulo1#cabecera{

/*estiloaaplicara#cabecerasolocuandoestédentrode#capitulo1*/

}

.parrafogris.resaltado{

/*estiloaaplicara.resaltadosolocuandoestédentrode.parrafogris*/

}

Igualqueantestambiénpodemoscombinaridentificadores,conclasesyconetiquetassinproblema:

#cabecerah1{

/*estilosaaplicarah1solocuandoestédentrodelasección#cabecera*/

}

.parrafogrisspan{

/*estilosaaplicaralaetiquetaspansolocuandoestédentrode.parrafogris*/

}

Siqueremospodemoscrearmásnivelesdeprofundidad,porejemplo:

#cabecerap.resaltado{

/*estilosaaplicara".resaltado"solocuandoestédentro

deunaetiqueta"p"queasuvezestédentrodelasección#cabecera*/

}

FiltraretiquetasconestilosTambiénpodemosaplicarestilosfiltrandoporetiquetasquetengaunadeterminadaclase,porejemplo:

etiqueta1.clase1{

/*estilosCSS*/

}

Enestecasosóloseaplicaríaelestiloalasetiquetas"etiqueta1"quesemarquequesondelaclase"clase1",porejemplo:<etiqueta1class="clase1">...</etiqueta1>.Siintentáramosaplicarestaclaseaunaetiquetadiferentenofuncionaría.

Porejemplo,elestilo:

h1.resaltado{

/*estilosCSS*/

}


49

Soloseaplicaríaalascabecerash1quetenganaplicadalaclase.resaltadodelaforma:<h1class="resaltado">...</h1>


50

EstilosCSSbásicosLasintaxisbásicaparadefinirunestiloes:

atributo:valor;

Losdiferentesestilossiempreseseparanconpuntoycoma(;),ydespuésdelnombreseponedospuntos(ynounigual"=",queesunerrortípicoalconfundirseconelHTML).Porejemplo,siqueremosdefinirunaclasequeapliquetresestilosusaríamoslanotación:

.estilo_de_ejemplo{

atributo:valor;

atributo:valor;

atributo:valor;

}

Esimportanteusarestanotacióncorrectamenteyaquesisenosolvidaelpuntoycoma(;)onoponemoslosdospuntos(:)losestilosnofuncionarán.

Muchosdelosvaloresquepodemosaplicaraunatributodeestilotendránunidadesdemedida,porejemplo,elvalordeltamañodeunmargenoeltamañodelafuente.Lasunidadesdemedidaquepodemosutilizarson:

pixels(px)puntos(pt)centímetros(cm)pulgadas(in)

AcontinuaciónseincluyeunresumendelosprincipalesestilosCSSylosvaloresqueselespuedenaplicaralossiguienteselementos:

EstilosparatextosEstilosparapárrafosEstilosparafondosEstilosparacajas

EstilosCSSbásicos

51

EstilosparatextosEnestasecciónsedescribenlosprincipalesestilosCSSquepodemosutilizarparacambiarlaaparienciadelostextosdeunaWeb.Paracadaunodeellosseindicaelnombredelatributo,losposiblesvaloresquelepodemosasignar,algunosejemplosyunaexplicacióndeuso.

color:valorRGBonombredecolorEjemplos:color:#009900;color:red;Sirveparaindicarelcolordeltexto.LoadmitencasitodaslasetiquetasdeHTML.Notodoslosnombresdecoloressonadmitidosenelestándar,esaconsejableentoncesutilizarelvalorRGB.Algunosdelosprincipalesnombresdecoloresson:white,black,gray,blue,red,greenoyellow,paramásnombrespodemosconsultarladirección"http://www.w3schools.com/colors/colors_names.asp".

font-size:xx-small|x-small|small|medium|large|x-large|xx-large|UnidadesCSSEjemplos:font-size:12pt;font-size:x-large;Sirveparaindicareltamañodelasfuentesdemaneramásrígidayconmayorexactitud.

font-family:serif|sans-serif|cursive|fantasy|monospace|Etc.Ejemplos:font-family:arial,helvetica;font-family:fantasy;Conesteatributoindicamoslafamiliadetipografíadeltexto.Losprimerosvaloressongenéricos(serif,sans-serif,etc.),esdecir,losnavegadoreslascomprendenyutilizanlasfuentesqueelusuariotengaensusistema.Tambiénsepuedendefinircontipografíasnormales.Sielnombredeunafuentetieneespaciosseutilizancomillasparaqueseentiendabien.

font-weight:normal|bold|bolder|lighter|100|200|300|...|900Ejemplos:font-weight:bold;font-weight:200;Sirveparadefinirlaanchuradeloscaracteres,odichodeotramanera,paraponernegritacontotallibertad.Normaly400sonelmismovalor,asícomoboldy700.

font-style:normal|italic|obliqueEjemplos:font-style:normal;font-style:italic;Eselestilodelafuente,quepuedesernormal,itálicauoblicua.Elestilo"oblique"essimilaral"italic".

Estilosparatextos

52

http://www.w3schools.com/colors/colors_names.asp

text-decoration:none|underline|overline|line-throughEjemplos:text-decoration:none;text-decoration:underline;Estableceladecoracióndeuntexto,siestásubrayado,sobre-rayadootachado.

text-transform:capitalize|uppercase|lowercase|noneEjemplos:text-transform:none;text-transform:capitalize;Nospermitetransformareltexto,paraquetengalaprimeraletraenmayúsculasdetodaslaspalabras,otodoenmayúsculasominúsculas.

Ejemplos

Porejemplo,paradefinirunpárrafoennegrita,cursivayademáscambiarelcolorpodemosdefinirestosestilosinlineenelatributostyledelpropiopárrafo:

<pstyle="font-weight:bold;font-style:italic;color:red">

Textoennegrita,cursivayencolorrojo.

</p>

Siquisieramoscambiarsolamenteelestilodeunaovariaspalabrasdentrodeunpárrafopodemosutilizarlaetiqueta<span>yasignarledichosestilosensuatributostyle:

<p>

Estepárrafocontieneuna

<spanstyle="font-weight:bold">secciónennegrita</span>.

</p>

Ladefinicióndeestilosdentrodelaetiquetastylesesuelehacercuandodichoestilosolosevaaaplicardeformapuntual.PerosiporelcontrarioqueremosdefinirunestiloquelovamosaaplicarvariasvecesenunsitioWeblomásaconsejableesdeclararunaclaseenunahojadeestilosexternaointerna.Porejemplo:

Estilosparatextos

53


td">

<html>

<head>




h1{

color:blue;

}

p{

color:black;

font-size:12pt;

}

.parrafo-aviso{

font-weight:bold;

font-style:italic;

color:red;

}

.nota{

text-align:right;

font-size:10pt;

color:gray;

}

</style>

</head>

<body>

<h1>Artículo1</h1>

<p>

Párrafonormalalqueseleaplicaelcolornegroyuntamañode12pt.

</p>

<pclass="parrafo-aviso">

Textodeavisodestacadoencolorrojo,cursivaynegrita.

</p>

<pclass="nota">

Notaalineadaaladerecha,encolorgrisycontamañodeletra10pt.

</p>

</body>

</html>

Estilosparatextos

54

EstilosparapárrafosLosestilosparapárrafosnospermitencambiarpropiedadesdetodounpárrafoobloquedetexto,comoporejemploelespaciadoentrelaslíneas,laalineación,etc.

line-height:normal|unidadesCSSEjemplos:line-height:12px;line-height:normal;Elaltodeunalínea,yportanto,elespaciadoentrelíneas.EsunadeesascaracterísticasquenosepodíanmodificarutilizandoHTML.

text-align:left|right|center|justifyEjemplos:text-align:right;text-align:center;Sirveparaindicarlaalineacióndeltexto.Esinteresantedestacarquelashojasdeestilopermiteneljustificadodetexto,aunquerecuerdaquenotieneporquefuncionarentodoslossistemas.

text-indent:UnidadesCSSEjemplos:text-indent:10px;text-indent:2in;Unatributoquesirveparahacersangradoomárgenesenlaspáginas.

EjemplosParaalineareltextodeunpárrafoaladerechapodemosutilizar:

<pstyle="text-align:right">

Textoalineadoaladerecha

</p>

Enesteotroejemplovamosacolocaruntextocentrado,conuninterlineadomayor,coneltextoencursivaygris.Ademásdefiniremoslahojadeestiloenlacabeceradelapágina:


55


td">

<html>

<head>




h1{

color:#222;

text-align:center;

}

.poema{

text-align:center;

font-style:italic;

line-height:30pt;

font-size:12pt;

color:#222;

}

.autor{

font-weight:bold;

color:gray;

font-size:10pt;

text-align:center;

}

</style>

</head>

<body>

<h1>Megustacuandocallas</h1>

<pclass="poema">

Megustascuandocallasporqueestáscomoausente,<br/>

ymeoyesdesdelejos,ymivoznotetoca.<br/>

Parecequelosojossetehubieranvolado<br/>

yparecequeunbesotecerraralaboca.

</p>

<br/>

<pclass="autor">

PabloNeruda

</p>

</body>

</html>



56


57

Estilosparafondosbackground-color:Uncolor,consunombreosuvalorRGBEjemplos:background-color:green;background-color:#000055;Sirveparaindicarelcolordefondodeunelementodelapágina.

background-image:ElnombredelaimagenconsucaminorelativooabsolutoEjemplos:background-image:url(mármol.gif);background-image:url(http://www.url.com/fondo.gif)Permitecolocarunaimagendefondoencualquierelementodelapágina.

Estilosparafondos

58

http://www.url.com/fondo.gif

Estilosparacajas(<div>o<table>)

width:UnidadesCSS|Porcentajeheight:UnidadesCSS|PorcentajeEjemplos:width:50px;width:100%;height:15px;Permitenindicarelanchoyalturadeunelemento.Sepuedenaplicarsobremuchoselementos,comotablas,etiquetasdiv,imágenes,párrafos"p",etc.Conalgunasetiquetasnofunciona,tampocosirveparaindicarespaciado(padding),bordesomárgenes.

margin-left:UnidadesCSSEjemplos:margin-left:1cm;margin-left:0,5in;Indicaeltamañodelmargenizquierdo.

margin-right:UnidadesCSSEjemplos:margin-right:5%;margin-right:1in;Defineeltamañodelmargenderecho.

margin-top:UnidadesCSSEjemplos:margin-top:0px;margin-top:10px;Indicaeltamañodelmargensuperior.

margin-bottom:UnidadesCSSEjemplos:margin-bottom:0pt;margin-top:1px;Indicaeltamañodelmargeninferior.

margin:<arriba><derecha><abajo><izquierda>|<arriba><derecha><abajo>|<arriba-abajo><izquierda-derecha>|<los4márgenes>Ejemplos:margin:4px2px1px2px;margin:4px;Tambiénpodemosutilizarelestilo"margin"paraindicartodoslosmárgenesalavez,estaetiquetanospermiteindicarledesde4valores(paracadaunodelosmárgenes),hasta1valor(paraaplicarlosobretodoslosmárgenes).

padding-left:UnidadesCSSEjemplos:padding-left:0.5in;padding-left:1px;Indicaelespacioinsertado,porlaizquierda,entreelbordedelelemento-continenteyelcontenidodeeste.Esparecidoaelatributocellpaddingdelastablas.Elespacioinsertadotieneelmismofondoqueelfondodelelemento-continente.

Estilosparacajas

59

padding-right:UnidadesCSSEjemplos:padding-right:0.5cm;padding-right:1pt;Indicaelespacioinsertado,enestecasoporladerecha,entreelbordedelelemento-continenteyelcontenidodeeste.Esparecidoaelatributocellpaddingdelastablas.Elespacioinsertadotieneelmismofondoqueelfondodelelemento-continente.

padding-top:UnidadesCSSEjemplos:padding-top:10pt;padding-top:5px;Indicaelespacioinsertado,porarriba,entreelbordedelelemento-continenteyelcontenidodeeste.

padding-bottom:UnidadesCSSEjemplos:padding-bottom:0.5cm;padding-bottom:1pt;Indicaelespacioinsertado,enestecasoporabajo,entreelbordedelelemento-continenteyelcontenidodeeste.

padding:<arriba><derecha><abajo><izquierda>|<arriba><derecha><abajo>|<arriba-abajo><izquierda-derecha>|<los4márgenes>Ejemplos:padding:4px2px1px2px;padding:4px;Aligualquepara"margin",estaetiquetanospermiteindicarledesde4valores(espaciadohastacadaunodelosbordesporseparado),hasta1valor(paraindicarelmismoespaciadohastatodoslosbordes).

border-color:colorRGBonombredecolorEjemplos:border-color:red;border-color:#ffccff;Paraindicarelcolordelbordedelelementodelapáginaalqueseloaplicamos.Sepuedeponercoloresporseparadoconlosatributosborder-top-color,border-right-color,border-bottom-color,border-left-color.

border-style:none|dotted|solid|double|groove|ridge|inset|outsetEjemplos:border-style:solid;border-style:double;Elestilodelborde,losvaloressignifican:none=ningúnborde,dotted=punteado,solid=solido,double=dobleborde,desdegroovehastaoutsetsonbordesconvariosefectos3D.

border-width:UnidadesCSSEjemplos:border-width:10px;border-width:0.5in;Eltamañodelbordedelelementoalqueloaplicamos.

border:<grosor><tipo><color>Ejemplo:border:2pxsolidred;Deestaformapodemosindicarlastrespropiedadesdelbordealavez.Tambiénpodemosutilizarborder-top,border-right,border-bottomyborder-leftparaindicarestastrespropiedadesparaunbordeenconcreto.

Estilosparacajas

60

float:none|left|rightEjemplo:float:right;Sirveparaalinearunelementoalaizquierdaoladerechahaciendoqueeltextoseagrupealrededordedichoelemento.

clear:none|both|right|leftEjemplo:clear:right;Indicaquenosepermitenelementosporeseladodelobjeto.Porejemplo,sitenemosvariascajasunaacontinuacióndeotra,alponer"clear:left"enlaúltimacaja,estapasaríaalasiguientelínea.

EnlasiguienteimagensepuedeverunesquemadeuncontenedorDIVenelqueserepresentaladiferenciaentremargin,paddingyborder:

Estilosparacajas

61

Pseudo-clasesUnapseudo-clasepermitetenerencuentadiferentescondicionesoeventosaldefinirunapropiedadparaunaetiquetaHTML,porejemplosiunenlacehasidovisitadoosielcursordelratónestásobreunelemento.Algunasdelaspseudo-clasesquepodemosutilizarson:

a:link-enlacequenohasidoexploradoporelusuario.a:visited-serefierealosenlacesyavisitados.a:active-enlaceseleccionadoconelratón.a:hover-enlaceconelpunterodelratónencima,peronoseleccionado.a:focus-enlaceconelfocodelsistema.Tambiénpuedeserusadoparauninput.p:first-letter-primeraletradeunpárrafo.p:first-line-primeralíneadeunpárrafo.

Utilizandoestoselementospodemosconfigurarporejemplo:

a{color:black;}

a:hover{color:blue;}

a:visited{color:darkgreen;}

p:first-letter{color:green;font-size:x-large;}

Enesteejemploseaplicaelcolorazulaltextodelosenlacessolocuandoelratónestéencima.Esdecir,eltextodelenlacetendrápordefectoelcolornegro,perocuandoelcursordelratónpaseporencimaelcolorcambiaráaazul.Ademástambiénseasignaelcolordeltextoverdeoscuroalosenlacesyavisitados,porloqueelusuariopodrávermarcadosdeestecolorlosenlacesqueyahapulsadoanteriormente.Porúltimotambiénseindicaquelaprimeraletradelospárrafostengaelcolorverdeyuntamañomásgrade.

Laspseudo-clasesnosepuedenincluirenelestiloenlíneadeunelemento,porlotantolastendremosquedefinirbienenlahojadeestilosexternaoenlasecciónstyledelacabecera,porejemplo:

Pseudo-clases

62

<html>

<head>


a{

background-color:white;

}

a:hover{

background-color:blue;

}

</style>

</head>

...

Pseudo-clases

63

CapasNormalmentelaposicióndeloselementosdeunapáginaesrelativa,esdecir,dependedelosdemáselementosdelapágina.Porejemplo,unpárrafoestarámásabajosiantesdeélhaymáspárrafosoelementos.Debidoaesto,normalmentecuandosequeríacolocarelementosenunsitioconcreto,serecurríaalusodetablas(invisibles,soloparaestructurar).

ConCSSpodemoscolocarloselementosenposiciónabsoluta,esdecir,indicandoeltamañoycoordenadasexactasenlasquequeremosquesecoloque.ParaorganizarladisposiciónenunaWebconCSSsesueleusarelelemento<div>.Ademásselesueledarunidentificadorúnicoacadauno,medianteelcual,desdelahojadeestilo,podemosconfigurarsudisposición.Tambiénpodemoscolocarestoselementosconposiciónrelativaaotroelementoquelocontenga,porejemplo,un<div>dentrodeotro.

EscomúneneldiseñoWebcrearcontenedores<div>generalesenunaposiciónabsolutaocentradosenlapágina,conuntamañodefinido,loscualesseutilizaránparacontenerydisponerelrestodeelementosdenuestraWeb.Estosotroselementossepuedenalineardeformasencillaconunaalineación"relativa"asuscontenedores.Porejemplouncontenedorparalacabeceraquecontengaunpardecontenedoresparaladisposicióndelogotipoyeltextodecabecera.

DistribuciónParaindicareltipodedistribuciónodisposicióndeunelementolohacemosmedianteelatributo"position:valor".Elcualpuedetomarlosvalores:

absolute:Laposicióndelelementonodependedeningunaotraetiqueta.Estaposiciónsecalculadesdelaesquinasuperiorizquierdadelapágina.fixed:Aligualqueelanteriorlaposiciónesabsoluta,peroelelementosequedafijoenelsitioalhacer"scroll".relative:Posiciónrelativaasuelementocontenedor.Eslapropiedadpredeterminada.static:Aligualqueelanteriorlaposiciónesrelativa,peronopodemosredimensionar(porejemplo)elobjeto.

Posición

Capas

64

Paraindicarlaposiciónconcretadeunacapautilizamoslosatributos:top,bottom,leftyright,delaforma:

top:<posición>;

left:<posición>;

Normalmentesóloseutilizanunpardeellos,comotopyleft,obottonyright.LaposiciónseespecificamedianteunidadesdeCSS,comoporejemploen"px",aunquetambiénadmiteporcentajes.

Unejemplodeladefinicióndeunacapasería:

#micapa{

position:absolute;

top:200px;

left:150px;

width:175px;

height:175px;

border:solid1pxblue;

text-align:center;

color:gray;

}

EnnuestrodocumentoHTMLtendremosunelementodefinidodelaforma:<divid="micapa">...</div>,dentrodelcualcolocaremostextouotroselementos.

Laposiciónabsolutalapodemosdefinirrespectoalaventanadelnavegadorodeformarelativaaunelementocontenedor.Enestesegundocasotenemosqueindicarquelaposicióndelelementocontenedoresrelativa(odeotraformanofuncionará).

OrdenAvecestenemosvariascapas,unasporencimadeotras,yqueremosespecificarunorden,parapodercontrolarlasocultacionesentrecapas.Paraestousamoselz-index,delaforma:

z-index:<índice>;

LascapasconuníndicedeZ-indexmayorapareceránporencimadelascapasconunz-indexmenor.

Capas

65

EjemploEnestasecciónseincluyeunejemplomáscompletodeunapequeñapáginawebHTMLalaqueselehanaplicadoestilosdefinidosenunasecciónstyleinternaademásdealgunosestilosinline.

Enlasiguienteimagenseincluyeunacapturadelaaparienciafinaldelcódigodeejemplo.Comosepuedeverlawebconstadeunacabecera,unmenúlateral,unasecciónprincipaldecontenidoyunpiedepágina:

AcontinuaciónseincluyeelcódigoHTMLyCSSutilizadoparacomponerlawebdeejemplo.Enprimerlugar,enlaseccióndecabecera(head),sehaincluidounaseccióndeestilosentrelasetiquetasstyle.EnlasecciónbodyseincluyetodoelcódigoHTMLquedefinelapáginaconlosestilosaplicados:


td">

<head>



body{/*Redefinimoslaetiquetabody*/

padding:0px;

margin:0px;

font-family:arial,helvetica;

width:900px;

margin:0auto;

Ejemplodeuso

66

}

h1,h2{/*Redefinimoslasetiquetasdecabecera*/

color:navy;

}

#header{/*Estiloparalacabecerausandosuidentificador*/

padding:15px20px;

background-color:#E3DAFF;

border-bottom:1pxsolidsilver;

}

#sidebar{

float:left;

width:15%;

}

#article{

float:left;

width:80%;

}

#footer{

clear:both;

text-align:center;

border-top:1pxsolidsilver;

font-size:small;

color:gray;

background-color:#E3DAFF;

padding:20px;

}

#sidebara{/*Estiloparalosenlacesdelabarralateral*/

text-transform:uppercase;

text-decoration:none;

padding:10px5px;

display:block;

}

#sidebara:hover{/*Pseudo-claseparalosenlaces*/

background-color:navy;

color:white;

}

#articlep{

line-height:20pt;

}

.nota{/*Definimoslaclase.nota*/

background-color:yellow;

}

.alineado-derecha{/*Definimoslaclase.alineado-derecha*/

text-align:right;

}

</style>

</head>

<body>

<divid="header">

<h1>Webdeejemplo</h1>

</div>

<divid="content">

Ejemplodeuso

67

<divid="sidebar"style="padding-top:15px">

<ahref="#">Menu1</a>





</div>

<divid="article">

<h2>Contenidos</h2>

<p>

Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmo

d

temporincididuntutlaboreetdoloremagnaaliqua.

</p>

<p>

Utenimadminimveniam,quisnostrudexercitationullamco

<spanstyle="font-weight:bold;color:red">laborisnisiutaliquipexe

a

commodoconsequat</span>.

</p>

<p>

Duisauteiruredolorinreprehenderitinvoluptate

<spanclass="nota">velitessecillumdoloreeufugiatnullapariatur</

span>.

</p>

<br/>

<pclass="alineado-derecha">

Excepteursintoccaecatcupidatatnonproident,

<br/>

suntinculpaquiofficiadeseruntmollitanimidestlaborum.

</p>

</div>

</div>

<divid="footer">

Webdeejemplo

</div>

</body>

</html>

Ejemplodeuso

68

IntroducciónaHTML5LaquintarevisióndellenguajedeprogramaciónHTMLpretenderemplazaralactual(X)HTML,corrigiendoproblemasconlosquelosdesarrolladoreswebseencuentran,asícomorediseñarelcódigoyactualizándoloanuevasnecesidadesquedemandalawebdehoyendía.

Actualmenteseencuentraenmodoexperimental,locualindicalamismaW3C;aunqueyaesusadopormúltiplesdesarrolladoreswebporsusavances,mejorasyventajas.

AdiferenciadeotrasversionesdeHTML,loscambiosenHTML5comienzanañadiendosemánticayaccesibilidadimplícitas.Estableceunaseriedenuevoselementosyatributosquereflejanelusotípicodelossitioswebmodernos.Algunosdeellossontécnicamentesimilaresalasetiquetas<div>y<span>,perotienenunsignificadosemántico,comoporejemplo<nav>(bloquedenavegacióndelsitioweb)o<footer>.Otroselementosproporcionannuevasfuncionalidadesatravésdeunainterfazestandarizada,comoloselementos<audio>y<video>.

AlgunoselementosdeHTML4.01hanquedadoobsoletos,incluyendoelementospuramentedepresentación,como<font>y<center>,cuyosefectossedebenderealizarutilizandoCSS.TambiénhayunrenovadoénfasisenlaimportanciadelscriptingDOMparaelcomportamientodelaweb.

IntroducciónaHTML5

69

NavegadoresquelosoportanActualmente,delosnavegadoresdeescritorio,elquemayorsoportedaesGoogleChrome,seguidomuydecercaporMozillaFirefoxyAppleSafari.ElquemenorcompatibilidadofreceesInternetExplorer.

ParacomprobarlacompatibilidaddeunnavegadorpodemosvisitarlaWeb"http://www.html5test.com/"dondeserealizauntestdetodaslasfuncionalidadesdeHTML5.

Navegadoresquelosoportan

70

http://www.html5test.com/

DoctypeEldoctypeeselencargadodeindicarlealnavegadoreltipodedocumentoqueestáabriendo,conelfinderenderizarlapaginademaneracorrecta.Porejemplo,eldoctypedeHTML4es:


td">

ParaHTML5eldoctypesehasimplificadomuchoyademásescompatibleconlasversionesanterioresdeHTML:

<!DOCTYPEhtml>

Doctype

71

EstructurasemánticaHastaahoraseutilizabadeformaabusivalaetiqueta<div>ylastablasparaestructurarunawebenbloques.ElHTML5nosbrindanuevasetiquetasqueperfeccionanestaestructuración.Estasnuevasetiquetasintroducenunnuevonivelsemánticoquehacequelaestructuradelawebseamáscoherenteyfácildeentender.Ademáslosnavegadorespodrándarlemásimportanciaadeterminadassecciones,facilitándoleademáslatareaalosbuscadores,asícomocualquierotraaplicaciónqueinterpretesitiosWeb.EnlasiguienteimagensepuedeverunacomparaciónentrelaestructuraciónrealizadaconHTML(hastalaversión4)yHTML5:

LasWebssedividiránenlossiguienteselementos:

<section></section>:Seutilizapararepresentarunasección“general”dentrodeundocumentooaplicación,comouncapítulodeunlibro.Puedecontenersubseccionesysiloacompañamosdelasetiquetas<h1>..<h6>podemosestructurarmejortodala


72

páginacreandojerarquíasdelcontenido,algomuyfavorableparaelbuenposicionamientoweb.Porejemplo:

<section>

<h1>Introducciónalelementosection</h1>

<p>Elelementosectionseusaparaagrupar

contenidorelacionadoentresi.</p>

<p>...</p>

</section>

<article></article>:Seusaparadefinircontenidoautónomoeindependiente,conlaintencióndeserreutilizabledemodoaislado.Elelementoarticlepuedecontenerunoovarioselementossection.SiporejemplonuestrocontenidopuedeserredistribuidocomoRSSysiguemanteniendoíntegrosusignificado,entonces,probablementeesunelementoarticle.Dehecho,elelementoarticleestáespecialmenteindicadoparasindicación.Elelementoarticleesespecialmenteútilparapostsenblogs,noticiasenprensadigital,comentariosypostsenforos.LaespecificacióndeHTML5añadeademásqueelelementoarticledebeserusadoporwidgetsautónomoscomo;calculadoras,relojes,marcosdeclimaycosasporelestilo.Hayqueanalizarsielcontenidodeunwidgetesautónomo,independienteypuedeserreutilizableoinclusosindicado.

<aside></aside>:Representaunaseccióndelapáginaqueabarcauncontenidonodirectamenterelacionadoconelcontenidoquelorodea,porloqueselepuedeconsideraruncontenidoindependiente.Dentrodeesteelementopuedenincluirse:elementospublicitarios,barraslaterales,gruposdeelementosdelanavegación,efectostipográficos,uotrocontenidoqueseconsidereseparadodelcontenidoprincipaldelapágina.

<header></header>:Eslacabeceradelapáginaodeunasección.Existeunadiferenciaclaveentreelelementoheaderyelusohabitualdeltérminoheader(ocabecera)utilizadocomúnmenteparasituarloselementosdelencabezadodeunsitioweb.Unapáginawebdebedefinirunheaderprincipaldondenormalmenteiráellogooelnombredelsitioyseguramenteunmenúdenavegación,peroademáspuede—ydebe—definirotroselementos<header>dentrodeloselementos<section>:

<section>

<header>

<h1>Cabecerasesección</h1>

</header>

<p>...</p>

</section>


73

<nav></nav>:Contieneinformaciónsobrelanavegaciónporelsitioweb,usualmenteunalistadeenlaces.Esteelementodebedeserutilizadosoloparalanavegaciónprincipaldelsitioynoparaenlacesexternosporejemplo.Normalmenteelelementonavaparecedentrodeunelementoheaderofooter.

<footer></footer>:RepresentaelpiédeunasecciónolaparteinferiordeunapáginaWeb,contieneinformaciónacercadelapágina/secciónquepocotienequeverconelcontenidodelapágina,comoelautor,elcopyright,lafechadeúltimamodificación,etc.Igualqueconlaetiqueta<header>,esteelementotambiénsepuedeutilizardentrodeunasecciónparaindicarinformacióncomo:quienlohaescrito,informacióndepropiedadintelectual,enlaces,etc.

EsmuyimportantetenerencuentaqueestasetiquetasnoindicansuposiciónenlapáginaWeb,sinosuvalorsemántico.Porejemplo,lasetiquetasheader,footeroasidenoindicanqueesoselementostenganqueirenlapartesuperior,inferiorolateraldelcontenidoprincipal,sinoqueindicansufunciónenesasecciónoenesapágina.

Ademásdebemostenerencuentaqueestasnuevasetiquetassecomportanigualqueunaetiquetadecaja<div>porloquepodemosaplicarleslosmismosestilosCSS.Podemosredefinirlapropiaetiquetaoaplicarleunaclase,porejemplo:

header{width:100%;padding:10px;margin-bottom:20px;}

.webheader{height:30px;border:1pxsolidgray;background-color:silver;}

.sectionheader{font-size:20px;}


74

FormulariosLaestructuradelosformulariosconHTML5novaríaconrespectoalasanterioresdeHTML.Perosíqueseañadenmuchosnuevostiposdecamposquepodemosutilizar,cadaunoespecíficoparacadatipodedato.

Enelcasodequeutilicemosestascaracterísticasyelnavegadornoseacompatible,simplementelasignorarásincausarnosmayoresproblemas.TambiénpodemosdetectarsielnavegadorsoportaunadeterminadacaracterísticayencasonegativoemularlamediantecódigoJavaScript(paramásinformaciónverlasección"DetectarfuncionalidadesdeHTML5").

Losnuevostiposdecamposson:

search:seutilizaparacrearcajasdebúsqueda.Tieneunaspectosimilarauncampodetipotexto.Ademáspodemosutilizarelatributoresults="num"paraañadirunhistóricodebúsquedascon"num"resultados.DemomentonofuncionanienFirefoxnienChrome.

<labelfor="busqueda">Búsquedaconhistórico:</label>

<inputtype="search"name="busqueda"id="busqueda"results="5"/>

number:camponumérico,incorporadosbotonesparaparaincrementarodecrementarelvalordelcampo.Ademáspodemosusaratributosparaasignarrestricciones,comomin="",max=""ostep="".Elvaloresalmacenadoenelatributovalue="".

range:camponuméricoquepermiteseleccionarmedianteunabarradedesplazamientounvalorentredosvalorespredeterminados,especificadosmediantemin=""ymax="".Elvaloractualesalmacenadoenelatributovalue="".Ademáspodemosindicarelincrementomínimoaldesplazarlabarraconstep="".

color:permiteseleccionaruncolor.DemomentosolofuncionaenOpera11.

tel:esuncampodetextonormalperovalidasielvalorintroducidoesunnúmerotelefónico(todavíanofunciona).

url:validadireccionesweb.Demomentorequiere"http://"o"http:"simplemente.Enalgunosnavegadorescambiaelaspectodelcambio.

Formularios

75

email:validadireccionesdeemail.Funcionaenalgunosnavegadores,mostrandoademásunaspectodiferenciado.ParaiPhoneademásadaptaelteclado.

date:seleccionarundíaenuncalendario.Enalgunosnavegadores(paramóvil)apareceuncalendariodesplegable(comoenOpera).

month:selectorparameses.Enalgunosnavegadores(paramóvil)apareceuncalendariodesplegable.

week:selectorparasemanas.Enalgunosnavegadores(paramóvil)apareceuncalendariodesplegable.

time:campoconformatoparahora.

datetime:permiteseleccionarfechayhora.

datetime-local:permiteseleccionarfechasyhoralocal.

output:estecamposeutilizaparavisualizarvalores,porejemploelvalordeuncampo"range".DemomentosolofuncionaenOpera.Sesueleutilizarjuntoconlapropiedad"onformchange"paraactualizarsuvalor:

<outputonformchange="value=rango.value">0</output>

Además,juntoconestosnuevostiposdecampos,tambiénsehanincorporadonuevostiposdeatributos.Estosnuevosatributossonaplicablesalamayoríadeloscampos:

Autocomplete:Lamayoríadelosnavegadoresincorporanlafuncionalidaddeautocompletaralgunoscamposdelosformulariosconvaloresintroducidosanteriormente.Estafuncionalidadnosiempreresultaútil,sobretodosialguiennosrobanuestroportátilodispositivomóvil.LanuevaespecificacióndeHTML5nospermitedesactivarelautocompletadoenunformulariocompletoosoloencamposespecíficos.Elatributoautocompletenospermitedefinirdosvalores:"on"o"off".

Formularios

76

<formaction="formaction.php"autocomplete="off">

...

</form>

Elcódigoanteriordesactivaríaelautocompletadodetodoelformulario.Siporelcontrariosoloqueremosdesactivarelautocompletadodeunsolocampopodemosespecificarloasí:

<inputtype="text"name="cuentadelbancosupersecreta"autocomplete="off"/>

EstafuncionalidadnosepuedeemularmediantecódigoJavaScript.

Placeholder:Elatributoplaceholder="texto"seutilizaparacolocarelvalordesutextodentrodelcampoamododeayuda.Sisefocalizadichocampo,seeliminaelplaceholder.Siabandonamoselcamposinañadirningúnvalor,sevuelveaañadirelplaceholder.EstafuncionalidadsiempreharequeridodelusodeJavaScriptparaserllevadoacabo,peroconlanuevaespecificaciónestecomportamientopuededefinirsedelaforma:

<labelfor="referer">Nombre</label>

<inputid="referer"name="referer"type="text"

placeholder="Escribetunombrecompleto"/>

Obteniendocomoresultado:

Required:Unadelastareasdevalidaciónmásextendidasesladeloscamposrequeridos.LanuevaespecificacióndeHTML5incluyeelatributorequiredquenossirveparadefinirsiuncampoesrequeridoono.Siuncamporequeridoestáenblancoelformularionoseráenviadoyademásavisaráconunmensaje:

<labelfor="username">Sunombredeusuario</label>

<inputid="username"name="username"type="text"required/>

NOTA:Esunerrorgravedeseguridadvalidarlosformulariosúnicamentedesdeelladodelcliente,esimprescindibleademásrealizarlavalidaciónenelservidor.

Autofoco:Elatributodeautofocoasignaelfoco(cursordeescritura)alcampoindicadoencuandolapáginasehacargado.Sólosepuedeasignaraunelementodelapágina.DemomentoesteatributosololosoportanSafari,ChromeyOpera.FirefoxeIE,loignoran,perosepuedeemularfácilmentemediantecódigoJavaScript(verlasiguientesección"DetectarfuncionalidadesdeHTML5").

Formularios

77

<inputname="b"autofocus/>

List:Usandoelatributolistconunelemento<input>podemosespecificarunalistadeopciones.Estopermitealusuarioseleccionarunvalordelalistaoescribirunoquenoestéenella(estetipodeelementosesuelellamarComboBoxes).LoselementosdelalistasedebendeindicarutilizandootronuevoelementodeHTML5,el<datalist>.Elcualsimplementenospermitecrearunalistadevalores.Enalgunosnavegadoresestasfuncionalidadestodavíanofuncionan,comoenChrome.

<labelfor="diasemana">Díadelasemana:</label>

<inputtype="text"name="diasemana"id="diasemana"list="dias"/>

<datalistid="dias">

<optionvalue="Lunes"/>

<optionvalue="Martes"/>

<optionvalue="Miércoles"/>

<optionvalue="Jueves"/>

<optionvalue="Viernes"/>

<optionvalue="Sábado"/>

<optionvalue="Domingo"/>

</datalist>

Conestecódigoobtendríamosunresultadosimilaraldelasiguienteimagen:

Pattern(formatting):Esteatributoseutilizaparavalidarlaentradadelusuariomedianteexpresionesregulares.Enladirección"http://es.wikipedia.org/wiki/Expresi%C3%B3n_regular"podemosobtenermásinformaciónsobrelasexpresionesregulares.Ejemplodeuso(enFirefoxyChromefunciona):

<labelfor="cp">CódigoPostal</label>

<inputid="cp"name="cp"pattern="[\d]{5}(-[\d]{4})"/>

Formularios

78

http://es.wikipedia.org/wiki/Expresi%C3%B3n_regular

MarkHTML5tambiénintroduceunconjuntonuevodeelementosinline,soloqueyanosellamanelementosinlinesinotext-levelsemanticsosemánticaaniveldetexto.Unodeelloseslaetiquetamark.Cuandorealizamosunabúsquedaenciertossitios,loselementosencontradosenlapáginaaparecenremarcadosparafacilitarsulocalización.Hastaahoraelestiloseaplicabaconetiquetas<span>,peroestasoluciónnoessemántica.Esahídondeentraenescenalanuevaetiqueta<mark>:

<h1>Resultadosdelabúsquedadelapalabra’anillo’</h1>

<ol>

<li>Elseñordelos<mark>anillo</mark>s...</li>

<li>elclientecompróeste<mark>anillo</mark></li>

</ol>

SiqueremospodemosredefinirelestilodeestanuevaetiquetadelamismaformaquelohacíamosconlasetiquetasdeHTML,porejemplo,paracambiarelcolordefondoarojo:

mark{background-color:red;}

EtiquetaMark

79

CanvasElelementocanvaspuededefinirsecomounentornoparacrearimágenesdinámicas.UtilizandosuAPIenJavaScriptpodemosmanipularelelementocanvasparadibujarenélycreargráficosdinámicosdetodotipo(incluidasinterfacesdeaplicacioneswebcompletas).LaAPI,aunquedemomentoestáendesarrollo,lapodemosencontraren:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

Paraempezarausarloloúnicoquehayqueespecificarsonsusdimensiones.Eltextoqueescribamosentrelaaperturaycierredelaetiquetacanvassolamenteseráinterpretadopornavegadoresquenosoportenestaetiqueta:

<canvasid="myCanvas"width="360"height="240">

<p>Tunavegadornosoportacanvas</p>

</canvas>

ElrestodetrabajoconcanvassehaderealizarconcódigoJavaScript.Primerodebemosreferenciaresteelementoyadquirirsucontexto(quedemomentosoloestádisponiblepara2D):

varcanvas=document.getElementById(’myCanvas’);

varcontext=canvas.getContext(’2d’);

Unavezadquirimoselcontextopodemosempezaradibujar.LaAPIbidimensionalofrecemuchasdelasherramientasquepodemosencontrarencualquieraplicacióndediseñográfico:trazos,rellenos,gradientes,sombras,formasycurvasBézier.Losprincipalesmétodosdisponiblesson:

fillRect(x,y,width,height):dibujaunrectángulorellenodecolorsegúnelestiloactivado.strokeRect(x,y,width,height):dibujasoloelbordedeunrectángulo,elinteriorserátransparente.clearRect(x,y,width,height):borraeláreaindicada.beginPath():inicializaeldibujadodeun"trazo".closePath():cierralafiguracreandounalíneadesdeelúltimopuntohastaelprimero.moveTo(x,y):mueveelpunterodeltrazohastalascoordenadasindicadas(parapoderseguirdibujando).lineTo(x,y):dibujauntrazodesdelaposiciónactualhastalascoordenadasindicadas.stroke():dibujaeltrazoindicadodesdeelúltimo"beginPath()".

Canvas

80

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

fill():cierraeltrazodefinidodesdeelúltimo"beginPath()"ylorellena.arc(x,y,radius,startAngle,endAngle,anticlockwise):dibujaunarcoconcentroen"x,y"yelradiodefinido.Losángulossedefinenenradianes(radianes=(PI/180)*grados)yelúltimoparámetroesunvalorbooleano.quadraticCurveTo(controlx,controly,x,y):dibujaunacurvadebeziercuadrática.bezierCurveTo(control1x,control1y,control2x,control2y,x,y):dibujaunacurvadebeziercúbica.drawImage(x,y):dibujaunaimagen(comoobjetoJavaScript)enelcanvas.createImageData(width,height):creaunobjetoImageDatacomounarraydepíxelesparasermanipuladocomounarraydeenteros.getImageData(x,y,w,h):cargaunobjetoImageDataapartirdeldibujoactualparasermanipulado.putImageData(imageData,x,y):mapealosvaloresdeunobjetoImageDataeneldibujoactual.strokeText(string,x,y):dibujaunacadenadetextousandosolosuborde.fillText(string,x,y):dibujaunacadenadetexto.

Acontinuaciónmostramosunejemplodedibujadoenunobjetocanvasunavezcapturadosucontexto:

//Primerodefinimoslaspropiedadesconlasquevamosadibujar

context.fillStyle=’#0000ff’;//colorderellenoazul

context.strokeStyle=’#ff0000’;//colordeborderojo

context.lineWidth=4;//grosordelínea

//Yacontinuacióndibujaralgunasfiguras

context.fillRect(0,0,150,50);//rectángulorelleno

context.strokeRect(0,60,150,50);//rectángulosoloborde

context.clearRect(30,25,90,60);//borraráreadelcanvas

context.strokeRect(30,25,90,60);//Ordendecoordenadas:izqda,arriba,ancho,

largo

Obteniendofinalmenteunresultadosimilara:

WebsmuyimportantesestáncambiandosuscontenidosacanvasydejandodeusarFlash,comoSlideshare(verhttp://www.slideshare.net/AmitRanjan/slideshare-is-html5-now).

Canvas

81

http://www.slideshare.net/AmitRanjan/slideshare-is-html5-now

Canvas

82

AudioElnuevoelementoaudiopermiteinsertararchivossonorosendiferentesformatos,incluyendomp3yogg.AdemásproveedeunainterfazdecontrolsobrelareproduccióndelmismoconunaAPIenJavaScriptsinnecesidaddepluginsdeningúntipo(comoFlash).AñadirunreproductordeaudioenHTML5esmuysimple:

<audiosrc="archivo.mp3"controls>

<p>Tunavegadornosoportaelelementoaudio</p>

</audio>

EnFirefoxobtendríamosunresultadosimilara:

Eltextoqueseencuentraentrelasetiquetasaudiosoloestenidoencuentapornavegadoresquenosoportenlanuevaetiqueta.Elatributo"controls"indicaalnavegadorquemuestreloscontrolesdereproducción.Encasodenoactivarlonosevisualizaríanada,peropodríamoscontrolarlareproducciónmediantefuncionesJavaScript,delaforma:

<audioid="player"src="archivo.mp3"></audio>

<buttononclick="document.getElementById(’player’).play();">Reproducir</button>

<buttononclick="document.getElementById(’player’).pause();">Pausa</button>

<buttononclick="document.getElementById(’player’).volume+=0.1;">SubirVolumen</butt

on>

<buttononclick="document.getElementById(’player’).volume-=0.1;">BajarVolumen</butt

on>

Tambiénpodemosusarlosatributos"autoplay"y"loop"paraqueseauto-reproduzcayparaquesecreeunbucledereproduccióninfinito:

<audiosrc="archivo.mp3"autoplayloop></audio>

Elformatodeaudioautilizarvendráimpuestoporelnavegadorusadoynoporelestándar:

Audio

83

Códec IE>=9 Firefox Chrome Safari Opera

OggVorbis no sí sí no sí

WAVPCM no sí sí sí sí

MP3 sí no sí sí sí

AAC sí no sí sí sí

Speex no no sí no no

Comopuedeverse,combinandoVorbisyMP3podremosofreceraudioatodoslosnavegadoresmayoritarios.Existeunaformadedefinirmásdeunarchivodeaudioparalaetiquetaaudio,enlugardeusarelatributo"src",utilizaremoslaetiqueta"source"parapoderdefinirmúltiplesarchivos.Estasetiquetasseiránleyendodearribaaabajohastaqueelnavegadorencuentreunformatosoportado.Deestamanerapodremoscomplacerlasnecesidadesdetodoslosusuariossindiscriminaraningúnnavegador.

<audiocontrols>

<sourcesrc="archivo.ogg"type="audio/ogg"/>

<sourcesrc="archivo.mp3"type="audio/mpeg"/>

<objecttype="application/x-shockwave-flash"data="player.swf?soundFile=archivo.mp3"

>

<paramname="movie"value="player.swf?soundFile=archivo.mp3"/>

<ahref="archivo.mp3">Descargaelarchivodeaudio</a>

</object>

</audio>

EnesteejemplohemosañadidoademásunaterceralíneaconunreproductorFlashporsinofuesensoportadosningunodelosformatosanteriores,yunlinkdirectodedescargaparaaquellosquetampocosoportenFlash.Asíestaremosofreciendonuestrocontenidoatodoslosnavegadoresydispositivosmanteniendounasbuenasprácticasencuantoaaccesibilidaddelcontenidoserefiere.

Audio

84

VídeoLanuevaespecificacióndeHTML5soportalainclusióndevídeoempotradoenlaspáginaswebdeformanativa.Elelementovideonoespecificaelformatodelmismosinoqueelusodeunouotrovendráimpuestoporelfabricantedelnavegador:

Códec IE>=9 Firefox Chrome Safari Opera

OggTheora no sí sí no sí

H.264 sí no no sí no

VP8 no sí sí no sí

Elelementovideodisponedelosatributos"autoplay","loop"y"preload",paraactivarlaauto-reproducción,paraindicarquesereproduzcaenbucleyparaactivar/desactivarlaprecargadelvídeo.AsimismopuedesutilizarloscontrolesqueteofreceelnavegadordeformanativautilizandoelatributocontrolsobienpuedesofrecertuspropioscontrolesenJavaScript.Dadoqueelvídeoocupaunespacio,tambiénpodremosdefinirsusdimensionesconlosatributos"width"y"height".Einclusopodemosindicarunaimagenparaquesemuestreantesdelareproducciónmedianteelatributo"poster":

<videosrc="archivo.mp4"controlswidth="360"height="240"poster="poster.jpg"></video

>

Conloqueobtendríamosunresultadosimilara:

Paradarsoporteatodoslosnavegadores,podemosespecificardiferentesarchivosendiferentesformatos.AdemáspodemosusarelmismotrucoqueusábamosconelelementoaudioparaseguirdandosoportealplugindeFlashatravésdelaetiquetaobject,einclusoincluirunlinkdedescarga:

Vídeo

85

<videocontrolswidth="360"height="240"poster="poster.jpg">

<sourcesrc="archivo.ogv"type="video/ogg"/>

<sourcesrc="archivo.mp4"type="video/mp4"/>

<objecttype="application/x-shockwave-flash"width="360"height="240"

data="player.swf?file=archivo.mp4">

<paramname="movie"value="player.swf?file=archivo.mp4"/>

<ahref="archivo.mp4">Descargalapelícula</a>

</object>

</video>

Vídeo

86

GeolocalizaciónLageolocalizacióneslaformadeobtenertuposiciónenelmundoysiquieres,compartirestainformación.Existenmuchasmanerasdedescubrirdondeteencuentras,portudirecciónIP,laconexiónderedinalámbrica,latorredetelefoníamóvilporlaqueseconectatumóvil,ousandodirectamenteelposicionadorGPS.

HTML5incorporaunanuevafuncionalidadparafacilitarestatarea,quedependerádequeelnavegadorledesoporte.EstádisponibleapartirdelasversionesdeOpera10.6,Firefox3.5,Chrome5,Safari5eInternetExplorer9.

ParaobtenerlalocalizaciónsimplementetienesqueutilizarelobjetonavigatordeJavaScript.InicialmenteesrecomendablecomprobarsiestádisponiblelalocalizaciónydeserasíyapodemosutilizarelmétodogetCurrentPositiondelaforma:

if(navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

functionshowPosition(position)

{

varlat=position.coords.latitude;

varlng=position.coords.longitude;

alert("Latitud:"+lat+",longitud:"+lng);

}

Geolocalización

87

AlmacenamientoOfflineElalmacenamientowebestáampliamentesoportadoporlosnavegadoresmodernos,tantoenplataformaescritoriocomoenplataformamóvil,Android2.1+,iPhone3.1+,iPad4.2+,OperaMobile11.00+,PalmWebOS1.4+yBlackBerry6.0+,Crome4.0+,Firefox3.5+,IE8.0+,Opera10.5+ySafari4.0+.

TiposdealmacenamientoElalmacenamientowebofrecedosáreasdealmacenamientodiferentes,elalmacenamientolocal(localStorage)yelalmacenamientoporsesión(sessionStorage),quedifierenenalcanceytiempodevida.Losdatosalojadosenunalmacenamientolocalessoloaccesiblepordominioypersisteaúncuandosecierreelnavegador.Elalmacenamientoporsesiónesporventanaysutiempodevidaestálimitadoaloquedurelaventana(opestaña).

Losdatossealmacenandeformamuysencilla,porparesclave/valor,delaforma:

//Paraalmacenamientopersistenteenlocal:

localStorage.setItem("miValor",valor);

//Paraalmacenamientoporsesión:

sessionStorage.setItem("miValor",valor);

Pararecuperarlosposteriormentesolotenemosquehacer:

varmiValor=localStorage.getItem("miValor");

varmiValor=sessionStorage.getItem("miValor");

LasvariablesguardadasconsessionStoragesólosemantendríanencasodequecambiemosdepáginaoqueelnavegadorserefresque,mientrasquelocalStorageguardaríalosdatosaunqueelnavegadorseacerrado.

Tambiénpodemosborrarlosvaloresalmacenados,indicandounvalorenconcretootodosellos:

localStorage.remove("miValor");

localStorage.clear();


88

OfflineApplicationCache(appCache)EstanuevacaracterísticadeHTML5permiteejecutaraplicacionesWebauncuandonoestamosconectadosaInternet.Alvisitarporprimeravezunapáginaweb(queuseappCache)elnavegadordescargayguardatodoslosarchivosnecesariosparaesapágina.Lasiguientevezquelavisitemoselnavegadorusarádirectamentelosarchivosdescargados(anoserqueestemosconectadosysecompruebequehayunaversiónmásactualdelaWeb).

ElprincipalcomponentedelappCacheeselarchivodemanifiesto(manifestfile),unarchivodetextoconlalistadearchivosqueelnavegadorclientedebealmacenar.Enprimerlugar,parausarestacaracterísticadebemosdeindicarelarchivodemanifiestoenlaetiquetadeaperturaHTML:

<htmlmanifest="app.manifest">

EsteficherodebedeempezarconeltextoCACHEMANIFEST.Acontinuaciónencadanuevalíneaindicaremosunrecursoaalmacenar(usandoURLsabsolutasorelativas),ademáspodemosponercomentariosanteponiendoelsímbolo"#".

CACHEMANIFEST

#Estoesuncomentario

index.html

js/scripts.js

css/estilos.css

imgs/logo.gif

imgs/image1.jpg

Unavezcargadalapágina,laúnicapeticiónquerealizaráelnavegadorseráporelficherodemanifiest.Aunquesolohayacambiadounletradelfichero,sedescargarántodoslosrecursosdenuevo.Paraasegurarnosqueservimoslaúltimaversióndenuestrapáginacuandorealizamoscambios,laformamássencillayseguraesactualizarelficherodemanifiestoconuncomentarioindicandolafechadelaúltimaactualización(ounnúmerodeversión,etc.),delaforma:

CACHEMANIFEST

#Actualizadoel2011-10-12

Paramásinformaciónpodéisconsultarlasfuentes:

http://www.w3.org/TR/offline-webapps/

http://www.w3.org/TR/html5/offline.html


89

http://www.w3.org/TR/offline-webapps/

http://www.w3.org/TR/html5/offline.html


90

DetectarfuncionalidadesdeHTML5ModernizresunalibreríadeJavaScriptconlicenciaMITdecódigoabiertoquedetectasisoncompatibleselementosdeHTML5yCSS3.Podemosdescargarlalibreríadesde"http://www.modernizr.com/".Parautilizarlasolohayqueincluirenel<head>detupáginadelaforma:

<head>

<scriptsrc="modernizr.min.js"></script>

</head>

Modernizrseejecutaautomáticamente,noesnecesariollamaraningunafunción.Cuandoseejecuta,secreaunaobjetogloballlamadoModernizr,quecontieneunsetdepropiedadesBoleanasparacadaelementoquedetecta.Porejemplosisunavegadorsoportaelementoscanvas,lapropiedaddelalibrería"Modernizr.canvas"será“true”.Situnavegadornosoportaloselementoscanvas,lapropiedadserá“false”,delaforma:

if(Modernizr.canvas){

//síquehaysoporte

}else{

//nohaysoporteparacanvas

}

Paracomprobarelementosdeunformulariotambiénpodemoscrearnosdossimplesfuncionesquevalidanelsoporteparadiferentestiposdeinputsyatributos:

ComprobarsiuninputessoportadoConlasiguientefunciónpodemoscomprobarsiunnavegadorsoportaonolosnuevostiposdeinputs:

functioninputSupports(tipo){

varinput=document.createElement(’input’);

input.setAttribute(’type’,tipo);

if(input.type==’text’){

returnfalse;

}else{

returntrue;

}

}


91

http://www.modernizr.com/

Porloquepodemosusarlodelasiguienteforma:

if(!inputSupports(’range’)){

//Inputtiporangenosoportado

}

ComprobarsiunatributoessoportadoParacomprobarsihaysoporteparaunatributo

functionattrSupports(el,attr){

vartelement=document.createElement(el);

if(attrintelement){

returntrue;

}else{

returnfalse;

}

}

Porloquepodemosusarloparacomprobar,porejemplo,losatributosautofocus,placeholderorequired:

if(!attrSupports(’input’,’autofocus’)){

document.getElementById(’search_string’).focus();

}

if(!attrSupports(’input’,’placeholder’)){

//Atributoplaceholdernosoportado

}

if(!attrSupports(‘input’,‘required’)){

//Atributorequirednosoportado

}


92

IntroducciónaCSS3LaespecificacióndeCSS3vieneconinteresantesnovedadesquepermitiránhacerwebsmáselaboradasymásdinámicas,conmayorseparaciónentreestilosycontenidos.Darásoporteamuchasnecesidadesdelaswebsactuales,sintenerquerecurriratrucosdediseñadoresolenguajesdeprogramación.

AunqueCSS3estátodavíaenfasededesarrollo,lamayoríadenavegadoresyadansoporteacasitodoslosnuevosestilos,comoFirefox,ChromeoSafari.PorelcontrarioInternetExplorernohaempezadoaincorporarestosnuevoselementoshastalaversión9.

LasprincipalespropiedadesnuevasenCSS3son:

SelectoresdeatributosypropiedadesNuevaspseudo-clasesFormatosdecolor:coloresHSL,coloresHSLA,coloresRGBA,OpacidadBordes:border-color,border-image,border-radius,box-shadowFondos:background-origin,background-clip,background-size,capasconmúltiplesimágenesdefondoTexto:text-shadow,text-overflow,roturadepalabraslargas,WebFonts,creacióndemúltiplescolumnasdetextoModelodecajabásico:overflowTransicionesytransformaciones

Acontinuaciónveremosconmásdetallecadaunadeestasnuevaspropiedades.

IntroducciónaCSS3

93

NuevosselectoresdeatributosEnprimerlugarencontramos3nuevosselectoresdeatributos:

elemento[atributo^="valor"]:Seleccionaloselementosconeseatributoyquesuvalorcomienzaporlacadenadetextoindicadaen"valor".elemento[atributo$="valor"]:Seleccionaloselementosconeseatributoyquesuvalorterminaporlacadenadetextoindicadaen"valor".elemento[atributo*="valor"]:Seleccionaloselementosconeseatributoyquesuvalorcontienelacadenadetextoindicadaen"valor".

Porejemplo:

//Seleccionatodoslosenlacesqueapuntenaunadireccióndecorreo:

a[href^="mailto:"]{...}

//Seleccionatodoslosenlacesqueapuntanapáginas.php

a[href$=".php"]{...}

//Seleccionatodoslosenlacesquellevenaunapáginaquecontengalapalabraejempl

o:

a[href*="ejemplo"]{...}

Tambiénincorporanuevasformasdeseleccionaretiquetasadyacentes:

h1+h2{...}:Etiquetasinmediatamenteadyacentes.h1~h2{...}:Selectorgeneraldehermanos.Válidocuando<h2>seencuentredespuésde<h1>,peropuedehaberotrasetiquetasdepormedio.

Ejemplo:

<h1>Título</h1>

<h2>Subtítuloadyacente</h2>

<h1>Título</h1>

<p>párrafodeseparación</p>

<h2>Subtítuloconselectorgeneraldehermanos</h2>

Tambiénpodemosindicaratributosespecíficosdeunaetiqueta,con:

etiqueta1[atributo1="valor1"]:seleccionaríatodaslasetiquetas"etiqueta1"quecontenganunatributollamado"atributo1"cuyovalorseaiguala"valor1".Porejemplo,siqueremosindicarunestiloparatodaslasetiquetasinputqueseandetipotexto:


94

input[type="text"]{

background:#eee;

}


95

Nuevaspseudo-clasesUnapseudo-claseesunestadoousopredefinidodeunelementoalqueselepuedeaplicarunestiloindependientementedelestiloaplicadoaldesuestadopordefecto.EnCSS3sehanañadidomuchasnuevaspseudo-clasesparafacilitaralosprogramadoreselusodealgunosestilosavanzadoseneldiseñodepáginasWeb.Lasnuevaspseudo-clasesson:

:nth-child(n)-Fijaelaspectodeunaocurrenciaespecíficadelelementonodohijoespecificado.Porejemplo,eltercerelementonodohijodeunalistasería"li:nth-child(3)".Ademássepuedenusarpequeñasexpresionescomoparámetroparaporejemploseleccionartodosloselementosimpares:"nth-child(2n+1)"lospares"nth-child(2n)",etc.Loselementosimparesyparestambiénsepuedenseleccionarusando"nth-child(odd)"y"nth-child(even)"

:nth-last-child(n)-igualque":nth-child(n)"peroempezandoacontardesdeelfinal.

:nth-of-type(n)-Fijalaaparienciadeunaocurrenciaespecíficadelelementoconeltipodeselectorespecificadoenunelementopadre.Porejemplolasegundalistanoordenadaseríaul:nth-of-type(2).Tambiénpermitelosmismosparámetrosque":nth-child(#)".

:nth-last-of-type(n)-igualque":nth-of-type(n)"peroempezandoacontardesdeelfinal.

:first-child-Fijaelaspectodelprimerelementodeuntipodeselectorsolosieselprimernodohijodesuelementopadre,porejemplolaprimeraetiqueta<li>deunalista<ol>.

:last-child-Ultimoelementodeunalistadeelementosdeuntipodado.

:first-of-type-Seleccionaelprimerelementodeuntipoconcretodentrodelalistadehijos.

:last-of-type-Seleccionaelúltimoelementodeuntipo.

:only-child-Seleccionaelelementosieselúnicoelementohijo.

:only-of-type-Seleccionaelelementosieselúnicoelementohijodeesetipo.

:empty-Seleccionaloselementosquenotienenhijos(incluyendonodosdetexto).

:enabled-Seleccionaloselementosdelainterfazquetenganelestado"enable".

:disabled-Seleccionaloselementosdelainterfazquetenganunestado"disabled".

Nuevaspseudo-clases

96

:not(s)-Seleccionaloselementosquenocoincidanconelselectorespecificado.

:lang(language)-nospermiteespecificarestilosquedependendelidiomaespecificadoporlapropiedadlanguage(en,sp,etc.)

Ejemplosdeuso:

tr:nth-child(even){

background:silver;

}

tr:nth-child(odd){

background:white;

}

p:lang(en){

color:gray;

font-style:italic;

}

Pseudo-clasesparaformulariosAdemástambiénsehanañadidonuevaspseudo-clasesquepodemosusarenlosformulariosparaaplicarunformatosegúnelestadodeuncampo.EstaspropiedadesvanenconcordanciaconlosnuevoscamposintroducidosenHTML5(verlaseccióndeformulariosdeHTML5).estasson:

:valid-campoválido(dependerádeltipodecampo).:invalid-campoinválido(dependerádeltipodecampo).:required-camporequerido(marcadoconelatributo"required").:optional-campoopcional(camponomarcadoconelatributo"required").:checked-elementomarcado(ochecked,válidopararadiobuttonocheckbox).:in-range-valordentrodelrangoindicado(paracamposnuméricosoderango).:out-of-range-valorfueraderango(paracamposnuméricosoderango).:read-only-campodesololectura.:read-write-campodelectura/escritura.

Algunosejemplosdeuso:

Nuevaspseudo-clases

97

<head>

<style>

#form1input:valid{background:lightgreen;}

#form1input:invalid{border-color:red;}

#form1specialInputinput:valid{background:green;}

</style>

</head>

<body>

<formid="form1"name="form1"method="post"action="formaction.php">

<p>Nombre:

<inputtype="text"name="nombre"id="nombre"required/>

<p/>

<p>Usuario:

<specialInput>

<inputtype="text"name="usuario"id="usuario"required/>

</specialInput>

<p/>

</form>

</body>

Enesteejemplocabedestacarlaetiqueta"specialInput",quenoesningunaetiquetaexistente,sinounanuevaetiquetaquehemoscreadoparaaplicarunformatoespecial.

Ademáspodemosaplicarestaspseudo-clasesencadenayhacercosascomo:

input:focus:required:invalid{

background:pinkurl(ico_validation.png)379px3pxno-repeat;

}

input:required:valid{

background-color:#fff;background-position:379px-61px;

}

DadoqueInternetExplorer6-8nosoportalamayoríadepseudo-clasessehandesarrolladoalgunaslibreríasdeJavaScriptquerealizanlasmismasfuncionesparaestosnavegadores,como"select[ivizr]"quepodréisdescargardesupáginaoficial"http://selectivizr.com/".

Nuevaspseudo-clases

98

http://selectivizr.com/

ColorEnCSS3sehanincorporadonuevasformasparadefinirloscolores:

rgba(red,green,blue,opacity);-ColorRGBA.Elvalordeopacidaddebedeestarentre0y1,siendo0totalmentetransparente.Porejemplo,podemosusarlodelaforma:

background-color:rgba(255,115,135,0.5);

color:rgba(255,115,135,0.5);

hsl(hue,saturation,lightness);-ModelodecolorHSL.hsla(hue,saturation,lightness,alpha);-ModelodecolorHSLA.cmyk(cyan,magenta,yellow,black);-ModelodecolorCMYK.opacity:0.5;-Tambiénpodemosindicarelvalordetransparenciauopacidadporseparado,debiendodeestarestevalorentre0y1,siendo0totalmentetransparentey1totalmenteopaco.ParadartambiénsoporteaInternetExplorerusaremos:"filter:alpha(opacity=50);".

Color

99

BordesEnCSS3sehanincorporadocuatronuevaspropiedadesparadarformatoalosbordesdeunacaja.Estaspropiedadesnoestántodavíaplenamentesoportadasentodoslosnavegadores,porloqueparaquefuncioneenlamayoríadeellostendremosqueusartambiénlaspropiedadesnativasdelnavegador(simplementeañadiremoslosprefijos-webkit-y-moz-).Lasnuevaspropiedadesson:

border-radius:permitecrearcajasconesquinasredondeadas.Hastaahoraestosolosepodíahacerinsertandoimágenesquesimularanestacaracterística.Ahoralopodemoshacerdeunaformamuchomássencilla:

-webkit-border-radius:30px;

-moz-border-radius:30px;

border-radius:30px;

Ademástambiénpodemosindicarcadaunodelosbordesporseparado:

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:20px;

-moz-border-radius-bottomright:30px;

-moz-border-radius-bottomleft:40px;

-webkit-border-radius:10px20px30px40px;

border-radius:10px20px30px40px;

border-image:estenuevoestilonospermiteusarunaimagencomobordedeunacaja.Tenemosqueindicartresatributos:laimagenautilizar,elgrosorylaformadeaplicarlaimagen(stretch,repeat,round,none).Ejemplodeuso:

-webkit-border-image:url(imagen.png)27repeat;

-moz-border-image:url(imagen.png)27repeat;

border-image:url(imagen.png)27repeat;

Elresultadodependerádelaimagenqueutilicemosparaelborde,peroporejemplopodríamosobtenerresultadoscomoelsiguiente:

border-color:Permitecreardegradadosenlosbordesdeunacajaindicandola

Bordes

100

secuenciadecoloresdeldegradado(píxelapíxelydedentrohaciafuera),delaforma:

-webkit-border-bottom-colors:#555#666#777#888#999#aaa#bbb#ccc;

-webkit-border-top-colors:#555#666#777#888#999#aaa#bbb#ccc;

-webkit-border-left-colors:#555#666#777#888#999#aaa#bbb#ccc;

-webkit-border-right-colors:#555#666#777#888#999#aaa#bbb#ccc;

-moz-border-bottom-colors:#555#666#777#888#999#aaa#bbb#ccc;

-moz-border-top-colors:#555#666#777#888#999#aaa#bbb#ccc;

-moz-border-left-colors:#555#666#777#888#999#aaa#bbb#ccc;

-moz-border-right-colors:#555#666#777#888#999#aaa#bbb#ccc;

border:8pxsolid#000;


box-shadow:Permitedarsombraaelementosdebloque.Tiene4atributos:ladistanciahorizontaldelasombra,ladistanciaverticaldelasombra,eldesenfoque(blur)yelcolordelasombra.Ademáspodemosusarvaloresnegativosparalasdistanciashorizontalyverticalparacrearsombrasenotrossentidos.Unejemplodesombraencolorgris:

-moz-box-shadow:3px3px6px#888888;

-webkit-box-shadow:3px3px6px#888888;

box-shadow:3px3px6px#888888;


Bordes

101

FondosCSS3tambiénhaintroducidonuevaspropiedadesparadefinirelestilodelasimágenesdefondo:

background-origin:border-box|padding-box|content-box-permitedefinirelorigendecoordenadassobreelquesevaacolocarlaimagendefondo.Aceptatresposiblevalores:"border-box"paraqueelfondoempiecedesdeelmismobordedelelemento,"padding-box"paraquelaimagendefondosecoloqueapartirdelespaciadodepadding,yporúltimo"content-box"paraquelaimagendefondosecoloquedondeempiezaelcontenidodelelemento,sintenerencuentaelbordenielpadding.

background-clip:border-box|padding-box|content-box-defineeláreasobrelaqueseextiendelaimagendefondo,puedetomartresvalores:"border-box"seextiendeportodaeláreadentrodelazonadefinidaapartirdelborde,"padding-box"seextiendeapartirdelespaciadodepaddingy"content-box"elfondoseextiendesolodentrodeláreadecontenido.

background-size:Permiteindicareltamañodelaimagendefondo.Aceptadiferentesatributos:

background-size:200px;//especificaanchoyaltoalavezbackground-size:200px100px;//200pxdeanchoy100pxdealtobackground-size:auto200px;//ajustarlaanchuraautomáticamentebackground-size:50%25%;//Tambiénpodemosindicareltamañoconporcentajesbackground-size:contain;//Escalarlaimagenaltamañomáximoposible(conservandolasproporcionesoriginales)paraquequepadentrodeláreaasignada.background-size:cover;//Escalarlaimagenparaquecubracompletamenteeláreaasignada(conservandolasproporcionesoriginales).Capasconmúltiplesimágenesdefondo:Conlapropiedadbackgroundahorapodemosindicarvariasimágenesdefondo,simplementeseparándolasconcomas.Paracadapropiedadbackgrounddebemosdefinircuatrovalores:imagendefondo,posiciónvertical,posiciónhorizontal,mododerepetición(repeat,repeat-x,repeat-y,no-repeat).Ejemplo:

background:url(imagen1.png)10pxcenterno-repeat,

url(imagen2.png)0centerrepeat-x;

Fondos

102

Dadoqueestaspropiedadesnosonsoportadastodavíaentodoslosnavegadores,deberemosdedefinirlastambiénañadiendolosprefijos"-webkit-"y"-moz-"paradarunmayorsoporte.

Fondos

103

TextoLasnuevaspropiedadesdeCSS3paradarformatoatextosson:

text-shadow:Permitedarsombraauntexto.Suspropiedadessondistanciahorizontal,distanciavertical,desenfoque(blur)ycolordelasombra.Porejemplo:

text-shadow:2px2px2px#9e9e9e;

filter:dropshadow(color=#9e9e9e,offx=2,offy=2);


word-wrap:break-word;-Permitesepararpalabrasmuylargasdentrodeunelementodebloque.Pordefectotomaelvalor"normal",porloquelaspalabraslargassesaldríandelbordedelelemento.Conelvalor"break-word"indicamosquelaspalabraspuedenserpartidasparaquequepanenelanchodelacaja,delaforma:

text-overflow:clip|ellipsis;-Indicalaformadepartirtextocuandoexcedeeltamañodesucontenedor.Con"clip"eltextosobranteserácortadodirectamenteaunquesequedeunapalabraporlamitad,mientrasque"ellipsis"quitarálaúltimapalabraquenoquepaypondráensulugarunospuntossuspensivos.EstapropiedaddemomentonofuncionaenFirefox.

font-face:Permiteutilizartipografíasdiferentesalasestándar,queseránimportadasdesdeunficheroindicado.Demomentosoportalosformatos:.eot,.ttfy.otf.Paraimportarunafuentehayqueseguirlasiguientesintaxis:

@font-face{

font-family:<nombre-fuente>;

src:<source>;

[font-weight:<weigth>];

[font-style:<style>];

}

Texto

104

Con"font-family"indicamoselnombrequeledamosalafuente,y"src"nospermiteseleccionarelficheroacargar.Losotrosdosparámetrossonopcionalesytendránvalor"normal"pordefecto.Porejemplo:

@font-face{

font-family:’LeagueGothic’;

src:url(LeagueGothic.otf);

}

//Ahorayapodemosusarestafuente:

p{

font-family:’LeagueGothic’;

}

Texto

105

ColumnasSehanañadidonuevaspropiedadesquenospermitencrearcolumnasdirectamenteapartirdeuntexto,estasson:

column-count:Defineelnúmerodecolumnasenelquesevaadividireltexto.Eltextoserádivididodelamejorformaposibleparaqueocupetodoelespacio.column-width:Defineelanchodelacolumna(enunidadesCSS).column-gap:Defineelespacioentrelascolumnas(enunidadesCSS).column-rule:Medianteestapropiedadpodemosañadirunalíneaseparadoraentrelascolumnas,sinoespecificamosestapropiedadnoseañadiráningunalínea.Debemosdeindicarletresvalores:anchodelalínea(enunidadesCSS),estilodelalínea(solid,dotted,double,etc.)ycolordelalínea.

Paradarunmayorsoporteantepondremoslosprefijos-webkit-y-moz-,delaforma:

-webkit-column-count:3;

-webkit-column-rule:1pxsolidsilver;

-webkit-column-gap:10px;

-moz-column-count:3;

-moz-column-rule:1pxsolidsilver;

-moz-column-gap:10px;

column-count:3;

column-rule:1pxsolidsilver;

column-gap:10px;


Columnas

106

ModelodecajabásicoSehanañadidonuevaspropiedadesparaladisposicióndeelementosdentrodeunacaja:

overflow:visible|hidden|scroll|auto;-permiteindicarqueocurrirásielcontenidoexcedeeláreadeunelemento,aceptacuatroposiblesvalores:

visible:Noserecortaelcontenido,lapartequequedefueraserávisible.Eselvalorpordefecto.hidden:Elcontenidoquesobresalgaseráocultadoytampocosemostrarálabarradescroll.scroll:Elcontenidoserecortayelnavegadormuestralabarradescrollparaverelrestodelcontenido.auto:Sielcontenidoserecortaelnavegadormostraráunabarraparaverelrestodelcontenido.

overflow-x:igualqueoverflowperoindicaremossololapropiedadenhorizontal.overflow-y:igualqueoverflowperosoloparavertical.resize:none|horizontal|vertical|both;-habilitalaposibilidadderedimensionar"manualmente"unacaja.Puedetomarlosvalores:none,horizontal(permitirredimensionarsoloenhorizontal),vertical(soloenvertical),oboth(redimensionarambasdimensiones).Serecomiendaademásañadirlapropiedad"overflow:hidden"paraocultarloselementosalredimensionar.Porejemplo:

resize:both;

overflow:auto;

Modelodecajabásico

107

TransicionesUnadelaspropiedadesmásnovedosasqueincorporaCSS3eslaposibilidaddecrearanimacionesmediantetransicionesytransformaciones.Sepuedenaplicartransicionesalamayoríadepropiedades(posiciones,fondo,color,tamaño,etc.).Desafortunadamente,notodoslosnavegadoresusanlosnombresestándares,porloquetendremosqueañadirlosprefijos"-webkit-","-moz-"y"-o-"paradarunmayorsoporte.Labuenanoticiaesquelasintaxisparalosvaloresentodosellosesconsistente:

transition-property:propertyName;-Indicalapropiedadsobrelaqueseaplicarálatransición.Sepuedeaplicarsobrecasitodaslaspropiedades:background,color,height,width,border,etc.Ademástambiénpodemosusarelvalor"all"paraqueseapliquesobretodaslaspropiedadesdisponibles,porejemplo:

-webkit-transition-property:all;

-moz-transition-property:all;

-o-transition-property:all;

transition-property:all;

transition-duration:duration;-Indicaeltiempoquedebedurarlatransiciónensegundos(0.5s)oenmilisegundos(500ms):

-webkit-transition-duration:1s;

-moz-transition-duration:1s;

-o-transition-duration:1s;

transition-duration:1s;

transition-timing-function:timingFunction;-Eslafuncióndetiempoqueseguirálatransición,indicaloscambiosdevelocidadalolargodelaanimación.Puedetomarcincovaloresdiferentes:ease(valorpordefecto),linear,ease-in,ease-out,ease-in-outycubic-bezier(cp1x,cp1y,cp2x,cp2y).Porejemplo:

-webkit-transition-timing-function:linear;

-moz-transition-timing-function:linear;

-o-transition-timing-function:linear;

transition-timing-function:linear;

transition-delay:delay;-Permiteestablecerunretrasoinicialantesdeejecutarlatransición.Eltiempoderetrasosedebedeindicarensegundos(0.5s)oenmilisegundos(500ms):

Transiciones

108

-webkit-transition-delay:0.2s;

-moz-transition-delay:0.2s;

-o-transition-delay:0.2s;

transition-delay:0.2s;

transition:propertyNamedurationtimingFunctiondelay;-Tambiénpodemosindicarlascuatropropiedadesexplicadasenunasolalínea:

-webkit-transition:all1slinear0.2s;

-moz-transition:all1slinear0.2s;

-o-transition:all1slinear0.2s;

transition:all1slinear0.2s;

Engeneral,lomejoresdeclararlatransiciónenlapropiedadbase,sinpseudo-clases.Deestaformaconseguiremosqueseejecuteenambasdirecciones,porejemplo:

.btn1{

background:#9c3;

-webkit-transition:background0.3sease;

-moz-transition:background0.3sease;

-o-transition:background0.3sease;

transition:background0.3sease;

}

.btn1:hover{

background:#690;

}

Transiciones

109

TransformacionesLapropiedad"transform"nospermiteaplicartransformaciones2Do3Daunelemento.Porejemplonospermiterotar,escalar,mover,etc.elelementoindicado.Estapropiedadtodavíanoessoportadaportodoslosnavegadores,porloquetendremosqueañadirlosprefijos"-ms-","webkit-","-moz-"y"-o-"paradarunmayorsoporte.Algunasdelasfuncionesdetransformaciónquepodemosutilizarson:

none:Indicaquenosetienequeaplicarningunatransformación.translate(x,y):Defineunatraslación2D.translateX(x):TraslaciónenlacoordenadaX.translateY(y):TraslaciónenlacoordenadaY.scale(x,y):Defineunatransformacióndeescalado2D,deberemosdeindicarvaloresentre0.1y2.scaleX(x):EscaladoenlacoordenadaX,deberemosdeindicarvaloresentre0.1y2.scaleY(y):EscaladoenlacoordenadaY,deberemosdeindicarvaloresentre0.1y2.rotate(angle):Aplicaunarotación,elángulodebeserindicadoengrados(ejem:"30deg").skew(x-angle,y-angle):Defineunatransformación2Ddesesgo(otorsión),indicadaengrados(deg).skewX(angle):DefineunatransformacióndesesgosobrelacoordenadaX(indicadaengrados).skewY(angle):DefineunatransformacióndesesgosobrelacoordenadaY(indicadaengrados).

Ademástambiénpodemosindicarvariastransformacionesenunamismalínea,delaforma:

#myDIV{

-moz-transform:scale(1.2)rotate(9deg)translate(5px,2px)skew(5deg,5deg);

-webkit-transform:scale(1.2)rotate(9deg)translate(5px,2px)skew(5deg,5deg);

-o-transform:scale(1.2)rotate(9deg)translate(5px,2px)skew(5deg,5deg);

-ms-transform:scale(1.2)rotate(9deg)translate(5px,2px)skew(5deg,5deg);

transform:scale(1.2)rotate(9deg)translate(5px,2px)skew(5deg,5deg);

}

Haymuchosmástiposdetransformaciones,aunquealgunasdeellosnosonfuncionalestodavía(sobretodolasfunciones3D),paramásinformaciónconsulta:"http://www.w3schools.com/cssref/css3_pr_transform.asp".

Transformaciones

110

http://www.w3schools.com/cssref/css3_pr_transform.asp

Transformaciones

111

IntroducciónaJavaScriptJavaScript(comunmenteabreviadocomo"js")esunlenguajedeprogramaciónqueseutilizaprincipalmenteparacrearpáginaswebdinámicas.Unapáginawebdinámicaesaquellaqueincorporaefectoscomotextoqueapareceydesaparece,animaciones,accionesqueseactivanalpulsarbotonesyventanasconmensajesdeavisoalusuario.

Seutilizaprincipalmenteensuformadelladodelcliente(client-side),aunqueexisteunaformadeJavaScriptdelladodelservidor(Server-sideJavaScriptoSSJS).Suusoenaplicacionesexternasalaweb,porejemploendocumentosPDF,aplicacionesdeescritorio(mayoritariamentewidgets)estambiénsignificativo.

Técnicamente,JavaScriptesunlenguajedeprogramacióninterpretado,porloquenoesnecesariocompilarlosprogramasparaejecutarlos.Enotraspalabras,losprogramasescritosconJavaScriptsepuedenprobardirectamenteencualquiernavegadorsinnecesidaddeprocesosintermedios.

JavaScriptnoesJava,aunqueelnombreincluyelapalabraysusintaxistengaalgodeinfluenciadedicholenguaje(tambiéndeC).Sinembargosonlenguajestotalmentediferentes,diseñadosporpersonasdiferentes,conobjetivosdiferentes.ConceptualmenteJavaesunlenguajeestático,elcompiladorcompruebalostiposdedatos,yademásesunlenguajeinterpretado.JavaScriptesdinámico,existenlostipos,perosoloseresuelvenentiempodeejecución,ynoesunlenguajeinterpretado.

JavaScriptesengeneralunlenguajesencilloaunqueexpresivo,quehatriunfadodondeJavahafallado,enelcliente,ytienelaventajadequenonecesitainstalación,yaqueestápresenteentodoslosnavegadores.

IntroducciónaJavaScript

112

ComoincluirJavaScriptennuestrapáginaWebLaintegracióndeJavaScriptyXHTMLesmuyflexible,yaqueexistenalmenostresformasparaincluircódigoJavaScriptenlaspáginasweb.

IncluirdesdeunarchivoexternoLasinstruccionesJavaScriptsepuedenincluirenunarchivoexternodetipoJavaScriptquelosdocumentosXHTMLenlazanmediantelaetiqueta<script>.

<scripttype="text/javascript"src="/js/codigo.js"></script>

SepuedencreartodoslosarchivosJavaScriptqueseannecesariosycadadocumentoXHTMLpuedeenlazartantosarchivosJavaScriptcomonecesite.LaprincipalventajadeenlazarunarchivoJavaScriptexternoesquesesimplificaelcódigodelapágina,quesepuedereutilizarelmismocódigoJavaScriptentodaslaspáginasdelsitiowebyquecualquiermodificaciónrealizadaenelarchivoJavaScriptsevereflejadainmediatamenteentodaslaspáginasqueloenlazan.

IncluirenelmismodocumentoHTMLElcódigoJavaScriptseencierraentreetiquetas<script>yseincluyeencualquierpartedeldocumento:


alert("Holamundo!");

</script>

Aunqueescorrectoincluircualquierbloquedecódigoencualquierzonadelapágina,serecomiendadefinirelcódigoJavaScriptdentrodelacabeceradeldocumento(sección<head>)oalfinaldelapágina(antesdelaetiquetadecierre</body>.Conestasegundaopciónseconsiguemejorareltiempodecargadelapágina,yaqueprimerosemostrarátodoelcontenidodelawebyporúltimosecargaránlosjavascript.

IncluirenloselementosHTML


113

ConsisteenincluirtrozosdeJavaScriptdentrodelcódigoHTMLdelapágina,porejemplo:

<ponclick="alert('Unmensajedeprueba')">Unpárrafodetexto.</p>

ElprincipalinconvenientedeestemétodoesqueensuciainnecesariamenteelcódigoHTMLdelapáginaycomplicaelmantenimientodelcódigoJavaScript.


114

EtiquetanoscriptAlgunosnavegadoresnodisponendesoportecompletodeJavaScript,otrospermitenbloquearloparcialmenteeinclusoalgunosusuariosbloqueancompletamenteelusodeJavaScriptporquecreenqueasínavegandeformamássegura.

Enestoscasos,eshabitualquesilapáginawebrequiereJavaScriptparasucorrectofuncionamiento,seincluyaunmensajedeavisoalusuarioindicándolequedeberíaactivarJavaScriptparadisfrutarcompletamentedelapágina.

<noscript>

<p>BienvenidoaMiSitio</p>

<p>Lapáginaqueestásviendorequiereparasufuncionamientoelusode

JavaScript.Silohasdeshabilitadointencionadamente,

porfavorvuelveaactivarlo.</p>

</noscript>

Etiquetanoscript

115

ConsideracionessobreellenguajeJavaScriptAlgunasconsideracionesatenerencuentasobreellenguajeJavaScriptantesdeempezaraversusintaxisson:

Nosetienenencuentalosespaciosenblancoylasnuevaslíneas.Sedistinguenlasmayúsculasyminúsculas.Nosedefineeltipodelasvariables:unamismavariablepuedealmacenardiferentestiposdedatosdurantelaejecucióndelscript.Noesnecesarioterminarcadasentenciaconelcarácterdepuntoycoma(;),perosíqueesmuyrecomendable.Sepuedenincluircomentarioscon"//"ycon"/**/".Lalistadepalabrasreservadasquenosepuedenutilizarlibrementeparadefinirvariablesofuncionesson:break,case,catch,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with.

Consideracionessobreellenguaje

116

VariablesLasvariablesenJavaScriptsecreanmediantelapalabrareservadavar,quesolamenteesnecesarioutilizarlalaprimeravez(aldeclararlavariable),delaforma:

varnumero1=2;

varnumero2=3;

varresultado=numero1+numero2;

Enjavascriptnoesnecesariodeclararlasvariablesconvar,yenestecasoloquehaceescrearunavariableglobalalaqueasignaelvalorcorrespondiente.Porestarazónserecomiendadeclararsiemprelasvariablesyllevarcuidadoconestacaracterística.

Elnombredelavariablesolopuedeestarformadoporletas,números,elsímbolodedólar"$"yelguiónbajo"_",ademáslaprimeraletradelnombrenopuedeserunnúmero.Acontinuaciónseincluyenalgunosejemplosdenombresválidoseincorrectos:

//Ejemploscorrectos

var$numero1;

var_$letra;

var$$$otroNumero;

var$_a__$4;

//Ejemplosincorrectos

var1numero;//Empiezaporunnúmero

varnumero;1_12.3;//Contieneloscarácteres";"y"."

TiposdevariablesDadoquetodaslasvariablessecreandelamismaforma(mediantelapalabrareservadavar),eltipodelavariablevendrádefinidosegúnelvalorqueseleasigneoalmaceneenella.Acontinuaciónsedetallanlosdiferentestiposdevariablesposibles:

Variablesnuméricas

Siaunavariableseleasignaunenteroounvalordecimaldichavariableseconvertiráatiponumérico,porejemplo:

varnum1=16;

varnum2=3.1415;

Variables

117

Variablestipocadenasdetexto

Seutilizanparaalmacenarcaracteres,palabrasy/ofrasesdetexto.Paraasignarelvaloralavariable,seencierraelvalorentrecomillasdoblesosimples,paradelimitarsucomienzoysufinal,porejemplo:

varmensaje="Bienvenidoanuestrositioweb";

varnombreProducto='ProductoABC';

varletraSeleccionada='c';

vartexto1_1="Unafrasecon'comillassimples'dentro";

vartexto1_2='Unafrasecon\'comillassimples\'dentro';

vartexto2_1='Unafrasecon"comillasdobles"dentro';

vartexto2_2="Unafrasecon\"comillasdobles\"dentro";

Booleanos

Unavariabledetipobooleanalmacenauntipoespecialdevalorquesolamentepuedetomardosvalores:true(verdadero)ofalse(falso).Porejemplo:

varclienteRegistrado=false;

varivaIncluido=true;

Arrays

Paradefinirunarray,seutilizanloscaracteres[y]paradelimitarsucomienzoysufinalyseutilizaelcarácter,(coma)parasepararsuselementos:

varnombre_array=[valor1,valor2,...,valorN];

Unnuevoarraysepuededeclararasignadovaloresiniciales(comoenelejemploanterior),ovacíohaciendovararray1=newArray();otambiénvararray2=[];ydespuésasignarlevalores:

vararray1=newArray();

array1[0]="hola";

array1[1]="mundo";

varsaludo=array1[0];//Obtenerelvalordeunelementodelarray

Lasposicionesoíndicesdelarrayempiezanen0yterminaneneltamañodelarraymenosuno.

Variables

118

Tipodeunavariable

EnJavaScriptsepuedecomprobareltipodeunavariablemedianteeloperadortypeof,porejemplo:

typeof"John"//string

typeof3.14//number

typeoffalse//boolean

typeof[1,2,3,4]//object

JavaScriptdefinelossiguientestiposprimitivosdevariables:undefined,null,boolean,number,stringyobject.Losdosprimeros(equivalentes)seutilizanparaidentificarcuandoseaccedeaunavariablequeestásindefinir.Lostiposboolean,numberystringyaloshemosvistoenlasseccionesanteriores,perohayquedestacarqueeltipoobjectseutilizaparadefinirtantoalosarrayscomoalosobjectos(loscualesnosetrataránenestemanualdeiniciación).

Variables

119

OperadoresLosoperadorespermitenmanipularelvalordelasvariables,realizaroperacionesmatemáticasconsusvaloresycomparardiferentesvariables.Deestaforma,losoperadorespermitenalosprogramasrealizarcálculoscomplejosytomardecisioneslógicasenfuncióndecomparacionesyotrostiposdecondiciones.

AsignaciónEsteoperadorseutilizaparaguardarunvalorespecíficoenunavariable.

varnumero1=3;

varnumero2=4;

varnumero3=numero1+numero2;

IncrementoydecrementoEstosdosoperadoressolamentesonválidosparalasvariablesnuméricasyseutilizanparaincrementar(++)odecrementar(--)enunaunidadelvalordeunavariable.

varnumero=5;

++numero;//Pre-incremento

numero++;//Post-incremento

--numero;//Pre-decremento

numero--;//Post-decremento

Sieloperadorseutilizacomoprefijoeldecrementooincrementoserealizaantesdelaoperación,siporelcontrarioseutilizacomosufijoserealizarádespués,porejemplo:

varnumero1=5;

varresultado=2+numero1++;

//resultado=7

varnumero1=5;

varresultado=2+++numero1;

//resultado=8

Operadoreslógicos

Operadores

120

Elresultadodecualquieroperaciónqueutiliceoperadoreslógicossiempreesunvalorlógicoobooleano.

Negación:Seutilizaparaobtenerelvalorcontrarioalvalordelavariable:varnegacion=!valor_booleano;

And:Eloperadorseindicamedianteelsímbolo&&ysuresultadosolamenteestruesilosdosoperandossontrue:varresultado=valor1&&valor2;

Or:Eloperadorseindicamedianteelsímbolo||ysuresultadoestruesialgunodelosdosoperandosestrue:varresultado=valor1||valor2;

OperadoresmatemáticosLosoperadoresdefinidosson:suma(+),resta(-),multiplicación(*),división(/)ymódulo(%).Acontinuaciónseincluyenalgunosejemplos:

varnumero1=10;

varnumero2=5;

varresultado=numero1/numero2;//resultado2

resultado=3+numero1;//resultado13

resultado=numero2–4;//resultado1

resultado=numero1*numero2;//resultado10

resultado=numero1%numero2;//resultado0

Losoperadoresmatemáticostambiénsepuedencombinarconeloperadordeasignaciónparaabreviarsunotación:

varnumero1=5;

numero1+=3;//numero1=numero1+3=8

numero1-=1;//numero1=numero1-1=4

numero1*=2;//numero1=numero1*2=10

numero1/=5;//numero1=numero1/5=1

numero1%=4;//numero1=numero1%4=1

OperadoresrelacionalesodecomparaciónLosoperadoresrelacionalesdefinidosporJavaScriptsonidénticosalosquedefinenlasmatemáticas:mayorque(>),menorque(<),mayoroigual(>=),menoroigual(<=),igualque(==)ydistintode(!=).Elresultadodetodosestosoperadoressiempreesunvalorbooleano:

Operadores

121

varnumero1=3;

varnumero2=5;

resultado=numero1>numero2;//resultado=false

resultado=numero1<numero2;//resultado=true

numero1=5;

numero2=5;

resultado=numero1>=numero2;//resultado=true

resultado=numero1<=numero2;//resultado=true

resultado=numero1==numero2;//resultado=true

resultado=numero1!=numero2;//resultado=false

Operadores

122

EstructurasdecontroldeflujoLasestructurasdecontrolpermitenmodificarelflujodeejecucióndelasinstruccionesdeunprograma.

EstructuraifSeempleaparatomardecisionesenfuncióndeunacondición.Sudefiniciónformales:

if(condicion){

...

}

Silacondiciónsecumple(esdecir,sisuvalorestrue)seejecutantodaslasinstruccionesqueseencuentrandentrode{...}.Silacondiciónnosecumple(esdecir,sisuvaloresfalse)noseejecutaningunainstruccióncontenidaen{...}yelprogramacontinúaejecutandoelrestodeinstruccionesdelscript.

Lacondiciónseevaluarádeformabooleanayporlotantopodemosutilizarcualquieradelosoperadoresquehemosvistoparaello:!,&&,||,>,<,==,etc.

Estaestructurapermiteañadirunasecciónelsequeseejecutaráencasodequenosecumplalacondiciónanterioreinclusoconcatenarvariassentenciasifpararealizarvariascomprobaciones.Acontinuaciónseincluyenalgunosejemplos:


123

varnombre="";

if(nombre==""){

alert("Aúnnonoshasdichotunombre");

}

else{

alert("Hemosguardadotunombre");

}

//If...elseifanidado

varvalor=3;

if(valor==1)

alert("Lavariablevale1");

elseif(valor==2)


elseif(valor==3)


else

alert("Lavariabletieneotrovalor");

EstructuraswitchLaestructuraswitchseutilizaparaagilizarlatomadedecisionesmúltiples,trabajadelamismamaneraqueloharíansucesivosif,ifelseanidadosenelquesegúnelvalordeunavariableentraríaenunodeloscasosdefinidosoenelcasopordefecto:


124

switch(variable){//Lavariablepuedesercualquiertipodedato

case"ok":

//sivariable=="ok"

break;

case1:

//sivariable=="1"

break;

default:

//Sinoesigualaningunodeloscasosanteriores

break;

}

´´´

Elejemploanteriorseríaigualahacer:

```javascript

if(variable=="ok"){

//sivariable=="ok"

}

elseif(variable==1){

//sivariable=="1"

}

else{

//Sinoesigualaningunodeloscasosanteriores

}

EstructuraforEstaestructurapermiterealizarunaseriederepeticiones(tambiénllamadobucle)mientrassecumplaunacondición:

for(inicializacion;condicion;actualizacion){

...

}

Donde:

La"inicialización"eslazonaenlaqueseestablecelosvaloresinicialesdelasvariablesquecontrolanlarepetición.La"condición"eselúnicoelementoquedecidesicontinuaosedetienelarepetición.La"actualización"eselnuevovalorqueseasignadespuésdecadarepeticiónalasvariablesquecontrolanlarepetición.

Ejemplodeusoconunarray:


125

vardias=["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];

for(vari=0;i<7;i++){

alert(dias[i]);

}

EstructurawhileEssimilarafor,repetiráelcontenidodelbuclemientrassecumplalacondicióninicial:

while(condicion){

...

}

Estructurado...whileEstaestructuraessimilaralbucletipowhileperoevalualacondiciónalfinaldelbucle,conloqueseaseguraquealmenosseejecutaráunaiteración:

do{

...

}while(condicion);

Estructurafor...inEstetipodebucle,derivadodelaestructuratipofor,permiteiterarentreloselementosdeunarrayodeunobjeto(notratadosenestaintroducción)deunaformamuysencilla:

vardias=["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];

for(iindias){

alert(dias[i]);

}


126

FuncionesútilesdeJavaScriptJavaScriptincorporaunaseriedeherramientasyutilidadesparaelmanejodelasvariables.

FuncionesútilesparamostrarresultadosLafunción"alert(texto);"nospermitemostrarunvalorocadenaenunaventanaemergente.Lafunción"console.log(texto);"nospermitemostrarunvalorocadenaenlaconsoladelsistema.Estafunciónsesueleutilizarparadepuración.

FuncionesútilesparacadenasdetextoLongituddeunacadena:seobtieneapartirdesupropiedad".length"Concatenacióndecadenas:operador"+"Convertirenmayúsculas:toUpperCase()Convertirenminúsculas:toLowerCase()Obteneruncarácterdelacadena:charAt(posicion)

Ejemplos:

varmensaje="HolaMundo";

varnumeroLetras=mensaje.length;//numeroLetras=10

varconcatenacion="¡"+mensaje+"!";

varmayusculas=mensaje.toUpperCase();

varletra=mensaje.charAt(0);//letra=H

FuncionesútilesparaarraysLongituddelarray:seobtieneapartirdesupropiedad".length"Añadirunelementoalfinaldelarray:"push(valor)"

Ejemplos:

vararray=[1,2,3];

varnumeroElementos=array.length;//numeroElementos=3

array.push(4);//contenidodelarray=[1,2,3,4]

Funcionesútiles

127

FuncionesútilesparanúmerosComprobarposiblesvaloresnuméricosnodefinidos:"isNaN(valor)"Comprobarsielvaloresfinito:"isFinite(valor)"Formatear/redondearnúmerosdecimales:".toFixed(digitos)"

Ejemplos:

varvalor1=3.14159265358979323846;

varvalor2=0;

if(isNaN(valor1/valor2)||!isFinite(result))

alert("Ladivisiónnoestádefinidaparalosnúmerosindicados");

varvalor3=valor1.toFixed(2);//3.14

Funcionesútiles

128

FuncionesUnafunciónesunconjuntodeinstruccionesqueseagrupanpararealizarunatareaconcretayquesepuedenreutilizarfácilmente.LasfuncionesenJavaScriptsedefinenmediantelapalabrareservadafunction,seguidadelnombredelafunción.Sudefiniciónformaleslasiguiente:

functionnombre_funcion(){

...

}

Elnombredelafunciónseutilizaparallamaraesafuncióncuandoseanecesario.Acontinuaciónseincluyeunejemplodefunciónysullamada:

<script>

functioncalculaSuma(){

varvalor1=3;

varvalor2=7;

varresultado=valor1+valor2;

alert("Elresultadoes"+resultado);

}

calculaSuma();//llamadaalafunción"calculaSuma"

</script>

Igualqueenotroslenguajes,alasfuncionesselepuedenpasarvaloresoargumentosdeentradaypuedendevolverunvalorcomoresultado:

functioncalculaSuma(valor1,valor2){

varresultado=valor1+valor2;

returnresultado;

}

varresultado=calculaSuma(10,4);//llamadaalafunción"calculaSuma"

alert(resultado);

Esimportantesaberque:

Sepuedeutilizarunnúmeroilimitadodeargumentos.Elnúmerodeargumentosquesepasaaunafuncióndeberíaserelmismoqueelnúmerodeargumentosquehaindicadolafunción.Noobstante,JavaScriptnomuestraningúnerrorsisepasanmásomenosargumentosdelosnecesarios.Encasodequeunargumentonoestédefinidotendráelvalor"undefined".

Funciones

129

ÁmbitodelasvariablesConrespectoalámbitodelasvariablestenemosquetenerencuentalassiguientesconsideraciones:

Siunavariablesedefineconvardentrodeunafunciónelámbitodedichavariableserálocal.Siunavariablesedefinefueradeunafunciónsuámbitoseráglobal,yporlotantoseránaccesiblesdesdedentrodelasfunciones.Siunavariablesedefinedentrodeunafunciónperosinusarlapalabrareservadavarelámbitodedichavariableseráglobal.

Ejemplos:

varglobal1="VariableGlobal1";

functionmostrarMensaje(){

varlocal1="Variablelocal1";

global2="VariableGlobal2";

console.log(global1);//mostrará"VariableGlobal1"

}

mostrarMensaje();

console.log(local1);//error,noexistelavariable"local1"

console.log(global2);//mostrará"VariableGlobal2"

Funciones

130

DOMElDocumentObjectModeloDOM('ModelodeObjetosdelDocumento'o'ModeloenObjetosparalaRepresentacióndeDocumentos')esesencialmenteunainterfazqueproporcionaunconjuntoestándardeobjetospararepresentardocumentosHTMLyXML,aportandounainterfazestándarparaaccederaellosymanipularlos.AtravésdelDOMsepuedenaccederymodificarelcontenido,estructurayestilodelosdocumentosHTMLyXML,yesparaloquesediseñóprincipalmente.

DOMtransformatodoslosdocumentosXHTMLenunconjuntodeelementosllamadosnodos,queestáninterconectadosyquerepresentanloscontenidosdelaspáginaswebylasrelacionesentreellos.Porsuaspecto,launióndetodoslosnodossellama"árboldenodos".

Porejemplo,lasiguientepáginaHTML:

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1"/>

<title>Páginasencilla</title>

</head>

<body>

<p>Estapáginaes<strong>muysencilla</strong></p>

</body>

</html>

Setransformaríaenelsiguienteárboldenodos:

DOM

131

UnavezconstruidoautomáticamenteelárbolcompletodenodosDOM,yaesposibleutilizarlasfuncionesDOMparaaccederdeformadirectaacualquiernododelárbol.Comoaccederaunnododelárbolesequivalenteaaccedera"untrozo"delapágina,porloqueesposiblemanipulardeformasencillalapágina:accederalvalordeunelemento,establecerelvalordeunelemento,moverunelementodelapágina,crearyañadirnuevoselementos,etc.

DOMproporcionadosmétodosalternativosparaaccederaunnodoespecífico:accesoatravésdesusnodospadreyaccesodirecto.

LasfuncionesqueproporcionaDOMparaaccederaunnodoatravésdesusnodospadreconsistenenaccederalnodoraízdelapáginaydespuésasusnodoshijosyalosnodoshijosdeesoshijosyasísucesivamentehastaelúltimonododelaramaterminadaporelnodobuscado.

Sinembargo,cuandosequiereaccederaunnodoespecífico,esmuchomásrápidoaccederdirectamenteaesenodoynollegaraéldescendiendoatravésdetodossusnodospadre.

AccesoanodosdelárbolDOM

getElementsByTagName()

ObtienetodosloselementosdelapáginaHTMLcuyaetiquetaseaigualqueelparámetroqueselepasaalafunción,porejemplo:

DOM

132

varparrafos=document.getElementsByTagName("p");

Elvalorqueseindicadelantedelnombredelafunción(enestecasodocument,queseríalaraízdelárbolDOM)eselnodoapartirdelcualserealizalabúsquedadeloselementos.Enestecaso,comosequierenobtenertodoslospárrafosdelapágina,seutilizaelvalordocumentcomopuntodepartidadelabúsqueda.

Elvalorquedevuelvelafunciónesunarraycontodoslosnodosquecumplenlacondicióndequesuetiquetacoincideconelparámetroproporcionado.ElvalordevueltoesunarraydenodosdelDOM,nounarraydecadenasdetextoounarraydeobjetosnormales.

Deestemodo,sepuedeobtenerelprimerpárrafodelapáginadelasiguientemanera:

varprimerParrafo=parrafos[0];

Delamismaforma,sepodríanrecorrertodoslospárrafosdelapáginaconelsiguientecódigo:

for(vari=0;i<parrafos.length;i++){

varparrafo=parrafos[i];

}

LafuncióngetElementsByTagName()sepuedeaplicardeformarecursivasobrecadaunodelosnodosdevueltosporlafunción.Enelsiguienteejemplo,seobtienentodoslosenlacesdelprimerpárrafodelapágina:

varparrafos=document.getElementsByTagName("p");

varprimerParrafo=parrafos[0];

varenlaces=primerParrafo.getElementsByTagName("a");

getElementsByName()

Estafunciónessimilaralaanterior,peroenestecasosebuscanloselementoscuyoatributonameseaigualalparámetroproporcionado.Enelsiguienteejemplo,seobtienedirectamenteelúnicopárrafoconelnombreindicado:

varparrafoEspecial=document.getElementsByName("especial");

<pname="prueba">...</p>

<pname="especial">...</p>

<p>...</p>

DOM

133

InternetExplorer6.0noimplementadeformacorrectaestafunción,yaquesólolatieneencuentaparaloselementosdetipo<input>y<img>.Además,tambiéntieneenconsideraciónloselementoscuyoatributoidseaigualalparámetrodelafunción.

getElementById()

Estaeslafunciónmásutilizadacuandosedesarrollanaplicacioneswebdinámicasyaquepermiteaccederdirectamenteaunnodoypoderleeromodificarsuspropiedades.

LafuncióngetElementById()devuelveelelementoHTMLcuyoatributoidcoincideconelparámetroindicadoenlafunción.Comoelatributoiddebeserúnicoentodalapágina,lafuncióndevuelveúnicamenteelnododeseado.

varcabecera=document.getElementById("cabecera");

<divid="cabecera">

<ahref="/"id="logo">...</a>

</div>

InternetExplorer6.0tambiéninterpretaincorrectamenteestafunción,yaquedevuelvetambiénaquelloselementoscuyoatributonamecoincidaconelparámetroproporcionadoalafunción.

CreaciónyeliminacióndenodosConJavaScripttambiénsepuedenañadiryeliminarelementosdinámicamentedelárbolDOM.ParaestoseutilizanlasfuncionescreateElement(etiqueta),createTextNode(text),appendChild(child)yremoveChild(child).

Dadoquesuusosequedafueradeloscontenidosdeestecurso,sisedeseaobtenermásinformaciónsepuedeconsultarlaweb:

http://www.w3schools.com/jsref/met_document_createelement.asphttp://www.w3schools.com/jsref/met_document_createtextnode.asphttp://www.w3schools.com/jsref/met_node_appendchild.asphttp://www.w3schools.com/dom/met_element_removechild.asp

AccesoaatributosdeunnodoUnavezquesehaaccedidoaunnodo,elsiguientepasonaturalconsisteenaccedery/omodificarsusatributosypropiedades.MedianteDOM,esposibleaccederdeformasencillaatodoslosatributosytodaslaspropiedadesCSSdecualquierelementodelapágina.

DOM

134

http://www.w3schools.com/jsref/met_document_createelement.asp

http://www.w3schools.com/jsref/met_document_createtextnode.asp

http://www.w3schools.com/jsref/met_node_appendchild.asp

http://www.w3schools.com/dom/met_element_removechild.asp

Losatributosdeloselementosdelapáginasetransformanautomáticamenteenpropiedadesdelosnodos.Paraaccederasuvalor,simplementeseindicaelnombredelatributodetrásdelnombredelnodo.

Elsiguienteejemploobtienedeformadirectaladirecciónalaqueenlazaelenlace:

//HTML

<aid="enlace"href="http://www.ua.es">UniversidaddeAlicante</a>

<imgid="imagen"style="margin:0;border:0;"src="logo.png"/>

<pid="parrafo"style="font-weight:bold;"class="destacado">Texto</p>

//JavaScript

varenlace=document.getElementById("enlace");

varimagen=document.getElementById("imagen");

varparrafo=document.getElementById("parrafo");

console.log(enlace.id);//muestra"enlace"

console.log(enlace.href);//muestra"http://www.ua.es"

console.log(enlace.innerHTML);//muestra"UniversidaddeAlicante"

console.log(imagen.id);//muestra"imagen"

console.log(imagen.src);//muestra"logo.png"

console.log(imagen.style.margin);//muestra"0px"

console.log(imagen.style.border);//muestra"0pxnone"

console.log(parrafo.id);//muestra"parrafo"

console.log(parrafo.innerHTML);//muestra"Texto"

console.log(parrafo.style.fontWeight);//muestra"bold"

console.log(parrafo.className);//muestra"destacado"

Esimportantedestacarquesielnombredeunapropiedadoestiloescompuesto,como"font-weight",quetieneunguión"-"enelmedio,paraaccederdichoguiónseeliminayademásseescribeenmayúsculaslaprimeraletraselasiguientepalabra,porejemplo:

font-weightsetransformaenfontWeightline-heightsetransformaenlineHeightborder-top-stylesetransformaenborderTopStylelist-style-imagesetransformaenlistStyleImage

TambiénesimportantedestacarquecomolapalabraclassestáreservadaporJavaScript,noesposibleutilizarlaparaaccederalatributoclassdelelementoXHTML.Ensulugar,DOMutilizaelnombreclassNameparaacceder.

DOM

135

EventosLoseventospermitenejecutaraccionescuandosucedeundeterminadoeventooserealizaunadeterminadaacciónsobreunelementoHTMLdenuestrapáginaWeb.LaformadedefinirlosessimilaralosatributosHTML(evento="acción"),dondelaacciónharáreferenciaaunafunciónométodoenlenguajeJavaScript:

<divonclick="CODIGO-JAVASCRIPT"></div>

Algunosdeloseventosquepodemosutilizarson:

onload:seactivacuandoelnavegadorterminadecargartodosloselementosdelapágina.

onunload:seactivaalcerrarunapágina.

onclick:cuandosepresionaelbotóndelratónsobreunelemento.

ondblclick:seactivaalhacerdobleclicsobreunelemento.

onmousedown:seactivaalpresionarelbotóndelratón(mientrasqueestápresionado).

onmouseup:cuandoelbotóndelratónesliberado.

onmouseover:sedisparacuandoelcursordelratónpasasobreunelemento.

onmousemove:cuandosemueveelcursordelratónmientrasestásobreunelemento.

onmouseout:seactivacuandoelcursordelratónsalefueradeunelemento(sobreelqueestaba).

onfocus:ocurrecuandounelementorecibeelenfoque(elcursordeescritura),yaseaconelpunterooconmediantelateclatabulador.

onblur:sedisparacuandounelementopierdeelenfoque(yaseaporhacerclicfueraoporpresionarlateclatabulador).

onkeypress:ocurrecuandosepresionaunatecla(dentrodeunelemento,porejemplouncampodeescritura).

onkeydown:sedisparacuandounateclaespresionada(dentrodeunelemento)

onkeyup:cuandounateclaessoltada.

Eventos

136

onsubmit:seactivacuandounformularioesenviado.

onreset:ocurrecuandounformularioesreseteado.

onselect:cuandoelusuarioseleccionauntextoenuncampodetexto.

onchange:ocurrecuandouncontrolpierdeelenfoqueysuvalorhasidomodificadodesdequerecibióelenfoque.

Ejemplosdeuso:



<divonclick="alert('Hashechoclick');"onmouseover="alert('Acabasdepasarporencim

a');">

Puedespincharsobreesteelementoosimplementepasarelratónporencima

</div>



<bodyonload="alert('Lapáginasehacargadocompletamente');">

...

</body>




functionsaveText(){

//accionesJavaScript

}

</script>

<textareaid="myarea"cols="80"rows="15"onkeyup="saveText()"></textarea>

EventosylavariablethisJavaScriptdefineunavariableespecialllamadathisquesecreaautomáticamenteyqueseempleaenalgunastécnicasavanzadasdeprogramación.Enloseventos,sepuedeutilizarlavariablethisparareferirsealelementoquehaprovocadoelevento.

Estavariableesmuyútilparaejemploscomoelsiguiente:queremosquealpasarporencimadeun<div>elcolordelbordecambie,yalsalirdelcontenedorrestablezcaelcolorinicial.Sinousamoslavariablethiselcódigoseríaelsiguiente:

<divid="contenidos"style="width:150px;height:60px;border:thinsolidsilver"

onmouseover="document.getElementById('contenidos').style.borderColor='black';"

onmouseout="document.getElementById('contenidos').style.borderColor='silver';">

Seccióndecontenidos...

</div>

Eventos

137

Sinembargo,usandolavariablethisquedaríamuchomásclaro:


onmouseover="this.style.borderColor='black';"

onmouseout="this.style.borderColor='silver';">


</div>

Siquisieramosllamaraunafunciónexterna,tambiénesposibleusarlavariablethisparapasarlecomoparámetroelelementosobreelcualsequiereactuar,porejemplo:

<script>

functionsetColor(element,color){

element.style.borderColor=color;

}

</script>


onmouseover="setColor(this,'black');"onmouseout="setColor(this,'silver');">


</div>

Eventos

138

DeteccióndeerroresconFirefoxyChromeFirefoxyChromeproporcionanherramientasparaayudaaldesarrolladorqueestánincluidaspordefectoyquesondegranutilidadalahoradedepurarydetectarerroresenunawebendesarrollo.

Paraabrirestasutilidadessepuedepulsarsobrelaopcióncorrespondientedelmenú(enlasección"Herramientas")odirectamentepulsandolatecladefunciónF12.

Laconsoladeerrorespermitediferenciarlosmensajesdeinformación,losmensajesdeavisoylosmensajesdeerror.Además,permitevisualizartodosloserroresdelapáginasimultáneamente.Porcadaerrordetectadoseindicalaposiblesoluciónmedianteunmensajeeninglésysemuestraeltrozodecódigodelscriptdondesehaproducidoelerror.Además,pulsandosobreelenlaceincluidoseaccedealalíneaconcretadelarchivoconcretodondesehaproducidoelerror.

Firefoxpermiteinstalarpequeñasmejorasyampliacionesenelnavegador,queseconocenconelnombredeextensiones.UnadelasextensionesmásinteresantesparalosdesarrolladoresdeaplicacioneswebesFirebug,quesepuededescargargratuitamentedesdehttp://www.getfirebug.com/

Deteccióndeerrores

139

http://www.getfirebug.com/

MásinformaciónParaobtenerunareferenciamuchomáscompletasobrelashojasdeestilopodemosconsultaralgunadelassiguientesWebs:

Referenciadetalladadetodoslosestilos:http://www.w3schools.com/cssref/default.aspEspecificaciones:http://www.w3.org/Style/CSS/Tutoriales:http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html

SobreCSS3podemosobtenermásinformaciónen:

http://www.w3schools.com/css3/default.asphttp://www.w3.org/TR/2001/WD-css3-roadmap-20010523/

Además,existenalgunaspáginasWebqueproporcionan"generadoresdeestilosCSS"quenospuedenayudar,como:

http://css3generator.com/http://www.colorzilla.com/gradient-editor/

Másinformación

140

http://www.w3schools.com/cssref/default.asp

http://www.w3.org/Style/CSS/

http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html

http://www.w3schools.com/css3/default.asp

http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/

http://css3generator.com/

http://www.colorzilla.com/gradient-editor/

Ejercicios1-EjerciciossobreHTML,HTML5,CSSyCSS3EnestaprimerasesiónvamosarealizaralgunosejerciciosparapracticarconlasdistintasversionesdeHTML,HTML5,CSSyCSS3.Descargalaplantillaparalosejerciciosdelosmateriales.

Ejercicio1-EstructuraenHTML(0.6puntos)EnesteprimerejerciciovamosahacerunapequeñaWebdeejemploutilizandolasetiquetasDIVparaestructurarelcontenido.NuestraWebvaestardivididaencuatroapartados,cadaunotendráunidentificadorúnico:header,nav,content,footer.Elresultadofinaltendráquesersimilaraldelasiguienteimagen:

EnlapartesuperiorvamosacrearuncampoDIVconidentificador"header",enelqueincluiremosellogodelcurso(logo.jpg,conunaltode50px)yeltexto"PHDM"(colorblancocontamañode16puntos).Acontinuaciónincluiremoslabarradenavegación,otrocampoDIVconidentificador"nav".Dentrodeesteasuvezcrearemos3cajastioDIVconlaclase

Ejercicios1

141

"navElement".Lascajastendránlostextos"Inicio","Contenidos"y"Profesorado".Comoestiloindicaremosquelaclase"navElement"tengaelcolordefondo"#f0f0f0"yquecambiealcolor"#005682"cuandoelratónpaseporencima.

LaseccióncentrallacrearemostambiénmedianteunaetiquetaDIVconelidentificador"content".Estaseccióncontendráunalistanoordenada(deltipoUL),elcontenidodeestalistalopodemosobtenerdelficheroconlaplantillaparaesteejercicio.

ElpiedepáginalocrearemostambiénutilizandounaetiquetaDIVconelidentificador"footer"yeltexto"Dept.CienciadelaComputacióneIA".Comoestiloleaplicaremoselcolordetextogris.

PorúltimotenemosqueterminardeajustarlosestilosCSSparaquelapáginaseveacorrectamente.Paraloselementos"header","nav","content"y"footer"definiremosunanchodel100%eindicaremosquenosepermitenelementosporsuladoizquierdo(esdecir,quedebendeestarenunanuevalínea,estoloharemosmedianteclear:left;).Paraelestilo"navElement"indicaremosquesetienequesituaracontinuacióndelanterior(enlamismalínea,estoloharemosmediantefloat:left;).

Ejercicio2-TerminandolaWebdeejemplo(0.6puntos)Enesteejerciciovamosaterminarlawebdelejercicio1,añadiéndoleelcontenidodelosenlacesquefaltan.Enprimerlugarcopiamoselficheroresultadodelejercicioanteriorylorenombramosa"ejercicio2.html".EnesteficherovamosamodificarlasopcionesdemenúparaañadirenlacesaInicio(unenlaceaestemismofichero),Contenidos(enlacea"ejercicio2_contenidos.html")yProfesorado(enlacea"ejercicio2_profesorado.html").

Alañadirestosenlacessemodificarásuapariencia,porloquetendremosquemodificarlahojadeestilo.Añadimosdosnuevosestilos".navElementa"paraindicarqueelcolordelosenlacesesnegroyquenosedibujelalíneadesubrayadodelenlace(text-decoration:none;).Yotroestilo".navElementa:hover"paraqueelenlacecambieacolorblancocuandoelratónpaseporencima.

Elsiguientepasoespasartodosestosestilosaunficheroindependiente,llamado"ejercicio2_css.css".Simplementetendremosquecrearesteficheroycortarypegarenéltodoslosestilosqueyatenemoscreados.EnelficheroprincipalHTMLtendremosquecargarestahojadeestilo,quedandosolounalínea(<linkhref="ejercicio2_css.css"rel="stylesheet"type="text/css"/>).

Ejercicios1

142

AhoravamosacrearlosdosficherosHTMLquefaltan.ParaestorealizamosdoscopiasdelficheroHTMLprincipalylasrenombraremosa"ejercicio2_contenidos.html"y"ejercicio2_profesorado.html".Encadaunadeestascopiassolotendremosquecambiarelcontenidodelazonacentral.Paraelficherodecontenidosbuscaremoselíndicegeneraldecontenidosdelcursoyloañadiremosenunalistanonumerada(UL).Yparaelficherodeprofesoradoañadiremostambiénenunalistanonumeradalosnombresdelosprofesores.

Porúltimovamosahacerquealcambiardesecciónsequedemarcadoelenlacecorrespondiente.Estoloharemosañadiendolaclase"visited"soloalenlacedelasecciónactual,esdecir,encadapágina(inicio,contenidosoprofesorado),añadiremoslaclase"visited"soloalaopcióndelmenúqueestáabiertaenesemomento.

Nota:ParaañadirmásdeunclaseaunelementoHTMLlopodemoshacerseparandolasclasesconespacios,delaforma:<divclass="navElementvisited">.Finalmentedefinimoselestilo".visited"enlahojadeestiloconelcolordefondo"#005682"yelcolordetextoblanco.

Ejercicio3-EstructuradeHTML5(0.6puntos)EnesteejerciciovamosamodificarlawebquehemoshechoenelejercicioanteriorparaaplicarlelasnuevasetiquetassemánticasdeHTML5.Paraestoseguiremoslossiguientespasos:

Copiamoslosficherosdelejercicioanteriorylosrenombramospor"ejercicio3".CambiamosladireccióndelosenlacesylainclusióndelficheroCSSenlacabeceraparaqueapuntencorrectamentealosnuevosficheros.EncadaunodelosficherosHTMLcambiamoslasetiquetasDIVprincipales(conidentificadoresheader,nav,content,footer)ylassustituimosporlasetiquetassemánticasdeHTML5(header,nav,articleyfooter).ModificamoselficheroCSSparaaplicarlosestilossobrelasnuevasetiquetassemánticasdeHTML5(simplementetendremosquecambiarlosidentificadoresporlosnombresdeestasetiquetas,porejemplo:"#header"por"header").

Ejercicio4-Canvas(0.2puntos)ParapracticarconelelementoCanvasvamosadibujarunassencillasfigurasgeométricas.Enprimerlugar,enelcuerpodeldocumento,tenemosquecrearelcanvasconidentificador"myCanvas"ydimensionesde360x240.

Ejercicios1

143

EnelcódigoJavaScriptbtendremoslainstanciadelcanvasapartirdesuidentificador"myCanvas"yadquiriremossucontexto2D.Definiremosunestiloderellenoconcolor'#0000ff',uncolordeborde'#ff0000'yungrosordelíneade4píxeles.

Dibujamosunrectángulorellenoenlascoordenadas(0,0,150,50),yotrorectángulousandosoloelbordeenlascoordenadas(0,60,150,50).Porúltimodibujaremosuntriángulousandolaherramientatrazo(path).Iniciamoseltrazo(beginPath),definimoselprimerpuntoen(160,0)ylossiguientespuntosen(270,0),(160,110)y(160,0).Porúltimoindicamosquerellenelafigurayquecierreeltrazo.

Ejercicio5-Geolocalización(0.2puntos)Enesteejerciciosolotenemosqueañadirunalínea,yeselcomandonecesarioparaobtenerlaposiciónactual,alcuallepasaremoscomoparámetroelnombredelafunción"showPosition".Estafunciónserálaencargadademostrarnuestrascoordenadas(utilizandolaAPIdeGoogleMaps).

Nota:sinofuncionacorrectamenteesposiblequeseaporproblemasdepermisossiabrimoselficherohtmldirectamente.Parasolucionarlopodemoscolocarelejercicioenunservidorweblocalyaccederaélatravésdellocalhost.

Ejercicio6-AlmacenamientoOffline(0.3puntos)ParapracticarconlanuevafuncionalidaddealmacenamientoOfflinevamosahacerunpequeñoejemploqueguardedeformaautomáticaunanota.Siabrimoslaplantillacorrespondientesolotenemosquedefinirlasfuncionesdecargar,guardaryborrarlanota.Paraestoutilizaremoselalmacenamientoenlocal(localStorage)yelidentificador'savedNote',yparaelborradoeliminaremostodoelcontenidodirectamente(clear).AdemásenlaseccióndeestiloCSSindicaremosparael"contenedor-nota"queutilicelaimagendefondo"imgs/stickynote.jpg".

Nota:sinofuncionacorrectamenteesposiblequeseaporproblemasdepermisossiabrimoselficherohtmldirectamente.Parasolucionarlopodemoscolocarelejercicioenunservidorweblocalyaccederaélatravésdellocalhost.

Ejercicio7-CSS3(0.5puntos)

Ejercicios1

144

EnesteejerciciovamosaprobaralgunasdelasfuncionalidadesnuevasdeCSS3.Paratodoslosejemplosrecuerdaindicarlosnombresdelaspropiedadesusandotambiénlosnombresnativosdelosnavegadoresconlosprefijos-webkit-,-moz-y-o-.

Enelprimerejemplo"borderRadius"vamosaindicarqueelcuadrotengabordesredondeadosconunradiode30píxeles.

Enelsegundoejemplo(borderShadow)crearemosunasombraparaelborde,conlossiguientesatributos:distanciahorizontaldelasombrade5px,distanciaverticaldelasombra5px,desenfoquede6pxycolordelasombragrisáceo(#888888).

Eneltercerejemplo(textShadow)vamosacrearunasombraparaeltextode2pxparasusdistanciashorizontalyvertical,de2píxelesparaeldesenfoquey"#9e9e9e"comocolordesombra.

Enelcuartoejemplo(multiColumn)vamosaprobarlafuncionalidaddecolumnas.Aquísolotendremosqueindicarqueelnúmerodecolumnasesde2yqueelespacioentrelascolumnasesde15px.

Enelúltimoejemplo(boxTransition)vamosacrearunefectodetransición.Usandolapropiedad"transition"(paraestablecertodoslosvaloresenunasolalínea),indicaremosquevamosarealizarlatransiciónsobre"margin-left",conunaduraciónde3s,yusandolafuncióndetiempo"ease-in-out".

Ejercicios1

145

Ejercicios2-EjerciciossobreJavaScript

Ejercicio1-Calculadorasencilla(1punto)Parapracticarconjavascriptvamosacrearunacalculadorasencillacomolaquesemuestraenelsiguienteesquema:

Paraellosseguiremoslospasos:

EnprimerlugarescribiremoselcódigoHTMLparadiseñarunacalculadoracomolaquesemuestraenelesquemadelaimagen.Esimportantequeasignemosunidentificadorúnicoaloscampostipo"input"deentradadedatosyalcampoenelquesemostraráelresultado(paraestecampopodemosasignarunidentificadoraunaetiquetaspanvacía).Crearemosunafunciónparacadaoperaciónquesellamaráenelevento"onclick"decadabotón.Lasfuncionesdebencomprobarquesehayaescritoalgúnvalorenloscamposyencasodeerrormostrarunaviso.Además,enlafuncióndedivisiónsedeberádecomprobarqueelresultadoseacorrecto(finito)yencasodeerrorsemostarátambiénunmensaje.

Paraobteneroasignarvaloraloscampostipoinputusaremossupropiedad.value,mientrarqueparaasignarunvaloraotrotipodeelementosHTML(comopárrafos(p),cajas(div),span,etc.)utilizaremossupropiedad.innerHTML.

Alobtenerelvalordeuninputseobtienecontipocadena,pararealizarlasoperacionescorrectamentetendréisqueconvertirloadecimalmediantelafunciónparseFloat(valor).

Ejercicio2-Calculadoraavanzada(1punto)

Ejercicios2

146

Enesteejerciciovamosacrearunacalculadoraunpocomásavanzadaqueladelejercicioanterior.EnprimerlugarescribiremoselcódigoHTMLparacrearunacalculadoraconundiseñosimilaraldelasiguientefigura:

NospodemosayudardeunatabladeHTMLparaladisposicióndeloselementos.LapantalladelacalculadoraseráuncampoDIValcualasignaremosvaloresmediantelafunción.innerHTML.

ElcódigoJavaScriptconstaráde3funciones:

Unafunción"limpiar()"quesellamaráalpulsarlatecla"C"yqueborraráelcontenidodelapantalla.Unafunción"setValue(valor)"queañadiráelvalorpasadoporparámetroalcontenidoyaexistenteenlapantalla.Estafunciónseutilizarátantoparaañadirnúmeros(setValue(2))comoparaañadirlasoperaciones(setValue('+'))yelseparadordecimal(setValue('.')).Unafunción"calcular()"quecalcularálaoperaciónintroducidaenlapantallaymostraráelresultadodelamisma.Pararealizarloscálculosharemosusodelafuncióndejavascripteval,lacualevalualaexpresiónquerecibeporparámetroydevuelveelresultado.Además,dadoquelaexpresiónpuedecontenererroresesnecesariointroducirlaenunbloquetry...catchcomoelsiguiente:

try{

pantalla.innerHTML=eval(expr);

}catch(e){

//error

}

Notas:

Esnecesariocontrolarlossiguienteserrores:Cuandosellamea"calcular()"ynohayanadaintroducidoenlapantalla.

Ejercicios2

147

Siseproduceunaexcepciónalevaluarlaexpresión.Sielresultadodelaoperaciónnoesunnúmeroonoesfinito.

Encasodeerrorsemostraráelaviso"ERROR"porlapantalla.Despuésdeunerror,sisepulsalimpiaroseintroduceunvalorseborraráelaviso.

Ejercicio3-Validacióndeunformulario(1punto)Enesteúltimoejerciciovamosacrearunformularioparaelaccesoalasecciónprivadadeunawebmedianteusuarioycontraseña,estonosvaldráparapracticarconlafuncionalidaddejavascriptvalidandosuscampos.

EnprimerlugarcrearemoselHTMLdelformulariodelogin,elcualdeberásersimilaraldelasiguienteimagen:

Elfondodelawebtendráelcolor"gray".Lacajacontenedoratendráunanchode400pxyestarácentradaenlapantalla.Sucolordefondoserá#cccytendráunborderde2pxdecolorsilver.Ademástendráunespaciadointeriorde30px.Setendráqueadaptartambiénelrestodeelementosparaquesemuestrenconunaspectoydisposiciónsimilaraldelafigura.

SeaconsejacrearunaseccióndeestilosCSSparaagruparlosestilosdelformulario.

AcontinuacióncrearemosunafuncióndeJavaScriptpararealizarlavalidacióndelformulario,lacualmostaráloserroresquehubieraoindicaráquesehavalidadocorrectamente.ParaincluirlosmensajesdeerrorsepuedenincluirdirectamenteenelHTMLinicialdelformulario,perosemarcaráncomoocultosusandolapropiedadCSS:display:noneycuandosequierdanmostrarsecambiaráadisplay:block.

Ejercicios2

148

Nota:paracambiarelestilodeuncampoenJavaScriptsepuedehaceraccediendoasupropiedadstyledelaforma:campo.style.display='block';

Alpulsarsobreelbotón"Entrar"sellamaráaunafunción"validar()"querealizarálassiguientesacciones:

Sialgunodeloscamposestávacíomostraráunmensajedeerrorindicándolo.Sielcamponoestávacíoperolalongitudesinferiora3caracterestambiénsemostaráunerrorindicándolo(verlaimageninferior).Sinoseproduceningúnerrorapareceráelaviso:"¡Validacióncorrecta!

Notas:

Sisepulsavariasveceselbotón"Entrar"hayqueactualizarloserrores:siunerroranterioryanoseproduceelavisotendráquedesaparecer.Solosepodrámostrarunmensajedeerrorporcadacampo:camporequeridoolongitudmínimaincorrecta.

Ejercicios2

149

Documents

Table of Contentseduteka.icesi.edu.co/gp/upload/1538608962_web-47.pdf · Estilos CSS básicos Pseudo-clases Capas Ejemplo Introducción a HTML 5 Navegadores que lo soportan Doctype