View
104
Download
0
Category
Preview:
Citation preview
Curso de Diseño Web
Profesor: Mario Figge
Vamos a construir un sitio Para construir un sitio necesitamos 3
cosas:
1. Un nombremisitio.com
2. Un lugarServidor con IP Fija
3. Un contenidoArchivos html e imágenes
Algo de Historia
1993: HTML (Primera Version), draft (no estándar). Mosaic 1.0, Lynx
1994: Netscape 1.0
1995: HTML 2.0. Internet Explorer 1 y 2, Mosaic 2, Netscape 1.1
1996: CSS 1Internet Explorer 3, Mosaic 2.1, Netscape 2 (JavaScript) y 3, Opera 2.1
1997: HTML 3.2 recomendación del W3C. CSS 2. Internet Explorer 4, Mosaic 3, Netscape 4, Opera 3
Algo de Historia
1998: HTML 4.0, (Strict, Transitional, Frameset)Netscape 4.5, Opera 3.5
1999: HTML 4.01 (Strict, Transitional, Frameset) Internet Explorer 5
2000: XHTML 1.0 (Strict, Transitional, Frameset), Internet Explorer 5.5, Internet Explorer 5 Mac, Netscape 6, Opera 5
2001: XHTML 1.1 Basado en XHTML 1.0 Strict. Internet Explorer 6, Opera 6
2002: Netscape 7, Phoenix 0.1
2003: Opera 7, Firebird 0.7
Algo de Historia
2004: Firefox 1.0
2005: Opera 8 y 8.5
2006: JavaScript 1.7Opera 9, Opera Mini, Firefox 1.5 y 2, Internet Explorer 7
2007:CSS 2.1
2008: Firefox 3, Internet Explorer 8, Safari 3.1,Chrome 0.2
2009: Firefox 3.6, Opera 10.5, Chrome 3
Algo de Historia
Múltiples Problemas
Diferentes: Navegadores (20+) Tamaños de Pantalla y de Ventana
(Infinitos) Sistemas Operativos / Tipografías Tecnologías Soportadas (Flash, HTML5) … y no se olviden de los celulares!
No podemos controlar estos parámetros
¿Como lo manejamos?
Mejora Progresiva (Progressive Enhancement)
Degradado Elegante (Graceful Degradation)
Navegadores Modernos:Firefox 11, Chrome 18, Internet Explorer 9
Navegadores a tener en cuenta:Internet Explorer 7 y 8
Contenido, Presentación y Comportamiento
Contenido: HTML Presentación: CSS Comportamiento: JavaScript Aplicación: PHP (en el servidor) Todas estas tecnologías se conjugan
en el navegador, de ahí la importancia de software que respete estándares.
Herramientas Necesarias
Adobe Dreamweaver Construcción y edición del Sitio,
Publicación Adobe Fireworks
Prototipado y Edición de Imágenes Browsers
Firefox, Chrome, Internet Explorer 9 Internet Explorer 7 y 8
Múltiple IE (http://tredosoft.com/Multiple_IE)
Todos los que queramos agregar
HTML
HTML es el acrónimo inglés de HyperText Markup Language, que se traduce como Lenguaje de Marcas de Hipertexto. Es un lenguaje de marcas diseñado para estructurar textos y presentarlos en forma de hipertexto.
Ejemplo: <h1>Esto es un titulo de primer
nivel</h1>
Un documento HTML 4.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title>
</head><body>
El contenido va aquí </body>
</html>
Un documento HTML5
<!DOCTYPE HTML>
<html><head>
<meta charset=utf-8"> <title>Untitled Document</title>
</head><body>
El contenido va aquí </body>
</html>
Etiquetas (Tags)
<p>Esto es un parrafo</p>
<p>Esto es un parrafo con <strong>palabras resaltadas</strong></p>
<a href="http://subdesarrollando.com.ar/">Lea el Blog</a>
<img src=“archivo.jpg”>
Referencia: http://reference.sitepoint.com/ (para HTML 4.1)
HTML: Elementos Estructurales Encabezados: h1 … h6 Párrafo: p Lista con Viñetas: ul, li Lista Numeradas: ol, li Lista de Definiciones: dl, dt, dd Cita: blockquote Línea Horizontal: hr Bloques: div
Son todos elementos de tipo block
HTML: Elementos de Texto
Salto de renglón: br Enlaces (Links): a Destacado: strong Enfatizado: em Abreviatura: abbr Acrónimo: acronym Caracteres especiales: á
… Bloque inline: span
Son todos elementos de tipo inline
HTML: Tablas
La tabla: table Filas: tr Celdas: td Celdas de Encabezado: th Título general: caption Otros: thead, tfoot, tbody
table es un elemento de tipo block
HTML: Elementos de Imagen y Medios
Imagen: img Elementos multimedia: embed,
object
Son elementos de tipo inline
Respetemos las reglas
Obligación de mantener una etiqueta de apertura y una de cierre
Incorrecto:
<p>Esto es un parrafo.<p>Esto es un parrafo.
Correcto:
<p>Esto es un parrafo.</p><p>Esto es un parrafo.</p>
Respetemos las reglas
Las etiquetas deben cerrarse y abrirse en el orden correcto.
Incorrecto:
<em><strong>Algo de texto.</em></strong>
Correcto:
<em><strong>Algo de texto.</strong></em>
Respetemos las reglas
Etiquetas en desuso <font> <b> <i> <center>
HTML5
html5please.us caniuse.com
developer.mozilla.org/es developer.mozilla.org/es/demos www.w3schools.com/html5 www.html5rocks.com/en/
Fin
Recommended