Off-Canvas

Clase 11 de 32 • Curso de Responsive Design 2015

Dayan Betancourt

student•

Off-Canvas: el bloque principal cubre toda la pantalla y los laterales permanecen ocultos, a medida que crece aparecen en pantalla.

Edgardo T

student•

// El codigo JS de Hammer esta bien, no es necesario agregar el evento clic. Para Chrome en la vista emulador del movil recone el clic como tap. Parece que Carlos no estaba haciendo clic con el mouse, ya que en el emulador de Chrome para la vista movil, el clic es el tap. //

(function() {

var mainPanel = document.getElementById('mainPanel');
var sidePanel = document.getElementById('sidePanel');

var hammerPanel = new Hammer(mainPanel);
var hammerSide = new Hammer(sidePanel);

/* Navegador Mobile */
hammerPanel.on('swiperight', onSwipe);
hammerPanel.on('swipeleft', onSwipe);

// No hay necesidad de agregar el evento clic

Juan Ricardo Martin Guio Martin

student•

Es correcto, el código que muestra el profe Carlos funciona perfectamente desde movil, ya es conflicto con la herramienta del chrome.

Adrian Takano

student•

http://css3generator.com/

excelente pagina para ver transiciones de css y poder emplearlas en cualquier proyecto, un saludo al profe, muy buena su explicacion.

Camilo Andres Castellanos Rodriguez

student•

En la propiedad transform del elemento con la clase c1, la función translate**(-250px, 0)**, puede ser reemplazada por translateX(-250px), ya qué no se está modificando el eje Y, o sea, el 0 que se encuentra como segundo parámetro de la misma.

Julian

student•

Que tan buena practica es llamar las librerias de una URL, no seria mas recomendable tener las librerias e incluirlas en el proyecto para evitar errores en caso de que se caiga la pagina donde se encuentran las librerias?

Wayaweb Jose Luis Rodríguez Domínguez

student•

pues al final de cuenta es una petición así que creo que lo mejor seria descargar el recurso y tenerlo en tu propio proyecto, para no depender de futuros problemas externos, aunque si es para algún demo o prueba no hay necesidad de tenerlo, en mi opinión.

Alejandro Irimia Mesa

student•

Es una cuestión interesante que no puede dejar escaparse.

Hay que tener en cuenta que el entorno local en el que nosotros desarrollamos no tiene las mismas características ni restricciones que el entorno de producción (o no tiene por qué ser el mismo).

Se me ha dado el caso que cuando he realizado un despliegue en producción, la infraestructura del cliente (y, por tanto, desde la que él lo valida) estaba integrado en un firewall que bloqueaba las peticiones externas que se realizaban. Dicho firewall impedía que se pudiera cargar librerías como jQuery o normalize provocando tanto la incorrecta ejecución como la visualización del mismo. Tuve, por tanto, que integrar tanto el JS como el CSS como recursos internos del aplicativo.

Lo dicho, hay que tenerlo muy presente.

Carlos Martínez

student•

Seguimos aprendiendo a cada paso!!

Miguel Mendoza Molina

student•

Referencia a tipos de funciones existentes que no esta incluido en los enlaces pero si es mostrado en el video

Miguel Mendoza Molina

student•

http://easings.net/es

Yeraldin Acevedo Acevedo

student•

Las transiciones son un tema muy chevere,me gusta

Manuel Galindez

student•

Javascript es sencillamente bello.

Brayan David Navarro Rolon

student•

js es una maravilla, es el futuro de la web..

Manuel Galindez

student•

Lo que hace carlos de ejecutar las funciones inmediatamente, es denominado Closures, esto nos evita obtener errores o que estemos modificando codigos de otros, si quieren saber un poco mas de esto, investiguen un poco.

Jesús Ildefonso Muro Esquivias

student•

Hola
Alguien me podria ayudar, quiero poner todo el código de js aparte pero no se como hacerle, voy iniciando en esto de programar. Gracias

Francis Gonzalez

student•

Crea un archivo con extension js y coloca ahi el codigo, despues haces referencia a ese archivo como se hizo con la libreria hammer. (src="srchivo.js")

Erick Orlando Velasco Martínez

student•

Que chévere! Con estos cursos si que se aprende

José María Carro López

student•

pues yo investigué y me funcionó mejor con otro evento llamado 'pan', igual de Hammer. Este es mi código:

function ready(){

var side = document.getElementById("sidePanel");
var main = document.getElementById("mainPanel");

var hammerPanell = new Hammer(main);
var hammerSide = new Hammer(side);

hammerPanell.get('pan').set({direction: Hammer.DIRECTION_ALL});
hammerSide.get('pan').set({direction: Hammer.DIRECTION_ALL});

hammerPanell.on("panright", function(ev){
console.log(ev);
side.classList.add('open');
});

hammerSide.on("panleft", function(ev){
side.classList.remove('open');
})

}

Off-Canvas

Bienvenidos

Nuevas clases de Responsive Design: ¿Dónde quedo el curso anterior?

¿Dónde encuentro los archivos del curso?

Introducción a responsive design

Preguntas antes de la clase

¿Qué es Responsive Design?

Concepto de Viewport

Patrones de Diseño Responsive: Tiny Tweaks

Progressive Enhancement vs Graceful Degradation

Column Drop

Mostly Fluid

Layout Shifter

Off-Canvas

Preguntas y respuestas después de clase

Diseñando en Mobile First

Preguntas antes de la clase

Entorno de desarrollo

Automatización de tareas con Gulp.js

Index.html del proyecto

Normalize.css

Menu Navbar responsive parte I

Menu Navbar responsive parte II

Videos reponsive

Preguntas y respuesta de la clase

Conceptos avanzados de responsive design

Preguntas antes de clase

Video responsive

Patrones de diseño responsivo

Imagenes responsive

Fuentes de iconos

Usando Browserify para JavaScript

Optimizando para produccion

Preguntas y respuestas en clase

Contenido complementario

Tablas-Responsive

Lazy Loading De Imagenes

¿Cómo hacer Remote Debuggin?