Manual de HTML5en español
Manual de HTML5en español
Alejandro Castillo Cantón
Alejandro Castillo | www.theproc.es
Manual de HTML5en español
www.theproc.es
PrimeraParte
ElHTML5(HyperText Markup Language,versión 5)esla quinta revisión
del...
Manual de HTML5en español
• <article></article> - Elelemento de artículo representaun
componente de una páginaque consiste...
Manual de HTML5en español
Diferenciasentre HTMLy HTML5
Mejorasen losformularios
Elelemento input adquieregran relevanciaal...
Manual de HTML5en español
• <input type="date"> paraseleccionarun díaen un calendario.
• <input type="month"> parameses.
•...
Manual de HTML5en español
Segunda Parte
Unapregunta muy común en estostiemposes:“¿Cómopuedo empezara
utilizarHTML5siexiste...
Manual de HTML5en español
MODERNIZR,una bibliotecapara detectarHTML5.
Modernizr esuna libreríade JavaScript con licenciaMI...
Manual de HTML5en español
por lo que algunosnavegadorespuede que no tengan integrado lasAPI
paratexto.
Video
ElHTML5ha def...
Manual de HTML5en español
vezque te conectes,sihasrealizado cambiosen la web offline,estosse
subirán al servidor actualizá...
Manual de HTML5en español
navegadoresque no soporten placeholder simplemente lo ignorarány
no mostraránnada.
Aquí hayun ej...
Manual de HTML5en español
En el primer tutorial mencionamos varios de los nuevos atributos de los
formularios, y en próxim...
Próxima SlideShare
Cargando en…5
×

Manual de HTML5 en español

278 visualizaciones

Publicado el

Manual de HTML5 en español

