De PSD a HTML5 y Responsive Design 2017
4.1 (9 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
62 students enrolled
Wishlisted Wishlist

Please confirm that you want to add De PSD a HTML5 y Responsive Design 2017 to your Wishlist.

Add to Wishlist

De PSD a HTML5 y Responsive Design 2017

Aprende a diseñar una interfaz en Photoshop, presentar el diseño en un dispositivo móvil, maquetarlo con HTML5 Y CSS3
4.1 (9 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
62 students enrolled
Created by Klinsmann Fabian
Last updated 1/2017
Spanish
Curiosity Sale
Current price: $10 Original price: $45 Discount: 78% off
30-Day Money-Back Guarantee
Includes:
  • 6 hours on-demand video
  • 28 Articles
  • 28 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Diseñar una interfaz al estilo flat design
  • Presentar ese diseño en dispositivos movil
  • Pasar el PSD que generamos en Photoshop a código HTML5
  • Adaptarlo para que sea en un móvil con responsive design
View Curriculum
Requirements
  • Photoshop
  • HTML
  • CSS
Description

Después de tomar este curso estarás preparado para poder crear y maquetar plantillas en HTML5 y CSS3 para luego venderlas en los diferentes servicios como themforest donde solo tienes que trabajar una vez y las ganancias duran por mucho tiempo.

El curso De PSD a HTML5 con Responsive Web Design esta compuesto con 4 módulos mas extras para enseñarte el proceso de conversion de un diseño de Photoshop a la web. Si tienes conocimientos básicos, estas apto para inscribirte a este curso 100% práctico.

La version de PSD a HTML5 2017 tiene nuevas e interesantes novedades aplicando nuevos trucos en temas de desarrollo web y maquetación, así que no te puedes crear atrás.

Tendrás todo el material disponible para seguir las lecciones paso a paso con una explicación detalladamente de todo este proceso que haremos.

Consigue nuevas habilidades de desarrollo web que es el puente para convertir casi cualquier diseño a código sin complicaciones.

Who is the target audience?
  • diseñadores
  • desarrolladores
  • maquetadores
Students Who Viewed This Course Also Viewed
Curriculum For This Course
69 Lectures
06:20:45
+
Diseño de la interfaz
11 Lectures 01:53:35

Bienvenido al curso de psd a html5 2016. Este curso tiene la finalidad de enseñarte el proceso de conversion paso a paso sobre como pasar un diseño de photoshop a código html5 y responsive design. 

Preview 00:48

Primero vamos a crear el diseño desde cero usando la herramienta de photoshop, así que puedes ir abriéndola si la tienes disponible, si no, puedes ocupar algún otro editor que tengas donde te permita usar vectores

Preview 02:20

Archivos base del curso
00:05

Vamos a comenzar con nuestro diseño en photoshop, y lo que haremos primero sera crear la estructura de la cabecera.

Preview 16:18

Vamos a trabajar la parte del servicio de diseño web.

Diseño de interfaz: servicio diseño web Parte 1
12:46

Continuamos con la parte del servicio de diseño web.

Diseño de interfaz: servicio diseño web Parte 2
18:24

Ahora diseñaremos el servicio de marketing.

Diseño de interfaz: servicio markerting
16:57

Vamos a diseñar la parte de nosotros y empresas que confían en nosotros

Diseño de interfaz: nosotros
12:55

Vamos a diseñar la sección del portafolio

Diseño de interfaz: portafolio
10:41

Ahora vamos a diseñar la parte de contacto

Diseño de interfaz: contacto
12:31

Por ultimo, vamos a diseñar el pie de la pagina.

Diseño de interfaz: pie de página
09:50
+
Diseño de la interfaz móvil
9 Lectures 01:00:15
Diseñando de interfaz móvil: Menú de navegación
06:51

Diseñando de interfaz móvil: Llamado a la acción
05:45

Diseñando de interfaz móvil: Contenido 1/2
10:05

Diseñando de interfaz móvil: Contenido 2/2
07:49

Diseñando de interfaz móvil: Características del servicio
07:30

Diseñando de interfaz móvil: Quienes somos
05:57

Diseñando de interfaz móvil: Portafolio
06:42

Diseñando de interfaz móvil: Contacto
04:48

Diseñando de interfaz móvil: Pie de página
04:48
+
Pasando el diseño PSD a HTML5
22 Lectures 03:19:22
Preparando las bases para empezar a maquetar
07:46

Como hacer un mini framework 1/2
13:09

Como hacer un mini framework 2/2
14:26

Creando el HTML5: Menú de navegación
04:55

Como descargar normalize css
01:47

Como agregar las hojas de estilo css al index
03:04

Creando el CSS: Menú de navegación
06:08

Creando el HTML5: Encabezado
06:20

Creando el CSS: Encabezado
09:22

Creando el HTML5: Puntos generales
11:35

Creando el CSS: Puntos generales
06:22

Creando el HTML5: Tabla de precios
10:44

Creando el CSS: Tabla de precios
11:49

Creando el HTML5: Servicio marketing
13:55

Creando el CSS: Servicio marketing
09:29

Creando el HTML5: Sobre nosotros
08:27

Creando el CSS: Sobre nosotros
11:42

Creando el HTML5 y CSS: Portafolio
06:54

Creando el HTML5: Contacto
04:01

Creando el CSS: Contacto
20:26

Creando el HTML5: Pie de página
05:35

Creando el CSS: Pie de página
11:26
+
EXTRA: Bootstrap 3
27 Lectures 07:33

Vamos a ver que es este framework de twitter y para nos sirve a la hora de realizar proyectos web

Preview 00:17

Vamos a ver unos sitios de ejemplos de como se comporta a la hora de trabajar con este sistema.

Preview 00:17

Vamos a ver el sitio oficial de donde podremos descargar el sistema de bootstrap.

Descarga de bootstrap
00:16

Veremos unos puntos importantes antes de poder usar este gran framework.

Antes de usar bootstrap
00:15

Para los que quieran trabajar con este completo sistema pero no quieran tocar código, vamos a ver unas paginas que nos ayudan para trabajar de manera visual al crear un sitio web con el framework.

Sistemas visuales
00:21

Comenzamos con una introducción al sistema basándonos en una plantilla básica que nos ofrece la pagina oficial de bootstrap.

Plantilla básica
00:17

Vamos a comenzar a trabajar con el sistema de rejillas de forma fácil y practica.

Sistema de rejillas básico
00:16

Vamos a ver como gestionar columnas de forma responsive para que se adapten dependiendo de viewport del navegador o dispositivo.

Gestión de columnas responsive
00:17

Vamos a meternos mas de lleno la destreza que tiene este sistema de una manera un poco mas avanzada. 

Uso avanzado de rejilla
00:17

Aveces necesitamos que nuestro contenido ocupe el ancho completo del navegador, aunque bootstrap ya determina un ancho predeterminado no quiere decir que estamos limitados a respetar esta regla, vamos a ver como podemos poner en ciertas partes de nuestro el contenido a full width.

Contenidos de ancho completo o fullwidth
00:23

Ya vimos lo fácil que es trabajar con el sistema de rejillas de forma básica y avanzada, ahora vamos a ver como anidar rejillas y dentro colocar contenido muy sencillo.

Sistema de rejillas anidadas
00:20

Vamos a ver que estilos le da a las paginas cuando incorporamos el sistema de bootstrap a los textos y otros elementos de un sitio.

Titulares, párrafos, alineaciones y otros
00:19

Vamos a ver como trabajar con las listas y las clases que nos ofrece el sistema para adaptarlas fácilmente a nuestras necesidades.

Gestión de listas
00:18

Las tablas son aveces dolores de cabezas a la hora de trabajar con ellas, con bootstrap vamos a ver como estilizar una tabla muy sencilla y practica.

Formatos básicos de tablas
00:19

Como aplicar diferentes comportamientos ya sea a una fila, columna o celda de una tabla es muy fácil con las clases que nos da el sistema.

Estados en las tablas
00:19

Aveces nos topamos en que las tablas no responden al método responsive, bootstrap nos resuelve este problema con una clase bien útil.

Tablas responsive
00:18

Vamos a ver como trabajar con formularios, uno de los elementos html mas utilizados, vemos lo fácil que es estilizar un formulario con bootstrap.

Elementos basicos, fieldsets, tamaños y alineacion de formularios
00:18

Son muy típicos los formularios de forma vertical, ¿pero que pasa cuando queremos formularios horizontales? vamos a ver en esta lección como hacer formularios de esta forma con un par de clases.

Formularios horizontales
00:20

Ayudas para validacion de formularios
00:13

Botones
00:13

Efectos y responsive en las imágenes
00:13

Iconos
00:13

Desplegables
00:13

Grupo de botones verticales
00:13

Menú de navegación con pestañas
00:13

Menú de píldoras
00:13

Migas de pan y paginacion
00:13
About the Instructor
Klinsmann Fabian
3.9 Average rating
765 Reviews
6,476 Students
20 Courses
Desarrollador web y Ninja Front-End

Estudio la Licenciatura de Marketing y Neuro Marketing Digitales, apasionado por las ultimas tecnologías, llevo mas de 3 años en esto del desarrollo web, especificamente en tecnologias HTML5, CSS3, jQuery, Responsive design y todo lo que tiene que ver en la web.

Actualmente trabajo de manera Freelance como Ninja Front-End creando sitios web, sitios adaptables para dispositivos móviles, tabletas y pantallas.

Soy instructor de manera independiente en diferentes áreas como computación para adultos, desarrollo web, Marketing y Neuro Marketing Digital.

Desarrollo videotutoriales en youtube sobre contenido de diseño, programación y marketing.

Te invito que visites mi pagina donde publico constantemente información sobre los últimos sucesos del mundo web, asi como también te invito que me sigas en mis redes sociales si quieres saber mas sobre lo que publico.