Mer av detta

ARQUITECTURA Y SUS DISCIPLINAS

av Marcello Villarreal

ESTRUCTURA CAMPAÑAS

av Jessica Yannone

EDUCACIÓN, PEDAGOGÍA. ENSEÑANZA Y DIDACTICA DIFERENCIAS Y RELACIONES

av Mafe Medina

Formación Profesional Integral del SENA.

av MARIA DEL ROSARIO TOSCANO ARDILA

Conclusiones

Requerimientos

Políticas de control de calidad

Auditorias y evaluación

Libros de estilo

Uso de tecnologías adecuadas

Separan contenido de presentación

Analizan el código fuente

Producen código fuente sin errores

Familiaridad con los estándares web

Validación

Formatos de presentación (XSL, CSS)

Lenguajes de marcado (XML, XHTML)

Para el profesional, plus de competitividad diferencial

Accesibilidad

Optimización SEO

Extraordinaria facilidad de mantenimiento

Contenido compatible con

Futuras formas de procesamiento y explotación

Futuros agentes de usuario

Diferentes agentes de usuario

Diseño web con estándares

Mapa conceptual diseño de webs con estándares

Práctica número 4, mapa conceptual unidad 3.

Por Carlota Alegre Garcia (Estudiante de periodismo y humanidades de la UPF)

_____________________

Fuentes principales

- Apuntes Unidad 3 (Arquitectura de la Informació) . Powerpoints unidad 3.

- Documento 6: Manual sobre XHTML.

- Documento 7: Manual sobre CSS.

- Powerpoints: Documento 4 (Accessibilidad).

- tutorial arquitectura de la información.

Recursos útiles

Extensiones de Firefox

Las principales ventajas de Firefox desde el punto de vista del diseñador y creador de páginas web es que respeta los estándares del WC3. Además, permite instalar pequeños añadidos, llamados extensiones,

que añaden funcionalidades al navegador.

Una extensión se puede considerar como un pequeño programa que se instala dentro del navegador y que añade alguna característica interesante. La mayoría son gratuitas y de gran utilidad.

Otras

ColorZilla

permite obtener los colores de cualquier elemento de la página mediante una herramienta similar a la de los programas de diseño gráfic.

MeasureIt

Permite medir la altura y anchura de cualquier elemento de la página.

HTML Validator

Una buena práctica, y un requisito impuesto por muchos clientes, es que las páginas XHTML creadas sean válidas y por tanto, pasen el validador de HTML y de CSS disponible en el W3C. Para facilitar la validación de las páginas, esta extensión indica en todo momento los errores y las recomendaciones sobre el código HTML de la página que muestra el navegador.

Web Developer

Antes de que existiera Firebug, la extensión Web Developer era la más útil para los diseñadores web. Se trata de una barra que se instala junto con el resto de herramientas del navegador y que básicamente se puede utilizar para obtener información sobre la página. Además de proporcionar información, la extensión Web Developer incluye utilidades que Firebug todavía no incorpora, como la redimensión de la ventana del navegador a las dimensiones estándar, recuadrar todos los elementos de un determinado tipo (celdas de tabla, divs, etc.), mostrar una lupa, una regla redimensionable, mostrar los elementos de tipo hidden, mostrar la ruta de cada imagen, etc.

Firebug

Firebug es probablemente la extensión más útil y completa de todas las que están relacionadas con el diseño web. No importa si tu especialidad es XHTML, CSS, JavaScript, DOM o Ajax, ya que Firebug proporciona toda la información posible sobre cada uno de estos temas. Como Firebug tiene tantas opciones, lo mejor es instalar la extensión y probarla en tus proyectos web.

CSS

Sintaxis

Se indica el nombre de elemento cuyo aspecto deseamos especificar, por ejemplo, body. Este elemento, en CSS se denomina selector. Después del selector hay un espacio, y entre corchetes ({…}) se indica la propiedad, por ejemplo, font-family, después, dos puntos (:), y el valor de la propiedad, por ejemplo, verdana. Si hay más de una propiedad, se separan mediante punto y como (;) y se cierra la declaración con corchetes como ya hemos visto ({…}). Finalmente, todas las declaraciones de estilo se encierran entre las etiquetas . Es aconsejable indicar la propiedad type="text/css" en la etiqueta de apertura, de modo que la pareja de etiquetas recomendable es ésta: .

Pseudo-enlaces

CSS define cuatro pseudo-clases que permiten aplicar estilos avanzados para los enlaces

