Mobile First y Responsive Design Desde Cero

C�mo hacer una p�gina Mobile First y Responsive Design

3.8

Course in Spanish

30 days Money Back Guarantee
Certificate of Completion
More than 4 hours of content
Additional Material
Lifetime
access

Teacher: Jose Javier Villena

Details

Description

En este curso verás DESDE CERO y paso a paso cómo crear una web Mobile First y Responsive Design, siguiendo una metodología de trabajo profesional y de forma sencilla.

Durante el curso te muestro como yo he creado mi propia pagina web "jotajotavm.com/".

Este curso adicionalmente funciona como complemento al curso "Diseño Web" que encontrarás en mi perfil de Teachlr.

View full description Hide full description

Objectives

Conocer las etapas del dise�o de un sitio web
Familiarizarse con la experiencia y pr�ctica de dise�o y desarrollo web

Instructional level

Introductory

Chapter 1: Cómo hacer una página Mobile First y Responsive Design
- 1 Proyecto, Audiencia y Objetivos 06:51 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo definir el proyecto, los objetivos y la el público a quién va dirigida nuestra web para que podamos hacer un buen desarrollo
- 2 Contenido, Recursos y Presupuesto 06:46 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de como definir el contenido de nuestra web, enumerar los recursos que disponemos y establecer fechas clave en el proceso de desarrollo. Todo esto nos servirá para saber cuánto cobrar por la página web
- 3 Conceptos, Ideas y Arquitectura 07:44 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de como planificar el desarrollo y estructurar la arquitectura del sitio web
- 4 Layouts, UX y Mockup 06:55 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo definir los layouts de la web para cada tamaño de resolución de pantalla de los diferentes dispositivos. Como diseñar la usabilidad o UX para el usuario y como diseñar el mockup inicial de la pagina webSitio recomendado para mockups: https://ninjamock.com/
- 5 Mockup de la Página del Video 06:31 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de como hacer un mockup para una pagina web con la herramienta NinjaMock que nos permite hacer un diseño inicial del resultado final del sitio web Herramienta NinjaMock: http://ninjamock.com/
- 6 Mockup Versión Móvil 04:23 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo cambiar el diseño para pantallas de dispositivos móviles con una resolución menor
- 7 Tipografía, Logotipo y Colores 08:16 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo decidir qué diseño usar en base a la fuente que usaremos, el logotipo de la página, la paleta de colores que emplearemos etc
- 8 Test UX 10:01 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo hacer Test de Usabilidad para elegir la paleta final de colores que emplearemos para el diseño de la página web, y para qué elementos usar cada uno de los colores de la paleta Artículo Como Combinar Colores en el Diseño Web: http://www.cristalab.com/tutoriales/como-combinar-colores-en-diseno-web-c113076l/ Herramienta Online para Creacion de Paleta de Colores: http://www.cristalab.com/tutoriales/como-combinar-colores-en-diseno-web-c113076l/
- 9 Desarrollo Web 03:42 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design comenzamos con el Desarrollo Web!!! Lo primero usar normalize y modernizr, aquí te dejo los videos para cada uno de estos archivos que podemos asociar a nuestra página web para garantizar un mejor funcionamiento y diseño Como Incluir Modernizr en tu sitio web: https://www.youtube.com/watch?v=xzVJt-9IYxg Como Incluir Normalize en tu pagina web: https://www.youtube.com/watch?v=x21zuUVKA64
- 10 Cómo hacer Mobile First 06:11 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos de forma muy sencilla cómo hacer Mobile First para que tus páginas esten desarrolladas primero para teléfonos móviles o celulares, y después diseñadas para pantallas más grandes de tablet o desktop
- 11 Página de Inicio 13:33 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo hacer una página responsive, en este caso la página de inicio o landing page de nuestro sitio web
- 12 Cursos 13:08 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design avanzamos con el desarrollo y vemos como hacer la sección de Cursos de la página de modo responsive
- 13 Imagen 100% de Ancho SIEMPRE 03:23 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo poner una imagen que ocupe el 100% del ancho de la página siempre de forma responsive
- 14 Insertar Aviso de Cookies 04:45 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo insertar el aviso de cookies obligatorio por ley en algunos paises como España
- 15 Colores Material Design 08:29 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de qué colores usar y cómo emplearlos para dar un diseño Material Design a nuestro sitio web
- 16 Google Font - Añadir Fuentes 06:29 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de como añadir tipografías desde Google Font y como añadirlo a nuestro html para que lo cargue
- 17 Icomoon Fuentes Vectoriales 08:18 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de como usar fuentes vectoriales con IcoMoon para que nuestra página cargue mucho más rápido en lugar de usar imágenes que se pueden pixelar, con IcoMoon las cargamos como si fueran fuentes, y de forma mucho más ligeraHerramienta Online IcoMoon: http://icomoon.io/
- 18 Elementos Visuales de una Web 09:04 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo desarrollar el código correspondiente a los elementos visuales más grandes de una web, antes de pasar a las zonas mas concretas
- 19 Elementos Específicos 11:43 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design avanzamos con el diseño, tras hacer los elementos contenedores, vamos a los más específicos, internos para dejar terminado el diseño de esa sección
- 20 Temáticas de los Cursos 07:26 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design avanzamos con el diseño y añadimos un icono para cada temática de los cursos usando icomoon en lugar de una imagen
- 21 Animación en el Menú 05:03 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo hacer para que el menú cambie su color de fondo y de letra cuando el ratón pasa por encima para dar una mejor experiencia de usuario
- 22 Buscador de la Página 07:53 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo programar un buscador en tu página web para que los usuarios seleccionen el contenido que quieren ver
- 23 Código para una Página Responsive 05:47 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo hacer que nuestra página sea Responsive, veremos 2 técnicas de desarrollo responsive1- Usando anchuras con porcentajes2- Usando display: inline-block
- 24 Elementos HTML de una Página Web 08:33 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos los elementos HTML que tendrá mi pagina web antes de darle diseño con css
- 25 Header Responsive 06:42 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo hacer un header responsive para nuestra página web
- 26 Layout del Video 06:43 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo definir el layout que tendrá el reproductor del video que insertaremos posteriormente
- 27 Problema al dar Ancho a un Enlace 07:34 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos la solución al problema de cómo dar un ancho a un enlace con la etiqueta html a y poder dar el ancho que nosotros queramos a ese enlace
- 28 Párrafos y Formulario 05:22 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo posicionar los párrafos y un formulario en nuestra página
- 29 Layout Índice Temario del Curso 04:54 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo hacer el índice con el temario del curso para que el usuario pueda navegar entre los videos que desee
- 30 Cómo Insertar Video de YouTube de Modo Responsive 04:08 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo insertar un video de YouTube en tu página web y que sea totalmente Responsive Design
- 31 Cómo hacer un Formulario Responsive 03:07 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo hacer un formulario de contacto de modo Responsive
- 32 Cómo Insertar Botones de Facebook y Twiter Material Design 03:46 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo insertar en tu página web los botones de facebook y twitter con un diseño moderno material design
- 33 Herramientas para que tu Página Cargue Antes 08:39 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo mejorar el tiempo de carga de tu página web para que tarde menos tiempo en cargar y sea más rápida y ligera Herramientas Online para mejorar el tiempo de cargahttp://uitest.com/en/check/https://developers.google.com/speed/pagespeed/insights/https://loadimpact.com/http://tools.pingdom.com/fpt/http://www.pagescoring.com/website-speed-test/http://herramientas-online.com/comprimir-descomprimir-css.html
- 34 Cómo Mejorar el Tiempo de Carga de una Página Web 04:31 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo he mejorado el tiempo de carga de mi página web con las herramientas que explique en el video anterior
- 35 Marcado SEO de la Web 05:55 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo mejorar el SEO de tu Página. Si quieres más información sobre cómo mejorar el posicionamiento de una página web, visita el otro curso sobre SEO que tengo en mi perfil de Teachlr: https://teachlr.com/JotaJotaVM/ Herramientas de análisis de SEO de tu página webhttps://www.woorank.com/es/https://metricspot.com/app/
- 36 Test Final 03:52 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo hacer un test final sobre tu web para hacer los últimos cambios antes de lanzar a pública la versión definitiva
- 37 Cómo Insertar Google Analytics a tu Página Web 03:44 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo práctico de cómo añadir Google Analytics en tu página web para llevar un control de los datos del tráfico que tienes tu sitio web con informes completos Link de Google Analytics: https://www.google.es/intl/es/analytics/
- 38 Cómo Subir tu Página al Servidor 04:44 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos un ejemplo de cómo subir los archivos de tu página al servidor para que sea de acceso público a todo el mundoPuedes hacerlo con un sistema de control de versiones como GitHub con FTP
- 39 Fin del Proyecto 04:05 min
  
  DescriptionEn este tutorial sobre Mobile First y Responsive Design veremos el resultado final de todo el proyecto que hemos seguido a lo largo del curso :) Gracias por haber llegado hasta aquí y recuerda compartir este curso por tus redes sociales para que otros lo puedan disfrutar igual que tu lo hiciste. Un saludo!!

The Teachlr

Jose Javier Villena

Analista-Programador

Soy un apasionado de la programaci�n en varios lenguajes. Tengo m�s de 10 a�os de experiencia como analista-programador en diferentes lenguajes (xml, c++, javascript, vbasic, pl/sql, html, css, etc) y sistemas de bases de datos, gestionando la aplicaci�n usada en m�s de 20 hospitales y centros de Madrid, as� como dando soporte en las Terminales del Aeropuerto Internacional de Barajas Adolfo Suarez (MAD) y adem�s he impartido cursos como tutor en otros canales y plataformas online a nivel mundial

Reviews

Romina Jemyna Elianora Betancourt Rodr�guez
tito adelio Milian Cespedes
ondina h.
Mauro Julio Battassini
Ender Torres
Carlos Enrique Gomez Chirinos

Didactico, como muy buenos consejos, practico y seguro para ejecutar
Fernando Manzano Serrano Manzano Serrano

Encuentro a faltar bootstrap, pero en general es un buen curso. En algunos v�deos se producen errores, pero al ver la soluci�n "en directo" da sensaci�n de m�s espontaneidad y conocimiento. Recomendable para alquien que conozca los fundamentos de css.