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.
EstructurabásicadeunaWeb
11
Enlossiguientesapartadossedescribiránmásendetalleloselementosquepodemosutilizardentrodelencabezamientoodelcuerpodeunaweb.EnprimerlugarseestudiaránloselementosdelacabecerayacontinuacióntodaslasetiquetasHTMLquesesuelenutilizarparalaconstruccióndeunaweb.
EstructurabásicadeunaWeb
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:
Elementosdelacabecera
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:
Elementosdelacabecera
14
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>Ejemplo</title>
<metacharset="utf-8"/>
<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>
Elementosdelacabecera
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.
<!--comentario-->:ComentariosenHTML.Eltextodelcomentarionoserávisibleenelnavegador.
<span></span>:Estaetiquetanoaplicaningúnformatoporsimisma,sinoqueproveeunaformadedefinirunestilooformatoauntrozodetexto.Seutilizajuntoconunahojadeestilo.Porejemplo,lopodemosutilizarparamarcarpalabrasenalgúncoloroconalgúnformatoespecial.
Etiquetasbásicas
16
Acontinuaciónseincluyeuncódigodeejemploenelquesehaampliadoelejemplodel"HolaMundo"ysehanañadidoalgunasdelasetiquetasHTMLquehemosvisto:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>Ejemplo</title>
<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/>
<!--Estetextoesuncomentarioquenoseveráenelnavegador!!-->
<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>
Conloqueobtendríamosunresultadosimilaralsiguiente:
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>
Conloqueobtendríamosunresultadosimilaralsiguiente:
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:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>EjemplodeusodelaetiquetaDIV</title>
<metacharset="utf-8">
</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:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>Ejemplo</title>
<metacharset="utf-8">
</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
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>Ejemplo</title>
<metacharset="utf-8">
</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
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">
<!--Comonoindicamoselenctypeseutilizarálacondificaciónpordefecto-->
<!--Camposdelformulario-->
<!--Camposdelformulario-->
<!--Camposdelformulario-->
</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:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>Ejemplo</title>
<metacharset="utf-8"/>
</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>
<!--restodeciudades...-->
</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
<scripttype="text/javascript">
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:
<metacharset="utf-8"/>
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
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>
<styletype="text/css">
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:
Adjuntarunahojadeestilo
42
<h1style="color:blue;text-align:center">...</h1>
Adjuntarunahojadeestilo
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:
DefinicióndeestilosparaetiquetasHTML
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>
DefinicióndeestilosparaetiquetasHTML
45
Estaopciónesmuyútilpuesnospermitirádefinirdiferentesestilosparalamismaetiquetadependiendodedondeseencuentre.
DefinicióndeestilosparaetiquetasHTML
46
IdentificadoresyClasesAvecestenemosvariasetiquetasdelmismotipoperoqueremosaplicardiferentesestilossegúndondeestén.Paraestousamoslosidentificadoresylasclases.
LaprincipaldiferenciaentreellosesquelosidentificadorestienenqueserúnicosentodoeldocumentoHTMLmientrasquelasclasespuedenrepetirsetodaslasvecesquequeramos.Laotradiferenciaeslaformadedefinirlosydeutilizarlos:EnHTMLparaindicarelidentificadordeunaetiquetausaremoselatributo"id",mientrasqueparaindicarlaclaseusaremos"class":
<divid="capitulo2">
<p>...</p>
<pclass="parrafogris">....</p>
<p>...</p>
<pclass="parrafogris">....</p>
<p>...</p>
<pclass="parrafogris">....</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:
Identificadoresyclases
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:
Identificadoresyclases
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*/
}
Identificadoresyclases
49
Soloseaplicaríaalascabecerash1quetenganaplicadalaclase.resaltadodelaforma:<h1class="resaltado">...</h1>
Identificadoresyclases
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
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
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>Ejemplo</title>
<metacharset="utf-8"/>
<styletype="text/css">
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:
Estilosparapárrafos
55
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>Ejemplo</title>
<metacharset="utf-8"/>
<styletype="text/css">
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>
Conloqueobtendríamosunresultadosimilaralsiguiente:
Estilosparapárrafos
56
Estilosparapárrafos
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
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>
<styletype="text/css">
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:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
td">
<head>
<title>Ejemplo</title>
<styletype="text/css">
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>
<ahref="#">Menu2</a>
<ahref="#">Menu3</a>
<ahref="#">Menu4</a>
<ahref="#">Menu5</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
DoctypeEldoctypeeselencargadodeindicarlealnavegadoreltipodedocumentoqueestáabriendo,conelfinderenderizarlapaginademaneracorrecta.Porejemplo,eldoctypedeHTML4es:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.d
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
Estructurasemántica
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>
Estructurasemántica
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;}
Estructurasemántica
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
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
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
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();
AlmacenamientoOffline
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
AlmacenamientoOffline
89
AlmacenamientoOffline
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;
}
}
DetectarfuncionalidadesdeHTML5
91
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
}
DetectarfuncionalidadesdeHTML5
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:
Nuevosselectoresdeatributos
94
input[type="text"]{
background:#eee;
}
Nuevosselectoresdeatributos
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
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;
Conloqueobtendríamosunresultadosimilara:
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;
Conloqueobtendríamosunresultadosimilara:
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);
Conloqueobtendríamosunresultadosimilara:
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;
Conloqueobtendríamosunresultadosimilara:
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
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:
<scripttype="text/javascript">
alert("Holamundo!");
</script>
Aunqueescorrectoincluircualquierbloquedecódigoencualquierzonadelapágina,serecomiendadefinirelcódigoJavaScriptdentrodelacabeceradeldocumento(sección<head>)oalfinaldelapágina(antesdelaetiquetadecierre</body>.Conestasegundaopciónseconsiguemejorareltiempodecargadelapágina,yaqueprimerosemostrarátodoelcontenidodelawebyporúltimosecargaránlosjavascript.
IncluirenloselementosHTML
InclusióndeJavaScriptenHTML
113
ConsisteenincluirtrozosdeJavaScriptdentrodelcódigoHTMLdelapágina,porejemplo:
<ponclick="alert('Unmensajedeprueba')">Unpárrafodetexto.</p>
ElprincipalinconvenientedeestemétodoesqueensuciainnecesariamenteelcódigoHTMLdelapáginaycomplicaelmantenimientodelcódigoJavaScript.
InclusióndeJavaScriptenHTML
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:
Estructurasdecontroldeflujo
123
varnombre="";
if(nombre==""){
alert("Aúnnonoshasdichotunombre");
}
else{
alert("Hemosguardadotunombre");
}
//If...elseifanidado
varvalor=3;
if(valor==1)
alert("Lavariablevale1");
elseif(valor==2)
alert("Lavariablevale2");
elseif(valor==3)
alert("Lavariablevale3");
else
alert("Lavariabletieneotrovalor");
EstructuraswitchLaestructuraswitchseutilizaparaagilizarlatomadedecisionesmúltiples,trabajadelamismamaneraqueloharíansucesivosif,ifelseanidadosenelquesegúnelvalordeunavariableentraríaenunodeloscasosdefinidosoenelcasopordefecto:
Estructurasdecontroldeflujo
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:
Estructurasdecontroldeflujo
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]);
}
Estructurasdecontroldeflujo
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
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:
<!--Doseventosenunamismaetiqueta...-->
<divonclick="alert('Hashechoclick');"onmouseover="alert('Acabasdepasarporencim
a');">
Puedespincharsobreesteelementoosimplementepasarelratónporencima
</div>
<!--Comprobarquelapáginasehacargado...-->
<bodyonload="alert('Lapáginasehacargadocompletamente');">
...
</body>
<!--Tambieńsepuedenllamarafuncionesdesdeloseventos...-->
<scripttype="text/javascript">
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:
<divid="contenidos"style="width:150px;height:60px;border:thinsolidsilver"
onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
Seccióndecontenidos...
</div>
Siquisieramosllamaraunafunciónexterna,tambiénesposibleusarlavariablethisparapasarlecomoparámetroelelementosobreelcualsequiereactuar,porejemplo:
<script>
functionsetColor(element,color){
element.style.borderColor=color;
}
</script>
<divid="contenidos"style="width:150px;height:60px;border:thinsolidsilver"
onmouseover="setColor(this,'black');"onmouseout="setColor(this,'silver');">
Seccióndecontenidos...
</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
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
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
Top Related