DISEÑO Y EDICIÓN DE PÁGINAS WEB

WEB: Conjunto de documentos o

páginas enlazadas entre sí a las tenemos
acceso a través de un navegador.
- Son creadas por un administrador.
- Para que una web sea accesible desde
internet debe estar alojada en un
servidor: una especie de “ordenador
especial” que va a poner nuestra web a
disposición de la red.
1. FUNCIONAMIENTO DE UNA WEB
2. ELABORACIÓN DE LA PÁGINA WEB

- Los lenguajes de programación más utilizados en las webs son HTML y CSS.
 El lenguaje HTML (hypertext markup language), conocido como lenguaje
de hipertexto, dará estructura a nuestra página web.
Utiliza etiquetas que se expresan entre símbolos:
<> Etiqueta de apertura.
</> Etiqueta de cierre.
Así como “atributos” que dan valores adicionales a las etiquetas.
 El lenguaje CSS (cascading style sheets), nos permite almacenar “hojas de
estilo”, que darán estilo y diseño a nuestros contenidos web.
 3. EDITORES DE PÁGINAS WEB
- Aunque podemos estructurar una página web de cero usando HTML en
un procesador como es el bloc de notas de nuestro PC…
…no es precisamente un proceso práctico, además el diseño no
sería demasiado atractivo.
- Para facilitarnos el trabajo tenemos los editores de páginas web. De los
existen dos tipos distintos:
3.1- Editores tipo WYSIWYG (what you see is what you get): que
traducen directamente textos a código HTML.
3.2- Editores que trabajan directamente con HTML: requieren
conocimientos más profundos de informática para su manejo.
 3.1- EDITORES TIPO WYSIWYG
• Son los más sencillos de utilizar.
• Viene a ser un programa que nos permite redactar documentos de
texto y convertirlos al lenguaje propio de las webs.
• Suelen incluir una función para integrar “hojas de estilo” CSS para
dar diseño a la página, (documentos .css con el diseño que vamos a
usar para la web).
• Ejemplos:
 Adobe Dreamweaver
 NVU
 KompoZer
 Blue Griffon
 3.2- EDITORES QUE TRABAJAN CON HTML

• Son más complejos de manejar, requieren conocimientos de

programación y diseño web.
• Ejemplos:
 Visual Studio Code
 Komodo Edit
 Sublime Text
 Arachnophlia
 4. GESTORES DE CONTENIDOS
- Son otra herramienta útil para la creación de páginas web, también se
conocen como “CMS” (content manager system).
- Permiten crear, organizar y publicar contenidos en línea.
- No requieren conocimientos de diseño web y programación.
- Utilidades:
 Elaboración de blogs.
 Sitios webs y tiendas online.
 Web de consultas o “wikis”.
  Ejemplos de los CMS más utilizados:

WordPress (posiblemente el más usado).

Joomla! (usado principalmente para comercio electrónico).

Drupal (permite muchas visitas y es muy seguro).

Google Sites (aplicación muy sencilla).

 Blogger.
5. ALOJAMIENTOS WEBS Y FICHEROS

• Para alojar nuestra web necesitamos un servidor.

• Podemos comprar un dominio con el nombre de nuestra página.
Actualmente la venta de dominios es un negocio muy rentable.
• Organismo español que se encarga del registro de nombres de
dominios: Red.es.
• Algunos registradores de dominios importantes:
IONOS (1&1 Internet).
Arsys.
Piensa Solutions.
 6. TRANSFERENCIA DE FICHEROS

• Generalmente vamos a requerir un programa de transferencia

de ficheros para realizar la publicación de nuestra web.
• Estosprogramas se denominan “FTP” y realizan el trabajo de
comunicar nuestro ordenador (sitio local) con el servidor que
brinda alojamiento a nuestra web.
• No siempre son necesarios porque hay programas que permiten
publicación directa, (como el editor web KompoZer).
• Algunos ejemplos:
FileZilla.
Complemento FireFTP del navegador Firefox
 7. ACCESIBILIDAD WEB

• Objetivo: lograr que las webs sean utilizables por el máximo nºde
personas, independientemente de sus conocimientos, capacidades,
características técnicas su equipo… Se trata de crear webs más
inclusivas.
Si quieres saber más visita: Accesibilidad Web: ¿Qué es? (ua.es)
• Beneficia a:
- Personas con discapacidad.
- Personas que sufren dificultades relacionadas con el envejecimiento o
situaciones desfavorables, como usuarios que no dominan el idioma o de
menor nivel cultural, usuarios inexpertos, etc.
  LOS CRITERIOS DE ACCESIBILIDAD
 Los publica la WAI (web accessibillity initiative), una rama del W3C (World Wide Web Consortium), que
marca las “Directrices de Accesibilidad para Contenido Web” (WCAG).

 Las directrices WCAG han ido evolucionando en criterios desde su comienzo: WCAG 1.0, 2.0, 2.1, 2.2 (las
más actuales y rigurosas).

 En función del grado de cumplimiento se podrá incluir un logo con el nivel: A (nivel básico), AA
(estándar) el cual tienen la mayoría de web, o AAA (alto). Las certificaciones son emitidas por el W3C,
pero no controlan que se cumplan los criterios siendo los proveedores los responsables del uso del logotipo.

 Logos:
 8. TIPOS DE PÁGINAS WEB
• Existen dos tipos de páginas web:
a) Estáticas:
 Solo puede modificarlas el administrador.
 Los usuarios no pueden realizar ningún tipo de interacción con las personas usuarias, son
escasamente interactivas.
 Ejemplos: sitios corporativos de empresas, galerías de imágenes y vídeos.
b) Dinámicas:
 El usuario puede interactuar con la web: crear contenidos (comentarios, artículos…), filtrar
contenidos, acceder con contraseña, comprar artículos, etc.
 Son altamente interactivas, para su creación se requiere mayor conocimiento de
programación: JavaScript o PHP.
 Ejemplos: Marketplace de Facebook, Amazon, cestas de la compra virtuales.