Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Radiografía de un Sitio Web

801 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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>

×