Post on 29-Jun-2022
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<hr>seutilizapara...</p>
Enestecasohemosmodificadoelsímbolo"menorque"(LowerThan)porlaentidadHTMLlty"mayorque"(GreaterThan)porgt,asíelnavegadorpodrárepresentarlosinningúnproblema.
Enalgunaocasiónpuedequenaveguesporunapáginaconunacodificación(encoding)quenosoportelosacentosagudos(á,é,í,ó,ú),enesecasousaránlasentidadesHTML(á,é,í,ó,Ú)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<HTML5&CSS3</h1><!--BIEN--><h1>Páginasobre<HTML5&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
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
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