1.1

1.1.1

1.1.1.1

1.1.2

1.2

1.2.1

1.2.2

1.2.3

1.2.4

1.2.5

1.2.6

1.3

1.3.1

1.3.2

1.3.3

1.3.4

1.3.5

1.3.6

1.3.7

1.4

1.4.1

1.4.2

1.4.3

1.4.4

1.4.5

1.4.6

1.5

1.5.1

1.5.2

1.5.3

TableofContentsPresentación

Contribuciones

Markdown

¿Quévamosanecesitar?

Conceptosbásicos

AlojamientoyservidoresHTTP

Navegadores

URLs

PeticionesHTTP

Ejercicio

Recursos

HTML5:Primerospasos

IntroducciónaHTML5

Etiquetas

Anidación

Estructurabásicadeunapágina

Etiquetasbásicas

Ejercicio

Recursos

ChromeDevTools

Pestañanetwork

Pestañaelements

Pestañasources

Configuración

Ejercicio

Recursos

HTML5:MiCurriculumVitae

Etiquetas-Parte2

Anidación-Parte2

Validaciónyaccesibilidad

2

1.5.4

1.5.5

1.5.6

1.5.7

1.6

1.6.1

1.6.2

1.6.3

1.6.4

1.6.5

1.6.6

1.6.7

1.7

1.7.1

1.7.2

1.7.3

1.7.4

1.7.5

1.7.6

1.7.7

1.7.8

1.8

1.8.1

1.8.2

1.8.3

1.8.4

1.8.5

1.8.6

1.9

1.9.1

1.9.2

1.9.3

1.9.4

1.9.5

Convenciones

Erroresfrecuentes

Ejercicio

Recursos

Git&Github

Configurarnuestracuenta

Enviaryrecibircambios

Funcionalidades

PublicarunawebenGithub

Colaborarconunproyecto

Ejercicio

Recursos

CSS:Primerospasos

IntroducciónaCSS

Propiedades

Añadiendolosestilos

Selectoresyherencia

EstilosconDevTools

Ejercicio

Recursos

Anexo:Navegadoresyestándaressoportados

CSS:Modelodecaja

ElementosHTML

Propiedades-Parte2

Posicionarelcontenido

ModelodecajaconDevTools

Ejercicio

Recursos

CSS:Refinandoeldiseño

Animaciones

Tipografías

Diseñowebadaptable

Ejercicio

Recursos

3

1.10

1.10.1

1.10.2

1.10.3

1.10.4

1.10.5

1.11

1.11.1

1.11.2

1.11.3

1.11.4

1.11.5

1.12

1.12.1

1.12.2

1.12.3

1.12.4

1.12.5

1.12.6

1.12.7

JS:Primerospasos

Variables

Operadores

ConsoladeChromeDevTools

Ejercicio

Recursos

JS:Controlandoelflujo

Estructurasdecontrol

DepurandoconChromeDevTools

Objetos,funcionesyámbitos

Ejercicio

Recursos

JS:Trabajandocomounprofesional

Window&Document

PeticionesAJAX

Expresionesregulares

Aplicacionesweboffline

Bibliotecasdeterceros

Ejercicio

Recursos

4

PresentaciónEstecursoesgratuitoylopuedesrealizarinclusosinosabesnadadeprogramación,sólohacefaltatenerganasdeaprender.Apesardeesto,tambiénpuedeserteútilsiyasabesHTMLperoquieresperfeccionarorefrescartusconocimientossobreHTML5,CSS3oJavaScript.

Alolargodelmismotevoya:

EnseñarloselementosmáscomunesdeHTML5,CSS3yJavaScript,osealosqueusaremoseldíadía.Mostrardóndepodrásresolvertusdudascuandotengasproblemas.ExplicarcómotrabajarconalgunasdelasherramientasqueusanlosprofesionalesdelmundorealcomosonGithubolasherramientasparadesarrolladoresdeGoogleChrome.

Esimportantesaberqueenelmundodelaprogramaciónhaymuchasformasderesolverunmismoproblema,yquetodasellaspuedenserigualmenteválidas.Dichoesto,quieroaclararqueelobjetivodelcursonoesaprendertodasycadaunadelasformasderesolverunproblema(estosevaaprendiendoconañosdepráctica),yesporelloquenoentraréenprofundidadentodosycadaunodeloselementosycaracterísticasdecadalenguaje.

Lasdefinicionesestaránsimplificadas,estoestáhechoaconcienciayaquecomodecíaantes,nohequeridoasumirquetengasningúnconocimientopreviosobredesarrolloweb.Poreso,parafacilitartelacomprensiónyevitardistraertedelobjetivodelcurso,teexplicaréconceptosenmuchasocasionesquenoserán100%precisosperoquesícorrectos.

EnmuchasocasionesencontrarásenlacesalaWikipedia,heelegidohacerloasíporvariasrazones:

1. Usaunlenguajebastantecoloquial2. Incluyeenlacesalaspalabrasmáscomplejas3. Sondefinicionesconsensuadasenlasdiscusiones

ApesardeestoincluiréenlacesalW3Cconlasdefinicionesformales,aunquepuedequeestasseanmásdifícilesdeentender.

Asíquenotomestodaslasdefinicionesalpiedelaletra,tómalascomodefinicioneslosuficientebuenascomoparaayudarteaentenderelcontexto.Detodosmodos,siemprequesedéestecasoteañadiréunenlaceaunrecursoconmásinformaciónoañadiréunsuperíndiceconaclaracionesalfinaldelapágina.

Presentación

5

Elobjetivodelcursoesdotartedeunabuenabasequetepermitasentirtelosuficientementeseguro paraafrontarcualquierproyectoyasíseguiraprendiendo.Paraellonoscentraremossolamenteenlosconocimientosyherramientasmásimportantesdeundesarrolladorfront-end .

FormatoEsteeselmaterialescritodelCursodeHTML5,CSS3yJSdesdecero,siquierespuedesestudiarteestecursoportucuenta,oinscribirtealformatoMOOCatravésdelawebparaqueteaviseenlaspróximasedicionesqueorganice.

Estasedicionesquesecelebranperiódicamenteconsistenenverunaseriedevídeo-tutorialesyhacerunosejerciciosqueteenviarésemanalmente.Lacargadetrabajopretendesermenora3horassemanaleseincluyenunasesiónonline(engrupo)de1halasemanapararesolverdudas.

ElformatoMOOCtendráunaduraciónaproximadade6semanas.

SnippetsinteractivosAlolargodetodoellibroutilizaréejemplosdecódigo(snippets)interactivosparafacilitarlacompresiónylainteracciónconelcódigoHTML,CSSyJavaScript.Estossnippetsestánorganizadosporlecciónynúmerodesnippet,porloquealolargodelasleccionesharéreferenciaaellosyasí,encasodequealgonotehayaquedadoclaro,puedasconsultarlosantesdecontinuarconlalección.

Ademásdecomoapoyoallibro,tienenunsegundopropósito:servirtede"libreta"enelfuturoparatenerunalistadeejemplosparatuspropiosdesarrollos.

Dudas,ideas,sugerencias,ycontribucionesAdemásderesolverdudasenlasesionesonlinesemanales,podrásrealizarcualquierpregunta,oaportarcualquierideaosugerenciaencualquiermomentoatravésdelapartadodeissuesdelproyectoenGithub.

Recuerda,quenotedevergüenzapreguntarcualquierdudaquetesurja,porsimplequeteparezca,sitehasurgidoati,tenporseguroquelesurgiráamáspersonas.Asímeayudarástambiénsaberquéaclaracionesañadiroquémejoraspuedohaceralcontenidodelcursoparafacilitarleselaprendizajeaotraspersonasquevengandetrás.

1

2

Presentación

6

Ademássiconsiguesterminarelcursosinningunaduda,eldíaqueestéshaciendounproyectoyalgonotefuncionesabrásmuchomejorpordóndeempezarabuscarloserrores.

YsitesientescómodousandoGithub,puedeshacerunpullrequestalrepositorioresolviendocualquiererrorqueencuentres.

Autor(es)MinombreesRaúlJiménezOrtega,hecreadoestecursobasándomeprincipalmenteenmisañosdeexperienciahaciendowebs(llevodesde1999)ydandoformación(desde2009),peroademásherevisadolasmejoresfuentesqueconozcoparaseleccionarlomejordecadacurso/tutorialqueheencontradoenestosañosenInternet.

Aunqueinicialmentemehelanzadosóloacrearestecurso,miobjetivoesanimaraqueotrosprofesionalesaportensugranitodearenaparamejorarelcontenidoymantenerestecursoactualizadodurantemuchotiempo,esporesoquehedecididoliberarestelibrolicenciándolocomoCreativeCommons(CC-BY-NC-SA4.0International).

Enelsiguienteapartadoveremoslasdiferentesmanerasdecontribuiramejorarelcurso.Porsupuesto,laspersonasquecontribuyantendránsureconocimientonosóloenGithubsinotambiéndentrodeloscontenidosdellibro.

Motivación-¿Porqué?¿PorquéotrocursodeHTML/HTML5?,pueslasrazonesquemehanllevadoalanzarmeaestaaventurason:

1. Compartirlostrucosyconsejos:alolargodeestosañosheidoaprendiendomuchostrucosymuchasleccionessobrecómosermásproductivoymegustaríacompartirloscontigo.

2. Asentarunabuenabase:despuésderevisarmuchoscursos(algunosdeellosmuybuenos),tengolasensacióndequeningunoexplicatodoslosconceptosnecesariosparacrearunabuenabasequetepermitasentirtecómodoalahoradecontinuarcreciendoportucuenta.

3. Creoquelostiemposhancambiado:ycreoquehaymuchísimaspersonasconmuchopotencialalasquesaberHTML,CSSyJavaScriptles"daríaalas"ylesabriríanmuchaspuertasprofesionales.

4. Disfrutocompartiendoloqueséyayudandoalosdemás:siemprequisemontarunaempresaparacrearalgúnproductoquemejoraseaunquefueseunpocolavidademiles/millonesdepersonas,perodespuésde6añosmehedadocuentadeque

Presentación

7

tambiénesposiblecambiarlavidademuchaspersonasenseñándolesloquesé.

Todoestohasidomásquesuficienteparaquedecidaadedicarmuchashoras(ycariño)demitiempolibreparaircreandopocoapocoloscontenidodeestecurso.

Aclaraciones:1.Alolargodetodoellibrousaréelmasculinoporfacilitarlalecturaevitandolos:"seguro/a",olos"segur@",esperoquenadieseofenda;-P.2.Unprogramadorfront-endnoesmásqueunprogramadorquedominaHTML,CSSyJavaScript.

Presentación

8

ContribucionesCualquierpersonapuedecontribuirdediferentesformas:

1. Ayudandoamejorarloscontenidosdellibroolosejercicios.2. Colaborandoenmejorarlapáginaweb.3. Ayudandoconlasaplicacionesmóviles.

ParafacilitarlacomunicaciónentretodaslaspersonasquequierancontribuirsehacreadouncanalenGitter.Acontinuaciónexplicamoscómocontribuirencadaunodelosapartadosmencionadosanteriormente.

Contenidosdelcurso

Libro

Estadodelastareas:Waffle|Github

Cualquierpersonapuedeayudaraintroducirmejoras,corregirerrorestipográficos,gramaticales,etc.

Lospasossonmuysencillos,primeroaccedemosalapáginaconelíndicedellibroenGithubyseguimoslossiguientespasos:

Contribuciones

9

Para"podereditar"unapágina(aclaración:enrealidadloqueestaráshaciendoesenviarmeunapropuestademejoraquetendréquerevisaryaceptar),hacefaltatenerunacuentayestaridentificadoenGithub.

Porúltimo,añadirqueloscontenidosestánescritosenellenguajedemarcasMarkdownqueveremosenlapróximalección.

Contribuciones

10

Ejercicios

Estadodelastareas:Waffle|Github

Pordefinir.

PáginawebEstadodelastareas:Waffle|Github

Pordefinir.

AplicacionesmóvilesEstadodelastareas:Waffle|Github

Pordefinir.

Contribuciones

11

MarkdownEstalecciónlahecreadoparalaspersonasqueesténpensandoencontribuirconloscontenidodelcursoynosabenMarkdown

Markdownesunlenguajedemarcas(comoHTML)bastantesencillo,aquítedejountutorialconejemplosporsitehiciesefalta.

WIP(simplicareltutorialaquí)

Markdown

12

¿Quévamosanecesitar?Unnavegadoryuneditordecódigo(oeditordetexto),enestecursousaremosGoogleChromeporqueincluyeambasherramientas(navegadoryeditor),yporqueademásconsideroqueesmásdidácticoyteayudaráaasimilarmejorlosconceptos.

Eshabitualencontrarprofesionalesqueusenotrosprogramascomo:SublimeText,Atom.io,Brackets,WebStorm,IntelliJ,...peronosotrosdemomentonousaremosningunodeellos.

Nota:EsposiblequehayasoídohablardeDreamweaver,Frontpage,Aptana,etc.Personalmentenoterecomiendoningunodeellosparaaprenderporqueincluyenbotonesqueintroducencódigo,cosaquemuchasvecesnosincitaaintroducircódigoinnecesarioocódigoquenosabemosquésignifica,yportantoquenosabremosarreglarencasodequecontengaalgúnfallo.

Elterceronolorecomiendoporqueademásdeserunprogramaqueconsumebastantesrecursos,consideroquecomodecimoshabitualmenteenEspaña:esmatarmoscasacañonazos.

¿Quévamosanecesitar?

13

ConceptosbásicosEnestaprimeralecciónvamosaverquésonycómofuncionan:

LosservidoreswebyHTTPLosnavegadoresLasURLsPeticionesHTTP

Portantoempezaremosporaprenderlosconceptosfundamentalesalahoradeentenderelfuncionamientodeunapáginawebparaadquirirunabasequenospermitaentenderdedóndepuedenvenirloserroresquecometamosenelfuturo.

EsimportanteconocereinteriorizarbienestosconceptosyaquelosusaremosynoslosencontraremoscontinuamentetantoenestecursocomoencualquierotrorecursodeInternet.

Sicreesqueyadominasestosconceptospuedesprobarahacerelejerciciotipotestdeestalección.Sisacasun100%deaciertospuedespasaralasiguientelección,sinoterecomiendoquenotelasaltes.

Conceptosbásicos

14

AlojamientoyservidoresHTTPParaestecursonosvaleconentenderlassiguientesdefiniciones(informales):

ServidorwebHTTP(osimplemente:servidorweboservidorHTTP):esunprogramaqueseencargaprincipalmentedelascomunicacionesconelnavegador .Enviayrecibemensajesyarchivos.Unalojamientoweb(webhostingohosting):esunordenador conectadoaInternet(normalmente24horas,7díasalasemana)enelquehayinstaladoentreotrosprogramas,unservidorHTTPyalquepodemossolicitarlerecursos.Comúnmentetambiénselellama:servidor.

Enestecursousarástumáquinacomoservidormientrasestéshaciendopruebas,yposteriomenteusaráselhostinggratuitoyelservidorHTTPqueofreceGithubparaentregarlosejercicios.

EnelapartadoPeticionesHTTPveremosendetallecómosecomunicaunservidorquetengaunservidorHTTPinstaladoconnuestronavegador.

Algunosdelosservidoreswebsyempresasqueofrecenalojamientoweb:

Alojamientoweb:1and1,AWS,Linode,etc.(vermás)Servidoresweb:Apache,NginxyIIS,etc.(vermás)

Acontinuacióntienesunagráficaquemuestraelporcentajedelosservidoreswebmásusados:

1

2 3

AlojamientoyservidoresHTTP

15

Fuente:w3techs-6deEnerode2016

Aclaraciones:1.Nosiempretienequeserconunnavegador,puedeserconotrotipodesoftware.2.Haymuchostiposdehosting,aunqueanosotrosnosvaleconestadefinición3.Tambiénpodríaestarconectadoaunaintranet(oredlocal)

AlojamientoyservidoresHTTP

16

NavegadoresUnnavegadoresunprograma(complejo)queentiendeytransformaelcódigoquerecibedesdeunservidor enalgoentendibleparaunhumano(unapáginaweb,imágenes,etc).

Entrealgunasdelasresponsabilidadesquedebegarantizarunnavegadorseencuentran:

Integridad:paratransmitirpáginaswebseutilizaunaformadecomunicaciónllamadaHTTP(oprotocoloHTTP).Esteprotocoloesellenguajecomúnentreelservidoryelnavegadorweb.

Seguridad:dadoquelosnavegadoresrecibencódigoescritonormalmenteporotraspersonas,elnavegadorimplementaalgunasreglasdeseguridad.Estasreglassedefinenadiferentesniveles:durantelaconexiónentrelasmáquinasyelenvío(HTTPS),alejecutarseenelnavegador(CORS),etc.

Optimización:almismotiempoquerecibenlainformación,losnavegadoresintegranmecanismosparaacelerarlacargaymejorarlaexperienciadelusuario,porejemploacelerareltiempodecargautilizandounamemoriadealmacenamientotemporal(memoriacaché),ocomprimiendolosmensajesdurantelascomunicaciones.

