Please enable / Por favor activa JavaScript!
Por favor activa el Javascript![ ? ]

Curso completo diseño web responsive (para no programadores)  Curso completo diseño web responsive (para no programadores)

Valoración de éste post
4.15 / 5 de 24 votos



Mensajes: 1388


Puntos totales:

Enhorabuena!

32





El contenido de este artículo o información está sujeto a una licencia Creative Commons BY (CC-BY), puedes divulgar públicamente este contenido pero deberás hacer mención del autor: Kernel e indicar la dirección web de esta página: https://www.exabyteinformatica.com/tienda/foro/curso-completo-diseno-web-responsive-para-no-programadores-t1512.html

The content of this article or any related information is under the Creative Commons license BY, you can republish this content freely but you must mention the author of this article: Kernel and indicate the URL of this page: https://www.exabyteinformatica.com/tienda/foro/curso-completo-diseno-web-responsive-para-no-programadores-t1512.html

Bajo licencia de Creative Commons


Aprende a crear sitios web capaces de adaptarse a cualquier dispositivo usando la técnica Responsive Web Design.

¿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.”

¿CÓMO ESTÁ ESTRUCTURADO ESTE CURSO?

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.

CONTENIDO

Módulo 1: Introducción al Responsive Web design

¿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

Usuario anónimo: SÍ (Los usuarios anónimos no pueden ver estos enlaces, por favor regístrate o identifícate).

Clica para registrarte o autenticarte
Navegando como usuario anónimo: NO





No te pierdas el tema anterior: Ejemplo práctico de maquetación web: Landing page

Salta al siguiente tema: Curso completo GRATIS de responsive web design con Joomla! 3

Quizás también te interese:
Si has encontrado información útil en Exaforo, ayúdanos a seguir creciendo. Muchas gracias por confiar en nosotros!


Volver a Programación Web


cron