Introducción a HTML5 y CSS3 - ArtMedia 2011

Click here to load reader

  • date post

    03-Nov-2014
  • Category

    Design

  • view

    35
  • download

    9

Embed Size (px)

description

Taller sobre HTML5 y CSS3 que dicté en la conferencia ArtMedia 2011, en la Universidad Maimónides.

Transcript of Introducción a HTML5 y CSS3 - ArtMedia 2011

  • 1. HTML5&CSS3 Hernn Beati @hernan_beati [email_address]

2. Hernn Beati Desarrollador Web + 12 aos + coautor con Maximiliano Firtman Autor libro: Fundador de: Docente en: 3. Web =HTML Lenguaje universal, base de la Web 4. HTML 4.01 = 1999 XHTML 1.0 = 2000XHTML 1.1 = 2001 XHTML 2 = ? HTML5 5. A qu se le llama HTML5? HTML5 (nuevas etiquetas, marcado) CSS3 (nuevos estilos) APIs JavaScript (programacin) + Otros estndares W3C (SVG, MathMl) + Estndares de facto (microformatos) + Experimentos de algn navegador + + + ... 6. Nuevo enHTML5 Nuevas etiquetassemnticas (Google debe entender los contenidos) Video, audio y animacinsin plugins (Acceso universal: cualquier dispositivo, cualquier navegador, cualquier versin) Nuevos elementos deformularios (Ms usabilidad y menor uso de JavaScript) 7. Nuevo enCSS3 Usar cualquiertipografa Efectos decorativos : sombras, RGBa, bordes redondeados, gradientes, (menor uso deimgenes ) Movimientos :transformaciones, transiciones, animaciones (menor uso de JavaScript) Diseo adaptable :Media QueriesSelectores ms precisos (menor uso de marcado innecesario) 8. Nuevo enScripts Animaciones con Canvas Drag&Drop Geolocalizacin del usuario Trabajooffline (cache de aplicaciones) WebStorage (session y local) File System API ( archivosenteros) Bases de datos del lado delcliente Web sockets (actualizacin en vivo, tipo Ajax) Hilos (threads)Web Workers 9. Pero...cul eslapregunta? (que todos nos estamos haciendo con HTML5 y CSS3) 10. Yase puede usar!? 11. Naaahh... si enExplorerno anda! 12. Esa duda se basa enrumores * * (conceptos errneos) 13. El principal:Esperar que laperfeccin totalse haga realidad un da. El Da D nunca existir 14. Cuandotodoslosseres humanosdel mundo se actualicen a X navegador...

  • Ladiversidadde versiones y plataformas siempre existir: sin plugins, JavaScript desactivado, resoluciones MUY diferentes.

15. Cuandotodoslosnavegadoresinterpretenidnticamente el 100%del estndar...

  • Lasdiferenciasentre navegadores siempre existirn,jamshubo 2 navegadores iguales.
  • Laevolucin / innovacinimplementando nuevas capacidades, siempre existir.
  • Siempre seguirn en uso navegadoresantiguos.

16. Cuandoel W3Cpublique laespecificacin , ah s se podr usar!

  • En2015recin ser Recomendacin. Para 2022 la habrn implementado los navegadores?
  • HTML: primerestndar VIVO , sin versin.
  • Se estandarizan lasinnovaciones .
  • Lo queya funcionanunca se quitar.

17. ...porqueyoquiero que mis diseos se veanidnticosentodoslos navegadores y entodoslos dispositivos ...

  • !? Existen celulares de 128 x 160 pixeles, y plasmas de 1920 x 1200px!!

18. Y entonces c ul es larespuesta ? Yase puede usar!? 19. Versin abreviada: S 20. Versin explicada: Se puede usar mediante tcnicas de compatibilidad 21. Principales tcnicas:

  • Mejoraprogresiva(Progressive enhancement).
  • Degradacinelegante(Graceful degradation).
  • Mejoraregresiva(Regressive enhancement).

22. 1.Mejoraprogresiva (Progressive enhancement) Despus de crear una pgina bsica,que funcione en Explorer,agreguemosfuncionalidades extrapara navegadores ms potentes, usando selectores avanzados. Dave Shea (2003) www.csszengarden.com 23. 2.Degradacinelegante (Graceful degradation) Disear para los navegadores mspotentesymviles , haciendo uso pleno de HTML5 y CSS3, asumiendo queno se va a ver idntico . Degradaen sitio menos decorado o menos funcional (le falta algo). 24. Andy Clarke propone crear hoja de estilo detexto plano para Explorers viejos, y no perder tiempo en compatibilizar la esttica...(O cobrar ese tiempo aparte!) 25.

  • Aplicamos nuevas etiquetasHTML5 y CSS3para navegadores nuevos, y luego agregamos scripts para fabricar esa mismafuncionalidad en navegadores que no la traen (funcional, o a veces caracterstica esttica).
  • Se les llama shims, polyfills, scripts compatibilizadores, etc.
  • Por ejemplo: Modernizr, Selectivizr, Yepnope.

Tercera posicin: 3.Mejora Regresiva: Complementar al navegador 26.

  • Aceptar diferencias entredispositivos ...
  • ...pero tambin aceptar diferencias entrenavegadoresy sus versiones.
  • NO BUSCAR UNIFORMIDAD!!!

