hipertexto

Computación Multimedia 1Entendiendo el Hipertexto

computación multimedia 1Diseño Gráfico

Hasta ahora gran parte de los diseñadores web creaban sus documentos desde una perspectiva visual.“Luego de crear el boceto, cortamos y decidimos cuantas tablas 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

Visión inicial


- Un diseño que no tiene estructura semántica- Información que no es posible de ser recuperada pormotores de búsqueda (google, yahoo, etc)- Dificultad en las actualizaciones de diseño.- Trabajo perdido en rediseños.- Escasa economía de medios.- Limitaciones en la estructura tipográfica.

PROBLEMAS


Xhtml

html

Hojas de estilo

contenido visualización


Definiéndolo de forma sencilla, “HTML es lo que se utiliza para crear todas las páginas web de Internet”. Más concretamente, HTML es el lenguaje con el que se “escriben” la mayoría de páginas web.

Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.

Breve explicación de XHTML


Su objetivo es avanzar en el proyecto del World Wide WebConsortium de lograr una web semántica, donde :

la información, y la forma de presentarla estén claramente separadas.En este sentido, XHTML serviría únicamente para transmitir la información que contiene un documento, dejando para hojas de estilo (como las hojas de estilo en cascada, css) su diseño

y JavaScript su comportamiento en distintos medios (ordenadores, PDAs, teléfonos móviles, impresoras...).

Por qué XHTML


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 buscadoresMenos código, más lugar para el contenido,menos problemas para los buscadores en indexar la información del sitio

Ventajas de separación contenido/visualización


Separando contenido de diseño mediante XHTML y CSS se podrán realizar cambios en el sitio en cuestión de segundos en un solo archivo, sin importar que sean 10 o 1000 páginas.

Si diseñamos ajustándonos a un estándar podemos estar seguros de que los navegadores que han sido diseñados para ajustarse a dicho estándar representarán nuestros contenidos tal y como los habíamos imaginado.

Reducción en el tiempo de desarrollo


<html><h1>esto es un título principal</h1><p>esto es un párrafo</p><a href=”http://www.google.cl”>esto es un link</a></html>

Escritura hipertextual


Esto en un navegador se lee así:


Funcionamiento


Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

El primer documento HTML


El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

A continuación se muestra el código HTML de una página web muy sencilla:


<html><head><title>El primer documento HTML</title></head><body><p>El lenguaje HTML es <strong>tan sencillo</strong> queprácticamente se entiende sin estudiar el significadode sus etiquetas principales.</p></body></html>


Elementos importantesVolviendo al código HTML del primer ejemplo, es importante conocer las tres etiquetas principales de un documento HTML (<html>, <head>, <body>):

<html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o después de la etiqueta <html> (con una sola excepción que se verá más adelante). En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora.


Elementos importantes

<head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta

<title>, que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador



<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas.



elemento title:Los autores deberían utilizar elelemento title para identificar los contenidos de un documento. Debido a que los usuarios a menudoconsultan documentos fuera de contexto, los autoresdeberí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áginah2: subtítuloh3: título de secciónh4: Subtítulo de secciónh5: Título de elementoh6: subtítulo de elemento



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.

¿PREGUNTAS?

hipertexto

Design