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=quot;examplequot;>
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 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>

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”

“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 )

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

Presentacion Curso CSS

Recommandé

Recommandé

Contenu connexe

Similaire à Presentacion Curso CSS

Similaire à Presentacion Curso CSS (20)

Dernier

Dernier (11)

Presentacion Curso CSS