Presentacion Curso CSS

Ismael Celis http://www.estadobeta.com http://aardvark.cl

Diseño Web: Perfil de una Profesión

Breve Historia de la Web De HTML a la Homepage ( 1960’s - 1990’s )

Lenguaje de Demarcación Datos Legible por máquinas ✓ Legible por décadas ✓ Versátil (información compleja) ✓

SGML ( Structured General Markup Language ) <QUOTE TYPE=\"example\"> Este es un ejemplo de <ITALICS>SGML</ITALICS> </QUOTE>

World Wide Web 1990, Tim Berners Lee • Arquitectura Cliente - servidor • URI’s • Hipertexto (links) • Lenguaje estructurado (HTML)

Arquitectura Cliente Servidor Solicitud Cliente Servidor Respuesta Cliente Cliente

URI ( Uniform Resource Identiﬁer ) 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

HTML ( HyperText Markup Language ) <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 3.2 Final//EN\"> <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>

HTML Navegadores gráficos y el “Diseño Web”

Editores WYSIWYG, “Páginas” Web

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”

Homepage

“Web 2.0” Estándares, API’s y más allá ( 2000’s - )

Estándares Web http://www.w3.org/ • XHTML • CSS • Javascript (Ecmascript)

(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

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)

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; }

SEO y semántica • Internet: ecosistema de datos (una gran base de datos) • Google, Pagerank • Web Semántica (xml, rdf) • Microformatos, FoaF

Blogs, Wikis, CMS’s • Generación Dinámica de contenidos (CMS’s) • Sistemas de Templates (plantillas) • Sindicación de contenidos (RSS, Atom)

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)

RSS Aplicación de XML para noticias y sumarios http://www.nytimes.com/services/xml/rss/nyt/Africa.xml

Agregadores de Contenido ( Personalización de contenido Web )

Servicios Web

Google Maps + = YouTube + www.blueokapi.com Flickr

= Google News http://www.marumushi.com/apps/newsmap/

“Web 2.0” • Nuevos modelos de negocios. • Nuevas posibilidades creativas. • Nuevas metodologías, la misma tecnología.

Diseño Desarrollo Web: Perfil de una Profesión

¿ Web 3.0 ?

? www.estadobeta.com

Presentacion Curso CSS

0 comments

Notes on slide 1

2 Favorites & 1 Group