Publicado en: Internet
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
278
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
5
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Manual de HTML5 en español

  1. 1. Manual de HTML5en español Manual de HTML5en español Alejandro Castillo Cantón Alejandro Castillo | www.theproc.es
  2. 2. Manual de HTML5en español www.theproc.es PrimeraParte ElHTML5(HyperText Markup Language,versión 5)esla quinta revisión del lenguajede programación “básico” de la World WideWeb,el HTML. Estanuevaversión pretende remplazaral actual (X)HTML,corrigiendo problemascon losque losdesarrolladoresweb seencuentran,asícomo rediseñarel código actualizandolo anuevasnecesidadesque demandala web de hoy en día. Debido aque estoscambiosafectaranla forma de desarrollar la web en un futuro inmediato, desdeTheProcess,plantearemosuna seriede artículosdonde desvelaremosloscambiosmásimportantes. Actualmente el HTML5estáen un estado BETA,aunque ya algunas empresasestándesarrollando sussitioswebsen estaversión del lenguaje.A diferenciade otrasversionesde HTML,loscambiosen HTML5 comienzanañadiendo semánticay accesibilidad implícitas,especificando cadadetalle y borrando cualquier ambigüedad.Setiene en cuenta el dinamismo de muchossitioswebs(facebook,twenti, etc),donde su aspecto y funcionalidad sonmássemejantesaaplicacioneswebsque a documentos. Mejor estructura Actualmente esabusivo el uso de elementosDIVparaestructurar una web en bloques.ElHTML5nosbrinda varioselementosque perfeccionan estaestructuración estableciendo qué escadasección,eliminando asíDIV innecesarios.Estecambio en la semánticahaceque la estructura de la web seamáscoherente y fácil de entender por otraspersonasy los navegadorespodrán darle másimportanciaasegún qué seccionesde la web facilitándole ademásla tareaalosbuscadores,asícomo cualquier otra aplicación que interprete sitiosweb. Laswebssedividirán en los siguienteselementos: • <section></section> - Seutilizapararepresentaruna sección “general” dentro de un documento o aplicación,como un capítulo de un libro. Puedecontener subseccionesy silo acompañamosde h1-h6 podemosestructurar mejor toda la páginacreando jerarquíasdel contenido, algo mu favorable parael buen posicionamiento web. Alejandro Castillo | www.theproc.es
  3. 3. Manual de HTML5en español • <article></article> - Elelemento de artículo representaun componente de una páginaque consisteen una composición autónoma en un documento, página,aplicación,o sitio web con la intención de que puedaserreutilizado y repetido. Podríautilizarse en losartículosde losforos,una revistao el artículo de periódico, una entradade un blog, un comentario escrito por un usuario,un widget interactivo o gadget, o cualquier otro artículo independiente de contenido. Cuando loselementosde <article> son anidados,loselementos de <article> interioresrepresentan losartículosque en principio son relacionadoscon el contenido del artículo externo.Por ejemplo,un artículo de un blog que permite comentariosde usuario,dichoscomentariossepodrían representarcon <article>. • <aside></aside> - Representauna sección de la página que abarcaun contenido tangencialmente relacionado con el contenido que lo rodea,por lo que sele puede considerarun contenido independiente.Esteelemento puede utilizarsepara efectostipográficos,barraslaterales,elementospublicitarios,para gruposde elementosde la navegación,u otro contenido que se considereseparadodel contenido principal de la página. • <header></header> - Elemento <header> representaun grupo de artículosintroductorioso de navegación. • <nav></nav> - Elelemento <nav> representauna sección de una página que esun link aotraspáginaso apartesdentro de la página:una sección con linksde navegación. No todoslosgruposde enlacesen una página tienen que estaren un elemento <nav>,sólo lasseccionesque consisten en bloques principalesde la navegación son apropiadasparaserutilizadas con el elemento <nav>.Puedeutilizarseparticularmente en el pie de página paratener un menú con un listado de enlacesavarias páginasde un sitio, como el Copyright; home page,políticade uso y privacidad.No obstante,el elemento <footer> esplenamente suficiente sin necesidadde tener un elemento <nav>. • <footer></footer> - Elelemento <footer> representael pié de una sección,con información acercade la página/sección que poco tiene que ver con el contenido de la página,como el autor, el copyright o el año. Alejandro Castillo | www.theproc.es
  4. 4. Manual de HTML5en español Diferenciasentre HTMLy HTML5 Mejorasen losformularios Elelemento input adquieregran relevanciaal ampliarseloselementos que sepermitiran en el “type”. • <input type="search"> paracajasde búsqueda. • <input type="number"> paraadicionar o restarnúmeros mediante botones. • <input type="range"> paraseleccionarun valor entre dosvalores predeterminados. • <input type="color"> seleccionarun color. • <input type="tel"> númerostelefónicos. • <input type="url"> direccionesweb. • <input type="email"> direccionesde email. Alejandro Castillo | www.theproc.es
  5. 5. Manual de HTML5en español • <input type="date"> paraseleccionarun díaen un calendario. • <input type="month"> parameses. • <input type="week"> parasemanas. • <input type="time"> parafechas. • <input type="datetime"> parauna fechaexacta,absoluta y tiempo. • <input type="datetime-local"> parafechaslocalesy frecuencia. Otroselementosmuy interesantes <audio> y <video> - Nuevoselementosque permitirán incrustarun contenido multimedia de sonido o de vídeo,respectivamente.Esuna de lasnovedadesmásimportantese interesantesen esteHTML5,ya que permite reproducir y controlasvídeosy audio sin necesidadde plugins como el de Flash. Elcomportamiento de estoselementosmultimedia serácomo el de cualquier elemento nativo, y permitirá insertar en un video,enlaceso imágenes,por ejemplo.Youtube,ya ha anunciado que dejael Flashy comienzaaproyectar con HTML5. <embed> - Seempleaparacontenido incrustado que necesitaplugins como el Flash.Esun elemento que ya reconocenlosnavegadores,pero ahoraal formar parte de un estándar,no habráconflicto con <object>. <canvas> - Esteesun elemento complejo que permite que segeneren gráficosal hacerdibujosen suinterior. Esutilizado en GoogleMapsy en un futuro permitirá alosdesarrolladorescrearaplicacionesmuy interesantes. Alejandro Castillo | www.theproc.es
  6. 6. Manual de HTML5en español Segunda Parte Unapregunta muy común en estostiemposes:“¿Cómopuedo empezara utilizarHTML5siexisten navegadoresantiguosque no lo soportan?”Pero la pregunta en síseha formulado de forma errónea.ElHTML5no esuna cosagrande como un todo, sino una colección de elementosindividuales, por consiguiente lo que sísepodrá serádetectar silosnavegadores soportan cadaelemento por separado. Cuando losnavegadoresrealizanun render de una página,construyen un “Modelo de Objeto de Documento” (Document Object Model - DOM), una colección de objetosque representan loselementosdel HTMLen la página.Cadaelemento - <p>,<div>,<span> - esrepresentado en el DOM por un objeto diferente. TodoslosobjetosDOM comparten unascaracterísticascomunes,aunque algunostienen másque otros.Enlosnavegadoresque soportan rasgos del HTML5,algunosobjetostienen unaúnicapropiedad y con una simple ojeadaal DOM podremossaberlascaracterísticasque soporta el navegador. Existencuatro técnicasbásicasparasabercuando un navegador soporta una de estasparticularescaracterísticas,desdelasmássencillasalasmás complejas. 1. Compruebasideterminadaspropiedadesexisten en objetos genéricoso globales(como window o navigator). Ejemplo:comprobar soporte parala “Geolocalización”. 2. Crearun elemento,luego comprobar sideterminadas propiedadesexisten en eseelemento. Ejemplo:comprobar soporte paracanvas. 3. Crearun elemento,comprobar sideterminadosmétodosexisten en eseelemento, llamarel método y comprobar losvaloresque devuelve. Ejemplo:comprobar qué formatosde video soporta. 4. Crearun elemento,asignaruna propiedad adeterminado valor, entoncescomprobar sila propiedad mantiene suvalor. Ejemplo:comprobar que tipo de <input> soporta. Alejandro Castillo | www.theproc.es
  7. 7. Manual de HTML5en español MODERNIZR,una bibliotecapara detectarHTML5. Modernizr esuna libreríade JavaScript con licenciaMITde código abierto que detecta sison compatiblesmuchoselementosparaHTML5y CSS3.Dichalibreríaseirá actualizando y parautilizarlasolo hayque incluir en <head><script> de tu página. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dive Into HTML5</title> <script src="modernizr.min.js"></script> </head> <body> ... </body> </html> Modernizr seejecuta automáticamente,no esnecesariollamara ninguna función tipo: modernizr_init().Cuando seejecuta,secreauna objeto global llamado Modernizr,que contiene un set de propiedades Boleanasparacadaelemento que detecta.Porejemplo sisunavegador soporta elementoscanvas,la propiedad de la libreríaModernizr.canvas será“true”.Situ navegador no soporta loselementoscanvas,la propiedad Modernizr.canvasserá“false”. if (Modernizr.canvas) { // a crear formas!! } else { // no hay soporte para canvas, los siento Canvas HTML5 define el elemento <canvas>como un rectángulo en la página donde sepuede utilizar JavaScript paradibujar cualquier cosa.También determina un grupo de funciones(canvasAPI)paradibujar formas,crear gradientesy aplicartransformaciones. TextoCanvas Situ navegador soporta lasAPIde canvasno quiere decir que pueda soportar lasAPIparatexto-canva.LasAPIde canvasehan ido generando con el tiempo y lasfuncionesde texto sehan añadido posteriormente, Alejandro Castillo | www.theproc.es
  8. 8. Manual de HTML5en español por lo que algunosnavegadorespuede que no tengan integrado lasAPI paratexto. Video ElHTML5ha definido un nuevo elemento llamado <video> paraincrustar video en laspáginasde la web. Actualmente insertar un video en la web eraimposible sin determinadospluginscomo el QuickTimeo el Flash. Elelemento <video> ha sido diseñado parautilizarlo sin la necesidadde que tenga que detectar ningún script. Sepueden especificarmúltiples ficherosde video y losnavegadoresque soporten el video en HTML5 escogeránuno basadoen el formato que soporte. Formatosde video Losformatosde video soncomo loslenguajesescritos.Un periódico en ingléscontiene la mismainformación que un periódico en español, aunquesolo uno le seráútil. Conlosnavegadorespasalo mismo, necesitansaberen qué “idioma” estáescrito el video. Loslenguajesde losvideossellaman “codecs”un algoritmo utilizado paracompactarun video.Existendocenasde codecsen usoen todo el mundo, aunque dosson losmásrelevantes.Uno de estoscodecscuesta dinero por la licenciade la patente,y funciona en safari y losiphones.El otro codecesgratisy de código abierto y funciona en navegadorescomo Chromium y Firefox. AplicacionesOFFline Leerpáginawebsoffline esrelativamente sencillo.TeconectasaInternet, cargasuna web, te desconectasy puedessentarte tranquilamente aleer. ¿Peroqué sucedecuando sonaplicacionescomo Gmail o GoogleDocs? Graciasal HTML5cualquierapuede crearuna aplicación web que funcione offline. Lasaplicacionesweb offline seejecutan como una aplicación online.La primeravezque sevisita una web offline que estédisponible,el servidor web le dirá aal navegador losficherosque necesitaparapoder trabajar desconectado.Estosficherospueden ser,HTML,JavaScript,imágenesy hastavideos.Unavezque el navegador ha descargadolosficheros necesariospodrásvolver avisitar la web aunque no estésconectado a Internet. Elnavegador reconoceráque estásdesconectado de Internet y utilizarálosficherosque habíadescargado con anterioridad.Lapróxima Alejandro Castillo | www.theproc.es
  9. 9. Manual de HTML5en español vezque te conectes,sihasrealizado cambiosen la web offline,estosse subirán al servidor actualizándolo. Geolocalización Lageolocalización esla forma de suponer donde te encuentrasen el mundo y siquieres,compartir información con gente de confianza. Existenmuchasmanerasde descubrir donde te encuentras,por tu dirección IP,la conexión de red inalámbrica,la torre de telefoníamóvil por la que habla tu teléfono móvil (celular),o GPSespecíficosque reciben lascoordenadasde longitud y la latitud de satélitesque están eneel cielo. TerceraParte Enel primer capítulo de estacharlasobreHTML5,mencionamospor arriba sobreloscambiosen losformulariosque incluye el HTML5. Comonorma paratodos,un formulario esuna etiqueta <form> y en su interior algunoselementos<input type="text"> o <input type="password"> finalizado con un botón <input type="submit"> y ya está.A continuación explicaremosalgunasde estasnovedades. Textocomo PLACEHOLDER Placeholder esun nuevo atributo que seutilizadentro de loscampos input. Sirveparamostrarun texto dentro del input siemprey cuando el campo estévacíoo no estéseñalado.Encuanto sehagaclic dentro del campo (o sellegue por el TAB),el texto desaparecerá. Seguramente ha visto la propiedad Placeholder antes.Porejemplo, Mozilla Firefox3.5incluye textosplaceholder en la barrade localización. Cuando sehaceclic sobrela barrade búsquedao sellegapor un tab, el texto preestablecido desaparece. Irónicamente Firefox no da soporte aestapropiedad,al igual que IEy Opera,solo escompatible (adíade hoy) con Safariy Chrome.Aquellos Alejandro Castillo | www.theproc.es
  10. 10. Manual de HTML5en español navegadoresque no soporten placeholder simplemente lo ignorarány no mostraránnada. Aquí hayun ejemplo de cómo sepuede incluir placeholder en un formulario: Código: <form> <input placeholder="Buscar en la base de datos"> <input value="Buscar"> </form> Camposcon autofocus Elatributo de autofoco permite al usuario decidir y controlar qué campo de texto debe serenfocado (señalado,activado) en cuanto la página es cargadao seestécargando,permitiendo al usuario comenzaraescribir sin tener él que especificarcual essucampo de texto principal en su página.Elatributo de autofoco esun atributo boleano (respuestatrue - false)y no deberáhaber másde un elemento en la página. Muchossitiosutilizan JavaScript parafocalizary dirigir el cursor automáticamente al campo de texto. Porejemplo Googlecuando comienzaacargarsupágina dirigirá el cursosasuinput de búsqueda automáticamente paraque puedasempezaraescribir tus palabrasde búsquedaen sunavegador.Estopuede serconveniente paraalgunosy paraotrosque pueden tener una necesidadespecíficano tanto. Si aprietasla barrade espacioesperando que la página baje haciendo un scroll,esto no sucederáporque estáenfocado el input del formulario. HTML5introduceun atributo de control de autofoco en losformularios. Elatributo autofoco haceexactamente lo que suena,en cuanto la web se comienzaacargar,mueveel cursor y asíla atención del usuario aun campo <input> particular. A díade hoy, Autofocussolo lo soportan Safari,Chromey Opera.Firefoxe IE,lo ignorarán. Código: <form> <input name="b" autofocus> <input type="submit" value="Search"> </form> Alejandro Castillo | www.theproc.es
  11. 11. Manual de HTML5en español En el primer tutorial mencionamos varios de los nuevos atributos de los formularios, y en próximos artículos iremos profundizando en ellos. Ahora les dejo una galería de sitios hechos con HTML5 que podrán inspeccionar viendo el código fuente. Alejandro Castillo | www.theproc.es

×