Aunqueexistenmultituddenavegadores,nosotrosusaremosGoogleChromedurantetodoelcurso.

Aquítedejoademásunagráficaquemuestralacuotadeusodelosnavegadoresmáspopulares:

1

Navegadores

17

Fuente:StatCounter

Aclaraciones:1.NormalmenteatravésdeunservidorwebHTTP

Navegadores

18

URLsParaaccederaunfichero/recursoatravésdeunnavegadorusamoslaURL(UniformResourceLocator).CualquierURLsigueelsiguienteformato:

scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]

Aclaración:Eninformáticasesuelenutilizanloscorchetes[]paraindicarqueloqueseencuentracontenidoentreellosesopcional.

VamosahacerunpequeñorepasoacadaunadelaspartesdelaURL:

scheme(obligatorio):estesueleser"http"o"https",aunquepodríasertambién:file,ftp,mailto,data,skype,etc.user:password@:usuarioycontraseña(p.e.hhkaos:mipass@).EstoporejemploseutilizaenotrotipodeconexionesFTPoSSHquerequierenidentificación.Tambiénsepuedeusarparaconectarasistemasqueusen.htpasswd,podremosidentificarqueunapáginaestáprotegidaconestesistemacuandoalaccedernosapareceunaventanaparecidaaesta:

host:nombrededominio(p.e.rauljimenez.info),subdominio odirecciónIPdelservidorweb(p.e.79.82.123.1)port:puerto (sinoseespecificaningunoseusael80pordefecto)path(obligatorio):rutaalfichero(p.e.blog/index.php)query:parámetros/variables(p.e.preview=true)fragment:puntodeanclaje (p.e.#introducción)

AsíunaURLválidapodríaser:

1

2

3

URLs

19

https://hhkaos.gitbooks.io/cursohtml5desdecero/content/chapter1.html#primeros-pasos-con-html5

Donde:

scheme=httpsuser:password@=(vacío)host=hhkaos.gitbooks.ioport=80path=cursohtml5desdecero/content/chapter1.htmlquery=(vacío)fragment=#primeros-pasos-con-html5

OtroejemplodeURLválidapodríaser:file:///Users/hhkaos/index.html

Enestecasoleestamosindicandoalnavegadorqueaccedaaunficheroqueseencuentraennuestrodiscoduro.

Aclaraciones:1.Unsubdominioesunprefijoqueleponemosaldominio,porejemplo:mail.google.com,ysepuedeconfigurarparaqueapunteadistintasIPso"carpetasdenuestrodiscoduro".Asíporejemplowwwseríatambiénunsubdominio2.Lospuertossonnúmerosenterosquenospermitenespecificaraqué"puerta"o"canal"deunamáquinanosqueremosconectar.Porejemploenlawebsesueleusarel80paralosservidoresHTTP(aunqueSkypetambiénlousa),el21paraelFTP,el22paraelSFTP,etc3.UnpuntodeanclajenospermiteintroducirunaURLalabrirlahacescrollhastaunpuntodelapáginadeterminado(ejemplo).

URLs

20

PeticionesHTTPCuandonuestronavegadorquiereaccederaunapáginawebatravésdeHTTP(scheme=http),loquehaceescomunicarseconunservidorHTTP.ParaellodescomponelaURLendiferentespartesquelepermiteconocerladireccióndelamáquina(host)ylaruta(path)delrecursoquealquequiereacceder(oalquelevaaenviarinformación),yenvíaunmensajealservidor,loqueformalmenteseconocecomounapetición.

AlgunasdelasaccionesqueprovocanqueunnavegadorrealiceunapeticiónHTTPson:escribirunaURLenlabarradedirecciones,pulsarunenlace,refrescarunapestañaoenviarunformulario.

Existenvariostiposdepeticiones,aunquenosotrosenestecursotrabajaremoscondostipos:

GET:parasolicitarinformación.POST:paraenviarinformación.

Losmensajesderespuestadelservidorpuedenserdemuchostipos,aunquenosotrosnosencontraremosnormalmentetres,quesignifican:

200:quesehaencontradocorrectamenteelfichero/recurso.403:quenotenemospermisoparaaccederalfichero/recurso.404:queelfichero/recursoquelehemossolicitadonosehapodidoencontrareneldiscoduro(puedeserporquenoestéoporquelarutaesincorrecta).

Elsiguientegráficomuestraunesquemasimplificadoquenospermitehacernosunaideasobrecómofuncionalacomunicaciónentreambos:

PeticionesHTTP

21

EjercicioEnestaprimeralecciónsóloquieroquehagasunejerciciotipotestparaversihasentendidotodoslosconceptos.Loquesepreguntaeneltestesloquerealmentemeimportaquerecuerdes.

Ejerciciotipotestdeautoevaluación-Lección1

Ah!porcierto,puedesrepetirlotantasvecescomoquieras.

Sihayalgoquenotehayaquedadoclaro,recuerdaquepuedespreguntarcualquierdudaenlosissuesdelproyectoenGithub.

Ejercicio

22

RecursosAunquenoesimprescindibleparaentenderyaprenderacrearwebsconHTML5,CSS3yJavaScript,lossiguientesconceptossípuedenserteútilessiquieresaprenderaalojarunsitiowebenunservidortuyopropio.

Dominiosysubdominios

Enestecursonoaprenderemosacompraryconfigurarundominioyaquenosehaconsideradoimportanteparalosobjetivosplanteados(haymuchostutorialesonlineparaaprenderahacerlo).

Dichoestocreoqueesinteresanteconocerquéesundominioyquéesunsubdominio:

Dominios:podemoshacerunaanalogíaentrelosdominiosylosAccesosdirectosdelsistemaoperativo.Paraidentificarunívocamenteunacarpetaennuestrodiscoduronecesitamossaberlaruta(p.e:C:\Archivosdeprograma\GoogleChrome\bin\chrome.exe),puesparaidenfiticarnuestrosservidoresenInternetnecesitamossabersudirecciónIP(p.e:213.242.93.227).Perocomorecordartodosestosdígitosesmuycomplejo,haceañosseinventaronlosdominios(p.e:google.com,rauljimenez.info,etc.)quenosonmásquenombresqueapuntanaestasdirecciones(algoasícomoun"accesodirecto")yquesonmásfácilesderecordarparaunhumano.Nota:losdominiossepuedenalquilarporInternetylospreciosnormalmentevaríandesdelospocos€o$hastacientosde€o$.Subdominos:unsubdominioesunprefijoqueleponemosaldominio,porejemplo:mail.google.com,ysepuedeconfigurarparaqueapunteadistintasIPso"carpetasdenuestrodiscoduro".Asíporejemplowwwseríatambiénunsubdominio.

AunqueelICANNeslaorganizaciónquegestionalosdominiosanivelmundial,existenmultituddeempresasautorizadasparavenderdominios.

Vídeoeninglés:quésonlosdominiosylosDNS

Servidores

Comohemosmencionadoanteriormenteunservidorohostingnoesmásque"unordenador"dondeguardamoslosficherosyelrestodeinformaciónquecontienennuestrositioweb.

Recordatorio:EnestecursousaremosnuestramáquinasiningúnservidorHTTPyaquenonosharáfaltademomento.

Recursos

23

Estosordenadoresnotienenporquétenernadaenespecial,nuestramáquinapuedehacerdeservidorweb,perodadoque(entreotrasmuchascosas),unawebseesperaquefuncione24horas,7díasalasemanayquenuestramáquinalatenemosqueapagardevezencuando,normalmentesealquilapartedeunamáquina(ounamáquinacompleta)aunaempresaquesededicaexclusivamenteaesto:empresasdehostingoalojamientoweb.

Sepuedeaccederygestionarestasmáquinasquealquilamosenremotodediferentesmaneras:usandoclientesFTPs/SFTPs,panelesdecontrolweb,conexiones/clientesSSH,etc.

TCP

Ignoraesteapartadosinohasestudiadonadarelacionadoconinformáticaotelecomunicaciones.SimplementequeríahacerreferenciaquetantolosprotocolosHTTP,comoFTP,SSH,IMAP,DNS,POP,SMTP,etc.estánimplementadossobreTCP(+ìnfo).

Recursos

24

PrimerospasosconHTML5Enestasegundalecciónveremos:

UnaintroducciónaHTML5QuésonycómofuncionanlasetiquetasQuéesycómosehacelaanidacióndeetiquetasLaestructurabásicadeunapáginaAlgunasetiquetasbásicas

ElobjetivoesempezarafamiliarizarnosconHTML5yprepararnosparalasiguientelecciónenlaqueconfiguraremosnuestroGoogleChromeparapoderempezaraescribircódigo.

Sicreesqueyadominasestamateriapuedesprobarahacerelejerciciotipotestdeestalección.Sisacasun100%deaciertospuedespasaralasiguiente,sinoterecomiendoquenotelasaltes.

HTML5:Primerospasos

25

IntroducciónaHTML5HTML(HypertextMarkupLanguage)esunlenguajedemarcado(quenoeslomismoqueunlenguajedeprogramación)quesirveparadefinirlaestructuraylasemánticadenuestrapáginaweb(luegoveremosquesignificaesto).

HTMLfuecreadoyesmantenidoporunaorganizaciónsinánimodelucrollamadaW3C.ElW3Cesunconsorcioformadopormásde400empresas(entreellaslasquedesarrollanlosprincipalesnavegadorescomoGoogle,Microsoft,Mozilla,Apple...),etc.

Desdeelconsorciotrabajancontinuamenteendefinircómodebeevolucionarestelenguajeyotrosestándaresqueconformanlaweb.Posteriormentelosfabricantesdenavegadorespreparanlosmismosintentandoconseguirqueuncódigofuncioneigualentodoslosnavegadores.Aunquedesafortunadamentenosiempreesasí,cadavezesunarealidadmáscercana.

Portanto,alolargodelosañoslasversionesdeHTMLhanevolucionado:HTML2.0(1995),HTML4.0(1997),XHTML(2000),HTML5(2014),etc.conelobjetivodeadaptarsealosnuevostiemposyasídarsoporteanuevasnecesidades(estandarizacióndelossistemasdeaudio,vídeo,etc).

SnippetsinteractivosVamosaverunabreveintroducciónalfuncionamientodelainterfaz:

IntroducciónaHTML5

26

1. Permitenavegarentrelasdiferenteslecciones2. Permitenavegarentrelosdiferentessnippets3. EjemplodecódigoHTML(conlasintaxisresaltada)4. Resultadodelcódigo(3)enembebidoenlapágina5. Nospermiteabrirlaprevisualizaciónapantallacompleta6. NospermiteusareleditorwebCodepen.io,uneditorbastantepopularpara

experimentarconelcódigo.7. EnlacealosissuesdeGithubdondepodremospublicarcualquierdudaoproblema

sobrelosejemplos.

PuedesaccederaestainterfazatravésdelasiguienteURL:http://libro.cursohtml5desdecero.com/snippets/html/

IntroducciónaHTML5

27

EtiquetasEnelúltimoestándardeHTML(HTML5)existenmásde100elementosquenospermitiráncrearetiquetas.Comocomentabaaliniciodelcursonolosveremostodos,dehechonoeshabitualencontraranadiequelosconozcatodos,nisiquieralosquellevamostantosañoshaciendowebs,loimportanteessaberdóndebuscarlosysabercómousarlos.

Porestovamosaempezarporentenderquéaspectotienen.Loprimeroessaberquelasetiquetassólopuedenserdedostipos:

1)Lasquetienenunaaperturayuncierrecomoenelsiguientecaso:

<elementoatributo="valor">Contenido</elemento>

Porejemplo:

<ahref="http://www.google.com">Google</a>

Enestecasodecimosque:"tenemosunelementoadondeelvalordelatributohrefeshttp://www.google.com,yquesucontenidoesGoogle".Nohacefaltaquetepreocupesaúnporelsignificado,luegoharemosincapiéenesto.

Sinosfijamoslasetiquetassiempreestáncontenidasentrelossímbolos<>,yelcierresóloincluyeelnombredelelementoprecedidodeunabarralateral"/"(p.e.</elemento>).

2)Porotroladoestánloselementosauto-contenidos(losquenosecierranexplícitamente):

<elementoatributo="valor">

Porejemplo:

<imgsrc="html-css-js.png"alt="LogotiposdeHTML5,CSS3yJavaScript">

Esimportantedestacarqueelatributoyelvalorsonopcionales.

Vamosaveralgunosejemplosdenombresdeetiquetas:

elemento:html,head,meta,title,body,img...atributo:charset,src,alt,...

Etiquetas

28

valor:UTF-8,"url"(laURLaunrecurso),"texto",...

Amisiempremegustateneruna"chuleta"(ocheatsheet)amanoqueresumatodosloselementosyalgunosdelosatributosqueaceptan.Peroporahoranohacefaltaquetedistraigasconesto,loimportanteesqueentiendaselformato.

Etiquetas

29

AnidacióndeetiquetasTambiénesimportantesaberqueunasetiquetaspuedenconteneraotras(unaovarias),ocomosesueledecir"quesepuedenanidar".

Porejemplo:

<head><title>Títulodelapágina</title><metaname="author"content="RaúlJiménezOrtega-@hhkaos"></head>

Enestecasovemosquelaetiquetaheadtienecomocontenidoaotraetiquetatitle.Enestecasosediceque:

Laetiquetaheadeselpadredelaetiquetatitleymeta.Yquelaetiquetatitleymetasonhijasdelaetiquetahead.Laetiquetatitleymetasonhermanas.

Sinosfijamos,además,laetiquetaanidada(title)estáenunanuevalíneayconunniveldeindentación/sangradomayor.Estoesasíporunaconvenciónmundialalaquesehallegadoparaquelosprogramadoresescribamoscódigodeunamanerasimilar,tantoparahacernosmásfácilycomprensibleelcódigocuandoestecrezca,comoparacuandotengamosquecompartirloconotrosprogramadores.

OrdendeaperturaycierreCuandoanidamosetiquetasunasdentrodeotrasesmuyimportantecerrarlasenorden.Estoquieredecirquelaprimeraetiquetaencerrarsetienequeserlaúltimaqueseabrió,asíporejemploesteejemploseríaincorrecto:

<p>Elordenes<strong>muyimportante</p></strong>

Laformacorrectadehacerlosería:

<p>Elordenes<strong>muyimportante</strong></p>

Recordemosquehayetiquetasquenoesnecesariocerrarlasporloqueestoseríacorrecto:

Anidación

30

<p>Elordenes<strong>muyimportante</strong>.<br>Asíintroducíamosunsaltodelínea.</p>

OtrosaspectosMegustaríapuntualizarotrosdosdetalles:

1. Notodaslasetiquetassonanidablesentresí;porejemplo:unaetiquetabodynopuedecontenerunaetiquetahead.Peronotepreocupesdemomentoporesto,enotralecciónveremoscómopodemossaberquéetiquetassonanidablesentresí.

2. Esimportanteindentarbienelcódigoporqueenmuchoscasosnosencontraremosmuchosnivelesdeanidación,etiquetasquecontienenetiquetasqueasuvezcontienenetiquetas,etc.yaquenoexisteunlímitemáximodeanidamiento.

Anidación

31

EstructurabásicadeunapáginaPrimeromegustaríahacerunapequeñaaclaraciónsobreterminologíaquevoyausar,diferenciaremos:

Páginaweb:comounapáginaindividualdentrodeunsitioweb(p.e:rauljimenez.info/contacto)Sitioweb(oweb):comoelconjuntodetodaslaspáginasenlasquepodemosnavegardentrodeunmismodominio(p.e:rauljimenez.infoesunsitiowebqueincluye:rauljimenez.info/experiencia,rauljimenez.info/contacto,etc).

Dichoesto,todapáginawebquehagamosenHTML5debetenerunaestructurainicialsimilaralasiguiente:

<!DOCTYPEhtml><htmllang="es"><head><metacharset="UTF-8"><title>Títulodelapágina</title></head><body></body></html>

Acontinuaciónexplicamoslafunciónquecumplecadaetiqueta:

<!DOCTYPEhtml>:indicaralnavegadorqueelcódigoHTMLenelqueestáescritalapáginaesenlaversión5,oseaqueesHTML5.+info<htmllang="es">...</html>:indicalaraízdeldocumentoytodaslasetiquetasdebenestarincluidasdentro.Ademásseespecificaelidiomaenelqueestáescrita,es=Español(+idiomas).<head>...</head>:seusaparaenvolverotrasetiquetasqueofreceninformaciónprincipalmentea:elnavegador,alosbuscadoresyaotraspáginas(comopuedenserredessociales,etc).Lainformaciónespecificadadentrodelheadnosemuestradentro delapáginawebqueveelusuario.<metacharset="UTF-8">:indicaalnavegadorquétipodecaracterescontienelapágina.Conelatributocharsetindicamoscuáldetodoslosjuegosdecaractaresdisponiblesusamos.ConelvalorUTF-8podremoscrearcontenidoenlamayoríadelossistemasdeescritura:español,inglés,francés,etc.<title>...</title>:indicaeltítulodenuetrapágina.Estesemuestraen:lapestañadelnavegador,elenlacequeindexanlosbuscadores,etc.<body>...</body>:contienetodoelcontenidovisibleporelusuariodentrodenuestra

