Video Curso desarrollador Frontend html5 css3 Full Stack

Descripciòn: 

El curso se divide en 3 partes dictadas por profesionales de primer nivel. Veremos temas de Diseño y Maquetación con HTML5 y CSS3. Desde diseño  multidispositivo, retina y multi ptantalla hasta temas como semántica y maquetación; Stylus Boilerplates y Modernizr. Cerrando con Responsive Design, Mobile First y Animaciones avanzadas de CSS3.
 
Seguiremos con temas de javascript y Conexión a Datos, que incluyen Foundation framework, javascript orientado a objetos, JSON: Objetos y transferencia de datos y APIs para la creación de un cliente de Youtube y más.
 
Cerraremos el curso aprendiendo Patrones De Diseño Y Buenas Prácticas que todo buen profesional de Frontend debe de conocer como Backbone.js vs Angular.js, Optimización de código para producción, Uso de CDNs, cache y gzip en cliente y servidor; Estructura de archivos CSS y javascript para terminar con Flujo de interacción y lujo de datos.

 

 CONTENIDO:

CLASE 1: INTRODUCCIÓN A FRONTEND, HTML5, CSS3 Y PREPROCESADORES

VÍDEO: Clase No. 1 – Segunda Generación
Introducción a Frontend, HTML5, CSS3 y preprocesadores. Encuentras las emisiones para Europa y para América Latina.

VÍDEO: Uso de Stylus y NIB
Aprendemos a sacar todo el poder de Stylus

VÍDEO: How to: hacer que tus vídeos sean Responsive Design
Leonidas Esteban, del team mejorando.la, te enseña cómo lograr que tus vídeos se adapten a cualquier pantalla.

VÍDEO: Preguntas y respuestas – Clase 1 – 2G
El vídeo con las preguntas y respuestas de nuestra primera clase.

VÍDEO: Instalación de Emmet y la sintaxis de Stylus en Sublime text
Aprende a instalar cualquier plugin en Sublime Text 2

TEXTO: Qué significa backend y frontend en el diseño web
Diferencias entre estos dos conceptos: te ayudarán a entender cada especialidad.

TEXTO: Soporte HTML5 en navegadores viejos
¿Soporte IE6? De ninguna manera. Te explicamos las razones.

TEXTO: Vídeo html5
Conoce la etiqueta vídeo de HTML5 y sus ventajas.

TEXTO: ¿Cómo consumir el contenido de Frontend Profesional 2G?
Algunas indicaciones que te ayudarán a entender cómo guiarte por el contenido en Platzi en la segunda generación de Frontend.

TEXTO:¿Qué es un Frontend?
Detallemos los conceptos de un profesional en Frontend, sus especializaciones e integración con equipos interdisciplinarios.

TEXTO: CSS3 y sus capacidades
Aprende todas las novedades que nos trae CSS3 con respecto a CSS2.

TEXTO: HTML5 y la Web Semántica
La importancia de HTML5, así como las principales etiquetas que se deben de considerar al trabajar con esta tecnología.

TEXTO: HTML5: Una estrategia de marketing
Aprende sobre las tecnologías que comprenden a HTML5 y el plan de desarrollo que tuvo en su creación.

TEXTO: GEOLOCALIZACIÓN, LOCAL STORAGE Y SESSION STORAGE
Aprende sobre como localizar a tus clientes, guardar archivos en disco por sesión y de forma permanente, 3 de las nuevas herramientas de HTML5.

TEXTO: [Resumen] Introduccion a Frontend
Resumen de la clase dada por John Freddy Vega sobre introducción a FrontEnd, HTML5, CSS3 y Stylus.

CLASE 2: RESPONSIVE DESIGN ICON FONTS Y CSS3 AVANZADO

VÍDEO: Clase No. 2 – Segunda Generación
Aprende los principios del Responsive Design, Media Queries, Icon Fonts. Empieza a crear tu app Puls4. Encuentras las emisiones para Europa y para América Latina.

VÍDEO: Preguntas y respuestas – Clase 2 – 2G
El vídeo con las preguntas y respuestas de nuestra segunda clase.

VÍDEO: Bonus 2G: ¿cómo lograr que todos tus proyectos estén en Stylus?
Leonidas Esteban, del team mejorando.la, te enseña cómo convertir tus proyectos de CSS a Stylus.

VÍDEO: Breve tutorial para Instalar Stylus en Windows, Mac y Linux
Freddy nos explica como instalar Stylus en cualquier sistema operativo. No olvides complementar con la lectura.

TEXTO: Stylus: el preprocesador CSS
Paso a paso para la instalción de NodeJs en cualquier sistema operativo. Instalación de Stylus.

TEXTO: Icomoon: usar iconos como fuentes
Resumen de @johnarleycano: ¿cómo podemos usar íconos como fuentes?

TEXTO: Responsive design
Aprende el mejor responsive desde cero y practica lo enseñado en clase.

TEXTO: Diseño retina: Magia sin exceder los bytes
Aprende como hacer un diseño que se vea genial hasta en pantallas Retina Display

TEXTO: [Resumen] Desarrollo de la interfaz de PULS3
Estudia y recuerda lo hablado en clase para tener presente los temas más importantes para el examen.

CLASE 3: BOOTSTRAP Y javascript

VÍDEO: Clase No. 3 – Segunda Generación
Aprende Bootstrap y javascript. Empieza a crear tu app Puls4. Encuentras las emisiones de Europa y América Latina.

VÍDEO: Preguntas y respuestas – Clase 3 – 2G
Consulta la sesión de preguntas y respuesta de la tercera clase de Frontend 2G.

