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="[email protected]"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í[email protected].
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
Top Related