1

Estructurabásicadeunapágina

32

página.

Observaquelaetiquetahtmlcontienedoshijas:headybody,estoyanoesobligatorioenHTML5yaquesepuedeomitirlasetiquetashtml,bodyyhead,peroporconvenciónesrecomendableusarlas.

Aquípuedesverelejemplointeractivo:Lección1-Snippet1

Aclaraciones:

1.Cuandodigodentromerefieroalcontenidodelapágina,loquenoincluyelapestañadelnavegadornilabarradedirecciones.

Estructurabásicadeunapágina

33

EtiquetasbásicasParaterminarestalecciónvamosaaprenderelsignificadodeochodelasetiquetasqueconmásfrecuenciatendremosqueusarcuandocreemospáginasweb:

<p></p>:representaunpárrafo(+info).

<br>:representaunsaltodelínea(+ìnfo).

<h1></h1>:estaetiquetaseutilizapararepresentarelencabezadodeunapágina,comosifueraelíndicedeunlibro.Puedevariardesde1hasta6paradiferenciarsubniveles(+info).

<ul></ul>:representaunalistadeelementos,dondeelordendeloselementosnoesimportante-estoquieredecirqueelcambiodelordennomodificaelsignificado.(+ìnfo).

<ol></ol>:representaunalistadeelementos,dondeelordendeloselementossíesimportante-estoquieredecirqueelcambiodelordenmodificaelsignificado.(+ìnfo).

<li></li>:representaunelementodelalistaysupadresiempretienequeserunaetiquetaoloul.(+ìnfo).

<strong></strong>:representaalgomuyimportante,serio(paraavisosoprecauciones)ourgente(quedebeserleídoantes).(+ìnfo).

<em></em>:sirveparaenfatizarenelcontenido.(+ìnfo).

<!---->:seutilizaparaañadircomentariosdentrodelcódigoqueelusuarionopodráver.Porejemploparaañadirnotasdetareaspendientes,aclaracionesquenosayudenanosotrosoaotraspersonasaentenderelcódigo,etc.(+ìnfo).

Puedesconsultarlosejemplosenlalección2-Snippet1-5).

Truco:Paraquerecuerdesmejorquésignificacadaelemento,lasetiquetaspiensaenlosacrónimoseninglés:

h1=heading1;h2=heading2;...p=paragraphbr=breaklineul=unorderedlistol=orderedlistli=listitemem=emphasis

Etiquetasbásicas

34

Elsiguienteejemplomuestraunapáginawebquecombinatodasellas:

<!DOCTYPEhtml><!--TODO:añadirlaetiquetalang--><html><head><metacharset="UTF-8"><title>Ejemploconetiquetasbásicas</title></head><body><h1>EtiquetasHTML</h1><p>EsteejemplomuestracómocombinaralgunasdelasetiquetasmásbásicasdeHTML5.<br>Recuerdaque<strong>esimportanteentenderladiferenciasentreellas</strong>.</p>

<h2>Etiquetaul+li</h2><p>SilistamospersonasnominadasalosOscars,dadoqueelordennoalteraelsignificado,debemosusar<em>ul</em>.</p><ul><li>DavidVerdaguer</li><li>JesúsCastro</li><li>IsraelElejalde</li><li>DaniRovira</li></ul>

<h2>Etiquetaol+li</h2><p>Enelcasodequeestemoslistandoelementosdondeelordenesimportante,comoporejemplolaclasificacióndeunmundialdefútbol,debemosusar<em>ol</em>.</p><ol><li>España</li><li>PaísesBajos</li><li>Alemania</li><li>Uruguay</li></ol></body></html>

Estogeneraríaunapáginacomolasiguiente:

Etiquetasbásicas

35

Siquierespuedesverelejemploenvivoaquí:Lección1-Snippet2

Esimportantedestacarqueaunqueelnavegadorleañadeunestilo(CSS)pordefectoalasetiquetas,porejemplo:

h1yh2unafuentemayorynegritastrongennegritaulyolconunmargenalaizquierdayunpuntoonúmerorespectivamenteemencursiva

EstonoesresponsabilidaddelHTML,estolopodremospersonalizarenunfuturoconCSS.Asíqueinsisto,recuerdaqueHTMLsólosirveparadotardeestructuraysemánticaalcontenido.

Estevalorsemánticoesmuyimportanteentreotrascosasparaporejemplo:

Quelosbuscadores(quenosonmásqueprogramasautomatizados)puedan"entender"elcontenidodenuestrapáginayasípoderdetectardequéestamoshablandoyquéesimportante.Paraqueotrasherramientascomoporejemplolosnavegadoresparainvidentes(p.e.

Etiquetasbásicas

36

WebbIE)queloquehacenesleerelcontenidoalusuariouotrosnavegadoresbasadosentexto.

Etiquetasbásicas

37

EjerciciotipotestEjerciciotipotestdeautoevaluación-Lección2

Recuerdaquepuedesrepetirlotantasvecescomoquieras.

DudasSihayalgoquenotehayaquedadoclaropuedespreguntarcualquierdudaenlosissuesdelproyectoenGithub.

Ejercicio

38

RecursosAquítedejodostiposderecursos.Losavanzadosmíralossólosiyateníasunconocimientopreviodeprogramaciónweb(XHTML,HTML4,etc)o...sinoletienesmiedoanada;D:

Básicos:ChuletadeetiquetasHTML5Artículo:¿Quépuedeocurrirsirealizamosmallaanidacióndeetiquetas?

Avanzados:Organizaciónsinánimodelucroresponsabledegestionarlosdominiosanivelmundial:ICANN-WikipediaTheWebHypertextApplicationTechnologyWorkingGroup

Recursos

39

ChromeDevToolsEnestalecciónvamosaempezaratrabajarconlasherramientasdeGoogleChromeparadesarrolladores(ChromeDevTools) .

Comoenlasleccionesanteriores,sicreesqueyadominasestamateriapuedesprobarahacerelejerciciotipotestdeestalección.Sisacasun100%deaciertospuedespasaralasiguiente,sinoterecomiendoquenotelasaltes.

PestañasDemomentosólovamosaver3gruposdeherramientasqueseencuentranorganizadasporpestañas:

Red(Network):estapestañanospermiteverlosrecursosquerecuperanuestronavegadorusandopeticionesHTTPmientrascargamosyusamoslapágina.

Elementos(Elements):nospermiteverymodificarelcódigo querepresentalapáginaqueestamosviendo.

Fuentes(Sources):nospermitenavegarportodoslosficheros(HTML,CSSyJavaScript)queutilizalapáginaqueestamosviendo.

Labarradeherramientaslapodemosabrirencualquierpáginaqueestemosviendo.ParaabrirestabarrapodemoshacerlomedianteunatajodetecladoomedianteelmenúdeherramientasdelChrome:

Atajodeteclado(recomendado):EnWindowspulsando:F2oControl+Shift+IEnMacpulsando:Cmd+Opt+I

Pulsandoelbotóndemenú:"Botóndemenú"->"Másherramientas"->"Herramientasparadesarrolladores".Comopodemosverenlasiguienteimagen.

1

2

ChromeDevTools

40

Unavezhechoestonosaparecerálabarradeherramientas:

Labarrapodemosajustarlaaladerecha,abajoodesacoplarlaenunanuevaventanacomovemosacontinuación:

Vayamosahoraanalizandolaspestañas.

Aclaraciones:1.PuedesampliartodalainformaciónqueveremosenestecapítuloenlapáginadedocumentaciónparadesarrolladoresdeGoogleChrome,enelcursoDiscoverDevToolso

ChromeDevTools

41

paralosmásavanzadosenelcursoWebsitePerformanceOptimization2.EldelDOM(queluegoveremosquees)yelCSS,aunquedemomentononosentretendremosenestaparte.

ChromeDevTools

42

PestañanetworkComodecíamos,estapestañanospermiteverlosrecursosquesolicitaelnavegadordeunservidorusandopeticionesHTTP.Tambiénnospermiteverlosdetallesdelasmismas:tipodelmensaje(GET/POST),códigoderespuesta(200,404,...),etc .

SiabreslasDevToolsdespuésdehabercargadolapágina,lapestaña"Network"tesaldrávacía,siesasí,refrescalapáginayveráscomoteaparecealgoparecido aesto:

CadafilarepresentaunapeticiónHTTP,ysitefijas,dejandoelcursorencimadeunapeticióntemostrarálaURLcompletadelrecursoysipulsamoselbotónderechotendremosvariasopciones,entreellasladeabrirelrecursoenunanuevaventana,eliminartodoslosficherosdelamemoriacaché,etc.

Nota:Podemosvaciarlamemoriacaché dedosformasdistintas,unaespulsandoeliconoderefrescarconelbotónderechoyluego"EmptyCacheandHardReload",yotraespulsandoelbotónderechosobrecualquieradelaspeticionesHTTPypulsar"Clearbrowsercache"

Sihacesclicencualquieradelaspeticionespodrásverloscontenidosdelrecursoyalgunosdetallesquenonospreocuparánenestecurso.

1

2

3

Pestañanetwork

43

Paracerrareldetalledelapeticiónpuedespulsarenelaspa.

Ademásdefiltrarlaspeticionestambiénpuedesreordenarlaspulsandoeneltítulodecadacampo:Name,Method,Status,etc.

Veamosahoraalgunas delascosasquepodemoshacerenestapestaña.Sitefijas,lasopcionesenestaimagennocoincidenexactamenteconlasdelaimagenanterior(yposiblementetampococonlastuyas),estosedebeaqueeste"pantallazo"esdeunaversiónanteriordelnavegador(noimporta),veamosquesignifican:

Preserverecordsonnavigation:pordefectoapareceelbotónenrojo,estosignificaquecadavezquecambiemosdepáginaseeliminaránlaspeticionesyseañadiránlasnuevas.Encambio,silodesactivamossedejaránderegistrarnuevaspeticiones.Preservelog:simarcasestaopción,elefectoserájustoelcontrario,nuncase

4

Pestañanetwork

44

borraránlaspeticionesHTTP,nicambiandodepáginanidedominio(seiránañadiendounatrasotra).Clearrecords:estebotónnospermitelimpiarlainformacióndelaspeticiones.Filter:nospermitefiltrarlaspeticiones,sebuscaránURLsquecontenganeltextointroducido.Hide/showfilterbuttons:paraocultar/mostrarlosbotonesparafiltar.Filterbuttons:estosbotonesnospermiteversólolaspeticionesHTTPqueharecuperadountipoderecurso.Demomentonolousaremosmucho.Summaryview:podemosvercuántaspeticionesHTTPsehannecesitadoparacargarlapágina(requests),cuandoocupalasumadetodoslosrecursosrecuperados(XXXtransferred),eltiempoexactoquehatardadoendescargarlosrecursos(ms=milisegundos),yenlasiguientelecciónveremosquéeselDOMyquésignificaelDOMContentLoaded.Nothrottling(seveenlaimagenanterior):estopermitesimularquetuconexiónaIntenetesmáslenta .Lousaremosmásadelantecuandoqueramosversinuestrapáginacargalosuficientementerápidousandoundispositivoconectadopor3G.

Porúltimoyantesdepasaralasiguientelección,teanimoaquedediquesunpardeminutosajugarconestapestaña,ysitesurgealgunaduda...noolvidespreguntarlaenlosissuesdeGithub.

Aclaraciones:1.EslapáginadedesarrolladoresdeChromepuedesconsultarquesignificacadacolumna,aunquenoestrivialynoterecomiendoquelohagassiestásempezando.2.Laspeticionesserándistintasencadapágina,porlotantoconcasitotalseguridadtuspeticionesserándistintasalasdelaimagen.3.Todoslosnavegadoresincluyenunamemoriacachétemporalparaoptimizareltiempodecargadelapágina,deestemodoelnavegadorpuedereducirelnúmerodepeticionesHTTP(másinfo).4.SiyatienesexperienciaconChromeDevToolsyquieres,encontrarásdóndeampliarconocimientosenlasecciónrecursosdeestalección.5.Elthrottlingnofuncionacuandoestamoscargandounficherosinutilizarunservidorweb.

5

Pestañanetwork

45

PestañaelementsLapestaña"Elements"representaloquellamaremosel"DOM" (DocumentObjectModel),quenoesmásqueloquerepresentalapáginaqueestamosviendo.

ElDOMloconstruyeelnavegadorapartirdelcódigoHTMLquerecibetrashacerlapeticiónHTTPinicial.Además,elnavegadorintentaarreglarcualquiererrorqueseencuentreenelcódigo,porejemplo:sisenosolvidacerrarunaetiqueta,sianidamosetiquetasquenosonanidables,etc.PoresemotivoyporqueelDOMsepuedemodificar ,estesepareceperonosueleserexactamenteigualalcódigoHTMLrecibidoenlapeticiónHTTP.

AdemásdepoderverelDOM,podemoseditarlo,buscartextoenélyhastareordenarlasetiquetasarrastrándolasconelratón.

Enlasiguienteimagenvemoslasdiferentespartesdeestapestaña:

Emulador:estaopciónnospermitirásimularqueestamosusandounmóvilotabletyhacerthrottling(simularotrotipodeconexión)aligualquehemosvistoenlapestaña"Network".Inspeccionarelementos:activandoestaopciónpodráshacerclicsobrecualquierpartedelapáginayelinspectorseñalaráenelDOMelcódigoquerepresentaelelementoseleccionado.Menúcontextual:pulsandoelbotónderechosobreelcódigoveremosvariasopciones:

Addattribute:permiteañadirunatributo,porejemplo:charset="UTF-8"(atajodeteclado:Enter).EditasHTML:nospermiteañadir,editaroquitarcualquiercosa(atajodeteclado:F2tantoenWindowscomoenMac)Copy:nospermitecopiarelcódigo(outerHTML),elselector(yaveremosloquesignificacuandoveamosCSS),elXPath (esunlenguajequenospermitebuscaryseleccionarelementosteniendoencuentalaestructurajerárquicadelcódigo),cotarycopiarelelemento.Ocultarelemento:cambialavisibilidada"novisible"usandoCSS.

1

2

3

Pestañaelements

46

Deleteelement:permiteeliminarelelemento(atajodeteclado:SuprimiroBorrar).:active,:hover,:focus,:visited:nospermitecambiarelestadodelelemento(estolousaremosenelapartadodeCSS)ScrollintoView...:encasodesernecesariosehacescrollhastaquesemuestreelelemento.Breakon...:nospermiteestablecerpuntosdeparadaindicandoquesedebedetenerlaejecucióndecualquiercódigoJavaScriptsi:

Semodificaalgunodesushijos.Semodificaalgúnatributo.Osiseeliminaelcódigo.

Buscar:NospermitebuscarcualquierpalabradentrodelDOM(atajodeteclado:Ctrl+FenWindowsóCmd+FenMac).Jerarquía:nosmuestratodoslosancestrosdelelementoynospermiteseleccionarlos.

Loscambiosquehagassobreestapestañanoseguardarányaquenoestamosmodificandoelficherodecódigo sinoelDOM(yyahemosvistoladiferencia),portantoalrefrescarlapáginatodosloscambiosdesaparecerán.

ParamejorartuproductividadterecomiendoquedevezencuandoconsulteslosatajosdetecladodelpanelElements,comoporejemplo:

Windows/Linux Mac Función

Ctrl+Z Cmd+Z Deshacerloscambiosrealizados

Ctrl+Shift+C Cmd+Shift+C

AbrirDevToolsconlaherramientapara"Inspeccionarelementos"activadapordefecto

←,→,↑,↓ ←,→,↑,↓ NavegarporloselementosdelDOM

ElpanelquesalealaderechaeseldelcódigoCSSqueselehaaplicadoalelementoseleccionado,peroestoyaloveremosmásadelante.

Aclaraciones:1.PuedesencontrarladefiniciónformaldelDOMenlapáginadelW3C.2.UsandoJavaScript,omedianteunaextensióndelnavegadorporejemplo3.PuedesencontrarladefiniciónformaldeXPATHenlapáginadelW3C4.Avecesescucharás"códigofuente"enlugardecódigo,sonsinónimos.

4

Pestañaelements

47

PestañasourcesLapestaña"Sources"nosmuestralasfuentesdecontenidoquesehanutilizadoparaconstruirlapágina.Desdeestapestañapodemosescribirymodificarficherosqueesténvinculadosanuestrodiscoduro,peroveremoscómohacerestoenlasiguientelección.

Empecemospordescribirlosdistintospaneles:

Sources:aquíencontraremosporcadadominiodesdeelcualnuestronavegadorhayaobtenidorecursos (HTML,CSSoJavaScript)unajerarquíadeficheros.Haciendoclicencualquieradeellosseabriráelcódigoenunpanelderecho.Contentscripts:aquíseencuentranficherosJavaScriptsimples(scripts)implementadosdesdelasextensionesdeGoogleChrome.Snippets:estapestañanospermitealmacenarpequeñostrozosdecódigoreutilizables(snippets)escritosenJavaScriptquepodremosejecutaroreutilizar(valgalaredundancia)encualquierpágina.Depurador:estepanelnosayudaráahacerunseguimientopasoapasodelaejecucióndenuestrocódigoJavaScriptparaencontrarerrores,veremoscomousarloenloscapítulosdeJavaScript.

