Sebastianjt - LCI Lesson Plan

Diseño & Desarrollo Web

If you’re not prepared to be wrong, you’ll never come up with anything original.

Sir Ken Robinson
Teoría Práctica PSP

01 Introducción

  • Introducción clase

Teoría

  • Historia de Internet
  • Cómo funciona Internet

PSP (V1)

  • Introducción Proyecto Site Personal (PSP)
  • Definir conceptos
  • Búsqueda de referentes

Recursos

Tareas

  • PSP: Finalización de conceptos. Escribir uno o dos párrafos describiendo el concepto del proyecto. Describir en uno o dos párrafos la línea gráfica que van a implementar. Presentarlo en un documento de texto sin formato (.txt).
  • PSP: Buscar 5 referentes gráficos que se ajusten al concepto definido y/o que ayuden a la construcción gráfica y conceptual del proyecto.

02 Tecnologías, estructura y estilos

  • Quiz

Teoría

  • Estructuración de una página web (Primera parte)
  • Tecnologías Front-End
  • Tecnologías Back-End

Práctica

  • Discusión Estructura
  • Discusión Estilos
  • Web Developer Tools Extension
  • La búsqueda de un buen editor de texto

PSP (V1)

  • Revisión de conceptos
  • Revisión de referentes
  • Inicio draft de contenido

Recursos

Tareas

  • Ejercicio demarcación de bloques de estructura y elementos en 5 interfaces gráficas. Descargar archivo interfaces. Ver este ejemplo como referencia.
  • Descargar y configurar un editor de texto (Sublime Text, Coda, Atom, Brackets). Estos son algunos que pueden utilizar, lo importante es encontrar uno que les guste.
  • Si quieren utilizar Sublime Text, descarguen Package Control.
  • PSP: Finalizar conceptos. Si necesitan pulir los conceptos de sus proyectos, por favor háganlo.
  • PSP: Inicio draft de contenido. Esto es un documento de texto donde planearán y definirán los contenidos tentativos que llevará su página.

03 Introducción a HTML & CSS

  • Quiz

Teoría

  • Estructuración de una página web (Segunda parte - code samples)

Práctica

  • Introducción a HTML
    • Términos Comunes (Elements, Tags, Attributes)
    • Estructura de un documento
    • Llamar a una página de estilos CSS
  • Introducción a CSS
    • Términos Comunes (Selectors, Properties, Values)
    • Trabajando con Selectores
    • CSS Resets y Normalización de navegadores

PSP (V1)

  • Revisión de contenido
  • Inicio proceso de diseño
  • Inicio base estructura HTML

Recursos

Tareas

  • Hacer una página HTML básica con contenidos simulados. Debe tener por lo menos un header con un título y párrafo corto. Adicional debe incluirse una imagen (img) en cualquier parte del documento. Deben incluir 3 etiquetas adicionales que les llamen la atención y les ayuden a mostrar contenido simulado. Estas las encuentran en la página de la W3Schools. La estructura de las carpetas debe ser la mostrada en este ejemplo. Presentar un archivo ZIP de la carpeta principal del proyecto (en el caso del ejemplo sería un zip de la carpeta tarea).
  • PSP: Inicio proceso de diseño. Presentar un archivo JPG o PNG de la primera ronda de diseño de su proyecto. Piensen en bloques de estructura tales como los vistos en la tarea de la clase 02. Este ya debe seguir los lineamientos del concepto definido y utilizar los contenidos que se escribieron anteriormente. Los contenidos de la página deben ser: 1) un cabezote con título de introducción, 2) un cuerpo de contenido y que haga uso de los textos ya presentados, 3) un pie de página con links a sus redes sociales.

04 Accesibilidad y Usabilidad

  • Quiz

Teoría

  • Accesibilidad y Usabilidad
    • Semántica en el Desarrollo
    • Semántica: Consideraciones tecnológicas
    • Semántica: Consideraciones humanas

Práctica

  • Profundización en HTML
    • Block vs. Inline Elements
    • Divisions & Spans
    • Text-Based Elements (Elementos de texto)
    • Structural Elements (Elementos estructurales)
    • Hipervínculos
  • Profundización en CSS
    • La cascada de estilos
    • Especificidad
    • Combinación de selectores
    • Capas de estilo con múltiples clases
  • Introducción a Chrome Developer Tools

PSP (V1)

  • Revisión base HTML
  • Inicio base estilos CSS

Recursos

Notas

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look.

Semantic HTML - Wikipedia, the free encyclopedia

