DOM: Document Object Model

Siempre que entramos al mundo de la interacción con el usuario y el dinamismo web necesariamente tocamos el lenguaje de programación JavaScript que es el que corre por excelencia en todos los navegadores de manera casi estándar, pero para poder crear contenido en JavaScript e integrarlo a nuestra web debemos saber algo denominado el DOM, Document Object Model.Básicamente el DOM es el documento html denominado por objetos a los cuales podemos acceder por su id o por su clase, cuando hablamos de JavaScript puro hablamos de que podemos acceder de una forma casi estándar en cada navegador pero no es de preocupación el tema pues lo más necesario como el acceder por id y por clase es demasiado estándar.Para entender mejor qué es el DOM el siguiente gráfico:Tenemos a document que hará referencia a nuestro documento html y después de este tenemos nuestro documento estructurado como lo vemos en la imagen.Acceso al DOMPodemos acceder a un id casa de la siguiente forma:> document.getElementById('main') …Por su clase:> document.getElementsByClassName('chapter') […, « Previous,Next Reference »]En este caso nos devuelve un arreglo de accesos al DOM.EventosTambién tenemos eventos del mouse y el teclado:onkeydown:En este caso cuando presione una tecla me saldrá el alert.onclick:Click meEn este caso al darle click al botón desplegará hello world en el p con id demo.Otras AlternativasA muchos les gusta ser hardcode y utilizar JavaScript puro para hacer cosas como estas, pero tenemos frameworks que nos hacen la vida más fácil como los siguientes:1. JQuery2. MooTools3. PrototypeEn este curso trabajaremos con el framework que está en pleno auge y que personalmente me gusta mucho para algunas cosas (no para todo).

DOM: Document Object Model

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM

Introducción a CSS I

Introducción a CSS II

Developer Tools en navegador I

Developer Tools en navegador II

Preguntas Y Respuestas

Selectores CSS y flexbox

Preguntas antes de la clase

Flexbox

Imports en CSS

Retícula

Selectores en CSS y Pseudo selectores

Páginas internas

Preguntas y respuestas en clase

Listas Ordenadas, Float y Display

Preguntas antes de la clase

Listas ordenadas

Float y display

Preguntas y respuestas en clase

SASS y workflow profesional

Status HTTP

Counter Increment y pseudoSelectores

Textos y estilos con CSS3 Parte I

Textos y estilos con CSS3 Parte II

Animaciones con CSS

SASS

Preguntas y respuestas en clase

Contenido complementario

¿Por qué tu sitio web es tan lento?: Carga de navegadores

Preprocesadores CSS

Dibujando con CSS

Cómo acceder a la cámara de un dispositivo con la API de HTML5

Cómo crear filtros en CSS

Reticulas en CSS

Proyecto: Creando un App de Clima

HTML, CSS básico y uso de selectores

Estructura y etiquetas en HTML

Introducción a CSS

Selectores en CSS

Atributos del Selector

Selectores de Atributo

Sesión de preguntas y respuestas

Metodología BEM en HTML5 y CSS3

Float vs Display

Unidades de medida

Metodología BEM

Pseudo selectores

Sesión de preguntas y respuestas

CSS y workflow profesional

Progressive Enhancement

Fuentes y tipografías web

Responsive Media Queries

Imagenes Responsive y Retina

Preprocesadores CSS y SASS

Herramientas

Conceptos Básicos de JS y JQuery

Bases de desarrollo web moderno

Definición de JSON y API Rest

¿Qué es JSON?

DOM, BOM, JSON, AJAX

DOM: Document Object Model

Etiqueta Template en HTML5

Geolocation

Closures, Jquery y Local Storage en nuestra aplicación

Closures

Introduccion a GIT

Conectando con API Externa

Inyectando Datos en nuestro template

Añadiendo más ciudades a nuestra app

Guardando datos en LocalStorage

Despliegue con Git y GitHub