taller multimedia guĂa de trabajo n 1 - escritura hipertextual
el caso dreamweaver
diseño visual
-Un diseño que no tiene estructura semántica (significados rotos) -Información que no es posible de ser recuperada por motores de búsqueda (robots) -Alta tasa de errores. (oficio digital) -Dificultades y gastos en las actualizaciones de software. -Trabajo perdido en rediseños. - Escasa economía de medios. -Limitaciones en la estructura tipográfica.
contenidos / visualizaci贸n
contenidos: xhtml, html
XHTML, acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web.
estรกndares de contenidos web
html 4.01 strict >> html 5 xhtml 1.0 transitional >> 2.0
html 5
html o xhtml css
separación del contenido y el diseño visual
Simplifica el código y reducir el tamaño de los archivos. Se logra reducir el peso de un sitio en un 60% al pasarlo a XHTML/CSS. Mejor indexación en los buscadores Menos código, más lugar para el contenido, menos problemas para los buscadores en indexar la información del sitio
problemas
Aún persisten los navegadores sin ajustarse a un estándar. Este problema aumenta cuando el navegador es IExplorer en cualquiera de sus versiones (5-6-7-8) Los Softwares de creación de web con GUI La mayoría de los diseñadores ven este sistema como un problema que hay que solucionar con todos los medios disponibles No ven en el lenguaje una herramienta que esta hecha para hablarle a la máquina y al hombre.
estructura xhtml
head
body
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
Un documento HTML se compone de tres partes:
<html xmlns="http://www.w3.org/1999/xhtml">
1. una l铆nea que contiene declaraci贸n sobre la versi贸n de HTML.
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Documento sin t&iacute;tulo</title> </head>
<body> </body> </html>
2. una secci贸n de cabecera declarativa (delimitada por el elemento HEAD), 3. un cuerpo, que contiene el contenido visible del documento. El cuerpo puede ser especificado mediante el elemento BODY
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Descripción del Calentamiento Global Perspectivas Científicas - Departamento de Biología Universidad de Chile</title> </head> <body>
h1
< >Algunas consideraciones acerca del calentamiento global</h1>
h2
< >Profesor Luis Merino, PHD. Universidad de Chile. </h2> <p>El clima siempre ha variado, el problema del cambio climático es que en el último siglo el ritmo de estas variaciones se ha acelerado de manera anómala, a tal grado que afecta ya la vida planetaria . Al buscar la causa de esta aceleración, algunos científicos encontraron que existe una relación directa entre el calentamiento global o cambio climático y el aumento de las emisiones de gases de efecto invernadero (GEI), provocado principalmente por las sociedades industrializadas.<p>
Elementos importantes elemento title:Los autores deberían utilizar el elemento title para identificar los contenidos de un documento. Debido a que los usuarios a menudo consultan documentos fuera de contexto, los autores deberían proporcionar títulos ricos en contexto. Encabezados: h1, h2, h3, h4 , h5, h6. Ayuda a marcar secciones de la página aparte de ser tíutulos. ej:
h1: título del sitio o página h2: subtítulo h3: título de sección h4: Subtítulo de sección h5: Título de elemento h6: subtítulo de elemento
<h2>Libros</h2>
Elementos importantes
<p>
Los párrafos siempre deberán estar identificados con la etiqueta “P”, su utilidad es estructurar temáticamente un texto y facilitar la lectura en pos de la mejor compresión.
<strong>Ser Digital de Nicholas Negroponte </strong>de 1995. El autor es Director del <a href="http:// www.media.mit.edu/">MediaLab</a> del Mit (Massachusetts Institute of Technology). Dentro de sus proyectos más interesantes se encuentra el <a href="http:// es.wikipedia.org/wiki/OLPC">OLPC</a> (one laptop per child) , en el cual comprometió trabajo de laboratorio y logística para configurar con computador de 100 dólares. <em>Ignorado por el gobierno chileno</em> se esta aplicando en otros países de latinoamérica. <p>
Las negritas van eqtiquetadas con Strong que sustituye a la vieja B. Se concentran en enfatizar conceptos, nombres , sustantivos, etc. Las cursivas con la etiqueta em , aunque sus usos son muchos , el más general es llamar la atención del lectora para crear connotaciones de contexto. Links Descriptivos: evitar links que no aporten información como:“ hacer click acá ”, o que porten muy poco como números o el sobreexplotado entrar. Intentar que el link sea descriptivo, que adelante lo que vendrá si el usuario hace click
yo soy importante
Yo soy el contenido asociado
Yo describo yo soy un pasaje a otra parte yo soy una lista desordenada
H1 H2 H3 H4 H5 H6 UL OL Li img div P BR span strong em small a table
blockquote
css - visualizaci贸n
CSS es un lenguaje formal(que se escribe en un archivo de texto), que define la presentaci贸n de un documento Html, Xml o Xhtml.
body { font-family:â&#x20AC;?Lucida Grande â&#x20AC;?, helvetica, arial, sans serif; color:#333333; } Selector
atributos
valores
xhtml <p class=”destacado”>bla, bla bla</p>
css .destacado{ background-color:#EE138F; color:#FFFFFF; }
Tipos de Selectores 1 Selectores de Etiquetas HTML: define el valor de las etiquetas html como body, h1 (encabezados), párrafos(p), img y los links(a) 2 Selector de Clase Con los selectores de clase estamos haciendo algo menos general que en la etiqueta. Se le puede colocar a cualquier elemento html por separado y cuantas veces queramos en el mismo documento. 2 Selector de Identificador Con esto nos referimos a un elemento único al que le aplicamos el estilo. Es decir ningún otro elemento podrá tener ese estilo. Generalmente asociado a la etiqueta DIV sirve para posicionar y agrupar elementos.
modelo de caja contenido
border: margin: padding: background-color background-image
css font-family: Set de caractéres. font-size: tamaño de fuente . valores en pixeles. color: define el color del texto. valores hexadecimales letter-spacing: espacio entre letras.valores en pixeles word-spacing: espacio entre palabras. line-height: alto de línea. Valores en píxeles width: ancho del elemento.valores en pixeles. height: alto del elemento.valores en pixeles. background-image: imagen de fondo para cualquier elemento. background-repeat: posibilidad que el elemento se repita. background-position: posibilidad de situar al elemento dentro del bloque
margin:espacio entre el borde y otro elemento externo border: borde entre el margen y el relleno. padding: relleno entre el borde y el contenido.