Curso introductorio de HTML/CSS/JavaScript

Contenidos

Objetivos

Actividades

Tiempo

Materiales

1

Encuadre

1. Presentación del curso.

2. Herramientas principales que se usarán en el curso.

3. ¿Qué es Git y Github?

1. Presentación

2. Instalación y configuración de los softwares Sublime Text 2, Google Chrome con sus Developer Tools, Git y cuenta en Github, Cygwig.

1 hr.

1. Proyector

2. Computadora con acceso a Internet

2

Introducción

1. Lenguajes de marcado

2. ¿Qué es HTML y CSS?

3. HTML 5 y CSS 3 o la nueva manera de hacer web

Historizar los lenguajes de marcado y dirigirlos hacia una nueva comprensión del texto y de la web.

1. Exposición

2. Discusión sobre lenguajes de marcado, sobre la estructura y la presentación de un texto

1.5 hrs.

1. Proyector

2. Computadora con acceso a Internet

3

HTML 5

1. ¿Por qué HTML 5?

2. Características (compatibilidad, problemas reales, estándares)

3. Tipos de contenidos y elementos de HTML

4. Compatibilidad entre navegadores (guerra de los navegadores)

5. Buenas prácticas para procurar estándares

Realizar un repaso histórico de HTML y exponer elementos generales, buenas prácticas y sintaxis.

1. Exposición

1.5 hrs.

1. Proyector

2. Computadora con acceso a Internet

4

Estructuras básicas

1. Estructura básica de HTML: elementos dentro del encabezado y del cuerpo

2. Enlaces (relativos, externos)

3. Etiquetas para la adición de imágenes, audio, video

4. Formularios

5. Elementos que funcionan con CSS/JavaScript

Exponer elementos de HTML, estructuras básicas de sitios web y controles de formularios.

1. Exposición

2. Ejercicio: crear la estructura básica de un sitio web con enlaces entre páginas (sitio personal)

3. Ejercicio: añadir contenidos multimedia con HTML (video, audio, imagen)

4. Ejercicio: crear un formulario de contacto

2 hrs.

1. Proyector

2. Computadora con acceso a Internet

5

CSS

1. ¿Por qué CSS?

2. Características (compatibilidad, problemas reales, estándares)

3. Sintaxis y elementos: selectores

4. Compatibilidad entre navegadores (guerra de los navegadores)

5. Buenas prácticas para procurar estándares (evitar CSS hacks, usar resets/overrides, vendor prefixes y shorthand notations)

6. Animaciones y transiciones

Realizar un repaso histórico de CSS y exponer elementos generales,  buenas prácticas y sintaxis.

1. Exposición

2. Ejercicio: añadir estilos a nuestro ejemplo anterior: background, colors, fonts, etcétera.

3. Ejercicios: añadir estilos con selectores de CSS 3 al formulario de contacto.

2 hrs.

1. Proyector

2. Computadora con acceso a Internet

6

JavaScript

1. ¿Qué es JavaScript?

2. Tipos (arrays, objects, functions, strings, numbers, booleans)

3. Funciones (En JavaScript todo es una función)

4. Variables y el scope

5. Statements (if/else if/else, for, switch, while, foreach, try/catch)

6. ECMAScript 2015 (ECMAScript 6)

7. Client Side/Server Side

Exposición sobre la historia de JavaScript y el tipo de lenguaje al que pertenece. Explicar en términos generales cómo funciona JavaScript y sobre su uso actual.

1. Exposición

2. Ejercicio: crear un archivo de JavaScript y resolver los ejercicios.

2 hrs.

1. Proyector

2. Computadora con acceso a Internet

7

JS/HTML

1. Document Object Model (DOM)

2. Librerías para alterar el DOM (jQuery, Mootools, Zepto).

3. Selectores en jQuery

4. AJAX (XMLHttpRequest) o solicitudes asincrónicas en el navegador.

Explicar el funcionamiento de la API de DOM. Exponer las herramientas más utilizadas para alterar el DOM.

1. Exposición

2. Ejercicio: realizar un ejemplo de selección de elemento HTML y alteración de propiedades de CSS.

3. Ejercicio: solicitud de ítems de la API de Zotero mediante AJAX y adición de los mismos al DOM.

2 hrs

1. Proyector

2. Computadora con acceso a Internet

8

Herramientas de optimización y compilación de código

1. Preprocessors: LESS, SASS, Stylus

2. Template Engines: Jade, HAML

3. Task runners: Grunt y Gulp (compilation, minification, concatenation)

4. Frameworks: Bootstrap, Foundation, PureCSS

Exposición general de herramientas para optimizar HTML y CSS, así como para agilizar su desarrollo.

1. Exposición

2. Ejercicio: abrir un repositorio en Github para el sitio web final donde todos participarán

2. Ejercicio: añadir el framework Bootstrap y jQuery a nuestro ejemplo mediante CDN’s.

1 hr.

1. Proyector

2. Computadora con acceso a Internet

3. Terminal en computadora (Cygwig en Windows)

9

Realización del sitio web grupal

1. Librerías: Backbone.js, Angular, Ember.js, Marionette.js.

2. HTML/CSS/JS para crear aplicaciones móviles: Apache Cordova, PhoneGap, Ionic Framework.

3. Git básico para el trabajo en equipo

Explicación general sobre el uso de Git para el trabajo colaborativo, así como del uso de Bootstrap para el desarrollo ágil de sitios web.

1. Exposición

2. Ejercicio: planeación y creación de contenidos usando Hackpad

3. Ejercicio: organización por grupos para crear en HTML, CSS, JavaScript.

4. Ejercicio: diseño y desarrollo del sitio web grupal

3 hrs.

1. Proyector

2. Computadora con acceso a Internet

3. Terminal en computadora (Cygwig en Windows)