Presentacion Curso CSS

1.798 visualizaciones

Publicado el

Breve historia de la WWW y los estándares Web hasta llegar a la Web 2.0

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

Sin descargas
Visualizaciones
Visualizaciones totales
1.798
En SlideShare
0
De insertados
0
Número de insertados
41
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
3
Insertados 0
No insertados

No hay notas en la diapositiva.

Presentacion Curso CSS

  1. 1. Ismael Celis http://www.estadobeta.com http://aardvark.cl
  2. 2. Diseño Web: Perfil de una Profesión
  3. 3. Breve Historia de la Web De HTML a la Homepage ( 1960’s - 1990’s )
  4. 4. Lenguaje de Demarcación Datos Legible por máquinas ✓ Legible por décadas ✓ Versátil (información compleja) ✓
  5. 5. SGML ( Structured General Markup Language ) <QUOTE TYPE=quot;examplequot;> Este es un ejemplo de <ITALICS>SGML</ITALICS> </QUOTE>
  6. 6. World Wide Web 1990, Tim Berners Lee • Arquitectura Cliente - servidor • URI’s • Hipertexto (links) • Lenguaje estructurado (HTML)
  7. 7. Arquitectura Cliente Servidor Solicitud Cliente Servidor Respuesta Cliente Cliente
  8. 8. URI ( Uniform Resource Identifier ) URL ( Uniform Resource Location ) http://www.estadobeta.com/2006/10/22/utilitario-web-20/ http://www.google.cl/intl/en_com/images/logo_plain.png http://www.youtube.com/watch?v=zmLToYe8nRo
  9. 9. HTML ( HyperText Markup Language ) <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 3.2 Final//ENquot;> <HTML> <HEAD> <TITLE>Receta para el Arroz con Huevos</TITLE> </HEAD> <BODY bgcolor=white text=black link=red> <H1>Arroz con Huevos</H1> <H2>Ingredientes</H2> <UL> <LI>Arroz</LI> <LI>Huevos</LI> <LI>Sal</LI> </UL> <A href=”/preparacion.html”>Ver preparación</A> </BODY> </HTML>
  10. 10. HTML Navegadores gráficos y el “Diseño Web”
  11. 11. Editores WYSIWYG, “Páginas” Web
  12. 12. Guerra de los Browsers! - Extensiones propietarias a HTML - Énfasis en Diseño Visual - Pérdida de estándares y Semántica <font> <blink> <marquee> “Optimizado para Internet Explorer 5.0”
  13. 13. Homepage
  14. 14. “Web 2.0” Estándares, API’s y más allá ( 2000’s - )
  15. 15. Estándares Web http://www.w3.org/ • XHTML • CSS • Javascript (Ecmascript)
  16. 16. (X)HTML • Aplicación de XML • Sólo estructura semántica (no hay diseño) • Más estricto (+ fácil de leer por máquinas) • Extensible • Universal
  17. 17. CSS ( Cascading Style Sheets ) • Lenguaje de presentación (diseño y formato) • Aplicables a sitios enteros • Múltiples dispositivos (monitor, impresora, braille) • Separa tareas (contenido - presentación)
  18. 18. CSS ( Cascading Style Sheets ) body { font-size: 10px; font-family: verdana, arial, sans-serif; background-color: #000000; } h1 { color: #eeeeee; font-size: 120%; width: 300px; }
  19. 19. SEO y semántica • Internet: ecosistema de datos (una gran base de datos) • Google, Pagerank • Web Semántica (xml, rdf) • Microformatos, FoaF
  20. 20. Blogs, Wikis, CMS’s • Generación Dinámica de contenidos (CMS’s) • Sistemas de Templates (plantillas) • Sindicación de contenidos (RSS, Atom)
  21. 21. Sindicación de Contenidos • Subscripción a contenidos (sin diseño) • Granularización de contenidos (post, artículo) • Personalización de contenidos • Formatos estándar (RSS, Atom)
  22. 22. RSS Aplicación de XML para noticias y sumarios http://www.nytimes.com/services/xml/rss/nyt/Africa.xml
  23. 23. Agregadores de Contenido ( Personalización de contenido Web )
  24. 24. Servicios Web
  25. 25. Google Maps + = YouTube + www.blueokapi.com Flickr
  26. 26. = Google News http://www.marumushi.com/apps/newsmap/
  27. 27. “Web 2.0” • Nuevos modelos de negocios. • Nuevas posibilidades creativas. • Nuevas metodologías, la misma tecnología.
  28. 28. Diseño Desarrollo Web: Perfil de una Profesión
  29. 29. ¿ Web 3.0 ?
  30. 30. ? www.estadobeta.com

×