TEXTO: Nuevas Capacidades de javascript
javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha recibido muchas habilidades nuevas. Esta es una lista de las más importantes.

TEXTO: [Resumen] javascript Orientado a Objetos.
Repasemos javascript, el concepto de orientación a objetos y bases del lenguaje. Preparate para la siguiente semana de clases!

TEXTO: Conexión a API’s: Probando GitHub API V3.0
A partir de peticiones JSON creemos algo genial en base a conexiones al API de GitHub.

TEXTO: Mustache.js: Sistema de Templates
Lectura complementaria a “CONEXIÓN A API’S: PROBANDO GITHUB API V3.0?

TEXTO: JSON: Objetos y transferencia de datos
Aprende qué es JSON cómo crearlos y como editarlos desde javascript!

CLASE 4: EVENTOS, JQUERY CLOSURES

VÍDEO: Clase No. 4 – Segunda Generación
Emisiones para Europa y América Latina.

TEXTO: jquery: manejo de eventos
Hagamos que nuestro acceso al DOM sea más productivo.

VÍDEO: Sesión de preguntas y respuestas – Clase 4 – 2G
Pablo Rigazzi responde a las preguntas de esta clase.

TEXTO: DOM: Document Object Model
Entiende qué es el DOM y como acceder a el con javascript puro entre otras alternativas a este.

TEXTO: Introduccion a jquery: Accediendo al dom
Aprende una forma alternativa y estándar para acceder al DOM.

TEXTO: [Resumen] jQuery Mobile y javascript Avanzado
Resumen de la cuarta clase de Pablo Rigazzi en donde hablamos de jQuery Mobile y javascript Avanzado.

CLASE 5: BACKBONE.JS

VÍDEO: Clase No. 5 – 2G
Clases para Europa y América Latina.

VÍDEO: Sesión de preguntas y respuestas – Clase 5 – 2G
Daniel Závala responde a las preguntas de la clase.

TEXTO: Material segunda generación.
Este es el servidor web que utilizaremos en la clase 5 y 6 del curso. Por favor instálenlo antes de la clase.

TEXTO: ¿QUÉ ES PONYEXPRESS?
Conoce el nuevo proyecto Open Source de Mejorando.la para la optimización del frontend, Sí, lo aprenderás a manejar en este curso.

TEXTO: Sistemas de templates
Hagamos mas profesional y escalable la inserción de contenido dinámico.

TEXTO: Web app real time con Node.js, JSON, Backbone y PonyExpress
Aprendamos a manejar Pony Express a partir de lo aprendido con Daniel y Pablo Rigazzi

TEXTO: ¿Te es difícil entender los mixins?
Gran aporte de @Akevinieron dándonos una ayuda a entender mejor los mixins.

TEXTO: ¿Qué es Backbone.js?
Empezaremos a hacer nuestras apps más usables.

TEXTO: Tutorial de backbone.js
Backbone Fundamentals

CLASE 6: OPTIMIZANDO javascript

VÍDEO: Clase No. 6 – Segunda Generación
Emisiones para Europa y América Latina.

VÍDEO: Sesión de preguntas y respuestas – Clase 6 – 2G
Resuelve tus dudas con ayuda de Daniel Závala.

VÍDEO: Clase 6: Preguntas
Mira las preguntas que le hicieron a Daniel, sigue enviando tus preguntas al sistema de discusión.

TEXTO: Terminamos PULS3
Resumen de la clase 6 en donde terminamos nuestra aplicación web con Backbone.js + PonyExpress

TEXTO: Como empezar con GRUNT.js
Grunt.js

TEXTO: Patrones con Backbone.js y buenas practicas
Patrones Backbone

CLASE 7: COMUNIDAD MEJORANDO.LA

VÍDEO: Pony Express
Un proyecto de Mejorando.la que recopila las librerías más atractivas para optimizar el Frontend.

VÍDEO: Repaso de Backbone.js
Revive la magnifica clase de bonus que nos dio Daniel Zavala para repasar Backbone.js

VÍDEO: Clase bonus con Pablo Rigazzi
Aprendamos de un maestro

CLASE 8: GIT

TEXTO: ¿Por qué es importante github?
La comunidad crece vorazmente. Te explicamos la visión de GitHub y por qué deberías formar parte.

TEXTO: Colaboración + Pull Request
Sincronizar un repositorio, generar un pull request, comentar un contenido, entre otros puntos sencillos para colaborar.

TEXTO: ¿Qué es GIT?
Conceptos y características principales de GIT. Así como su instalación

TEXTO: Conceptos y comandos de git
En este material revisamos cómo utilizar GIT de forma ágil y sintetizada.

CLASE 9: VÍDEOS DE PRIMERA GENERACIÓN DE FRONTEND

VÍDEO: Clase 1. Html5, Stylus y Css3. Nociones básicas
Html5, css3, stylus como procesador y otros ejemplos prácticos.

VÍDEO: Clase 2. Icon fonts, responsive design
Terminamos con la maquetación de Puls3 usando font-face, icon-fonts, animaciones de transición, transformación y responsive design.

VÍDEO: Clase 3. Bootstrap, javascript, Jquery
Aprenderás a usar bootstrap y la bases de javascript que llevaron a la creación del tan querido jQuery.

VÍDEO: Clase 4. javascript Avanzado
Pablo Rigazzi te cuenta todo lo que sabe sobre javascript.

VÍDEO: Clase 5. Backbone.js
Aprende con Daniel Závala a hacer aplicaciones web a partir de Backbone.js

VÍDEO: Clase 6. Backbone.js, PonyExpress.js
Desarrollo final de la aplicación Web Puls3.