Diseño y Edición de Páginas Web

• El diseño y edición de páginas web implica diversos aspectos, desde la planificación hasta la publicación y mantenimiento del sitio.
• Se debe considerar los criterios de diseño, herramientas de publicación, lenguajes de programación, alojamiento y accesibilidad.

Páginas Web

• Un sitio web es un conjunto de páginas web enlazadas, accesibles a través de una dirección común.
• Las páginas web contienen texto, imágenes, hipervínculos y otros elementos.
• Se accede mediante un navegador, que descarga y muestra las páginas desde servidores.
• La primera página que se ve al acceder a un sitio web es la página principal.
• La organización de la información en una página web es hipertextual, permitiendo ampliar información al hacer clic en palabras enlazadas.
• El lenguaje básico para crear sitios web es HTML (Hypertext Markup Language), siendo HTML5 la última versión.
• Pueden crearse escribiendo código HTML directamente en un editor de texto, guardando el archivo con extensión .html o .htm, aunque generalmente se utilizan editores de páginas web.
• Existen editores WYSIWYG y editores que requieren conocimientos avanzados de HTML.

Clasificación de Páginas Web

• Las páginas web pueden ser estáticas o dinámicas.
• Las páginas estáticas muestran el mismo contenido cada vez y se realizan en HTML.
• Las páginas dinámicas muestran resultados diferentes según la interacción del usuario y se realizan combinando HTML con lenguajes como ASP.NET, Java, PHP o JavaScript.

Funcionamiento de los Sitios Web

• Los sitios web son creados por programadores y diseñadores.
• Los administradores mantienen los sitios web.
• El proceso de trabajo habitual incluye crear los archivos del sitio web en el ordenador del administrador (sitio local)
• Luego se manipulan y guardan en un espacio accesible a los usuarios de Internet (sitio remoto), que está en un servidor.
• Los servidores alojan las páginas web y las ponen a disposición en la red.
• Se requiere programas de transferencia de ficheros (FTP) para comunicar el ordenador local con el servidor.
• Los usuarios acceden a las páginas web mediante navegadores.

Criterios de Diseño

• El diseño de una web requiere una fase inicial de prediseño para analizar los objetivos.
• Determinar el público objetivo, los contenidos a mostrar, las directrices de diseño y los recursos tecnológicos disponibles.
• Definir el tiempo y el presupuesto disponibles.
• Se debe establecer objetivos, recopilar y organizar contenidos, definir directrices de diseño y establecer un código de colores.
• La estructura debe considerarse para la calidad del sitio web, se debe incluir jerarquía visual clara, convenciones de diseño, áreas definidas, facilitar acceso a enlaces y simplificar el contentido.
• Los elementos de una web tipo incluyen encabezado, marca o logotipo, menú de navegación, titular, contenidos y pie de página.
• Todos los elementos del mismo tipo deberían ser similares.
• Hay que considerar el contraste texto/fondo, tamaño de caracteres y elección de colores.
• Los sitios profesionales siguen modas y tendencias del momento.

Usabilidad

• La usabilidad se refiere a la facilidad de uso de un sitio web.
• Los visitantes deben encontrar fácilmente lo que buscan, sin hacerse preguntas sobre la navegación.

Elementos de Diseño

• Evitar tipografías con serifa para facilitar la lectura en pantalla
• La fase de diseño involucra maquetación e interfaz.
• La maquetación organiza los espacios y contenidos visuales y audiovisuales.
• La interfaz facilita la interacción entre el usuario y el sitio web.
• Los elementos de maquetación son tipográficos, de imagen y funcionales.
• Las hojas de estilo (CSS) almacenan el conjunto de estilos que se usarán posteriormente en todo el sitio web.
• Una recomendación es no utilizar tipografía con serifa para la web.

Estándares de Accesibilidad