Aligualqueenlalecciónanterior,terecomiendoqueguardesenunlugarsegurolosatajosdetecladodelpanelSourcesydevezencuandolosrevisesparaaumentartuproductividad.

PaneldecontenidoElpaneldecontenidonosofreceuneditordecódigoquedisponeadicionalmentedeotrosatajosdeteclado.

1

2

Pestañasources

48

Esimportantesaberque:adiferenciadeloscambiosdelDOM,enlapestaña"Elements"parapoderverloscambiosreflejadosenlapáginaqueestamosviendoesnecesarioguardarloscambiosyrefrescarlapágina.

Encuantoalosatajosmegustaríadestacarcincoqueusaremosconmuchafrecuencia:

Windows/Linux Mac Función

Ctrl+F Cmd+F Buscar(yadicionalmentereemplazar)textodentrodeunfichero

Ctrl+S Cmd+S Guardarunfichero

Ctrl+R,F5 Cmd+R Refrescarlapágina

Ctrl+P Cmd+P Buscarficherospornombre

Ctrl+P+:num Cmd+P+:num Accederdirectamenteaunnúmerodelínea

Porúltimo,laopción"Pretyprint"veremosqueesespecialmenteútilcuandoestemosdepurandobibliotecasJavaScriptminificadas(comprimidas),aunquedemomentonotepreocupesporesto.

Recursosyaclaraciones:1.NormalmentemediantepeticionesHTTPaunquepuedequetambiénmediantelasextensionesdeChrome.2.EnesterepositoriodeGithubpodrásencontrarunacoleccióndesnippets.

Pestañasources

49

ConfiguraciónAhoravamosavercómopodemosconfigurarGoogleChromeparapodermodificarficherosqueseencuentrenennuestrodiscoduro.

Parahacerestousaremoslos"Workspaces",estosnospermitiránrealizarcambiospersistentesennuestrocódigosintenerqueejecutarotroeditordecódigo.

Paraellovamosaseguirlossiguientespasos:

1. Creamosunacarpeta(deprueba)ennuestrodiscoduro(porejemplo"html").2. Creamosunficherovacíodentrodelacarpetallamado:"index.html"3. AbrimoselficheroconGoogleChrome4. AbrimoslasDevToolsynosvamosalapestaña"Sources"5. Hacemosclicenelpanelizquierdosobrelarutadeldirectorioyseleccionamos"Add

FoldertoWorkspace":

6. Yporúltimopulsamos"Allow"paraautorizaraDevToolsarealizarcambiospersistenteseneldiscoduro:

Nota:SinosequivocamosalañadirundirectorioalWorkspacepodremoseliminarlosimplementepulsandoconelbotónderechosobreeldirectorioyseleccionandolaopción"RemoveFolderfromWorkspace".

Ahoratenemosque"mapear"(vincular)elrecursoquehaobtenidoelnavegadorconelficherodeldiscoduroquequeremosmodificar(osea,conélmismo),paraello:

1. Hacemosclicconelbotónderechosobreelnombredelfichero(index.htmlquecuelgade"file://")

1

Configuración

50

2. Elegimoslaopción"MaptoFileSystemResource":

3. Seleccionamoselficherodentrodelespaciodetrabajo(Workspace).4. Yrefrescamoslapágina.

YyaestamoslistosparaempezaraprogramarusandolasChromeDevTools.

Tambiénpuedesconsultarlaslimitacionesdelos"Workspaces",peronotepreocupesporellasyaquenonosafectaránenestecurso;porejemplo,loscambiosenlapestaña"Elements"noseránpersistentes(lógicoyaqueloqueestamoscambiandoeselDOM,quecomovimosanteriormenteesdinámico,oseaquevacambiando).

GestióndeficherosUnavezhechotodoestopodemosañadiryeliminarficherosdirectamentedesdeDevTools:

1. Añadirficheros:pulsandoconelbotónderechosobrelacarpetayseleccionando"NewFile".

2. Eliminarficheros:pulsandoconelbotónderechoyseleccionando"Delete"

Sinembargonopodemoscrearyeliminardirectorios,estolotendremosquehacerdirectamentedesdelacarpetaquehemoscreadoennuestrodiscoduro.

Aclaraciones:1.Apesardequenovamosausaraúnunservidorweb,lollamaremosasíparairacostumbrándonosaestenombre.Pordefectolosservidoreswebcuandorecibenlapeticióndeunrecursoynoseindicaexplícitamenteelnombredelrecurso,buscaenlacarpetaunficheroconnombre"index.html",ylodevuelveencasodeencontrarlo.

Configuración

51

EjercicioEjerciciotipotestdeautoevaluación-Lección3

Unavezmás,recuerdaquepuedesrepetirlotantasvecescomoquieras.

Elejercicioprácticoesmuysimple,tansóloconsisteenañadirelcódigoquehemosvistoenelcapítulo"HTML5:Primerospasos>Etiquetasbásicas"(lopuedesencontraralfinaldeestalección)alficheroindex.htmlquehemoscreado.

Luegoquieroquetefamiliaricesunpococonlaspestañasquehemosvistoeintentes:

Usarlosatajosdetecladoenlapestaña"Sources".BuscarlapeticiónHTTPqueseenvíaalcargarlapáginaen"Network".Editarelcódigoenlapestaña"Elements":

ModificaelcontenidoyelHTMLdelaetiquetah1EliminaunaetiquetaReordenaotraetiquetaHazunabúsquedayencuentraporejemplo:RoviraHazclicenlajerarquíaparaaccederalelemento"ul".EjecutaelemuladoryactivalaopcióndeAppleiPhone5.

Ejercicio

52

<!DOCTYPEhtml><!--TODO:añadirlaetiquetalang--><html><head><metacharset="UTF-8"><title>Ejemploconetiquetasbásicas</title></head><body><h1>EtiquetasHTML</h1><p>EsteejemplomuestracómocombinaralgunasdelasetiquetasmásbásicasdeHTML5.<br>Recuerdaque<strong>esimportanteentenderladiferenciasentreellas</strong>.</p>

<h2>Etiquetaul+li</h2><p>SilistamospersonasnominadasalosOscars,dadoqueelordennoalteraelsignificado,debemosusar<em>ul</em>.</p><ul><li>DavidVerdaguer</li><li>JesúsCastro</li><li>IsraelElejalde</li><li>DaniRovira</li></ul>

<h2>Etiquetaol+li</h2><p>Enelcasodequeestemoslistandoelementosdondeelordenesimportante,comoporejemplolaclasificacióndeunmundialdefútbol,debemosusar<em>ol</em>.</p><ol><li>España</li><li>PaísesBajos</li><li>Alemania</li><li>Uruguay</li></ol></body></html>

DudasSihayalgoquenotehayaquedadoclaropuedespreguntarcualquierdudaenlosissuesdelproyectoenGithub.

Ejercicio

53

Ejercicio

54

RecursosDefinicionesquehemosvisto:

DefinicióndeDOMporelW3CDefinicióndeXPathporelW3C

RecursossobreChromeylasDevTools:

DocumentaciónparadesarrolladoresdeGoogleChromeChromeDevToolsOverviewAtajodetecladodeChromeDevToolsChuletadeatajosdetecladoenChromeFuncionamientodelcacheadoConfiguracióndelWorkspaceenChromeDevToolsLimitacionesdelWorkspacedeChromeDevToolsContentscriptsenChromeDevToolsSnippetsenChromeDevToolsColeccióndesnippetsparaChromeDevTools

SiestuprimeravezconDevToolsnotelorecomiendo,perosiquieres,puedesencontrarmásinformaciónsobrecómosacarlemásprovechoaGoogleChromeenlossiguientescursos:

DiscoverDevTools-CodeSchool.comWebsitePerformanceOptimization-Udacity.comBrowserrenderingoptimization-Udacity.com:aprendecómofuncionainternamenteGoogleChromeycómooptimizarellayout(conocimientosenCSSrequestidos).

Recursos

55

HTML5:MiCurriculumVitaeEnestecapítulovamosaaprendertodolonecesarioparacrearelcódigoHTMLdeunapáginaconnuestroCV,yenelsiguienteaprenderemoscómopodemossubirnuestrocurriculumaunrepositoriodeGithubyaponerloaccesibleparacualquierpersonausandogh-pages.

PortantoalterminaresteapartadotendremosquehabercreadounapáginaHTMLsimilaraesta:

HTML5:MiCurriculumVitae

56

AsíquevamosaempezarporverloselementosHTMLquenosfaltanporaprenderparapoderllegarahacerla.

HTML5:MiCurriculumVitae

57

Etiquetas-Parte2Ahoravamosaverlasetiquetasbásicasparatrabajarcon:enlacesohipervínculos,imágenes,tablas,formularios,separadoresyotrasconsideraciones.

Estaveztampocoveremostodoslosatributosposiblesaunqueañadiréenlacesaladocumentación:

EnlacesohipervínculosUnadelascaracterísticasmásdestacablesdeHTMLeslaposibilidaddeenlazarunaspáginasconotras,parahacerestoutilizamoselelemento"a"conelatributo"href"(HypertextReference).Porejemplo:

<ahref="http://www.cursohtml5desdecero.com">CursodeHTML5desdecero</a>

Hay3tiposdeenlaces:

Absoluto:esunenlacequeincluyetodaslaspartesdeunaURLcomovimosenelcapítulo1:scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]

Relativo:hacereferenciaaunrecursoqueseencuentraenunaposiciónrelativaanuestraURL,asípodemosestablecerrutasrelativas,porejemplo:

<ahref="img/imagen1.jpg">enlaceaunaimagen</a>

DondeindicamosquesiporejemplolaURLactualeshttp://www.cursohtml5desdecero.com/leccion1,laimagenseencuentraenhttp://www.cursohtml5desdecero.com/leccion1/img/imagen1.jpg,ysiqueremoshacerreferenciaaunrecursoqueseencuentraenunnivelsuperiordel"path"lohacemosusando"../",porejemplo:

<ahref="../img/imagen1.jpg">enlaceaunaimagen</a>

QueharáreferenciaalasiguienteURL:http://www.cursohtml5desdecero.com/img/imagen1.jpg(eliminamosleccion1).Ancla(oanchor):adiferenciadelosdosanteriores,esteenlaceseutilizarparaindicarunelementodentrodelamismapáginaqueestamosviendo.ParaellotenemosqueexplicarunnuevotipodeatributoquetienentodosloselementosenHTML,elid

Etiquetas-Parte2

58

