Aulaideal: Curso Diseño Web Responsive (Para no Programadores)

¿Las páginas web que realizas se muestran correctamente en móviles o tabletas?. Si tu respuesta es NO, entonces estas en graves problemas.

Pero tranquilo, hemos preparado un entrenamiento que te permitirá construir tus propios sitios web Responsive en cuestión de horas.

¿DE QUÉ SE TRATA EL CURSO
Te enseñaré la técnica llamada RESPONSIVE WEB DESIGN que nos permite construir sitios web accesibles y legibles en todo tipo de dispositivos, desde pequeños móviles hasta grandes pantallas.

Gracias a esta técnica tu sitio web responderá y se adaptará automáticamente al tamaño y la resolución de cada dispositivo. ¿No es genial?.

¿PORQUE MI SITIO WEB DEBE VERSE BIEN EN MÚLTIPLES DISPOSITIVOS?
Simple: “Podrás llegar a muchas más personas con un único sitio web”. Personas que suelen conectarse desde una Tablet o móvil, tendrán un mejor experiencia de navegación en sitio y estarán felices.

También y no menos importante: “Google así lo exige” y ama los sitios Responsive. Desde el 2015 Google anunció que el uso de la técnica Responsive web design es tomada como un factor de clasificación dentro de los resultados de búsqueda (SEO).

Un sitio web que no se muestra correctamente en un dispositivo móvil, corre el riesgo de deslizarse tristemente hasta las últimas posiciones en los buscadores, trayendo esto, consecuencias negativas en la visibilidad del sitio.

Recuerda: “La web móvil no es una moda, llegó para quedarse. Sólo nos queda adaptarnos.”

• Empezamos con un corto video introductorio en donde entenderás la Técnica Responsive Web Design de una forma clara y el por qué es la mejor solución para tus proyectos web.
• Luego seguimos con conceptos más técnicos pero sencillos, veremos “Las Medias Queries” y “Los viewPort” que son las piezas claves para aplicar la técnica correctamente.
• A continuación empezaremos a optimizar el contenido y te enseñaremos a crear Texto e imágenes Responsive, para así tener un contenido mucho más accesible.
• Y por supuesto, no puede faltar la creación de “Menús Responsive”, aquí te enseñaremos a crear 4 tipos de menús Responsive desde 0 basados únicamente en CSS3.
• Casi terminando el curso hablaremos sobre la “Carga condicional de recursos” es decir, si nuestros usuarios ven nuestra página desde un MOVIL mostrarles imágenes de menor tamaño, evitar que se carguen archivos JS o CSS innecesarios. La carga condicional de recursos es pieza clave para brindar una mejor experiencia a tus visitantes.
• Y para concluir el curso te enseñaremos a dar soporte a navegadores obsoletos como INTERNET EXPLORER 9, también haremos las pruebas de compatibilidad y subiremos nuestro proyecto a un servidor real.
• Al final del curso abras creado el sitio web que siempre has soñado: Atractivo, 100% Responsive (PC, tablet, Smartphone) y totalmente personalizado.

¿QUE APRENDERÁS EN ESTE CURSO?

• Lograrás Entender y Dominar la Técnica Responsive web Design:
• Y toda la tecnología relacionada en la creación de sitios adaptables a todas las pantallas (HTML5, CSS3 y JavaScript).
• Conseguirás Planificar y Desarrollar Sitios web modernos:
• Compatibles con teléfonos, tabletas y otros dispositivos, 100% optimizados al entorno en el que se visualice, garantizando así, un alto rendimiento.
• Podrás Monetizar tus conocimientos:
• La creación de sitios web Adaptables a cualquier dispositivo implica el aumento en el presupuesto de un sitio web, al mismo tiempo te abrirá nuevas posibilidades laborales.

• ¿Qué es el Responsive Web Design?
• ¿Porqué tu Web debería ser Responsive?
• Estudio de buenos sitios Responsive
• Ingredientes del Responsive Web Design

Módulo 2: Entendiendo y Configurando el VIEWPORT

• ¿Que es el viewport?
• La meta etiqueta Viewport
• Configurando el Viewport
• Implementado el Viewport
• Conclusiones finales

Módulo 3: Entendiendo e Implementando las @Medias Queries

• Estructura de las @Media Queries
• Definiendo los tipos de medios
• Entendiendo width, min-width y max-width
• ¿Donde definir los Medias Queries?

Módulo 4: Implementando Imágenes Responsive

• Imágenes Responsive con Max-width
• Diferentes soluciones para la carga condicional de imágenes
• Entendiendo la Dirección de Arte (Art Direction)
• Sirviendo imágenes condicionales con Responsive-Images.js
• Sirviendo imágenes condicionales con PictureFill
• Sirviendo imágenes

Módulo 5: Implementando fuentes Responsive

• Principios de la Tipografia Responsive
• Tipografia fluida con EMs
• Escalando el texto con Medias Queries
• Carga condicional de fuentes
• Conclusiones finales

Módulo 6: Implementando Menús Responsive

• ¿Qué tipo de Menú Responsive debo usar?
• Menú Responsive “Déjalo Fluir”
• Menú Responsive “Déjalo Fluir + Jquery”
• Menú Responsive “En el Pié de página”
• Menú Responsive “Lista Desplegable”
• Menú Responsive “Deslizante Lateral”
• Menú Responsive “Desplegable”

Módulo 7: Creación de un Proyecto Web Responsive desde 0.

• Descargando y personalizando HTML5 BoilerPlate
• Escribiendo el HTML5 del encabezado y menú principal.
• Escribiendo el HTML5 del Slide de imagen y bloque de Bienvenida.
• Escribiendo el HTML5 del contenido principal y del pie de página.

Módulo 8: Optimización de Recursos

• Carga condicional de imagenes con CSS3
• Carga condicional de imagenes con JavaScript
• Carga condicional de archivos basadas en el ViewPort
• Comprimiendo nuestras hojas de estilo al máximo.
• Conclusiones finales

Módulo 9: Dando soporte a navegadores antiguos

• Implementando HTML5Shiv
• CSS3Pie y aplicación de estilos CSS solo para IE
• Carga de Polyfills para implementar capacidades para navegadores obsoletos
• Conclusiones finales