Categorii: Tot - código - dispositivos - accesibilidad - diseño

realizată de Javier fsgfgdf 13 ani în urmă

235

Diseño web con estándares

El diseño web efectivo se basa en la implementación de buenas prácticas, como declarar un Doctype y estructurar el código de manera clara y organizada. Es fundamental unificar estilos en las hojas de estilo CSS para mantener la consistencia visual del sitio.

Diseño web con estándares

Diseño web con estándares

Accesibilidad

Calcular accesibilidad
Tawdis
Se cumple totalmente con la legislación actual
Webs más coherentes y fáciles de navegar
Más compatibilidad con navegadores
Incremento audiencia y visibilidad
Barreras
Ausencia metadatos (etiquetas y atributos)
Malas prácticas en la estructuración de contenidos
Niveles de adecuación
Prioridad 3

Engloba aquellos requisitos que la página web puede seguir para optimizar aún más la accesibilidad de la gente que visita la web.

Nivel de Conformidad AAA

Prioridad 2

Consta de aquellas características que el sitio web debe cumplir para facilitar su accesibilidad.

Nivel de Conformidad AA

Prioridad 1

Formada por aquellos requisitos que el sitio web tiene que satisfacer obligatoriamente para que los internautas con necesidades especiales puedan acceder a la información.

Nivel de Conformidad A

Recomendaciones

Comprende el conjunto de estrategias, recomendaciones y recursos que hacen accesible la web a personas con discapacidades para que puedan percibir, comprender, navegar e interactuar con cualquier página. También permite el acceso a los contenidos de una web a través de dispositivos de capacidad limitada como móviles o agendas electrónicas.

Hojas de estilo CSS

Practicar con CSS
Servicio validación CSS
Ventajas
Permiten adaptación a varios dispositivos

Una página puede tener diferentes hojas de estilo para mostrarse en diferentes dispositivos, como pueden ser impresoras, lectores de voz o móviles.

Ahorro global en el ancho de banda

Ya que la hoja de estilo se almacena en caché después de la primera solicitud y se puede volver a usar para cada página del sitio, no se tiene que descargar con cada página web. Por otro lado, quitando todo lenguaje de marcado en la presentación en favor del uso de CSS reduce su tamaño y ancho de banda hasta más del 50%, esto beneficia al dueño del sitio web con menos ancho de banda y costes de almacenamiento, as como a los visitantes para los cuales las páginas se van a cargar más rápido.

Aumento de la accesibilidad de los usuarios

Es gracias a que pueden especificar su propia hoja de estilo, permitiéndoles modificar el formato de un sitio web según sus necesidades, de manera que por ejemplo, personas con deficiencias visuales puedan configurar su propia hoja de estilo para aumentar el tamaño del texto.

Mejor control en la presentación de un sitio web
Es aplicable a muchos documentos
Se puede guardar por separado al documento en sí
Contenidos y selectores
Guía de referencia
Tipos

La información CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, y dentro de estas posibilidades destacan tres formas de dar estilo a un documento web.

Estilo en línea

El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la sección body con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.

Hoja de estilo interna

La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elemento style dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.

Hoja de estilo externa

La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la sección head. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.

Funcionamiento

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración.

Atributo y valor

Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a cambiar.

Declaración

La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.

Selector

El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

Recursos

Standards W3C
Softonic
Scirus
Google Académico
Google Books
Alistapart
W3Schools

Buenas prácticas en el código

Otras recomendaciones
Guía 2
Guía 1
Intentar unificar estilos en las CSS
Estructurar bien el código fuente, con espacios y separaciones convenientes
Utilizar metadatos descriptivos para ayudar al SEO
Usar etiquetas significativas e intuitivas
Declarar un Doctype

Lenguaje de marcado HTML

Creación de un documento HTML
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

Dreamweaver (modo gráfico)

Editores de código fuente

Dreamweaver (modo código)

Editores de texto

Bloc de Notas

Elementos
Otras etiquetas

Enlaces hipertextuales

Sirve para poner título a los enlaces. Un título que se verá cuando, dentro del navegador, se coloque el cursor encima del enlace. Ejemplo:

<p><a href=”http://allmovie.com” title="Biofilmografías de realizadores y actores y fichas de films">AllMovie</a><br />

Su función es la de enlazar la página que estamos creando con un documento que tenemos en nuestro ordenador.

Su función es la de enlazar la página que estamos creando con otra web.

Metadatos

Se colocan en la sección <head> y son un conjunto de etiquetas que informan sobre el contenido, autor del documento, palabras clave que describen su contenido, etc.

Aclaración idioma

Por las pretensiones de carácter universal de la Web, es importante declarar explícitamente el lenguaje principal del documento, cosa que se hace añadiendo un atributo al elemento <html>:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

DOCTYPE

Todo documento XHTML debe incluir una declaración técnica denominada DOCTYPE. En el caso del lenguaje más utilizado actualmente en la creación de páginas web se trata de la siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Listas

Cada ítem de la lista lleva esta etiqueta.

  • Cada ítem de la lista lleva esta etiqueta.

    Esta etiqueta hace referencia a "unordered list" y se coloca a principio y a final de un texto que se desea organizar en forma de lista. No obstante, los elementos de la lista no están numerados.

    Esta etiqueta hace referencia a "ordered list" y se coloca a principio y a final de un texto que se desea organizar en forma de lista en la que cada ítem lleva un número delante (1,2,3...).

    Marcadores de texto

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

    Para marcar un texto en negrita. El término proviene del inglés "fuerte" y hace referencia al hecho de marcar con más consistencia un elemento.

    Organiza los contenidos bajo esta etiqueta en un párrafo.

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

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

    En "body"

    Es el título que aparece dentro de la página del documento Web.

    En "head"

    Es el título que aparece en la barra superior del navegador.

    Etiquetas básicas

    Es el cuerpo del documento, lo que vemos en mayor medida en el navegador.

    Elemento de cabecera. Se encuentra inmediatamente después de la primera etiqueta <html>, y por tanto al inicio del documento, para contener datos descriptivos sobre el documento.

    ...

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

    Definición

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

    Los detalles concretos sobre qué etiquetas se pueden utilizar en una página Web y cómo se utilizan esas etiquetas están establecidos en una norma internacional denominada XHTML (eXtended HyperText Markup Language) de cuya publicación se encarga un consorcio internacional denominado World Wide Web Consortium.