2. Crear un sitio web (básico)

En este curso crearás un sitio web sencillo estático (por ejemplo uno de Hacer un proyecto web) para entender bien todos los elementos de la interfaz web y diseño de un sitio web. Aprenderás a:

  1. Escribir bien para la web

  2. Organizar bien la información de tu sitio

  3. Planificar y Desarrollar un sitio web sencillo

Requisitos Previos

Necesitas unos conocimientos básicos de HTML. Puedes revisar este curso de Arkaitz Garro si no tienes ni idea de HTML.

Está organizado en 8 talleres de unas 3 sesiones de clase. En total unas 24 sesiones de clase más tu trabajo en casa.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

2.1. Escribiendo en la Web

  1. Cada página web importa

  2. Piensa primero en el usuario (empatía):

    1. ¿Quién lo va a leer?

    2. ¿Qué necesita?

    3. ¿Qué quieres tú (o tu organización)?

  3. Escribe para la web ( Be Succint! )

    1. Al grano (conciso)

    2. Fácil de escanear

    3. Usa (bien) los enlaces

  4. Escribe para que te lean ( Make Users read your words )

    1. Legible. Que se pueda leer bien

    2. Asumible. Que una persona con educación media pueda leerlo

    3. Comprensible. En lenguaje fácil de entender para el usuario

  5. ¿Cómo lee el usuario en la web? No lo hacen ( How users .. )

  6. Y lo que más leen está arriba ( The Fold Manifesto …)

  7. Recomendaciones:

    1. Escribe conciso

    2. Resalta palabras clave (negritas)

    3. Usa bien los títulos y subtítulos (etiquetas H eading)

    4. Usa listas (etiquetas O rdered L ists y U nordered L ists)

    5. Una idea por párrafo (etiquetas P)

    6. Primero la conclusión y luego empiezas (al revés que en papel)

  8. Contenido y Pantalla (Screen Real State)

    1. Una cosa es la página y otra lo que el usuario ve

    2. Cada usuario (suele) usar una pantalla diferente

    3. Ya veremos como adaptar el diseño a la pantalla (con diseño adaptable) pero el contenido influye

    4. La gente lee sobre todo lo que está al principio (y puede ver)

  9. Lorem Ipsum :

    1. Es un texto de ejemplo, una plantilla para no pensar en el contenido (copiar/pegar)

    2. Útil para probar el diseño pero no es contenido real

T02-A01. Aprender a escribir bien

Comienza a escribir las páginas web de tu sitio teniendo en cuenta estas recomendaciones. Ideal seguir esta secuencia:

  1. Escribe en texto puro (sin formato)

  2. Añade estructura con texto puro (títulos, párrafos, listas,tablas y marcar enlaces)

  3. Aplica HTML en la estructura (y resaltado)

2.2. Organizando un sitio web

  1. Sitio web: varias páginas web (organizadas y estructuradas)

  2. Arquitectura de la Información (IA - Information Arquitecture):

    1. Estructura: cómo se organizan los recursos (Mapa del Sitio)

    2. Navegación: cómo se ubica el usuario en el sitio web (Saber donde estoy)

  3. Situar al usuario:

    1. Donde cree que está (su mapa mental)

    2. Donde está realmente (su lugar real)

  4. Enlace (adelante) y Atrás (Back Button) y … no romper enlaces (pasados) ( Fighting Linkrot )

  5. Concepto Breadcrumbs ( miguitas de pan ):

  6. Menús

    1. Categorías (jerárquicos) vs Etiquetas (transversales)

    2. Sitúa al usuario y permitirle moverse y encontrar información

    3. Menu Design :

      1. Visibles

      2. Que muestre donde está

      3. Sincroniza el mapa mental y real del usuario

      4. Que sea fácil de usar

  7. Home Page: la página principal:

    1. Inicio de la navegación pero ..

    2. … el usuario llega por cualquier lugar (buscadores)

    3. Es la página más importante de tu sitio web (probablemente)

T02-A02. Organizar tu sitio web

Comienza a organizar las páginas web de tu sitio teniendo en cuenta estas recomendaciones.

  1. ¿En qué lugar de la página estará el menú?

  2. ¿Qué tipo de menú te gustaría utilizar?

  3. ¿Cómo sabe el usuario en qué lugar de tu sitio web está?

  4. ¿Cómo sabe el usuario volver atrás en su historial?

  5. ¿Qué enlaces pondrás y qué título le vas a poner?

  6. ¿Cómo va un usuario al home page, desde cualquier página?

  7. ¿Cómo será la estructura de tu web en tu sistema de archivos?

2.3. Planifica tu sitio web

Usa el papel ( es importante ):

  1. Piensas más rápido

  2. Piensas mejor (más creativo)

  3. No tienes (casi) restricciones y es muy barato

T03-A03. Planifica y Diseña tu sitio web

