GAC011 Informática II: Desarrollo web

GAC011 es el espacio donde construyes y publicas un sitio web real. Seis unidades te guían desde un diseño en papel, pasando por HTML, CSS y JavaScript, hasta la puesta en marcha del sitio y un plan para promocionarlo.

Todo se evalúa según lo que produces: un storyboard y un diseño, el propio sitio web, una estrategia de redes sociales, además de los trabajos prácticos. No hay examen escrito.

• El diseño tiene tanto peso como el código. Los resultados de aprendizaje del módulo nombran la estética, el diseño, la navegación y la usabilidad junto con la programación.
• ⚠ El sitio que diseñes aquí es lo que GAC017 le añade un backend y una base de datos. Un plan débil ahora costará tiempo en el siguiente módulo.

Puedes ejecutar todos los ejemplos de este módulo en el entorno de desarrollo integrado del sitio, y las referencias a HTML, CSS y JavaScript allí profundizan más que estas notas.

• Comienza en papel. Un wireframe muestra la estructura sin color, que es la única forma de debatir sobre la estructura.
• La arquitectura de la información define qué va dónde: las páginas y el camino que sigue un visitante entre ellas.
• La jerarquía visual indica al ojo lo que importa —a través del tamaño, el peso, el espaciado y el contraste, no mediante adornos—.
• Diseña para la audiencia, y define quiénes son antes de elegir cualquier elemento.

• HTML marca el significado, no la apariencia. Un encabezado es <h1> porque es un encabezado.
• Un elemento tiene una etiqueta de apertura, contenido y una etiqueta de cierre; un atributo va dentro de la etiqueta de apertura.
• Los elementos semánticos —<header>, <nav>, <main>, <article>, <footer>— informan al navegador, al motor de búsqueda y al lector de pantalla qué representa cada sección.
• Toda imagen necesita texto alternativo. Es lo que escucha un visitante con discapacidad visual y lo que lee un motor de búsqueda.

• CSS controla la apariencia, y mantenerlo separado del HTML es todo el punto de esa separación.
• Un selector elige elementos; una declaración asigna un valor a una propiedad.
• El modelo de caja explica el diseño: contenido, luego relleno (padding), luego borde (border) y finalmente margen (margin).
• El diseño responsivo hace que una página funcione en un teléfono y en una laptop, generalmente con anchos flexibles y una consulta de medios.

Ejemplo resuelto. Una tarjeta demasiado ancha en un teléfono.

La solución no es un ancho fijo en píxeles. Establece max-width para que la tarjeta nunca supere la pantalla, permítele encogerse por debajo de ese límite, y añade una consulta de medios solo para el cambio que una pantalla más pequeña realmente necesita, como apilar dos columnas en una sola.

Diseñar primero el caso flexible y tratar la consulta de medios como una excepción es lo que significa "responsivo".

• JavaScript se ejecuta en el navegador y modifica la página después de que esta ha cargado.
• El DOM es la página representada como un árbol de objetos que tu código puede leer y modificar.
• Un evento —un clic, un envío de formulario, una pulsación de tecla— activa una función que has escrito.
• Mantén la complejidad baja en este nivel: valida formularios, alterna menús, filtra listas. Un sitio que deja de funcionar cuando falla JavaScript es un error de diseño, no de codificación.

• El hosting coloca tus archivos en un servidor; un nombre de dominio dirige a los visitantes hacia ellos.
• Prueba antes de publicar: cada enlace, en un teléfono, en un navegador que no sea el tuyo.
• La accesibilidad no es opcional —contraste, texto alternativo, navegación por teclado y texto que se pueda redimensionar—.
• ⚠ Verifica qué está permitido publicar. Una imagen o una fuente en tu sitio necesitan una licencia que lo permita, exactamente igual que una cita en un ensayo necesita una referencia bibliográfica.

• Define la audiencia y el objetivo antes de elegir una plataforma. "Estar presente en redes sociales" no es un objetivo.
• Un plan de contenidos dice qué publicarás, con qué frecuencia y quién lo escribirá.
• Las métricas deben vincularse al objetivo: alcance, interacción y clics hacia tu sitio son cosas distintas, y solo una de ellas es tráfico.
• Mide, luego cambia una sola cosa. Cambiarlo todo a la vez no te enseña nada sobre qué cambio funcionó.