El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla.
Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo.

Con este curso aprenderás a realizar sitios web con los estándares actuales de la W3C (HTML5 y CSS3) teniendo en cuenta que tus diseños se puedan visualizar en todos los navegadores. También recibirás tips de aplicaciones, herramientas, librerias y scripts que te puedan ayudar a optimizar la forma en que se maqueta y desarrolla la web.

Además aprenderás a hacer sitios web receptivos que se ajusten a la pantalla del dispositivo en que se visualiza. 


01. Estructura básica de HTML5

En este videotutorial entenderás la nueva estructura semántica de un documento HTML5.

02. Buenas prácticas con CSS

En este videotutorial aprenderás buenas prácticas para maquetar en CSS. Adicionalmente aquí tienes un libro de introducción a CSS.

03. Responsive web design con HTML5 Y CSS3

En este videotutorial aprenderás a maquetar la estructura básica HTML5 con CSS3 y Responsive Design para que se pueda visualizar en cualquier tipo de dispositivo o resolución de pantalla, también veremos como implementar tipografías externas con CSS y que se vea en todos los navegadores.Los recursos del videotutorial los puedes descargar de aquí.

04. Sitio web parte 1 – Consideraciones Iniciales

En este videotutorial aprenderás algunos tips para comenzar a realizar sitios web con HTML5, hablaremos sobre la imagen favicon.ico, el archivo humans.txt, el archivo sitemap.xml y un script llamado htmlshiv que nos permite tener compatibilidad de etiquetas semánticas en navegadores viejos, además de estructurar la carpeta del sitio que desarrollaremos.Los recursos del videotutorial los puedes descargar de aquí.

05. Sitio web parte 2 – Responsive web design

En este videotutorial empezaremos a diseñar nuestro sitio web en HTML5 y CSS3 con responsive web design, en este capítulo maquetaremos y le daremos responsive web design al home.Los recursos del videotutorial los puedes descargar de aquí.

06. Sitio web parte 3 – Galeria Jquery en Home

En este videotutorial incorporaremos una galería de imágenes con jQuery parala página del Home.Los recursos del videotutorial los puedes descargar de aquí

07. Sitio web parte 4 – Social Widgets en Home

En este videotutorial incorporaremos una galería de imágenes con jQuery para la pagina del Home.

08. Sitio web parte 5 – Video en html 5 

En este videotutorial continuaremos diseñando la segunda sección del sitio web en HTML5 y CSS3 con responsive web design, en este capítulo maquetaremos y le daremos responsive web design a la sección de acerca e insertaremos video en HTML5.Los recursos del videotutorial los puedes descargar de aquí.

09. Sitio web parte 6 – Audio en HTML 5 

En este videotutorial continuaremos diseñando la tercer sección del sitio web en HTML5 y CSS3 con responsive web design, en este capítulo maquetaremos y le daremos responsive web design a la sección de servicios e insertaremos audio en HTML5.Los recursos del videotutorial los puedes descargar de aquí.

10. Sitio web parte 7 – Jquery Fancybox

En este videotutorial continuaremos diseñando la cuarta sección del sitio web en HTML5 y CSS3 con responsive web design, en este capítulo maquetaremos y le daremos responsive web design a la sección de portafolio de trabajos e implementarémos el plug-in jQuery llamado Fancybox.Los recursos del videotutorial los puedes descargar de aquí.

11. Sitio web parte 8 – Formulario y mapa de contacto

En este videotutorial continuaremos diseñando la quinta sección del sitio web en HTML5 y CSS3 con responsive web design, en este capítulo maquetaremos y le daremos responsive web design a la sección de contacto e implementaremos un formulario con validaciones y un mapa de google.

12. Configuración de Sublime text 2

En este videotutorial aprenderemos a sacar el máximo provecho del editor de código Sublime Text 2.

13. Boton Facebook e Instagram,Configurando Emmet

En este videotutorial les mostraré como volver a visualizar el botón de like de facebook que previamente habíamos implementado, así como un botón de instagram y veremos como implementar el plugin emmet en sublime text 2,5.

* Autor de este curso http://bextlan.com/

 

Este curso no se puede hacer desde el móvil, sólo esta disponible desde un ordenador. Disculpen las molestias.