Clase 1: Diseño desde el Código


¿Cuál es el objetivo del curso?

  • Conocer y utilizar las herramientas técnicas para la implementación de proyectos digitales
  • Comprender las posibilidades técnicas y particularidades del medio digital

Herramientas tales como:

  • Tecnologías de la web abierta
  • Estándares web
  • Herramientas de Desarrollo
  • Control de Versiones

Lecturas recomendadas

Tim Berners-Lee propone un sistema de sistema de gestión de archivos sobre internet. Es conocido por ser el padre de la World Wide Web. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en diciembre de 1990. Algunos de sus logros asociados son:

  • HTTP = protocolo de transferencia de hipertexto
  • HTTPS --} S=seguro (conexión encriptada)
  • HTML=Lenguaje de marcado de hipertexto
  • URL= Localizador de recursos uniforme
  • W3C= consorcio www

¿Cómo funciona un sitio web?

Existe un navegador web con una URL o URI, la cual determina la ubicación del sitio en la red. Navegador es distinto al servidor:

  • Navegador front-end
  • Servidor back end

Lenguajes utilizados en front-end

  • HTML (hypertextmarkup) --} contenido (no cómo se ve)
  • CSS (cascoding style sheets) --} presentación (cómo se ve, estilos)
  • JS (JavaScript) --} comportamiento (eventos)
  • Vamos a trabajar en codepen.io para ejercitar durante las clases. Es una plataforma para programar online.

¿Cuál es el proceso de construir un sitio web?

Existe una metolodologia de diseño centrado en el usuario que tiene las siguiente características:

  • Sucesión de etapas
  • Entregables definidos

Cuenta de 5 pasos cíclicos

  1. Investigación: benchmark, personas, escenarios, etc.
  2. Contenidos: mapa de arquitectura de contenidos
  3. Interacción: wireframes, diagramas de flujo, partituras
  4. Diseño visual: maquetas de diseño, documentación
  5. Implementación: front-end, back-end

¿Qué herramientas usaremos?

  • Navegador web (Chrome o firefox) + herramientas del desarrollador (f12)>inspector>consola
  • Editor de código Visual Studio Code
  • GitHub

¿Cómo nos organizaremos? - Metología del curso

  • Teoría y práctica
  • Trabajo en equipo
  • Actividades en clase
  • Presentación de tareas a través de Github Classroom
  • Desarrollo de un proyecto personal y uno grupal

1.- Bitacora personal

Contiene:

  • Presentación personal
  • Notas, apuntes y apredizajes clase a clase
  • Actividades en clase
  • Sección de interés personal
  • Contacto

2.- Proyecto Grupal (max. 3 personas)

Sitio web sobre alguna problemática medioambiental o social:

  • Construye un relato a través del uso de links, textos, imágenes, etc.
  • Presenta a los autores del sitio
  • Pauta
  • Validar el código
  • Uso semiótico de etiquetas HTML
  • Accesibilidad
  • Orden y reutilización
  • Nivel de dificultad