Hipertexto

Computación Multimedia 1 Entendiendo el Hipertexto

computación multimedia 1 Diseñ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

computación multimedia 1 Diseño Gráfico - Un diseño que no tiene estructura semántica - Información que no es posible de ser recuperada por motores 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

computación multimedia 1 Diseño Gráfico Xhtml html Hojas de estilo contenido visualización

computación multimedia 1 Diseño Gráfico 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

computación multimedia 1 Diseño Gráfico 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. 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

computación multimedia 1 Diseño Gráfico 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 Ventajas de separación contenido/visualización

computación multimedia 1 Diseño Gráfico 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

computación multimedia 1 Diseño Gráfico <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

computación multimedia 1 Diseño Gráfico Esto en un navegador se lee así:

computación multimedia 1 Diseño Gráfico Funcionamiento

computación multimedia 1 Diseño Gráfico

computación multimedia 1 Diseño Gráfico 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

computación multimedia 1 Diseño Gráfico 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:

computación multimedia 1 Diseño Gráfico <html> <head> <title>El primer documento HTML</title> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </body> </html>

computación multimedia 1 Diseño Gráfico Elementos importantes Volviendo 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.

computación multimedia 1 Diseño Gráfico 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

computación multimedia 1 Diseño Gráfico Elementos importantes <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.

computación multimedia 1 Diseño Gráfico 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.

computación multimedia 1 Diseño Gráfico Elementos importantes 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

computación multimedia 1 Diseño Gráfico 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 c ursivas 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.

Hipertexto

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (7)

Similar to Hipertexto

Similar to Hipertexto (20)

More from iConstruye

More from iConstruye (20)

Recently uploaded

Recently uploaded (20)

Hipertexto