de los documentos. Las pseudo-clases permiten aplicar diferentes estilos a un mismo

enlace en función de su estado: enlace no visitado, enlace visitado, enlace en el que se

pasa el puntero del ratón por encima y enlace activo en ese momento.

:active, estilos que se aplican al enlace cuando el usuario está pinchando sobre el enlace (el tiempo durante el que se aplica este estilo es muy breve)

:hover, estilos que muestra el enlace cuando el usuario posiciona el puntero del ratón sobre el enlace.

:visited, aplica estilos a los enlaces que han sido pinchados anteriormente (el navegador del usuario elimina automáticamente el historial de enlaces visitados cada cierto tiempo).

:link, permite aplicar estilos para los enlaces que aún no han sido pinchados.

Decoración

{text-decoration: none;}

Color

{color: #CC0000;}

Tamaño

{font-size: 22pt;}

¿Qué es?

Cascading Style Sheets (CSS) es la forma de controlar el aspecto de un documento XHTML, es decir, su presentación, es decir, cómo vamos a verlos en el monitor (o una en forma impresa). - CSS permite controlar cómo debe interpretar el navegador cada elemento. Por ejemplo, podemos cambiar la forma en la cual se interpretan los elementos

El método es muy sencillo: se puede añadir, dentro del elemento de un documento XHTML un par de etiquetas de estilo (), dentro de las cuales podemos especificar el aspecto de los elementos de la página.

,

El método es muy sencillo: se puede añadir, dentro del elemento de un documento XHTML un par de etiquetas de estilo (), dentro de las cuales podemos especificar el aspecto de los elementos de la página.

, etc., o hacer que cambie la apariencia de los enlaces, etc.

El método es muy sencillo: se puede añadir, dentro del elemento de un documento XHTML un par de etiquetas de estilo (), dentro de las cuales podemos especificar el aspecto de los elementos de la página.

Ejemplo:body {font-family: Verdana, Arial; font-size: 12pt; margin-right: 15px; margin-left: 15px}

Metadatos

Etiqueta "Meta"

Descripción

Permite definir el valor de los metadatos que forman la metainformación del documento.

Tipos

Descripción de la página . Es usado por los motores de búsqueda indizar el sitio y para presentar la descripción del sitio en los resultados de una búsqueda

Título del enlace … . Provoca la aparición de un recuadro explicativo cuando el usuario desplaza el cursor sobre el enlace. Usado también por lo motores de búsqueda para indizar la página

Autor Para indicar el nombre del autor. Usado por motores de búsqueda

Palabras clave Sirve para representar el contenido de la página, para indizar la página web por motores internos y por algunos motores de búsqueda.

Título de la página . Es el dato desplegado en la barra superior del programa navegador. Es usado también por los motores de búsqueda para presentar el título de la página en los resultados de una búsqueda.

¿Qué son?

Las páginas y documentos HTML incluyen más información de la que los usuarios ven en sus pantallas. Los datos que incluye la página relacionados con la propia página se denominan metainformación. Toda la metainformación se incluye en la sección de la cabecera, es decir, dentro de la etiqueta

Accessibilidad

Ventajas

Sitios que cumplen con la ley

Menores costes de mantenimiento Menores costes de servidor.

Páginas compatibles con los próximos navegadores

Antecendentes

Documentación

El libro fácil: libros con tipografía y redacción adecuados a diversos niveles cognitivos. Libros “leídos”.

Multimedia

Films y programas de televisión para personas sordas. Films “explicados” para invidentes

Arquitectura

Edificios y ciudades accesibles: eliminación de barreras de acceso.

Ejemplo: Proyecto del W3C

La acessibilidad significa que la gente con dificultades pueda percibir, entender, navegar y interactuar con la web yq eu puedan además contribuir a la Web.

Estrategias, guias, recursos para hacer la web mas accesible a la gente con dificultades.

Limitaciones

Cognitivas

Motoras

Auditivas

Visuales

Objetivo

El principal objetivo de la accesibilidad web es el de permitir a cualquier usuario, independientemente del tipo de discapacidad que sufra, el acceso a los contenidos del sitio y permitirle la navegación necesaria para realizar las acciones deseadas.

(X)HTML

XHTML (eXtended HyperText Markup Language)es el lenguaje con el cual están hechas las páginas web. La página web que vemos en el navegador es el resultado de la interpretación que el navegador hace de un documento escrito mediante el lenguaje XHTML. Este documento se denomina código fuente. El lenguaje XHTML se compone de un número de etiquetas que sirven para marcar contenidos de la página e indicar cómo debe mostrarlos el navegador.

Editores

Gestores de contenido. Programas mediante los cuales la edición se realiza principalmente mediante el uso de formularios y la selección de opciones de menú.

Editores en modo gráfico, como el propio programa Dreamweaver, pero en este caso en modo gráfico.

Editores de código fuente, como Dreamweaver en modo código.

Editores de texto, como el Bloc de Notas.

XHTML Y HTML

El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, también es descendiente de SGML).

