guia trabajo n1 html css
23
taller multimedia guía de trabajo n 1 - escritura hipertextual
-
Upload
taller-de-simulacion -
Category
Documents
-
view
254 -
download
0
description
taller multimedia guía de trabajo n 1 - escritura hipertextual el caso dreamweaver -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. diseño visual contenidos / visualización
Transcript of guia trabajo n1 html css
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">
<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>
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
<!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 importanteselemento 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ítuloh3: título de sección
h4: Subtítulo de sección
h5: Título de elemento
h6: subtítulo de elemento
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
table
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:”Lucida Grande ”, helvetica, arial, sans serif;color:#333333;
}
Selector atributos valores
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;
}
border:
margin:
padding:
background-color
background-image
contenido
modelo de caja
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.
css
