pauta_de_escritura_hipertextual_2009

Guía de Trabajo | Escritura Hipertextual | Xhtml - CSS

Taller Multimedia

Jorge Barrera domingo 23 de agosto de 2009

Hasta ahora gran parte de los diseñadores web creaban sus documentos desde una perspectiva visual.

“Luego de crear el boceto en PhotoShop, cortamos y decidimos cuantas columnas crear y en que celda insertaremos tal o cual parte del diseño.

¿Necesito un borde de color rojo?

no hay problema,

¡crearé una tabla dentro de otra y listo!

o más rápido.... Hago mi sitio en Flash.”

Primer Impulso

domingo 23 de agosto de 2009

-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.

Problemas


La misma página de la W3C vista desde 5 dispositivos diferentes.


Contenidos /Visualización


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.

XHTML es la versión XML de HTML, por lo que tiene, básicamente,

las mismas funcionalidades, pero cumple las especificaciones, más

estrictas, de XML”.

Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas.

Xhtml?

“


http://es.wikipedia.org/wiki/Lenguaje_de_marcado




http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/P%C3%A1gina_web

http://es.wikipedia.org/wiki/P%C3%A1gina_web

http://es.wikipedia.org/wiki/XML

http://es.wikipedia.org/wiki/XML

http://es.wikipedia.org/wiki/World_Wide_Web_Consortium

http://es.wikipedia.org/wiki/World_Wide_Web_Consortium

http://es.wikipedia.org/wiki/Web_sem%C3%A1ntica

http://es.wikipedia.org/wiki/Web_sem%C3%A1ntica

Xhtml 1.0 transitional

Html 4.01 Strict 5.0

2.0http://xhtml.com/en/future/x-html-5-versus-xhtml-2/

http://www.inconcientecolectivo.cl/articulos/1758/


http://xhtml.com/en/future/x-html-5-versus-xhtml-2/

http://xhtml.com/en/future/x-html-5-versus-xhtml-2/



FuturologíaHtml 5


Xhtml

Html hoja de estilos

Contenidos Visualización


✓Simplifica el código y reducir el tamaño de los archivos.

✓Las páginas se cargan más rápido y el ancho de banda disminuye considerablemente. 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

porqué?

“


✓Aún persiste en algunos navegadores el tratamiento de ciertas

propiedades de visualización particulares sin ajustarse a un estándar.

✓Este problema aumenta cuando el navegador es IExplorer en cualquiera de sus versiones (5-6-7)✓Los Softwares de creación de web con GUI insisten en tratar el tema

del xhtml/css como si se tratara de un problema visual. Esto hace que

añadan automáticamente propiedades innecesarias, repetidas,✓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.

errores

“


estructura xhtml


head 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=ISO-8859-1" />

<title>Documento sin título</title>

</head>

<body>

</body>

</html>


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd




http://www.w3.org/1999/xhtml




<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Documento sin título</title>

</head>

<body>

</body>

</html>

Un documento HTML se compone de tres partes:

1. una línea que contiene declaración sobre la versión de 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








<div id=”noticias_agosto”>

<h1>El lenguaje html</h1>

<p>El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser <strong> Gedit </strong>, el <em>Bloc de Notas </em>de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim etc.</p>

</div>


http://es.wikipedia.org/wiki/Gedit


http://es.wikipedia.org/wiki/Notepad


http://es.wikipedia.org/wiki/GNU_Emacs


http://es.wikipedia.org/w/index.php?title=Wordpad&action=edit


http://es.wikipedia.org/wiki/TextPad


http://es.wikipedia.org/wiki/Vim


<div id=”noticias_agosto”>

<h1>El lenguaje html</h1>

<p>El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser <strong> Gedit </strong>, el <em>Bloc de Notas </em>de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim etc.</p>

</div>

<tr>

<td colspan="14" valign="top" bgcolor="#ffffff"> </tr>

<tr>

<td height="18" colspan="2" valign="top"> </td>

<td width="1" rowspan="2"> </td>

<td width="271" rowspan="2" align="center" valign="top" > <div align="center">

<a href="admision/becas.htm">admision </a> <br>

<table width="93%" height="248" border="1" cellpadding="4" cellspacing="0" bordercolor="#CCCCCC">

<tr>

<td width="240" height="246" valign="top">
















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










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

<p>

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


http://www.media.mit.edu




http://es.wikipedia.org/wiki/OLPC




Elementos importantes

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.

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

<h2>Libros</h2>

<p>

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










yo soy importante

Yo soy el contenido asociado

Yo describo

yo soy una lista desordenadayo soy un pasaje a otra parte


H1 H2 H3 H4 H5 H6

UL OLLi

P

strong em

blockquote

small

img

a

div

BR span

tabledomingo 23 de agosto de 2009

VisualizaciónCSS


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:”Lucida Grande ”, helvetica, arial, sans serif;color:#333333;

}

Selector atributos valores

css


Crear una clase especial para un párrafo que se destaque del resto

1 Selectores de Etiquetas HTML: define el valor de las etiquetas html como body, h1(encabezados), párrafos(p), img y los links(a)

Tipos de Selectores

2 Selector de ClaseCon 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 IdentificadorCon 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.

xhtml

<p class=”destacado”>bla, bla bla</p>

css

.destacado{

background-color:#EE138F;

color:#FFFFFF;

}

css


modelo de caja

border:

margin:

padding:

background-color

background-image

contenido

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.

atributoscss


pauta_de_escritura_hipertextual_2009

Documents