Atributos

Para internacionalización

dir. Permite indicar la dirección del texto (útil para los idiomas que escriben de derecha a izquierda)

xml:lang = “codigo de idioma”. Indica el idioma del elemento. Tiene más prioridad que lang y es obligatorio incluirlo cuando se define el atributo lan

lang = “codigo de idioma”. Indica el idioma del elemento mediante un código predefinido.

Básicos

title = “texto” Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)

style = “estilos CSS“ (Establece de forma directa los estilos CSS de un elemento)

class = “texto” (Establece la clase CSS que se aplicará al elemento)

id = “texto” Identifica de forma única a cada elemento dentro de una página HTML

Estructura básica documento

...cuerpo del documento en sí

...Un elemento de cabecera, inmediatamente después de la primera etiqueta , y por tanto al inicio del documento, para contener datos descriptivos (metadatos) sobre el documento

...Un indicador inicial y final de que la página contiene código fuente XHTML.

Enlaces

Direcciones

Absolutas

Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.

Ejemplo:

Enlace a un documento en nuestro ordenador
Página n. 002

Relativas

Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.

Ejemplo:

Enlace a un documento en el mismo ordenador y en la misma carpeta
Página n. 002

a documentos del mismo ordenador

Enlace a un documento en nuestro ordenador
Página n. 02

a páginas web

La etiqueta <a>...</a> marca el lugar donde, si se hace clic, se activará el enlace. Este lugar de activación del enlace se denomina anclaje de inicio. El atributo href indica cuál será el destino del enlace, por esa razón, se denomina anclaje de destino. El anclaje de destino es la página Web o la sección del documento que se mostrará en el monitor si se hace clic sobre el anclaje de inicio.

Anclaje: ...

Etiquetas

El proceso de indicar las diferentes partes que componen la información se denomina

marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el

inicio y el final de una sección se denominan etiquetas. Aunque existen algunas excepciones,

en general las etiquetas se indican por pares.

Otras básicas

Para crear listas

para cada elemento lista:

Inicio:

em: Abreviatura de “énfasis”. Marca un texto en cursiva.

strong: Para marcar un texto en negrita.

P (Párrafo)

hr

Línea horizontal. Traza una línea horizontal. No necesita etiqueta de cierre, pero hay que incluir una barra inclinada al final: <hr />

h1, h2

Las etiquetas h1, h2, etc., significan literalmente cabecera (o sea, títulos) de nivel 1, nivel 2, etc. Son los diferentes niveles de títulos que aparecen en el cuerpo de muchos documentos relativamente complejos y que deben presentar su contenido más o menos organizado por capítulos, subcapítulos, etc. XHTML proporciona hasta 6 de estos niveles (h1, h2, …, h6)

title

No es el título que aparece en el cuerpo del documento, sino el título que aparece en la banda superior del navegador.

declaración técnica denominada DOCTYPE.

(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)

- Un DTD es el conjunto de normas y restricciones que se definen para fijar la sintaxis que

deben cumplir los documentos de un determinado tipo.

De cierre

carácter <, seguido del carácter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >.

De apertura

carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >.

Caracterísitcas básicas

Las etiquetas se deben anidar correctamente. Por ejemplo, negritas y cursivas es correcto, pero negritas y cursivas no lo es porque están cruzadas entre ellas: en este caso, si la etiqueta es la primera, su etiqueta de cierre debe ser la última

Los valores de los atributos deben ir siempre entre comillas, aunque sean valores simples.

Todos los elementos deben tener una etiqueta de cierre. Las etiquetas sin contenido afectado, como

---

se cierran o bien de este modo:

---

o bien con una sola etiqueta pero con una barra:

---

.

El elemento

Los documentos XHTML deben tener los 3 elementos estructurales: , y .

En XHTML, las etiquetas, los atributos, los valores, etc., de cada elemento, excepto la declaración DOCTYPE, se escriben siempre en minúsculas.

Historia

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de “hipertexto” para compartir documentos.