Tareas

  • PSP: Finalización base estructura HTML. Presentarán un archivo index.html con la estructura básica de su página la cuál estará compuesta de: 1) cabezote con información de introducción, 2) cuerpo con un texto que explique qué es su proyecto y 3) un pie de página con un cierre y links a redes sociales.

05 De degradable content a progressive enhancement

  • Quiz

Teoría

  • Accesibilidad y Usabilidad
    • Evolución de degradable content a progressive enhancement
    • Web Standards

Práctica

  • Repaso conceptos HTML y CSS
    • Block vs. Inline Elements
    • Especificidad
  • Profundización en HTML y CSS
    • Box Model (modelo de caja)

PSP (V1)

  • Primera Entrega

Recursos

Tareas

  • Rapasar todos los conceptos de HTML y CSS vistos hasta el día de hoy y excribir 3 a 5 preguntas concretas que se discutirán la próxima clase. Presentar en un documento de texto (.txt).
  • PSP: Finalización del proyecto aplicando los conceptos aprendidos hasta el día de hoy.

06 Repaso conceptos HTML y CSS

  • Quiz

Práctica

  • Repaso conceptos HTML y CSS
    • Block vs. Inline Elements
    • Especificidad
    • Box Model

Recursos

Tareas

  • Descargar el ejercicio con la estructura inicial de la pagina de Dropbox. Favor revisar y comparar con el que desarrollaron en clase.
  • Descargar el ejercicio de repaso para elementos en bloque y elementos en linea. Revisar en su navegador agrandando y achiquitando su tamaño. Repasar el código para identificar dudas.
  • Descargar el ejercicio de Box Model que hicimos la clase pasada y repasar los conceptos.
  • Rapasar todos los conceptos de HTML y CSS vistos hasta el día de hoy y escribir TODAS las preguntas que tengan de forma concretas. Presentar en un documento de texto (.txt).

07 Repaso conceptos HTML y CSS

  • Quiz

Práctica

  • Repaso conceptos HTML y CSS
    • Box Model

Tareas

  • Repasar conceptos aprendidos hasta el días de hoy.

08 Posicionamiento de contenido I

  • Quiz

Práctica

  • Profundización en HTML y CSS
    • Posicionamiento de contenido: Floats
    • Box Model (box-sizing)

Recursos

Tareas

  • Finalización del ejercicio de Dropbox aplicando los nuevos conceptos de posicionamiento con float en CSS. Únicamente enfocarse en la sección del cuerpo donde encuentran la diagramación de las dos columnas. Ver imagen de referencia.

09 Posicionamiento de contenido I

  • Quiz

Práctica

  • Repaso en HTML y CSS
    • Posicionamiento de contenido: Floats

10 Posicionamiento de contenido II

  • Quiz

Práctica

  • Profundización en HTML y CSS
    • Posicionamiento de contenido: Positioning

Recursos

Tareas

  • PSP: Aplicación de nuevos conceptos de posicionamiento con position en CSS.

11 Introducción a Responsive Web Design

  • Quiz

Teoría

  • Responsive Web Design
    • Evolución de la web e introducción a Responsive Web Design (RWD)
    • El boom de la mobile web
    • Los nuevos retos y las nuevas consideraciones
    • La importancia del web performance
    • Mobile First
    • Conclusión

Práctica

  • Pruebas en dispositivos
    • iOS Simulator
    • Dispositivos reales

PSP (V2)

  • Inicio diseños para dispositivos móviles

Recursos

Tareas

12 RWD y Media Queries

  • Quiz

Teoría

  • Responsive Web Design
    • Nuevos procesos
    • Consideraciones de Desarrollo
    • Media Queries

Práctica

  • Ejercicios Media Queries

PSP (V2)

  • Redefinición de la estrategia del proyecto
    • Estrategia de Contenidos
    • Dirección de Arte
    • Dirección Tecnológica

Recursos

Tareas

  • PSP: Finalizar redefinición de la estrategia del proyecto

13 Repaso Responsive Web Design (RWD)

  • Quiz

Práctica

  • Repasar conceptos Responsive Web Design

PSP (V2)

  • Revisión de progreso
  • Resolver dudas

Tareas

  • PSP: Continuar proyecto.

14 Repaso Responsive Web Design (RWD)

  • Quiz

Teoría

  • Responsive Web Design
    • Repasar conceptos

PSP (V2)

  • Preentrega
  • Revisión de progreso
  • Resolver dudas

Tareas

  • PSP: Finalización proyecto.

15 Entrega final PSP

PSP

  • Sustentación entrega final
↑