• Las páginas web de organismos públicos deben cumplir con los estándares de accesibilidad para personas con discapacidades.
• World Wide Web Consortium (W3C) establece niveles de conformidad (A, AA y AAA).
• La mayoría de los sitios web tienen el nivel AA.
• Cumplir con las normas básicas de accesibilidad es un objetivo a medio plazo, se debe intentar comprender los consejos de la W3C y cumplirlos para un alto nivel de especialización.
• Los estándares de publicación más básicos son utilizar hojas de estilo, asegurar la correcta visualización en distintos navegadores, usar etiquetas de texto alternativo para describir elementos visuales, facilitar la transcripción de ficheros de sonido y la descripción de vídeos, organizar las páginas con encabezados, listas y una estructura consistente, realizar tablas legibles y revisar el código HTML.

Herramientas de Publicación: Gestores de Contenidos

• Son herramientas fáciles de usar para crear y publicar contenido en Internet sin conocimientos técnicos.
• Un gestor de contenidos permite generar, editar y actualizar contenido web online (CMS).
• Los gestores de contenidos se basan en plantillas adaptables y personalizables, facilitando la creación de páginas web y homogeneizando el diseño.
• Se puede acceder mediante un navegador.
• Con un gestor de contenidos es posible crear blogs y wikis:
• Una wiki es un sitio web de construcción colectiva sobre un tema específico.
• Los blogs son diarios en Internet con entradas organizadas cronológicamente.

Algunos Gestores de Contenidos

• WordPress: utilizado para la creación de blogs y desarrollado en lenguaje PHP.
• Joomla: desarrollado en PHP es atractivo para el diseño de revistas digitales.
• Drupal: desarrollado en PHP y muy seguro, está orientado a comunidades y define perfiles de usuarios con permisos y accesos diferentes.

Lenguaje HTML

• El lenguaje HTML (Hypertext Markup Language) permite crear páginas web.
• El HTML es el lenguaje usado para la construcción de páginas web.
• Los archivos de formato HTML usan la extensión .htm o .html.
• El código HTML siempre empieza con y acaba con .
• En un documento HTML se distinguen dos partes principales: el encabezado y el cuerpo.
• Las etiquetas se completan con atributos, que son parámetros que definen las propiedades o el comportamiento de la etiqueta.
• Un elemento de HTML está compueto de dos etiquetas (la de apertura y la de cierre).
• : Apertura y cierre del código.
• : Cabecera del documento.
• : Establece el nombre del documento, dentro de .
• : Cuerpo del documento.

• ,

  ...

  , ...: Encabezado de primer orden, segundo orden..., dentro de .
• : Inserta una tabla.
• y : columna de una tabla, similares a los de tabla y fila.
• 
  : Salto de línea.
• y
  : Capa, con o sin clase del fichero de estilos CSS de la capa.

• y

  : Párrafo alineado.
• y
: Lista.
• y : Fuente y formato de la fuente.

HTML5

• El lenguaje HTML5 permite incorporar etiquetas específicas de funcionalidades multimedia (imagen, audio y vídeo).
• Permite comprobar la compatibilidad del navegador visitando el sitio: html5test.com.
• Ejemplos de páginas desarrolladas con HTML5: html5demos.com.

Lenguaje JavaScript

• El lenguaje JavaScript (lenguaje dinámico) permite interactuar con la página, interpreta y ejecuta el código, y se puede usar para, por ejemplo, validar datos en los formularios
• Permite interaccionar con el servidor desde local con AJAX o JSON

Editores de Páginas Web

• Los editores de páginas web son aplicaciones que permiten crear páginas web.
• Los editores WYSIWYG permiten confeccionar una web como si estuviéramos escribiendo un documento con un procesador de texto.

Alojamiento de Sitios Web y Transferencia de Ficheros

• Para que la página web creada pueda ser vista por otros usuarios es necesario situarla en un servidor de Internet.
• Se puede contratar un dominio con el nombre que queramos
• El archivo que constituye la página principal debe llamarse de una forma especial que deberemos comprobar en el alojamiento (normalmente será index.html).
• Los programas de transferencia de ficheros (FTP) comunican el ordenador con el servidor que brinda alojamiento.
• En España, el organismo que gestiona el registro de nombres de dominio en Internet bajo el código del país es Red.es, a través de agentes registradores como 1&1 Internet, Arsys o Piensa Solutions, entre otros.