pauta_de_escritura_hipertextual_2009 by Jorge Barrera

Taller Multimedia GuĂa de Trabajo | Escritura Hipertextual | Xhtml - CSS

Jorge Barrera domingo 23 de agosto de 2009

Primer Impulso 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.”

domingo 23 de agosto de 2009

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

domingo 23 de agosto de 2009

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

domingo 23 de agosto de 2009

Contenidos / Visualizaci贸n

domingo 23 de agosto de 2009

Xhtml?

“

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.

domingo 23 de agosto de 2009

Html Xhtml

4.01 Strict

1.0 transitional

5.0 2.0

http://xhtml.com/en/future/x-html-5-versus-xhtml-2/ http://www.inconcientecolectivo.cl/articulos/1758/

domingo 23 de agosto de 2009

FuturologĂa Html 5

domingo 23 de agosto de 2009

Contenidos

Visualizaci贸n

Xhtml Html

domingo 23 de agosto de 2009

hoja de estilos

porqué?

“

✓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

domingo 23 de agosto de 2009

errores

“

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

domingo 23 de agosto de 2009

estructura xhtml

domingo 23 de agosto de 2009

head

domingo 23 de agosto de 2009

body

domingo 23 de agosto de 2009

<!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&iacute;tulo</title> </head>

domingo 23 de agosto de 2009

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

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>

domingo 23 de agosto de 2009

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

domingo 23 de agosto de 2009

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

domingo 23 de agosto de 2009

<tr>

domingo 23 de agosto de 2009

<td colspan="14" valign="top" bgcolor="#ffffff"> </ tr> <tr> <td height="18" colspan="2" valign="top">&nbsp;</ td> <td width="1" rowspan="2">&nbsp;</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">

domingo 23 de agosto de 2009

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

<title>Descripción del Calentamiento Global Perspectivas Científicas - Departamento de Biología Universidad de Chile</title> </head> <body>

< >Algunas consideraciones acerca del calentamiento global</h1>

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

domingo 23 de agosto de 2009

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

<title>Descripción del Calentamiento Global Perspectivas Científicas - Departamento de Biología Universidad de Chile</title> </head> <body>

< >Algunas consideraciones acerca del calentamiento global</h1>

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

< >Profesor Luis Merino, PHD. Universidad de Chile. </h2>

h4: Subtítulo de sección

<p>El clima siempre ha variado, el problema del cambio

h6: subtítulo de elemento

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>

domingo 23 de agosto de 2009

h5: Título de elemento

domingo 23 de agosto de 2009

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

domingo 23 de agosto de 2009

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

domingo 23 de agosto de 2009

yo soy importante

Yo soy el contenido asociado

Yo describo yo soy un pasaje a otra parte yo soy una lista desordenada

domingo 23 de agosto de 2009

H1 H2 H3 H4 H5 H6 UL OL Li img div P BR span strong em small a table domingo 23 de agosto de 2009

blockquote

Visualizaci贸n CSS

domingo 23 de agosto de 2009

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.

domingo 23 de agosto de 2009

css body { font-family:â&#x20AC;?Lucida Grande â&#x20AC;?, helvetica, arial, sans serif; color:#333333; } Selector

domingo 23 de agosto de 2009

atributos

valores

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

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

domingo 23 de agosto de 2009

css

modelo de caja contenido

border: margin: padding: background-color background-image

domingo 23 de agosto de 2009

css

atributos

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.

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.

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

domingo 23 de agosto de 2009