(uniqueidentifier),comosunombreindicaesunidentificadorúnicoyportantonopodemosponerleadoselementosHTMLelmismoid.Luegoparaañadirunhipervínculoaesteelementosólotenemosqueestablecerelatributohrefdelenlacealiddelelementoprecedidodeunaalmohadilla(#),porejemplo:

<ahref="#leccion1">Lección3</a>...<!--aquívendríatodoelcontenido--><h2id="leccion1">Lección3</h2>

EstoestamosacostumbradoaverloenlaWikipedia,porejemplo:https://en.wikipedia.org/wiki/Hyperlink#Hyperlinks_in_HTML

Ver:Lección2-Snippet6

ImágenesParamostrarunaimagenenunapáginatenemosdosformasdehacerlo,unaesusandoelelementoimgyotrasesmedianteCSS(queveremosenelcapítulocorrespondiente).

Estaetiquetasólorequierededosatributosobligatoriosqueson:src(desource)yelotroesalt(dealternative),porejemplo:

<imgsrc="http://www.cursohtml5desdecero.com/assets/images/html-css-js.png"alt="LogodeHTML5">

Comopodemosdeducirdelcódigoanterior,elatributosrclousaremosparaindicarlaURL(absolutaorelativa)alaimagen,yaltcomoeltexto(alternativo)quemostraráelnavegadorencasodenoencontrarlaimagen .

Ver:Lección2-Snippet7

TablasPodemoscreartablasenHTMLusandoelelementotable .Paraellocomomínimotendremosqueindicarlasfilasylascolumnasusandoloselementostr(tablerow)ytd(tabledata)respectivamente,asíporejemplo:

1

2

Etiquetas-Parte2

59

<table><tr><td>Fila1,columna1</td><td>Fila1,columna2</td></tr><tr><td>Fila2,columna1</td><td>Fila2,columna2</td></tr></table>

Quedaríaunresultadocomoelsiguiente:

Fila1,columna1 Fila1,columna2

Fila2,columna1 Fila2,columna2

Comopodemoscomprobarlascolumnas(td)siemprevancontenidasdentrodelasfilas(tr).Encasodequereragruparceldasdeunamismafilaocolumnaloharemosasí:

Mismafila:lausaremoselatributocolspan(columnspan=númeroceldasaabarcar)Agrupardosceldasdeunamismacolumnausaremoselatributorowspan(rowspan=númerodeceldasaabarcar)

Porejemplo:

<table><tr><td>Fila1,columna1</td><tdcolspan="3">Fila1,columnas2,3y4</td></tr><tr><tdrowspan="2">Fila2,columna1+Fila3,columna1</td><td>Fila2columna2</td><td>Fila2columna3</td><td>Fila2columna4</td></tr><tr><td>Fila3columna2</td><td>Fila3columna3</td><td>Fila3columna4</td></tr></table>

Quedandoalgocomoesto:

Etiquetas-Parte2

60

Comopodemosverelatributoafectaalasceldasdelassiguientescolumnas/filasyelvalorindicacuántasceldasdebeabarcar.

Ver:Lección2-Snippet8

FormulariosVamosahablarmuybrevementedelosformularios,algunosdeloselementosydesuspropiedades:

form:seráelelementopadrequeanidetodosloselementosHTMLquerepresentaránloscamposdenuestroformulario,incluídoelbotóndeenviar.

action:indicalaURLalaqueseenviarálapeticiónHTTPcontodalainformacióndelformulariomethod:indicasilapeticiónHTTPseráGEToPOST

input:permiteintroducirdiferentestiposdecampodeformularioenbasealvalordelatributotype.Enfuncióndelvalorindicadoentypedispondremosdeunosatributosuotros(entotalhay30,peronotodosaplicanatodosloscasos):

type(obligatorio):estevalorpuedetenermuchosvalores:text,email,checkbox,color,date,file,hidden,etc.enfuncióndeltipodecampoquequeramos,losnombressonbastanteauto-explicativos.id:esteatributoesobligatoriosienelelementolabeltieneunatributofor,entalcasodeberácontenerunidentificadorúnico enlapágina.name:esteatributoesopcionalyrepresentaelnombreasignadoalcampocuandoseenvíelapeticiónHTTP.value:estevaloresopcionalperorepresentaelvalorqueseasignaráalcampocuandoseenvíelapeticiónHTTP.

select:nospermitecrearunalistadesplegabledeopciones,cadaopciónestarácontenidacomohijadentrodeunelementooption.

id:igualqueelelementoinputname:igualqueelcampoinput

option:nossirvepara"encapsular"cadaopcióndelalista.value:igualqueelatributovaluedelcampoinput.

textarea:representauncampoquenospermiteintroducirtextosconsaltosdelíneaincluidos,normalmenteseusacuandohayqueintroducir:descripciones,biografías,

3

Etiquetas-Parte2

61

etc.id:igualqueelelementoinputyselect.name:igualqueelcampoinputyselect.

label:seusaparaespecificarlaetiqueta(onombre)delcampodelformulario.for:tienequetenerelmismovalorqueelatributoiddelcampo(input,selectotextarea)alquehacereferencialaetiqueta.

button:representaunbotónyeltextodelbotónestárepresentadoporsucontenido.type:defineelcomportamientodelbotóncuandoestáactivadoypuedecontenertresvalores:submit,reset,button

Existenmuchosotrosatributosquenoveremosdadoquenolesdaremosusoenestecursoyaqueparasacarleelmáximoprovechoseríanecesariotenerconocimientosenprogramación.

Porúltimoañadirqueelelementoinputnorequiereunaetiquetadecierre(oloqueeslomismo,queestáautocontenido).

Aquítenemosunejemplodeformulario:

<formaction="miScript.php"method="GET"><labelfor="to">Para:</label><inputid="to"type="email">

<labelfor="topic">Temática:</label><selectid="topic"name="topic"><option>--Eligeuntema--</option><optionvalue="proposal">Propuesta</option><optionvalue="report">Reporte</option><optionvalue="other">Otro</option></select>

<labelfor="subject">Asunto:</label><inputid="subject"name="subject"type="text">

<labelfor="body">Cuerpo:</label><textareaid="body"name="body"></textarea>

<buttontype="submit">Enviar</button></form>

Quenosdarácomoresultadoalgoasí:

Etiquetas-Parte2

62

Comoveslosestilospordefectoseránmuypocoatractivos,peronotepreocupes,yaaprenderemosasolucionarestousandoCSS.

Porúltimocomentarqueenmuchosdeloselementos podemosañadir(opcionalmente)otrosatributoscomo:

requiredaunelementoparaqueelnavegadorseencarguedevalidarqueestecampoestárellenoreadonlysiqueremosqueseadesólolecturaplaceholdersiqueremosqueaparezcauntextodeayudapararellenarelcampovalueparaintroducirunvalorpordefectoenelcampo

Porejemplo:

<labelfor="to">Para:</label><inputid="to"type="email"placeholder="tu@correo.com"required>

<labelfor="subject">Asunto:</label><inputid="subject"type="text"value="Formulariodecontacto"readonly>

Ver:Lección2-Snippet9

SeparadoresExisteunelementoquenospermiteañadirunseparador(unalíneahorizontal),esteelementoeshr.

Ver:Lección2-Snippet10

OtrasconsideracionesParaterminarestecapítulohayunaúltimacosaquemegustaríacomentar:

EnHTMLseignorantodoslosespaciosapartirdelprimero,porlotantonuncapodremos(nisedebe)alinearusandoespacios.LasentidadesHTML(HTMLentities)seusanparapintarpalabras,caracteresosímbolosreservadosoquepuedequenotengasentutecladocomoporejemplo:<,>,©,&,€,etc.Existen1446entidadesreservadasquepuedesconsultarenlapáginadelW3C.(ver:Lección2-Snippet11)

PararepresentarlaentidadesHTMLseusaelsiguienteformato:

4

Etiquetas-Parte2

63

&código_de_la_entidad;

VeamosunejemploparaentendermejorporquéexistenlasentidadesHTMLycómoseusan.

Imaginemosqueestamosescribiendounlibrocomoesteynecesitamoshablarsobrelaetiqueta<hr>:

<p>Laetiqueta<hr>seutilizapara...</p>

EnestecasocuandoelnavegadorestéintepretandoelcódigoHTMLencontrará"<hr>"yenlugardemostrarlacadenadetexto(queesloquequeremos)nosmostraráunseparadorhorizontal.

ParaevitaresteproblemausaríamoselsiguientecógidoHTML:

<p>Laetiqueta&lt;hr&gt;seutilizapara...</p>

Enestecasohemosmodificadoelsímbolo"menorque"(LowerThan)porlaentidadHTMLlty"mayorque"(GreaterThan)porgt,asíelnavegadorpodrárepresentarlosinningúnproblema.

Enalgunaocasiónpuedequenaveguesporunapáginaconunacodificación(encoding)quenosoportelosacentosagudos(á,é,í,ó,ú),enesecasousaránlasentidadesHTML(&aacute;,&eacute;,&iacute;,&oacute;,&Uacute;)pararepresentarlos.Porcierto:"acute"eningléssignifica"agudo".

Aclaraciones:

1. PuedequenoseencuentrelaimagenporquealguienlaborredelservidoroporquenosequivoquemosalintroducirlaURL.

2. Lastablassólodebenusarseparamostrardatosquetengansentidoenunatablaynuncaparamaquetar.

3. Conestonosreferimosaunnombre(ocadenadetexto)quenocontenganingúnotroelemento,porejemplonopuedehaberdoselementosconid="email".

4. EnladocumentacióndelW3Cpodemosverquéatributosadmitecadaelemento:input,textarea,select,etc.

Etiquetas-Parte2

64

Etiquetas-Parte2

65

Anidación-Parte2EnelprimercapítulodeHTMLvimosquelasetiquetassepuedenanidar,perocomentamosquenotodaslasetiquetassonanidablesentresí,porejemploestoseríaincorrecto:

<body><head></head></body>

Yaqueunaetiquetabodynopuedeconteneraotrahead,pero...¿cómopodemossaberquéetiquetassonanidables?.

Conlaprácticaaprenderáalgunasanidacionesqueestánprohibidasydesarrollarásunacapacidadderazonaralgunasanidacionesobvias,peroalprincipiopodrásservirtedetresrecursosprincipalmente:

LapestañaElementsdelnavegador.Comodecíamoselnavegadoresunprogramabastantecomplejo,yentreotrascosasqueseencargaesdeconstruirelDOM.SiduranteelprocesodeconstruccióndelDOMelnavegadorseencuentraunaanidaciónincorrectaintentaráresolverla.PoresosiinspeccionamoselDOMdenuestrapágina,podremosversielpropionavegadorhaencontradoetiquetasmalanidadasynoshamodificadoelcódigo.ElvalidadordecódigodelW3Cqueveremoscómousarenelsiguienteapartado.PeronuestroprincipalrecursodebeserlaespecificacióndeHTML5delW3C,ahoraveremoscómousarla.

UsarlaespecificacióndelW3CEnladescripcióndetodoelementoHTMLnosencontraremosunapartadoquesellamaContentmodelqueespecificaquétipodeetiquetassepuedenanidar,porejemplo:Metadatacontent,Flowcontent,Sectioningcontent,Headingcontent,Phrasingcontent,...

Porejemploelelemento"li"queusábamosparaespecificarunelementodeunalista(ListItem)indicaquesu"Contentmodel"es"Flowcontent",sihacemosclicenelenlaceverássqueestosignificaqueelelementosoportacasitodosloselementos:a,area,article,b,blockquote,br,div,em,footer,form,h1,h2,h3,h4,h5,h6,header,hr,i,iframe,img,input,etc.

Anidación-Parte2

66

Sinembargosivasalaespecificacióndelelemento"p"verásquesumodeloesde"Phrasingcontent",queadmitemuchasetiquetasperoporejemplonoadmite:"ul","ol","hr",etc.

Estaeslamejorformadesaberquéetiquetassonanidablesycualesno.

Anidación-Parte2

67

ValidaciónQueelcódigosemuestreennuestronavegadorwebcomoqueríamosnoimplicanecesariamentequelohayamosescritobien.Enmuchasocasioneselnavegadorescapazdedetectarerroreshumanosycorregirlosdemaneraautomáticaparaqueelusuarioveabienlapágina,peroestonoessiempreasí.SiqueremosasegurarnosdequenuestrapáginaestácorrectamenteescritapodemosusarelValidadordeHTMLdelW3C,queademásencasodeencontrarerroresnosdarápistassobrecómoresolverlos.

Siabreselenlaceverásquetienes3formasdevalidarcódigo:

1. ValidateURI:quetepermiteintroducirlaURLdeunapáginaparacomprobarsucódigo.Comonosotrosaúnnohemosalojadonuestrapáginaenningúnservidorwebnousaremosestaopción(aún).

2. ValidatebyFileUpload:quenospermitesubirunficheroHTML3. ValidatebyDirectInput:quenospermiteintroducirelcódigodentrodeunelemento

textarea.

Usaremoslasopciones2y3hastaqueenlasiguientelecciónaprendamoscómoalojarnuestrapáginaenunservidorwebaccesibledesdeInternet.

Aunqueelnaegadorseacapazdesolucionaralgunosdenuestroserrores,esimportantecrearcódigoválidoporque:

Aunqueelnavegadorseacapazderesolverunproblema,notodoslosnavegadoressoniguales,yportantopuedequealgunosnoloresuelvanolasoluciónqueapliqueprovoqueunefectonodeseado.Hacetupáginamásaccesiblecomoveremosacontinuación.

AccesibilidadVamosaveresteapartadomuyporencima,peronoqueríadejarlocompletamentedelado.

Existeunainiciativaquetienecomoobjetivohacerlawebmásaccesible,especialmenteparapersonascualquiertipodediscapacidad:visual(completaoparcial),auditiva,cognitiva,etc.Estainiciativasellama:WebAccessibilityInitiative-AccessibleRichInternetApplications(WAI-ARIA)yestáncreadounestándarqueactualmenteseencuentraenlaversión1.1.

Validaciónyaccesibilidad

68

Cualquierapuedeaplicaralgunasprácticasdeaccesibilidadconpocoesfuerzo,comoporejemplousarloslandmarks,quenosonmásqueatributosqueañadimosalasetiquetasparaindicarlaspartesmásrelevantesdenuestrapáginacomo:elmenúdenavegación,eláreadecontenidoprincipalocontenidocomplementario .

SihablasinglésterecomiendoverestacharladeLeonieWatson,unamujerciegaexplicandolaimportanciadelaaccesibilidad.

Porúltimo,siestosargumentonosonsuficientes,megustaríaañadirquehaciendounapáginaaccesiblehacemosqueestaestémejorposicionadaporlosbuscadores,dadoquealasarañas delosmotoresdebúsquedaafindecuentastienenunaformadenavegar pornuestrapáginaigualquelaspersonasconproblemasdeaccesibilidad.

Aclaraciones:1.Pequeñovídeoexplicativoeningléssobrecómousarloslandmarks.2.Las"arañas"(spiders),botsowebcrawlers,soneselnombreconvencionalqueledamosalosprogramasquesededicana"rastrear"porInternetyqueusanentreotroslosgrandesbuscadoresparabuscarnuevocontenidoycualificarloparadespuésdevolverloensusresultadosdebúsqueda.3.SitiowebexplicandocómofuncionaGooglebot(laarañadeGoogle).

1

2 3

Validaciónyaccesibilidad

69

ConvencionesAntesdeterminarmegustaríaexplicartealgunasdelasprincipalesconvencionesobuenasprácticasquedeberemosdetenerencuentaalahoradeescribircódigoHTML:

LosnombresdeloselementosHTMLysusatributossedebenescribirenminúsculas

<!--MAL--><p><IMGSRC="html5.gif"ALT="LogoHTML5"></p><!--BIEN--><p><imgsrc="html5.gif"alt="LogoHTML5"></p>

LosvaloresdelosatributosenHTMLdebenirentrecomillasdobles:

<!--MAL--><imgsrc='html5.gif'alt='LogoHTML5'><!--BIEN--><imgsrc="html5.gif"alt="LogoHTML5">

Laindentaciónsedebehacercon2espacios(prácticamentetodosloseditoresdecódigopermiteconfigurarestevalor).

<p><imgsrc="html5.gif"alt="LogoHTML5"></p>

Nointroducirespaciosantesodespuésdelsigno"igual":

<!--MAL--><imgsrc="html5.gif"alt="LogoHTML5"><!--BIEN--><imgsrc="html5.gif"alt="LogoHTML5">

UsarUTF-8comoencoding.Nocerrarelementosautocontenidos,porejemplousa<br>enlugarde<br/>Evitaelusodeestilosenlínea(atributostyleloveremosenelsiguienteapartado)EvitaelusodeentidadesHTMLsiemprequeseaposible(salvoporejemplopara<y&)

Convenciones

70

<!--MAL--><h1>P&áacute;ginasobre&lt;HTML5&amp;CSS3</h1><!--BIEN--><h1>Páginasobre&lt;HTML5&amp;CSS3</h1>

Especificaelatributolangenelelementohtml:

<htmllang="es">

Especificasiempreelatributoforcuandoañadasunelementolabel

<labelfor="field-email">email</label><inputtype="email"id="field-email"name="email"value=""/>

InternetExploresoportaelusodeunaetiquetadecompatibilidadmetaindicandocómotratarelcódigo,usarsiemprequesepueda:

<metahttp-equiv="X-UA-Compatible"content="IE=Edge">

Estarecopilaciónhasidoextraídadealgunasguíasdeestilo.

HTML(5)StyleGuideandCodingConventionsHTMLcodingstandards-CKANGoogleHTML/CSSStyleGuideCodeGuideby@mdo

Otrasconvenciones

Nombresdeficheros

Esrecomendableseguirlassiguientesconvenciones:

Establecerlosnombresdelosficherosenminúsculas,Windowsnohacedistinciónentremayúsculasyminúsculasperootrossistemassí,yestopuedeprovocarqueunarutafuncioneenunsistemaoperativoperonoenotro.PorejemplositenemosunficherollamadoLogo_HTML5.jpgyunapáginaquehacereferenciaaélcon<imgsrc="logo_html5.jpg"alt="LogoHTML5">.EstofuncionaráenWindowsperoenunsistemabasadoenUnix(LinuxoMac)nofuncionará.Daleunnombrequerepresenteloquecontiene,estonosóloporusabilidadsinoporposicionamiento(SEO )Enlugardeespaciousaunguión"-".Nuncausesacentosnicaracteresespeciales:ñ,",",etc.

1

Convenciones

71

Extensionesdeficheros

Esrecomendablequecadatipodeficherotengaunaextensión:

HTML:".html"JPEG:".jpg"GIF:".gif"PNG:".png"

Estructuradedirectorios

Conformecrezcatuproyectoagradecerástenerunaestructuralógicaqueteayudeaorganizartodoslosficheros.BasándomeenestarespuestaenStackoverflow terecomiendoseguirestaestructura :

resources/css/main.cssimages/logo-html5.jpgjs/vendors/jquery/jquery.min.jsindex.html

Donde:

resources:esundirectorioqueincluyeloselementosquetúhascreadoyquecontienetantosdirectorioscomotiposderecursos(css->estilos,images->imágenes,js->JavaScript).vendors:paraalmacenarrecursoscreadosportercerosYenelficheroraízcolocarlosficherosHTMLquenecesites.

Aclaraciones:1.SEOeselacrónimodeSearchEngineOptimization,oloquevieneaserlomismo:OptimizaciónenMotoresdeBúsqueda.Porejemplo,estableciendocorrectamentelosnombresdenuestraimágenes,esmásprobablequeaparezcamosenbuenasposicionesenGoogleImages.2.Stackoverflowesunodelossitiosdereferenciadondepodrásencontrarmuchasdudasdeprogramación,loquelohacerealmenteinteresanteeselsistemadevaloracionesquepermitediscernirlas"buenas"delas"malas"respuestas.

23

Convenciones

72

3.Notodoslosproyectossedebenorganizarigual,enmuchasocasionesdependerádelastecnologíasqueestésusando,peroparaestecursoestaestructuraserásuficientementebuena.

Convenciones

73

ErroresfrecuentesEsteesunlistadodealgunodeloserroresmásfrecuentesenHTML:

NoponerelencodingUTF-8haráquealgunoscaracteressemuestrendemaneraextrañaPonerdosidentificadoresiguales(suelepasaralcopiarypegarcódigo).EstonosdaráproblemasdevalidaciónyalintentaraccederalelementousandoJavaScriptIntroducir&enlasURLs;ensulugarsedebeusar&Anidamientoincorrecto,yaseapornocerrartagsenelordencorrectocomoporanidarelementosdebloqueenelementosenlinea,porejemplo:<ahref="#"><h2>Título</h2></a>

Utilizarloselementos<b>o<i>paradarleestiloUsarmúltiplesconsecutivamenteenlugardeusarestilos

Estossonsóloalgunoserroresfrecuentes,peroenningúnlibro,manual,tutorialocursoencontrarástodosloserroresquetepuedensuceder,poresoesimportantequeaprendasabuscarlassolucionesalosproblemasquetevayansurgiendo,misconsejos:

LeeatentamenteelerrorUsaGoogleparabuscartuerror(aserposiblebuscaeninglés)Intentareducirlafrasealaspalabrasclavecomoellenguaje,elnúmerodeerror,...

Cuandoencuentresalgunapáginadondeparezcahaberunarespuesta,fíjateen:

Quelafechadelarespuestasearelativamentenueva(nomásde2años)BuscaenladocumentaciónoficialSiestásenStackoverflowrevisaelnúmerodevaloracionespositivasdelarespuesta

Fíjateenlasiguienteanimación:

Erroresfrecuentes

74

Aquísesigueelprocesorecomendadosalvoquesehaseleccionadounarespuestaquetieneunasolavaloración.

CómopedirayudaLomásnormalesquecualquiererrorqueteocurracuandoestésempezandoyalohayapreguntadootrapersona,insisteenlabúsquedaysidespuésdeunbuenrato(~30min)noencuentraselerrorpreguntaencualquierforoycomentaloqueteocurre(eninglés),perounosconsejos:

EspecificaqueyahasbuscadoanteselerrorExplicacómolohasbuscado(porsitepuedendaralgúnconsejoparamejorartuformadebuscar)Yfinalmentehazlapreguntadandoelmáximonúmerodedetalles

Esimportantequecuandopreguntesalgoelrestoveaquetehasmolestadoeninvestigarpreviamenteytambiénqueteesfuerzasenexplicarloquetepasa,sinoesprobablequealguientedeunamalarespuestaporquepiensequenotehasmolestadoensolucionarelproblemaportimismo.

Erroresfrecuentes

75

Ejercicio

Ejercicio

76

RecursosCanIUse?MozillaCDN

Recursos

77

GithubEnestalecciónvamosaaprenderausarGithub,unadeesasherramientasquenoconoceshastaquealguientehablamaravillasdeella,ycuandolaentiendesseconvierteenunaherramientasinlaquenopuedesvivir.

Paraquetehagasunaidearápida,Gitesunsoftwaredecontroldeversiones,loquesignificaquenosvaaayudarguardar"unafoto"(versión)decómoestánuestrocódigoenunmomentodadoysidespuésdehacervarioscambiosnosarrepentimos,ovemosquealgoseharotoynosabemossolucionarlo,podervergráficamentequélineasyquéficheroshancambiadoparaayudarnosaencontrarelerror,ysifuesenecesariodeshacerloscambioshastaaquelmomento.

PortantoconGitseacabóeltenermúltiplescopiasdeunacarpeta"porseguridad",esunaformamuchomáscómodadeevolucionarelcódigo.

GithubesunacompañíaamericanaquehacreadounawebdondepodremosmantenerunacopiadelcódigoqueestemosgestionandoconGityqueademásnosayudaahacermássencillocolaborarycompartirestecódigo.

Vamosaempezaracrearunacuentayteiréexplicandolosconceptosquetevanahacerfaltaentenderparaestecursosobrelamarcha.

Aclaraciones:1.GitHub,Inc.desarrollaunaplataformawebquetienevieneelmismonombreyquepermitetrabajarcolaborativamenterespositoriosenGit.Lacompañíafuefundadaen2008yyasehaconvertidoenelestandarmundialdefactoparaproyectosdesoftwarelibre,desvancandoaotrascomoGoogleCodeoSourceforge.Enestetiempoharecibido350millonesdedolaresdeinversión.

Git&Github

78

ConfigurarnuestracuentaVamosaempezarporcrearunacuentaenGithub.

Primerovamosalasección"Signup"ycompletamosnuestrosdatos:

Nota:ElusernamedefinirálaURLdenuestracuenta:http://github.com/username

Configurarnuestracuenta

79

Acontinuaciónelegimoselplangratuito:

Configurarnuestracuenta

80

Ahoravamosacrearunnuevorepositorio.Crearemosunrepositorioparacadaproyectoquevayamosacrear,paraquenoshagamosunaideatendremosunrepositorioporcadacarpetaraízquetengamosennuestrosdiscoduro.

AesterepositorioledaremosunnombrequeGithubtratarádemaneraespecial ,elnombredebeser:username.github.io,enmicasoraulEsri.github.io.

Luegopuedesponerleunadescripcióndelcontenidodelproyecto,porejemplo:MipáginapersonalenGithub.Yseleccionamosqueseráunproyectopúblico(elcódigoseráaccesibleporcualquierpersona).

1

Configurarnuestracuenta

81

Yyaestá,¡enhorabuena!,yatienesunacuentaenGithub.Cualquierpersonapodrávertodostusrepositoriospúblicosen:http://github.com/Username,enmicasomirepositoriosería:http://github.com/raulEsri,mirepositoriorealeshttp://github.com/hhkaos(elotrolohecreadosimplementeparahacerestetutorial).

Aclaraciones:1.ElcódigoquetengamosenesterepositorionoslosserviráusandounservidorHTTPatravésdeldominiohttp://username.github.io,porejemploenmicasoelrepositoriodewebcuentapersonaleshttp://hhkaos.github.ioyelcódigoestáenhttps://github.com/hhkaos/hhkaos.github.io.

Configurarnuestracuenta

82

Enviaryrecibircambios

InstalaryconfigurarGithubDesktopVamosaempezarpordescargar,instalaryconfigurarGithubDesktopqueesunaherramientagráfica quenosvaaayudaragestionarlasversiones.

Unavezdescargadoeinstaladoloabrimosynosidentificamosconnuestracuenta.

Unavezhechovolvemosalaopcióndeclonaryseleccionamoselrepositorioqueacabamosdecrear.

Estonospediráqueseleccionamosunacarpetaennuestrodiscodurodondesevaaclonarelrepositorio(secrearáunacarpetanuevaennuestrodiscodurolistaparacontrolarloscambios).Laseleccionamosyledamosa"OK".

Unavezclonadaelrepositoriovamosaverunaformabásicadeusarlo.

Enviaryrecibircambios

1

Enviaryrecibircambios

83

Pendiente

VerelhistóricodecambiosPendiente

Aclaraciones:1.MirecomendaciónesquehagaselcursogratuitoTryGitdeCodeSchoolparaaprenderausarGitdesdelalíneadecomandoscuandotehayasacostumbradoausarGit(yonuncausoningunaherramientagráfica).

Enviaryrecibircambios

84

FuncionalidadesIssues,readme,etc.

Funcionalidades

85

PublicarunawebenGithub

PublicarunawebenGithub

86

Colaborarconunproyectofork,pullrequest,issues

Colaborarconunproyecto

87

WIP(WorkInProgress)Estasecciónaúnestápendientedeescribir

Ejercicio

88

CSS:PrimeropasosCSSeselacrónimodeCascadingStyleSheet;estetambiénunlenguajedemarcadoquenospermiteaplicarestilosanuestroselementosHTML.

Enestecapítulovamosaaprender:

QuéesCSSycómolopodemosusarparaaplicarestilosQuéestilospodemosaplicaracadaelementoHTMLCómocombinarHTMLyCSSCómofuncionalaherenciadeestilos

CSS:Primerospasos

89

IntroducciónaCSSPorsiaúnnolosabes,megustaríaempezarcomentándotequealosprofesionalesquediseñanpáginasusandoHTMLyCSSselessuelellamarmaquetadoresweb.SiaunmaquetadorwebleañadimosconocimientosenprogramaciónconJavaScriptyapodemoshablardeunfront-enddeveloper.

Antesdeempezarahablardecódigomegustaríaexplicartedosaspectosmuyimportantesquevenimossufriendohistóricamentelosquenosdedicamosaestoysitiéndolomucho,tútampocotevasaescapar.

InconsistenciadeestilosNosésitehasdadocuenta,peroaunquetúaúnnohayasescritoaúnningunalíneadeCSS,lapáginaquehascreadoyaconteníaalgunosestilos,losestilospordefectoqueincluyeelnavegador.

EsmuyimportantequesiempretengasencuentaquecadanavegadorincluyeestilospropiospordefectoqueaplicaalosdistintoselementosHTML,porejemplo:

Loselementos<p>tienenestilosparaqueseproduzcaunsaltoentreelpárrafoyloselementosanterioryposterior.(peroladistanciapuedevariarentrenavegadores

Elelemento<strong>paraquesemuestreennegrita.

Loselementos<li>paraqueaparezcaunpuntoalaizquierdayunaligeraindentación.(peroelmargenpuedevariar)

Losencabezados<h1>,<h2>,etcparaquesemuestrendeuntamañomayorqueeldelresto(perolostamañospuedenvariar).

Etc

Estosucedeentodoslosnavegadores,elproblemacomovemosesquenotodosdefinenlosestilosexactamentedelamismamaneraysinotienesestoencuentadesdeelprincipiolovasasufrirenelfuturo.

Aunquelológicoseríaquetodoslosnavegadoressepusiesendeacuerdoendefinirunosestilospordefectoscomunes,yahemosasumidoqueestonovaapasarnunca,porestemotivoquieropresentarteReset.css,unahojadeestiloscomúnmenteusadapara

IntroducciónaCSS

90

uniformizarlosestilosentodoslosnavegadores,loquenosayudaráaqueelresultadofinaldespuésdeaplicarnuestrosestilosseanelmismoindependientementedelnavegadordesdelaquelaabramos.

SoporteaestándaresPorotroladoqueríacomentartequevamosaempezarcentrándonosenlaspropiedadesdeCSS3quevienenheredadasdelaversión2.1.

¿Porqué?,laversiónresumidaes:quéporevitartequebraderosdecabezainiciales.Laversiónextendidalahedejadocomoun"Anexo-Navegadoresyestándaressoportados".

MiprimerCSSHaymúltiplesformasdeañadirCSSanuestrapágina,unaformaesutilizandoelelemento<style>dentrodenuestoHTML,porejemplo:

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>MiprimerCSS</title><!--AquídefinimoslosestiloCSSparaestapágina--><style>h1{color:red;}</style><!--FindelCSS--></head><body><h1>Encabezado1</h1></body></html>

Deestemodoestamosleindicamosalnavegadorquequeremosquenoscoloreeeltextodetodosloselementosh1encolorrojo,paraellousamoslapropiedad"color"yestablecemossuvalora"red".

LosestilosaplicadosaunelementoenCSSsiempretienenqueestarenvueltosentrellaves("{}").Porcadapropiedaddefinida(enestecasocolor)tenemosqueterminarlalíneaconpuntoycoma.

Portantolosestilossedefinendelasiguientemanera:

IntroducciónaCSS

91

nombre-de-la-etiqueta-html{propiedad-css:valor-de-la-propiedad;propiedad-css-2:valor-de-la-propiedad-2;}

Unabuenaprácticaestabularlaspropiedadesdeunelemento(igualquesehaceconelcódigoHTML).

Siemprequeseuseelelemento"style"debeestaranidadodentrodelelemento"head",aunquesiloponemosdentrodel"body"lomásprobableesquefuncionebien,peronoseríaválidosegúnelW3Cyportantonopasaríaelvalidador.

SnippetsinteractivosPuedesaccederalossnippetsinteractivosdeCSSatravésdelasiguienteURL:

http://libro.cursohtml5desdecero.com/snippets/css/

Aclaraciones:

1.siendolosquemássoportan(ordenadosdemayoramenor):Chrome,Firefox,EdgeySafari.

IntroducciónaCSS

92

PropiedadesHemosvistounaformadeaplicarestilosanuestroHTML,enelsiguientecapítuloveremosotrasformas,perodemomentonosvamosaquedaraquíyvamosaverendetallealgunasdelaspropiedadesmásusadasenCSS.

ModificarelcolorLapropiedadcolorsepuedeusarencualquierelemento,aunqueprincipalmenteseusaparamodificarelcolordeltexto,estanoessuúnicafunción .

Existenmúltiplesformasdeespecificarelcolor,aquíveremostres,mediantesu:

Valorhexadecimal:#fafo#ffaaffValorRGB(Red,Green,Blue):rgb(255,160,255)orgb(100%,62.5%,100%)ValorRGBA(RGB+Alpha):rgba(255,160,255,1)orrgba(100%,62.5%,100%,1)sElvalorAlphatienequeestarcomprendidoentre[0-1]yhacereferenciaalatransparenciadelelemento,siendo1=opacoy0=transparente.

Ahoravamosavertresformasequivalentesderepresentarelcolorrojo:

h1{color:rgb(255,0,0);}

h1{color:#F00;}

h1{color:rgba(255,0,0,1);}

Ejemplointeractivo:Lección1-Snippet1.

EnRGBsiindicaencadaunodelosvaloreslacantidaddeRojo(Red),Verde(Green)yAzul(Blue)quetienequecombinar.Estevalorpuedeserunporcentajeounvalorcomprendidoentre0y255,siendo255equivalentea100%.

1

Propiedades

93

Porotroladocomentarqueelvalorhexadecimal"FF"equivalea"255".Existenmúltiplesconversoresdedecimalahexadecimalyviceversa,laprincipalventajadeusaresteformatoesqueocupamenoscaracteresyportantomenosespacioendisco(locualesóptimoparamejorarlostiemposdecargadeunfichero ).Porúltimo,cuandounvalorhexadecimalcontiene3caracteressignificaquecadaunodeellosserepitedosveces,ej:#fafesigualque#ffaaff.

Cuandolleguemosalapartadode"EstilosconDevTools"veremosunamanerasencilladeusaruncírculocromáticoparaconocer/elegirelcolordeunelemento.

ModificarlafuenteParamodificarlaspropiedadesdelafuente(font)tenemosdistintaspropiedades:

font-size:nospermiteespecificareltamañodelafuentefont-style:nospermitedarleestiloalafuente(p.e.:normaloitalic)font-family:estableceunalistadefuentes(Arial,Helvetica,sans-serif;)font-weight:nospermiteespecificarelanchodelafuente(bold,400,600,...)font:atajoparaestablecervariaspropiedades

Ejemplointeractivo:Lección1-Snippet2.

font-size

Encuantoaltamañohayvariasformasdeespecificarlo,perovamosavercómoespecificareltamañousandounidadesdelongitud,porejemplo:

px:representanuntamañoabsoluto.em:representanunvalorrelativorespectoalelementoDOMpadre.rem(rootem):representanunvalorrelativorespectoalelementobody.

Unelementopuedetenermúltiplesestiloscomovemosacontinuación:

h1{color:#F00;font-size:16px;}

Aligualqueconloscolores,veremoscómojugarconestosvaloresusandoChromeDevTools.

font-style

2

Propiedades

94

Losvaloresquepuedecontenerson:normal|italic|oblique|inherit,"inherit"significaquetomeelvalordelelementopadre,y"oblique"e"italic"indicanquelafuentesemuestreelcursiva:

h1{color:#F00;font-size:16px;font-style:italic;}

font-family

Estapropiedadindicalafuentequequeremosusar,pordefecto sólosepuedenespecificarfuentesquetengaelusuarioinstaladasensusistemaoperativo,¿perocómosabemoscualesson?.Bueno,existenalgunasfuentesqueseconsiderasegurasyqueportantopodemoscontarconqueestarándisponiblesencasicualquiersistemaoperativo.

Ademásdeestopodemosintroducirunalistadefuentesseparadasporcomas,deestemodoencasodequenoseencuentrelaprimerafuenteespecificadaseintentaráconlasposteriores.

Aquípodemosverunejemplo:

body{font-family:"TimesNewRoman",Times,serif;}

Sinosfijamostambiénveremosqueaquellasfuentesquetengannombrescompuestos(conespacios)debenirencerradasentrecomillasdobles.

EnlasiguientelecciónveremosunaformasencilladeutilizarfuentesquenoesténinstaladasenelsistemaoperativousandoCSS3.

font-weight

Estapropiedadhacereferenciaalgrosordelafuenteypuedetomarmúltiplesvalores:```normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit````

Deaquímerecelapenamencionar:

Que"normal"essinónimode"400"y"bold"de"700",esteúltimorepresentaríaunanegritaNotodoslosvaloresestándisponiblesparatodaslasfuentes,dehechosalvoquese

3

Propiedades

95

usenfuentespersonalizadasesdifícilencontrarfuentesconanchosdistintosa400o700.

Unejemplo:

body{font-family:"TimesNewRoman",Times,serif;font-weight:700;}

font

Comocomentábamosestaesunaformadeagruparmúltiplesvaloresenunasolapropiedad,noestrivialderecordaryportantonoterecomiendoquelausesmientrasestásempezandoporquepuededarteproblemas.

Paraquetesuenesiteloencuentrasenelcódigodealguientieneesteaspecto:

h1{font:bold1.2emHelvetica,Arial,sans-serif;}

ModificareltextoParamodificareltexto(text)tenemosotraspropiedades:

text-align:paraalineareltexto(left,right,center,justify)text-decoration:permiteañadirunsubrayado,tacharunapalabra,etc(underline,line-throught,...)text-transform:permitetransformarenmayúsculas,minúculas,etc(uppercase,lowercase,capitalize,...)line-height:permiteajustarelinterlineadousandounidadescomovimosantes(px,em,rem,...).

Puedesvereldetalledecadaunadelaspropiedadeshaciendoclicsobreelenlaceencadauna.

Porsimplificaraquítemostramosalgunosejemplos:

Propiedades

96

h1{text-align:center;text-decoration:underline;text-transform:uppercase;}

.p{line-height:1.5em;}

OtrasetiquetashabitualesNoeselobjetivodeestecursovertodaslaspropiedadesCSSyaquesonmuchasylamejorformadeaprenderlasesconlapráctica,peroantesdeterminarestalecciónmegustaríanombrartealgunasmás:

backgroundybackground-color:quecomosunombreindicanospermitecambiarelfondodeunelemento(vermás).list-style,list-style-imageylist-type:nospermitemodificarlaimagenqueprecedealoselementosdeunalista,etc(vermás).

Ejemplos:

body{background-color:#efefef;}h1{background:url("fondo-encabezado.jpg")no-repeatcenter;}

li{list-style:none;}li{list-style:squareoutsite;}li{list-style-image:url("punto.jpg");}li{list-style-type:upper-roman;}

Ejemplointeractivo:

Lección1-Snippet4:propiedad"background".Lección1-Snippet5:propiedad"list"

LuegoveremoscómousarDevToolsparaeditarestosestilos"encaliente",aprenderlosvaloresqueadmitenlaspropiedadesyendefinitivacómoexperimentardemanerarápidaysencilla.

Nota:enocasionescuandoaelementosóloseledefineunapropiedadteencontrarásquealgunaspersonasloescribenenunasolalínea.

Propiedades

97

ChuletaCSSYahemosvistounospocosestilos,conformeavancemosseguramentetecuesterecordarlosasíquealigualqueconHTMLaquítedejounachuletadeCSS3consuspropiedades,ynoteasustes,nocreoquehayanadiequeselasconozcatodas,alolargodeestecursoteexplicarésóloaquellasquenecesitarásconfrecuenciayteenseñarécomopuedesseguirluegodescubriendomásportucuenta.

Aclaraciones:

1. Enesteartículosepuedeleercómolapropiedadcolornosóloafectaaltexto2. Unahojadeestilosdeunproyectomedianopuedetenerdecientosamilesdelíneas,

enestoscasosreducirelnúmerodecaracterespuedeayudarareducireltamañodelficheroenbastantesKBloquehacequelapáginacargueunpocomásrápido.

3. EnCSS2.1nosepodíanusarfuentespersonalizadas,estaesunanuevacaracterísticasincorporadaenCSS3.

Propiedades

98

FormasdeañadirCSSAhoravamosarepasarlastresformasqueexistendeañadirestilosanuestroHTMLyunamuybrevepresentaciónalosselectores.

EstilosenlíneaVoyaexplicarteestaformadeaplicarestilos,aunquedebesevitarlasiemprequeteseaposibleyaqueesunamalaprácticaestilartupáginadeestamanera.

AcualquieretiquetaHTMLpuedesañadirlelapropiedad"style"ydentrodeellaañadirtantosestiloscomodeseesseparadosporpuntoycoma,porejemplo:

<h1style="color:red;font-size:2em">Títulodelapágina</h1>

Estaprácticaestátotalmentedes-recomendadayaquealalargacomplicaelmantenmientodelosestilosdetupáginaincitándoteaescribirmáscódigodelnecesariocomoveremosacontinuación.

EstilosinternosEsteeselejemploquehemosvistohastaahora,añadiendolaetiqueta"<style>"dentrodel"<head>"denuestrapáginaHTML.

EstilosexternosYporúltimolaformarecomendada(siempre)deaplicarestilos:creandounficheroconextensión".css"eindicarlealnavegadorquecarguedichodichero,paraellousaremosunelementoauto-contenidollamado<link>delsiguientemodo:

<linkrel="stylesheet"href="resources/css/main.css">

Nota:Unapáginapuedeincluirvariasetiquetaslink,oloqueeslomismo:múltipleshojasdeestilos.Encasodequeunaregla estéduplicadasiempreprevalecerálaquesecargueenúltimolugar .Cuandoveamoslaherenciaveremosquésignificaesto.

12

Añadiendolosestilos

99

SelectoresdeetiquetasYaquehemosvistotodaslasformasdecargarestilosCSSennuestraspáginasycómoaplicarestilosaetiquetasHTMLusandoelnombredelaetiqueta,vamosaverotrasdosformasdeseleccionaretiquetasHTMLparaaplicarlesestilos:

Asignandounidentificador(único)alelemento:paraelloañadiremoslapropiedadid="valor"alaetiqueta.Asignandounaovariasclasesalelemento:enestecasousaremoslapropiedadclass="valor1valor2...".

Veamosunejemplo:

<!--index.html--><h1id="experiencia">Experiencia<strongclass="destacado">profesional<strong></h1>

<pclass="destacado">Alolargodelosúltimos16añosblahblahblah...</p>

<style>#experiencia{font-size:large;}.destacado{color:blue;}strong{font-weight:normal;}</style>

Enestecasosehaañadidounidentificadoralaetiqueta"h1"ylamismaclase("destacado")adosetiquetas:"strong"y"p".Dadoslosestilosdefinidoselresultadoseráelsiguiente:

Lafrase"Experienciaprofesional"seleaplicaráuntamañomayor(large)Lapalabraprofesionalapareceráconunanchodefuente"normal"Ytodosalvolapalabra"Experiencia"apareceráencolorazul.

Notaimportante:losidentificadoressonúnicosporcadapáginaHTML.Portantodentrodeunmismofichero".html"nopodemosasignarelmismovalorados"id"onosencontraremosconproblemaseinconsistencias.

Fuentespersonalizadas

Añadiendolosestilos

100

UnanovedaddeCSS3frentealasversionesanterioresesquesepermiteelusodefuentespersonalizadas.ElrepositoriodefuentesmáspopularesGoogleFontsqueofreceunamplionúmerodeellasdeusolibre.

Paraparapoderusarlastendremosque:

1. AñadirlahojadeestilosennuestroHTMLusandolaetiqueta"<link>".2. Añadirlapropiedadfont-familyenloselementosquequeramosaplicarlafuenteen

nuestroCSS.

Porejemplo:

<!--index.html--><linkhref='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600italic,700'rel='stylesheet'type='text/css'>

/*main.css*/body{font-family:'OpenSans',sans-serif,arial;}

Nota:alañadirmúltiplesnombresdefuenteseparadosporcomaloqueestamosindicándolealnavegadoresquesituvieseproblemasparacargarlaprimerafuentelointenteconlasegunda,ysituvieseproblemasconlasegundalointentaseconlatercera,yasítantasvecescomoqueramos.Porejemplo:elproblemapodríadeberseaqueelnavegadornosoporteCSS3yfuentespersonalizadasoporejemploporqueelficheroquecontienelafuenteyquetienequedescargarelnavegadornoestuviesedisponible.

Aclaraciones:

1. UnareglanoesmásquelaformadeespecíficarelelementoHTMLalosqueselesdebeaplicarunestilodefinido.

2. Elnavegadorcargaráyleeráslosficherosdemanerasecuencial,estosignificaqueleeempezandoporlaprimeralíneadeunficheroyterminaporlaúltima,portantoparafacilitarnoslacompresiónpodemosimaginarnosquecuandosecargaunficheroconunaetiqueta(linkoscript),estaetiquetaesreemplazadaporelcontenidodelficheroalquehagareferenciadichaetiqueta.

Añadiendolosestilos

101

Añadiendolosestilos

102

SelectoresyherenciaLapalabraCSSvienedeCascadingStyleSheets,estoquieredecir:HojasdeEstiloenCascada.Lapalabracascadahacereferenciaaunapropiedadmuyimportantedelashojasdeestilo,yesquelosestilosaplicadosaunelementopadresonheredadosporsuhijo.

Porejemplo:

<ulstyle="color:red"><li>Inicio</li><listyle="color:blue">Experiencia</li></ul>

Enestecasoelcolordelafuente"Inicio"apareceráenrojoylade"Experiencia"enazul.

Nota:terecuerdoquenoestárecomendadoaplicarlosestilosusandoatributos.Enestecasolohehechoasíporquecreoquequedamásclaralaexplicación.a

Delmismomodoycomoyaadelantábamosalprincipiodelcapítulo,siunestilosedefinedosveces,elúltimodefinidoseráelqueprevalecerá,porejemplosiennuestroficheroescribimos:

/*main.css*/p{color:orange;font-size:24px;}p{color:green;}

Enestecasoelcolordetodaslasetiquetas<p>seráverde.

OcurrelomismosilamismareglaestádefinidaendoshojasCSSdistintasquehayansidocargadasusandolaetiqueta<link>,enestecasoprevalenceelestilodefinidoenlaúltimahojacargada.

Siporerrordefiniésemoslamismapropiedaddosvecesenunelementotambiénprevalecerálasegunda,porejemplo:

Selectoresyherencia

103

/*main.css*/strong{background:orange;background:yellow;}

Enestecasoelfondodelaetiquetaprevaleceráenamarillocomosepuedeveraquí:http://libro.cursohtml5desdecero.com/css/?lesson=2&snippet=1.

PredominanciadelestilomásespecíficoYahemosvistoquepodemosaplicarlosestilosdetresformas,estasformassondemenosamásespecíficas:

PornombredeetiquetaPorclase(class)Poridentificador(id)

Siasignamosestilosaunelementodediferentesformassiemprepredominaráelmásespecífico,estoquieredecirporejemploquesidefinimoslosiguiente:

<head><style>#food{color:green;}p{color:orange;}</style></head><body><pid="food">Mifrutafavoritaeselmango.</p><p>Micerealfavoritoeseltrigo</p></body>

Lafrase"Mifrutafavoritaeselmango"apareceráencolorverde,dadoqueunidentificadoresmásespecíficoqueelnombredelaetiqueta.Sinembargo"Micerealfavoritoeseltrigo"apareceráennaranja,porqueelestilomásespecíficoparaesaetiquetaeseldelaetiqueta"p".

Selectoresyherencia

104

Nota:laespecificidadsecalculadeunamaneramáscomplejacomosepuedeverenestetutorial,peroparaestecursohepreferidosimplificarlounpoco.LuegonosayudaremosconDevToolsparaayudaraexperimentaryentendermejorcómoseaplicanlosnivelesdeespecifidad.

CombinarselectoresHastaelmomentohemosvistocómoutilizarunselectorparaespecificarunelemento,peropodemoscombinarcualquieraestosselectoressiguiendolassiguientesreglas:

Siescribimoslosselectoresseparadosporunespacioestamoshaciendoreferenciaaletiquetasanidadasdentrodeotras.Siañadimoslosselectoressinsepararporunespacioestamoshaciendoreferenciaaunmismoelementodeunamaneramásespecífica.ParaentendercómoseaplicanlosselectoresdebesleerlosdederechaaizquierdaElúltimoselectorantesdelcaracter"{"seráalqueseleapliqueelestilo.

DeestemodopodemosseleccionartodosloselementoHTMLquecontienenunaclasepredefinida,etc.EnesteejemplovamosavercómocombinarnombresdeetiquetasHTMLconclases:

<head><style>h1span{color:red;}p.big{font-size:2rem;}p.bigspan{font-weight:bold;}</style></head><body><h1>Mi<span>CurriculumVitae</span></h1><pclass="big"><span>Nombre</span>:RaúlJiménezOrtega</p><pclass="big"><span>Lugardenacimiento</span>:Málaga</p><p>Fechadenacimiento:11/03/1984</p></body>

Aquíestamosindicando:

Queelcolordeltextodelasetiquetasspanqueseandescendientes(nonecesariamentehijosdirectos)delasetiquetash1aparezcanenrojo.

Selectoresyherencia

105

Quelospárrafosconquecontenganlaclase"big"tenganuntamañodefuentede"2rem".Queelanchodelafuentedelasetiquetasspanqueseandescendientesdelasetiquetaspconlaclasebigseanegrita.

Estoalprincipiopuedeparecerunpocolioso,peroalfinalverásqueaprenderásausarloporsentidocomún.

Notas:

1. Delmismomodopodríamoshacemoscombinacionesusandoidentificadores,aunquedadoqueunidentificadoresúnicoparaunelementoyeselmásespecíficonodeberíasernecesariousarlonunca.

2. Alcombinarlosselectoreslaespecifidadcambiacomopodemosleereneltutorialantesmencionado.

Múltiplesclases

Eshabitualutilizarvariasclasesenunmismoelemento ,porejemplo:

<aclass="btnbtn-primary">Entrar</a>

Aesteelementoseleaplicaránlosestilosdelaclase".btn"ylaclase".btn-primary".

Sisediesecasodequeambasclasesespecificanunamismapropiedad,porejemplocolorpredominaráladelaúltimaindicada,enestecasoladelaclase".btn-primary".

Otrosselectores

Porúltimoañadirquesepuedeaplicarelmismoestiloavariosselectoresoconjuntodeselectoresseparándolosporunacoma,porejemplo

.bold,strong,p.title{font-weight:bold;}

Estosignificaquetantoalasetiquetasconlaclase"bold"comolas"<strong>"comolas"<p>"quecontenganlaclase"title"selesaplicaráelestilo"font-weight:bold;".

Tambiénsepuedeusarelcaracter">"paraespecificarunhijodirectodeunelemento,yotrospseudo-elementos,peronoentraremosenestosdetallesenestecurso.

1

Selectoresyherencia

106

Aclaraciones:

1. Estoloveremosfrecuentementesiusamosherramientascomo"Bootstrap"uotrosframeworksCSS.

Selectoresyherencia

107

EstilosconChromeDevToolsLasmodificacionesdelCSSenelements...

EstilosconDevTools

108

RecursosCanIUse?http://browsershots.org/

Recursos

109

Anexo:NavegadoresyestándaressoportadosTantoCSS3comoHTML5sonestándarescreadosporelW3Cquerecordemosqueincluyenmuchoselementos,propiedades,etc.Portantoeltrabajoqueimplicaadaptarcadaunodelosnavegadoresparacomprendanestosestándaresescostosoyconllevatiempo,esporesoqueelsoporteenlosmismosevolucionaprogresivamente.Ademáscadaempresauorganizaciónresponsablededichaadaptaciónprioriza(bajosupropiocriterio)enquéordensoportarácadacaracterística.Alfinalestoconllevaaqueelsoportedelasnuevascaracterísticasdelosestándaresadíadehoy(17Sept.2016),dosañosdespuésdesupublicaciónnoesténcompletamentesoportadosenningúnnavegador,peronisiguieraesténlasmismascaracterísticasencadanavegador .Sitepreguntase,¿decuántosnavegadorescreesquetedeberíaspreocupar?(losmásimportantes).Supongoqueterespuestasería:tresocuatro(Chrome,InternetExplorer,FirefoxySafari)oalgosimilar,¿no?.Bueno,ojaláfuesetanfácil,alfinalcadaunodeestosnavegadoresnosólodisponedeversionesparadistintossistemasoperativos(Windows,Mac,Linux,Android,iOS,WindowsPhone,etc),sinoqueademáslosusuariosnosiempreusanlaúltimaversióndecadanavegador.Yelproblemaañadidoquesuponeesto,esqueparanuestradesgracia,unmismonavegador(porejemploChrome),nonecesariamentetienequesoportaexáctamenteiguallascaracterísticasenWindowsqueenAndroid.Peronotodosonmalasnoticias,paranuestrafortunaexisteunproyectollamado:CanIUse.com,queconcretamentenosvaaresolvernuestrasdudas.Porejemplo:¿tendréproblemassiusoelelementoHTML5videoenelcódigodemipágina?SientrasenlapáginadeCanIUsecomprobarásquedichoelementonoestásoportadoporInternetExplorer8niporOperaminioquelapropiedadCSS3background-attachmentnoestásoportadaporelbuscadordeAndroidniporOperamini.Yesto...¿esoquéquieredecir?,¿puedesono?.Paratomarestadecisiónyoterecomiendoqueteinformestodoloposibledequétipodepersonasvisitarántuwebparaintentaraveriguarquésistemasoperativos,navegadores,etcusanyenbaseaesodecidas.PorejemplonoeslomismounblogdeproductosApple(probablementetendrásuntráficomayorquelamediadeusuariosqueusenSafari),queunapáginaquevayasapromocionarmuchoenredessociales(tendrásmuchotráficomóvil),etc.SiestásactualizandounapáginaantiguapuedesusarGoogleAnalyticsocualquierotraherramientaalternativaparaobtenerlainformacióndetutráficoactual.PorestemotivoesporloqueempezaremosaprendiendopropiedadesCSSdelaversión2.1,porqueactualmentesepuedeconsiderarcompletamentesoportadoporel99%delosnavegadores.

1

Anexo:Navegadoresyestándaressoportados

110

Anexo:Navegadoresyestándaressoportados

111

CSS:Modelodecaja

CSS:Modelodecaja

112

ElementosHTMLExistendoselementosqueutilizaremosparaenvolverelcontenidoperoquenotienenningúnvalorsemántico.

ElementosHTML

113

Propiedades-Parte2

#opacity:establecelatransparenciadeunelemento

Borde(Border)border-width:border-style:border-color:border:

Vertodos

Modificarelfondodeunelemento

Fondo(Background)background-color:nospermiteespecificarelcolor(igualquevimosantes)defondodeunelemento.background-image:permiteespecificarunaURLdeunaimagenquequeremosqueaparezcadefondo(porej:url('imagen.jpg'))background-repeat:pordefectosiestablecemosunaimagendefondoserepiteindefinidamente,peroestopodemoscambiarlo(repeat-x,repeat-y,no-repeat,...)background-position:nospermitecambiarlaposicióndelaimagendefondo(left,right,center,...)background:esunatajoigualquelapropiedadfont.

Vertodos

Ejemplos

Propiedades-Parte2

114

body{background-color:#efefef;}

h1{background:url("fondo-encabezado.jpg")no-repeatcenter;}

Modificarunalista

Lista(List)list-style-image:permiteespecificarunaimagenparacadaqueprecedaacadaelementodelalista.list-style-type:sinoesestablecelapropiedadlist-style-imageespecficarelformatoqueprecedeaunelementodelalistalist-style:esunatajoigualquefontobackground

Vertodos

Ejemplos

li{list-style:none;}

li{list-style:squareoutsite;}

li{list-style-image:url("punto.jpg");}

li{list-style-type:upper-roman;}

Propiedades-Parte2

115

Propiedades-Parte2

116

Posicionarelcontenido

Propiedadpositionstaticrelativeabsolutefixed

Propiedadz-indexEstapropiedadestableceelordenenelqueaparecenlascajasenelejeZ(profundidad)yseestablececomounnúmeroentero.

Ejemplo:

div{z-index:999;}

Posicionarelcontenido

117

CSS:Refinandoeldiseño

CSS:Refinandoeldiseño

118

Tipografíastamaños%,em,...

Tipografías

119

JS:PrimerospasosJavaScript(JS)esunlenguajedeprogramación,unlenguajeconsupropiovocabulario,sintaxis,semántica,expresiones,errores,etc.

JavaScriptnospermitedarlevidaalaweb,hacerlamásdinámicaeinteractiva,yportantomostraralgomásqueinformacióndemaneraestática.

¿QuésepuedehacerconJavaScript?:

Operacionesmatemáticas,lógicas,etc.ControlarelflujodelprogramaValidarformulariosCargarcontenidosmediantepeticionesHTTPModificarelDOMAccederainformacióncomolaversióndelnavegador,tamañodelaventana,sistemaoperativo,localización,etc.Etc.

MiprimerscriptEsteeselscriptmássimplequepodemoshacer:

<!DOCTYPEhtml><htmllang="es"><head><metacharset="UTF-8"><title>Miprimerscript</title></head>

<body><script>document.writeln('HolaMundo!');</script></body></html>

Vamosavercómointerpretarestescript.Loqueestamoshaciendoes:

1. Llamaralmétodowriteln queescribeenelDOMloquerecibecomoparámetroseguidodeunsaltodelínea,enestecasoHolaMundo!seguidodeunsaltodelínea(\n).

1

2

JS:Primerospasos

120

2. Estemétodoestádefinidoeneldocument yquerepresentaalDOMyquetieneotrasfuncionesparaaccederaelementosdelDOM,etc.

ParaevitarerroresquepuedenpasardesapercibidosenJavaScript(porsiflexibilidad)terecomiendoqueintroduzcassiemprelaexpresión'usestrict';alprincipiodetusscripts.Elmodoestrictosignificaentreotrascosasquehayquedeclarartodaslasvariablesyobjetos .

Asíquedaría:

<!DOCTYPEhtml><htmllang="es"><head><metacharset="UTF-8"><title>Miprimerscript</title></head>

<body><script>'usestrict';document.writeln('HolaMundo!');</script></body></html>

SintaxisAlgunasdelascaracterísticasdeJavaScriptson:

1. Essensibleamayúsculasyminúsculas(oloqueeslomismo,escase-sensitive),portanto:

varvariable;

noesequivalentea

varVariable;

2. Noesobligatorio(perosírecomendado)declararlasvariables3. Nosedefineeltipodelasvariables4. Noesnecesario(perosírecomendado)terminarcadaexpresiónconelcarácterde

puntoycoma(;)5. Sepuedenincluircomentariosenunalíneausando//yenmúltipleslíneasusando

/**/.

23

4

JS:Primerospasos

121

Aclaraciones:1.Másinformaciónsobreelmétodowriteln2.Másinformaciónsobrelainterfazdocument.3.YeldocumentoestádefinidocomopartedelobjetowindowquerepresentaalaventanadelnavegadordondeestácargadoelDOMydondesealmacenamuchamásinformación.Añadirlapalabrawindowesopcional.

</small>

Yotrastantasrestriccionesmás.

JS:Primerospasos

122

VariablesLasvariablesenloslenguajesdeprogramaciónseasemejanalasvariablesutilizadasenmatemáticas,seutilizanparaalmacenaryhacerreferenciaavalores,graciasaellaspodemosdarlevidaalaweb.

Paradeclarar/definirunavariableutilizaremoslapalabraclavevarseguidadelnombredelavariableyunpuntoycoma(;),porejemplo:

varcounter;

Enestecasohemosdeclaradounavariableconelnombrecounterperonoselehaasignadoningúnvalor.

Consejos:

Aunquenoesobligatorio,acabasiemprelassentenciasconpuntoycoma(porconvención).Escribesiempreelcódigoeninglés(seconsideramásprofesional).

Elnombredeunavariabledebecumplirlassiguientesnormas:

Elprimercarácternopuedeserunnúmero.Sólopuedeestarformadoporletras,númerosylossímbolos:dólar($)yguiónbajo(_).

Portanto,lassiguientesvariablesestaríanbiendefinidas:

var$num1;var_$name;var$$$otherNumber;var$_a__$4;

Consejo:eligenombresdevariablesqueseanrepresentativosdelvalorquealmacenanparafacilitarlacomprensióndelcódigo.

Porejemplo:

Variables

123

varcounter=0;varname="Raul";

//Enlugarde:varaux=0;vartmp="Raul";

PalabrasreservadasAntesdecontinuarmegustaríacomentartequeexistenpalabrasreservadasquetienenunsignificadoenellenguajeyquenopodremosusarcomonombresdevariables:abstract,boolean,break,byte,case,catch,char,class,const,continue,debugger,default,delete,do,double,else,enum,export,extends,false,final,finally,float,for,function,goto,if,implements,import,in,instanceof,int,interface,long,native,new,null,package,private,protected,public,return,short,static,super,switch,synchronized,this,

throw,throws,transient,true,try,typeof,var,volatile,void,while,with.

TiposdevariablesEntodosloslenguajesdeprogramaciónexistendistintostiposdevariables,enJavaScripttendremos:

//Númericas(integer&floats)//-----------------------------varcounter=16;//variabletipoenterovarprice=19.99;//variabletipodecimal

Quenospermitenalmacenarnúmerosenterosycondecimalespararealizaroperaciones.

//Cadenasdetexto(strings)//-----------------------------varmsg='Bienvenidoanuestrositioweb';vartxt='Unafrasecon"comillasdobles"dentro';vartxt='Unafrasecon\'comillassimples\'dentro';

Quenospermitentrabajarconcadenasdetexto.Paraellotenemosconencerrarlacadenaentrecomillassimplesodobles,peronormalmenteserecomiendahacerloconcomillassimples.Encasodequererintroducirunacomillasimpledentrodeunacadenapodemoshacerloincluyendoelcaráctercontra-barra(\)justodelante,paraevitarquesecierrelacadena.

Variables

124

//Colecciones(arrays)//-----------------------------//Definiendolosdíasdelasemanaencadenasdetextovarday1='Lunes',day2='Martes',...,'Domingo';

//DefiniciónequivalenteenunArrayvardays=['Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo'];

//days[0]='Lunes'//days[1]='Martes'//...//days[6]='Domingo'

LosArraysocoleccionesnospermitenañadirvariosvaloresdentrodeunelemento.

//Booleanos(boolean)//-----------------------------varvalid=false;varprime=true;

Losbooleanosseutilizanparaalmacenarvaloreslógicos:trueofalse.

FuncionesExistenmúltiplesfuncionesparatrabajarconnúmeros:Paralosnúmeroshayunafunciónmuyútil:

varn=231.8273;n.toFixed(2);//231.82

cadenasdetexto,porejemplo:

varhello='Hola';varworld='Mundo!';

//Paracontarelnúmerodecaracteresconsole.log(hello.length);//5

//Paraconcatenarcadenasconsole.log(hello+''+world);//HolaMundo!console.log(hello.concat(''+world));//HolaMundo!

//Parabusacarsubcadenasenunacadenavarpos=hello.indexOf('a');//pos=3varpos=hello.indexOf('b');//pos=-1

Variables

125

Yotrosmétodos:lastIndexOf,substring,split,etc.

AligualparatrabajarconArrays:

varfruits=['banana','melon,'orange'];

//Paracontarvarn=fruits.length;//n=3

//Paraañadirelementosfruits.push('apple','peach');//fruits=['banana','melon,'orange','apple','peach']

contact,join,pop,shift,Yotrascomo:unshift,reverse.

Variables

126

OperadoresLosoperadoresnosvasaservirparamodificarycomprobarelvalordelasvariables,vamosaverdiferentestiposdeoperadores:

MatemáticosLógicosRelacionales

OperadoresmatemáticosLosoperadoresmatemáticosnosvanapermitirrealizaroperacionesmatemáticassobrelasvariables,veamosalgunosejemplos:

//Asignación(=)varpi=3.1416;

Nospermitedarleunvaloraunavariable.

Consejo:Añadesiempreunespacioantesyotrodespuésdecualquieroperador(=,<,..).

//Incremento(++)ydecremento(--)varx=1,y=4;x++;//x=2y--;//y=3

Nospermiteincrementarodecrementarenunaunidadelvalordeunavariable.

//Suma(+)yresta(-)varx=2,y=3,z;z=x+y//z=5;z=x-y//z=-1;

//División(/)ymultiplicación(*)varx=4,y=2,z;z=x/y//z=2;z=x*y//z=8;

Operadores

127

//Abreviacionesvarx=5;x+=3;//x=x+3=>8x-=1;//x=x-1=>4x*=2;//x=x*2=>10x/=5;//x=x/5=>1

//Módulo(%)numero1%=4;//numero1=numero1%4=1

OperadoreslógicosLosoperadoreslógicossonimprescindiblespararealizaraplicacionescomplejas,yaqueseutilizanparatomardecisionessobrelasinstruccionesquedeberíaejecutarelprogramaenfuncióndeciertascondiciones.

Elresultadodecualquieroperaciónqueutiliceoperadoreslógicossiempreesunvalorlógicoobooleano.

varvisible=true;!visible;//Devuelve"false"yno"true"

x !x

true false

false true

OperaciónAND(&&)

LaoperaciónlógicaANDobtienesuresultadocombinandodosvaloresbooleanos.Eloperadorseindicamedianteelsímbolo&&ysuresultadosolamenteestruesilosdosoperandossontrue:

x y x&&y

true true true

true false false

false true false

false false false

Operadores

128

varx=true;vary=false;result=x&&y;//result=false

x=true;y=true;result=x&&y;//result=true

OperaciónOR(||)

LaoperaciónlógicaORtambiéncombinadosvaloresbooleanos.Eloperadorseindicamedianteelsímbolo||ysuresultadoestruesialgunodelosdosoperandosestrue:

x y x||y

true true true

true false true

false true true

false false false

varx=true;vary=false;result=x||y;//result=true

x=false;y=false;result=x||y;//result=false

OperadoresrelacionalesLosoperadoresrelacionalesdefinidosporJavaScriptsonlosmismosquelosmatemáticos:

Mayorque:>Menorque:<Mayoroigual:>=Menoroigual:<=Igualque:==Distintode:!=

Aunquetambiénexisteeloperador===quequieredecirexáctamenteigual,teniendoencuentanosóloelvalordelavariablesinotambiéneltipo,porejemplo:

Operadores

129

0==""//true0===""//false

0==false//true0===false//false

2=='2'//true2==='2'//false

Vamosaverenlasiguientelecciónqueestosoperadoressonimprescindiblesalahoradecontrolarelflujodeunprograma.

Elresultadodetodosestosoperadoressiempreesunvalorbooleano:

vareven=2;varodd=5;result=even>odd;//result=falseresult=even<odd;//result=true

a=5;b=5;result=a>=b;//result=trueresult=a<=b;//result=trueresult=a==b;//result=trueresult=a!=b;//result=false

Sedebetenerespecialcuidadoconeloperadordeigualdad(==),yaqueeselorigendelamayoríadeerroresdeprogramación,inclusoparalosusuariosqueyatienenciertaexperienciadesarrollandoscripts.Eloperador==seutilizaparacompararelvalordedosvariables,porloqueesmuydiferentedeloperador=,queseutilizaparaasignarunvaloraunavariable:

Operadores

130

//Eloperador"="asignavaloresvarx=5;y=x=3;//y=3yx=3

//Eloperador"=="comparavariablesvarx=5;y=x==3;//x=5yy=false

/*Losoperadoresrelacionalestambiénsepuedenutilizarconvariablesdetipocadenadetexto:*/vartxt1="hola";vartxt2="hola";vartxt3="adios";

result=txt1==txt3;//result=falseresult=txt1!=txt2;//result=falseresult=txt3>=txt3;//result=false

Cuandoseutilizancadenasdetexto,losoperadores"mayorque"(>)y"menorque"(<)siguenunrazonamientonointuitivo:secomparaletraaletracomenzandodesdelaizquierdahastaqueseencuentreunadiferenciaentrelasdoscadenasdetexto.Paradeterminarsiunaletraesmayoromenorqueotra,lasmayúsculasseconsideranmenoresquelasminúsculasylasprimerasletrasdelalfabetosonmenoresquelasúltimas(aesmenorqueb,besmenorquec,Aesmenorquea,etc.)

Operadores

131

Ejercicios

1)InstalarSublimeTextInstalarSublimeTextyenpreferences->settings-usercomprobarqueestánestastreslíneas(sinoañadirlas):

{"indent":2,"tab_size":2,"translate_tabs_to_spaces":true}

2)OperacionessimplesRealizaunscriptquerealicelosiguiente:

Almacenarenunavariableelresultadodesumar1y2Almacenarenunavariableelresultadodedividir6entre2Almacenarenunavariableelpreciodeunartículode20€aplicándoleel21%deIVA.Definirunavariableconelvalor4yutilizareloperador(++)paraincrementarenunosuvalor.Definirunavariablequealmacenelaconcatenacióndedoscadenasdetexto.Definirunavariablepriceconelvalor19.99yaplicarlaabreviación/=paradividirloentre1.21paraobtenerelpreciosinIVA.Asignaradosvariablesvaloresbooleanosyhaceralmenosunaoperacióncombinandounoperadorlógico:AND(&&)oOR(||)Realizar4expresionesqueutilicenoperadoresrelacionales(<,==,!=y===)yalmacenenlosvaloresentresvariablesdistintas.

Finalmenteimprimetodosvaloresenlaconsoladelnavegadorusandoconsole.log(nombre_de_la_variable),porejemplo:

varresult=1+2;console.log(result);

Nota:Comolamayoríadeloslenguajes,JavaScriptseejecutasecuencialmente(dearribaaabajo),porloqueelordendelasinstruccionesimporta.

Ejercicio

132

3)PuntosdeparadaUtilizalapestañasourcesyhazclicenalgunalíneadondehayaunaexpresiónparaestablecerunpuntodeparada(sedebemarcarenazul)yrecargalapágina:

Juegaconelinspector.

Opcional:InstalarW3CValidatorsRecuerdaqueenlasleccionesdeHTMLutilizábamoselvalidadoronlinedelW3Cparacomprobarquenuestrocódigoeracorrecto.SiloprefierestambiénpuedesusarlaextensiónW3CValidatorsdeSublimeTextparahacerlodesdeelpropioeditor.

DudasSihayalgoquenotehayaquedadoclaropuedespreguntarcualquierdudaenlosissuesdelproyectoenGithub.

SitienesproblemasodudascontucódigosúbeloaGithub,abreunissueenunproyectoconladuda/problemayenvíameuncorreoainfo@cursohtml5desdecero.com.

Ejercicio

133

RecursosPlaylistdeYoutubeconintroducciónaSublimeText

Otrasaclaraciones

ObjetowindowOtrasfuncionescomunesdefinidasenelobjetowindowson:

alert()queabreunaventajaconunmensajeelnavegadordelusuario,aquípuedesverloenfuncionamiento.consolequeimplementafuncionesparaimprimirmensajesenlaconsoladeerror(console.error()),etc

OtrascaracterísticasdeJSExistenmáscaracterísticas,comoquesilaejecucióndeunscriptdurademasiadotiempo(porunerror,porejemplodeprogramación)elnavegadorpuedeinformarlealusuariodequehayunscriptqueestáconsumiendodemasiadosrecursosydarlelaposibilidaddedetenersuejecución.

OrdendedefinicióndelasvariablesDefinirlasenlapartesuperiordelscript

Recursos

134

Estructurasdecontrol

Estructuraif

varprintMsg=true;

if(printMsg){console.log('HolaMundo');}

if(printMsg==true){console.log('HolaMundo');}

Unejemplousandouncomparadorlógico:

varprintMsg=false;

if(!printMsg){console.log('Meimprimo');}

varisFirstMsg=true;

if(!printMsg&&isFirstMsg){console.log('Miprimermensaje');}

Unerrortípicoesintroducirunaasignación(=)enlugardeunacomparación(==)

//Error-Seasignaelvalor'false'alavariableif(printMsg=false){...}

Estructuraif...else

Estructurasdecontrol

135

varage=18;

if(age>=18){console.log('Eresmayordeedad');}else{console.log('Eresmenordeedad');}

Estructuraif...elseif...else

if(age<18){console.log('Eresmenordeedad');}elseif(age<30){console.log('Aúneresjoven');}else{console.log('Lasabiduríaladalaexperiencia');}

Estructurafor

for(initialization;condition;increment){...}

vari;vardays=['Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo'];

for(i=0;i<days.length;i++){alert(days[i]);}

Estructurasdecontrol

136

ObjetosyfuncionesIterarsobreobjetoscallbacks

ámbitos

//Objetos(objects)//-----------------------------varobj={name:'Raul',last_name:'JimenezOrtega',age:31};

//obj.name='Raul'//obj.last_name='JimenezOrtega'//obj.age=31

Losobjetosnospermitendefinirestructurasdedatoscondistintostiposdevalores,yaverásqueestoteserámuyútilenelfuturo.

Objetos,funcionesyámbitos

137

PeticionesAJAXGoogleSpreadsheetsCORShttp://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-serverhttps://www.youtube.com/watch?v=3l13qGLTgNw

PeticionesAJAX

138

Expresionesregulares

Expresionesregulares

139

Aplicacioneswebofflinehttp://www.html5rocks.com/en/tutorials/appcache/beginner/

Aplicacionesweboffline

140

BibliotecasdetercerosGráfica

jQuery

Dojo

http://download.dojotoolkit.org/release-1.6.0/cheat.html

Bibliotecasdeterceros

141

Ejercicios

InstalarJSHinthttps://github.com/victorporof/Sublime-JSHint

Ejercicio

142