Parece que su navegador tiene desactivado JavaScript.

Usted debe tener habilitado JavaScript en su navegador para utilizar la funcionalidad de este sitio web. Haga clic aquí para obtener instrucciones sobre cómo habilitar JavaScript en su navegador.

Video Curso desarrollador Frontend html5 css3 Full Stack

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.