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)
    • Posicionamiento de contenido
      • Floats
      • Positioning

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
    • Posicionamiento de contenido

Recursos

Tareas

  • PSP: Aplicación de nuevos conceptos de posicionamiento.

07 Profundización HTML y CSS

  • Quiz

Práctica

  • Profundización en CSS: Trabajando con Tipografía
    • Text Color
    • Font Properties
    • Text Properties
    • Web-Safe Fonts
    • Background Property
  • Profundización en HTML
    • Listas
    • Listas no ordenadas
    • Listas ordenadas
    • Listas de descripciones
    • Anidando Listas
    • Añadir Media:
      • Imágenes
      • Audio
      • Video

Recursos

Tareas

  • Practicar de nuevos conceptos de CSS.

08 Introducción a Responsive Web Design (RWD)

  • 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

  • Repasar conceptos de Floats.
  • Repaso primeros conceptos de RWD.

09 RWD y Media Queries

  • Quiz

Teoría

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

Práctica

  • Ejercicios Media Queries

Recursos

Tareas

  • Aplicar conceptos de RWD a la interface de Treehouse. Hacer tres rangos de diagramación de interface: smartphones, tablets y desktops.

10 Responsive Front-End Frameworks

  • Quiz

Teoría

  • Responsive Web Design
    • Responsive Front-End Frameworks

Práctica

  • Introducción a Preprocesadores de CSS
  • Ejercicios Foundation / Bootstrap

PSP

  • Inicio implementación Framework de CSS

Recursos

Tareas

  • PSP: Seleccionar Framework de CSS
  • PSP: Implementación base

11 Profundización en Responsive Web Design

  • Quiz

Teoría

  • Responsive Web Design
    • Imágenes en Responsive Design
    • Técnicas con AJAX y JavaScript

Práctica

  • Ejercicios Preprocesadores de CSS
  • Ejercicios Front-End Frameworks (Foundation / Bootstrap)
  • Inicio mini-proyecto ToDos App
    • Base estructural y estilos

PSP (V2)

  • Revisión de progreso
  • Resolver dudas

Recursos

Tareas

  • Mini-proyecto ToDos App: Finalizar diseño e implementación estática de la aplicación.
  • PSP: Progreso implementación en Framework de CSS.

12 Repaso conceptos Responsive Web Design

  • Quiz

Teoría

  • Responsive Web Design
    • Repasar conceptos:
      • Responsive Front-End Frameworks
      • Imágenes en Responsive Design
      • Técnicas con AJAX y JavaScript

Práctica

  • Continuación mini-proyecto ToDos App
    • Inicio comportamiento y partes funcionales

PSP (V2)

  • Revisión de progreso
  • Resolver dudas

Tareas

  • Mini-proyecto ToDos App: Finalizar implementación de partes funcionales de la aplicación.
  • PSP: Progreso implementación en Framework de CSS.

13 Herramientas y recursos para RWD

  • Quiz

Teoría

  • Responsive Web Design
    • Herramientas, referencias, artículos y recursos para RWD.
    • Repasar conceptos:
      • Imágenes en Responsive Design
      • Técnicas con AJAX y JavaScript

Práctica

  • Finalización mini-proyecto ToDos App
    • Preguntas y espacio para aclarar dudas

PSP (V2)

  • Revisión de progreso
  • Resolver dudas

Tareas

  • PSP: Progreso implementación en Framework de CSS.

14 Finalización PSP

  • 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
↑