Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Radiografía de un Sitio Web

772 views

Published on

Charla para FLISOL 2010 junto a Alter Lagos
acerca de la Web de hoy con HTML4 y el futuro con HTML5

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Radiografía de un Sitio Web

  1. 1. <ul>Ricardo Alfaro Diseñador Web </ul><ul>Alter Lagos Ingeniero de Software </ul><ul>RADIOGRAFÍA DE UN SITIO WEB </ul><ul>Presente y Futuro </ul><ul>FLISOL 2010, Santiago Chile </ul>
  2. 2. <ul>Sitio Web Página Web Aplicación Web </ul><ul>? </ul>
  3. 8. <ul>Hoy en día... ¡Todos son lo mismo! </ul>
  4. 9. <ul>Sitio Web Página Web Aplicación Web </ul><ul>? </ul>
  5. 10. <ul>Sitio Web Página Web Aplicación Web </ul><ul>? </ul>
  6. 11. <ul>¿ Motivación ? </ul>
  7. 12. <ul>Antes </ul>
  8. 13. <ul>Después </ul>
  9. 14. <ul>Sitio Web </ul>
  10. 15. <ul>Sitio Web </ul>
  11. 16. <ul>HTML </ul>
  12. 17. ¿ Cómo Funciona ?
  13. 18. <html> <etiqueta>Contenido</etiqueta> </html> <ul>HTML > CONTENIDO </ul>
  14. 19. Un ejemplo ...
  15. 20. <ul>Y para que me sirve esto? </ul>
  16. 21. ¡ Entender un poco más ! ¡ Poner en Práctica ! ¡ Aprender !
  17. 22. <ul>HyperText Markup Language </ul><ul>Lenguaje HTML </ul><ul><li>Es un lenguaje que interpreta el navegador web
  18. 23. Contener solamente la información semántica. </li></ul><ul><li>Está basado en etiquetas de &quot;etiquetas&quot; usando tags < > </li></ul><ul><li>Su estructura base se divide en dos partes <head> y <body>
  19. 24. Para crear HTML se puede usar cualquier editor de texto. </li></ul>
  20. 25. <ul>Sitio Web </ul>
  21. 26. ¿ Cómo Funciona ?
  22. 27. selector { propiedad: valor } selector { propiedad1: valor1; propiedad2: valor2 } <ul>CSS > APARIENCIA </ul>
  23. 33. <ul>Aspecto <li>Posición </li></ul>
  24. 34. Un ejemplo menos abstracto ...
  25. 35. <ul><li>CSS Zen Garden
  26. 36. http://csszengarden.com/ </li></ul>
  27. 42. <ul>Cascading Style Sheets </ul><ul>CSS ( Hojas de Estilos) </ul><ul><li>Controlar la apariencia de un sitio web
  28. 43. Generar estilos visuales (tipografía, color y forma)
  29. 44. Determinar la posición de los elementos del sitio web
  30. 45. Para generarlo se puede usar cualquier editor de texto </li></ul>
  31. 46. <ul>Sitio Web </ul>
  32. 50. ¿ Cómo Funciona ?
  33. 51. var numero = 2 function(parametro) {operacion} metodo (valor) <ul>JAVASCRIPT > FUNCIONALIDAD </ul>
  34. 52. Un ejemplo ?
  35. 53. Un ejemplo ... JQuery
  36. 54. <ul>Lenguaje de Scripting </ul><ul>Javascript </ul><ul><li>Tiene control sobre el DOM y permite su manipulación
  37. 55. Se basa en variables, funciones y métodos .
  38. 56. Mejoras de Interfaz y Web Dinámica
  39. 57. Existen una infinidad de librerías </li></ul>
  40. 58. <ul>Y para que me sirve esto? </ul>
  41. 59. Para saber que...
  42. 60. Para saber que...
  43. 62. <ul>HTML 5 </ul>
  44. 63. <ul>HTML 5 </ul>
  45. 64. ¿ Que hay de nuevo ?
  46. 65. <ul>HyperText Markup Language [versión 5] </ul><ul>HTML5 </ul><ul><li>Establece nuevos elementos de los sitios web modernos
  47. 66. Importancia del significado semántico
  48. 67. Incorporar nativamente audio y video
  49. 68. Aún no se encuentra soportado por todos los navegadores </li></ul>

×