En el fondo, el concepto clave es aplicar Diseo Adaptable (responsive design) 27. Supera actitudes extremas de: -Usar slo caractersticasCSS bsicasque sean soportadas por el obsoleto Explorer 6 (recin Explorer 8 aplic CSS 2.1 completo, 10 aos!!!). -Olvidarse completamente de navegadores anteriores y limitados, diseandosloparanavegadores modernos(Andy Clarke) 28. qu debo hacer para usarHTML5 y CSS3ya ? Entonces, 29. Cambiar la formadepensar el diseo web. 30. Nuestro conceptodediseo web no puede seguir siendo el mismo que en diseo grfico . 31. La web es (mltiples dispositivos,mltiples navegadores) 32. La web esMUYflexible: (Para cul resolucin disear? ParaTODAS !!) Y ms!... 33. ...peroyoquiero que mis diseos se veanidnticosentodoslos navegadores y entodoslos dispositivos ... !!!? 34. Pensar eldiseo web comocreacin de experiencias de usuario , y no como una decoracin rgida, uniformizadora, ni como un lienzo artstico. Algo es diseo si esfuncionala una meta, EL DISEONO ES ARTE 35. La pregunta del diseo web debe ser:puedo hacer las tareas que vine a hacer al sitio? (Con cualquier dispositivo,con cualquier navegador y versin) 36. Deberemos explicar a clientes y jefes que cada usuariover levemente distinto cada sitio web Porque esinevitable y no tiene nada de malo! Diseo adaptable = Responsive design 37. Resumiendo: (respuestas a la pregunta)

  • S,se puedeusar HTML5 y CSS3hoy !
  • Aplicando tcnicas decompatibilidad: Mejora progresiva ,Degradacin elegante o Mejora regresiva .
  • Debemos aceptar laflexibilidadde la web, y cambiar nuestrasexpectativas de diseo .

38. HTML5:Primer estndar vivo 39. Antes:W3C defina reglas, que luego losnavegadores iban aplicando 40. Ahora:navegadores innovan, y W3C lo agrega al estndar Es lo lgico... 41. Conclusin:HTML5 es el estndar msconsensuado de la historia!Todos lo apoyan... 42. Objetivo de nuevas etiquetas? Usar etiquetas consignificado Google debe entender cul contenido esimportantey cul no lo es. 43. Estructurasnuevas

  • Article: contenido fundamental, independiente
  • Aside: contenido accesorio, no fundamental
  • Nav: barra de navegacin
  • Section: una seccin o bloque (ex DIV)
  • Header: introduccin / orientacin sobre seccin
  • Footer: final de una seccin
  • Hgroup: grupo de encabezados
  • Figure: contenido relacionado (imagen, video, audio, canvas, grficos, tablas estadsticas, etc.)
  • Figcaption: leyenda de un elemento Figure

44. Ejemplos:

  • Antes:
  • Esta foto habla de...

  • Ahora:
  • Esta foto habla de...

45. Seccionesexplcitas

  • Article
  • Aside
  • Nav
  • Section

46. 1. Article Es elcontenido importantede cada pgina Puede haberuno , ovariospor pgina Ver ejemplo 47. 2. Aside

  • Es informacinsecundaria , que podra no estar.
  • Ej.: Barras laterales, banners.

Ver ejemplo 48. 3. Nav

  • Unabarra de navegacin .
  • Puede haberuna , ovariaspor pgina

Ver ejemplo 49. 4. Section

  • Unaseccin explcita .
  • Puede haberuna , ovariaspor pgina

Ver ejemplo 50. 4.a Section =parte de... Puede haber una o ms sectionsdentro deun article: Datos del AutorComentarios Ver ejemplo 51. 4.b Section =contenedor de... Una section puede tenerarticles dentro(con sections dentro!): Noticia de hoyNoticia de ayer Ver ejemplo 52. Headers&Footers Pertenecen asecciones(article, aside, nav y section) adems del body. Ver ejemplo 53. 54. Figure No es solo para fotos (diagramas, SVG, MathML, listas de cdigo) que puedan ser referenciados (apndice, ndice, etc.)Bla Ver ejemplo 55. 56. Compatibilizador para Explorer 57. Textos mssemnticos

  • Mark: resultados resaltados (en vez de span, em o strong)
  • Time: Hora, Fecha, o ambas cosas
  • Meter: Medidas dentro de una escala
  • Progress: Medidas dinmicas, cambiantes

58. que cambiaron

  • Apuede envolver varias cosas (bloques)
  • Addresspertenece a una seccin, no solo a la pgina entera
  • Bestilo diferente, pero no ms importante ni negrita
  • Icambio de entonacin (en otro idioma, tecnicismos)
  • Stronges algo importante, aunque no se vea distinto
  • Citeahora es para ttulo de la obra citada, no para autor
  • Hrcambio de tema entre prrafos (Ej.: vieta entre estrofas)
  • Smalles la letra chica de los contratos, trminos legales

59. An ms significado? Extensibilidad con Microdata y Microformatos Google debe entender cul contenido esimportantey cul no lo es... 60.

  • Datos personales
  • Opiniones / revisiones
  • Contactos
  • Productos
  • Empresas
  • Recetas
  • Eventos
  • Video

http://www.google.com/support/webmasters/bin/answer.py?hl=es&answer=146897 61. Tim Berners-Lee Director del W3C C/Ada Byron, 39 Asturias, Espaa 33203 Ver ejemplo 6