Escoge cualquiera de las ideas de sitios web que te propongo. Y prepara un plan (en papel):

  1. ¿Cuales son los objetivos de tu sitio web?

  2. ¿Qué fuentes necesitas consultar/estudiar para construirlo?

  3. ¿Quién es la audiencia y cómo llegan a tu sitio?

  4. ¿Qué 5 tareas principales crees que tendrá tu usuario tipo?

  5. ¿Como es el esquema básico de la página web? (layout)

  6. ¿Cómo está organizado el sitio web? Todos los recursos (HTML/CSS/JS/Multimedia)

  7. ¿Cómo será tu entorno de desarrollo?

  8. ¿Cómo será la navegación por tu sitio web?

  9. ¿Qué material multimedia tendrá tu sitio web? ¿Necesitas crearlo y vas a enlazarlo (licencias)?

  10. ¿Qué especificaciones técnicas y/o estándares seguirá tu sitio web?

2.4. Desarrolla tu sitio web

  1. Evita los errores más comunes:

  2. Enlaces

  3. Entender el URL como un interfaz ( URL as a UI )

    1. Cada día menos importante (pero todavía lo suficiente)

      1. Se usa la búsqueda (y el usuario no usa tanto el URL) pero …

      2. el url se usa en muchos lugares (por ejemplo correo electrónico o las páginas de búsqueda)

      3. el url explica cómo está organizado tu sitio web

    2. Piensa tanto en el dominio como en url-path como en el nombre de archivo (ideal sin extensión)

    3. Mantener enlaces (generar confianza)

T02-A04. Desarrolla tu sitio web

Escoge cualquiera de las ideas de sitios web que te propongo (Hacer un proyecto web). Y prepara un plan (en papel):

  1. Pon en marcha tu entorno de desarrollo

  2. Crea la estructura base de tu sitio (en local)

  3. Desarrolla continuamente:

    1. Edita (sólo HTML) ->

    2. Prueba ->

    3. -> Prueba

    4. -> Y así sucesivamente (según las horas disponibles)

  4. Prueba tu sitio web:

    1. Validaciones técnicas y conformación con estándares

    2. Test de Usuarios

  5. Envía tu sitio web (local o publicación)

2.5. Calidad de tu sitio web

  1. La mejor medida de calidad: haz un test de usuarios

  2. Y mide continuamente PageSpeedInsights :

    1. Pones el URL

    2. Revisas cómo es su rendimiento

    3. Lees la ayuda para mejorarlo

  3. Algunos parámetros:

    1. Rendimiento (Performance)

      1. Velocidad de descarga

      2. Elementos más pesados

      3. Carga de la página (renderizado)

    2. Accesibilidad (Accesibility)

    3. Best Practice.

    4. Posicionamiento Buscadores (SEO). Orientaciones para posicionamiento web

  4. The Complete Guide

T02-A05. Revisa tu sitio web

  1. Haz (prepara) la prueba de usuarios de tu sitio web

  2. Haz una validación del HTML de tu sitio web

  3. Usa las herramientas de medición (PSI / Lighthouse) para analizar tu sitio web

2.6. Mejora tu sitio Web

  1. Es un proceso de desarrollo continuo (ojo a las horas dedicadas)

  2. Usa los parámetros de medida de los test o los análisis automáticas para obtener tus tareas de mejora

  3. Es un trabajo que nunca termina

T02-A06. Mejora tu sitio web

Sigue editando y mejorando tu sitio web

2.7. Publica tu sitio Web

  1. Una primera idea:

    1. Lo más sencillo: paquete comprimido (un ZIP)

    2. Lo más habitual: usar sistemas CMS

    3. Lo más profesional: usar un cvs

  2. Necesito un servicio web público:

    1. URL Público: dominio (propiedad) + archivos (alojamiento)

    2. Sofware Servidor:

      1. En mi sistema (on-premise) o en el de otros (cloud)

      2. Integrado en el sistema de otros

  3. Uso un CMS :

    1. Hay tropecientos pero …

    2. … la referencia es Wordpress

    3. Tiene sus ventajas (y sus inconvenientes)

    4. No es nuestro objetivo aquí (pero sí para un usuario estándar)

  4. Una muy buena opción ( GitHub Pages / Gitlab Pages ):

    1. Resuelve el problema del entorno de desarrollo local/remoto

    2. Resuelve el problema de infraestuctura (servidor web)

T02-A07. Publicar tu sitio web

Envíame un url público donde pueda ver tu sitio web

2.8. Uso de GitHub Pages (por ejemplo)

Crea tu sitio web usando GitHub ( Comenzando … / Creating and Deploying )

  1. Usas GitHub Pages directamente (se ve en el siguiente tema).

  2. Publicas tu propio sitio web (aconsejado): #. Creas un repositorio para tu sitio web (tunombre.github.io) #. Preparas tu entorno de desarrollo (clonas repositorio y sincronizas) #. Creas tu sitio web (puedes añadir más sitios web creando URL específicos)

Usar GHP (GitHub Pages) para publicar tu sitio web

Publica tu sitio web (no usando GH Pages sino el tuyo propio).