Aprende a maquetar paginas web: De PSD a HTML5

Name: Aprende a maquetar paginas web: De PSD a HTML5
Rating: 4.4 (32 reviews)

Convierte fácilmente tus diseños de Photoshop en sitios web profesionales con HTML5, CSS3 y desde cero.

Created byDaniel López

Last updated 6/2018

Spanish

What you'll learn

A conocer el concepto de Wireframe y utilizarlo en un proyecto completo.
A conocer el concepto de MockUp y utilizarlo en un proyecto completo.
A diseñar un MockUp desde cero y convertirlo en un sitio web profesional.
A configurar y utilizar Photoshop para la web.
A utilizar uno de los mejores editores de código de la actualidad.
A identificar y aplicar las propiedades de Flexbox.
A desarrollar proyectos web con lo último del HTML5 y CSS3 partiendo de Photoshop.
A aplicar algunos efectos interesantes con jQuery.
A usar herramientas que utilizan los profesionales para perfeccionar la creación de páginas web en el mundo real.
A montar a un servidor real nuestros sitios web terminados.
A manejar proyectos web desde cero partiendo de un wireframe, pasando por un MockUp, generando el HTML y CSS necesarios y finalizar montando archivos a la web de una manera fácil y práctica.

Course content

9 sections • 92 lectures • 8h 44m total length

Introducción1:18
En esta clase estaremos hablando de las generalidades del curso, sus objetivos, temas y alcances.
Archivos del curso2:17
En esta clase vamos a revisar el material del curso y su estructura.
Wireframe2:03
En esta clase vamos a definir el concepto de Wireframe.
Mockup1:57
En esta clase vamos a definir el concepto de MockUp.
Pixel Perfect1:57
En esta clase vamos a definir el concepto de "Pixel Perfect".

Photoshop1:59
En esta clase aprenderás conceptos fundamentales acerca de Photoshop, así como su manejo básico y cuales son los alcances del mismo.
Configuración Photoshop para trabajo Web4:12
En esta clase aprenderás a configurar Photoshop para la web, al igual que conceptos de terminantes a tener en cuenta para trabajar correctamente desde un inicio.
Recursos de imagen3:34
En esta clase aprenderás a utilizar la herramienta "Recursos de imagen" y sus diferentes opciones.
Nombres de capa6:54
En esta clase aprenderás a cambiar los nombres a las capas en Photoshop. Igualmente a darle nombre a las mismas de manera correcta.
Formatos de archivo1:40
Existen diversos formatos de archivos para le web, pero para las imágenes se utilizan principalmente 3 formatos. Aquí aprenderás cuales son y sus características.
Formato GIF3:02
En esta clase aprenderás las características del formato GIF al igual que la manera de configurar los archivos necesarios.
Formato JPG3:38
En esta clase aprenderás las características del formato JPG al igual que la manera de configurar los archivos necesarios.
Formato PNG2:19
En esta clase aprenderás las características del formato PNG al igual que la manera de configurar los archivos necesarios.

Visual Studio Code1:41
Descripción corta de uno de los editores de código HTML más populares del momento.
Instalación Mac1:31
En esta clase vas a aprender a instalar el Visual Studio Code en la plataforma Mac, desde la descarga del programa hasta la instalación final.
Instalación Windows1:32
En esta clase vas a aprender a instalar el Visual Studio Code en la plataforma Windows, desde la descarga del programa hasta la instalación final.
Manejo básico Visual Studio Code2:05
En esta clase aprenderás los conceptos más importantes acerca del manejo básico del Visual Studio Code.
Configuración inicial VS Code4:48
En esta clase aprenderás la forma de configurar inicialmente al Visual Studio Code.
Extensiones5:55
En esta clase aprenderás a instalar extensiones de terceros para darle más y mejores funciones al Visual Studio Code.
Columnas1:47
En esta clase aprenderás a disponer en columnas el Visual Studio Code.

Carpeta proyecto1:58
En esta clase vamos a analizar y comprender como funcionan los archivos que utilizaremos en esta sección.
Html y CSS1:03
En esta clase vamos a estructurar el documento HTML y el CSS con el que vamos a trabajar hasta el final de esta sección.
Flexbox2:12
En esta clase vamos a comprender la función e importancia de la propiedad Flexbox.
Display5:05
En esta clase vamos a comprender y utilizar la propiedad display y los valores Flex e Inline-Flex.
Flex direction1:54
En esta clase vamos a comprender y utilizar la propiedad flex-direction.
Flex wrap2:46
En esta clase vamos a comprender y utilizar la propiedad flex-wrap.
Flex flow1:09
En esta clase vamos a comprender y utilizar la propiedad flex-flow.
Justify content2:22
En esta clase vamos a comprender y utilizar la propiedad justify-content.
Align items3:13
En esta clase vamos a comprender y utilizar la propiedad align-items.
Align content3:03
En esta clase vamos a comprender y utilizar la propiedad align-content.
Align self2:47
En esta clase vamos a comprender y utilizar la propiedad align-self.
Order2:25
En esta clase vamos a comprender y utilizar la propiedad order.
Flex grow4:34
En esta clase vamos a comprender y utilizar la propiedad flex-grow.
Flex shrink1:54
En esta clase vamos a comprender y utilizar la propiedad flex-shrink.
Flex basis1:28
En esta clase vamos a comprender y utilizar la propiedad flex-basis.
Flex1:15
En esta clase vamos a comprender y utilizar el shorthand flex.

Análisis documentos3:49
En esta sección vamos a revisar los documentos o archivos que vamos a utilizar a través de los proyectos.
Html base11:32
En esta sección vamos a estructurar el documento HTML Base del cual vamos a partir para nuestro proyecto.
Header9:33
En esta sección vamos a estructurar la sección HEADER de nuestro documento HTML.
Main13:40
En esta sección vamos a estructurar la sección MAIN nuestro documento HTML.
Footer3:28
En esta sección vamos a estructurar la sección FOOTER nuestro documento HTML.
CSS Base9:01
En esta sección vamos a estructurar el documento CSS Base con el cual le vamos a dar estilos al documento HTML.
CSS Header10:37
En esta sección vamos a darle estilos CSS al HEADER del documento HTML.
CSS Navbar12:10
En esta sección vamos a darle estilos CSS al NAVBAR del documento HTML.
CSS Textos8:02
En esta sección vamos a darle estilos CSS a los TEXTOS del HEADER del documento HTML.
Detalles - Perfect Pixel7:14
En esta sección vamos a aprender a utilizar la extensión Perfect Pixel para darle mayor exactitud a nuestro documento final.
Section - Parte 19:54
En esta sección vamos a darle estilos CSS a la SECTION 1 del documento HTML.
Section - Parte 210:25
En esta sección vamos a darle estilos CSS a la SECTION 2 del documento HTML.
Section - Parte 310:06
En esta sección vamos a darle estilos CSS a la SECTION 3 del documento HTML.
Suscripción10:27
En esta sección vamos a darle estilos CSS a la sección SUSCRIPCIÓN del documento HTML.
Footer9:35
En esta sección vamos a darle estilos CSS al FOOTER del documento HTML.
Meta Tags2:16
En esta sección vamos a implementar las etiquetas META necesarias para iniciar el SEO orgánico de nuestro proyecto.
Validación del Código2:02
En esta sección vamos a aprender a validar el código que hemos generado para verificar si es correcto.

Html base12:41
En esta sección vamos a estructurar el documento HTML Base del cual vamos a partir para nuestro proyecto.
Header3:32
En esta sección vamos a estructurar la sección HEADER de nuestro documento HTML.
Main9:50
En esta sección vamos a estructurar la sección MAIN nuestro documento HTML.
Mapa1:16
En esta sección vamos a estructurar la sección del MAPA de ubicación del documento HTML.
Footer5:10
En esta sección vamos a estructurar la sección FOOTER nuestro documento HTML.
CSS Base4:44
En esta sección vamos a estructurar el documento CSS Base con el cual le vamos a dar estilos al documento HTML.
CSS Contenedor3:54
En esta sección vamos a darle estilos CSS al contenedor del documento HTML.
CSS Header - Parte 112:04
En esta sección vamos a darle estilos CSS al HEADER del documento HTML. Parte 1.
CSS Header - Parte 25:08
En esta sección vamos a darle estilos CSS al HEADER del documento HTML. Parte 2.
CSS Main - Parte 112:03
En esta sección vamos a darle estilos CSS a la sección MAIN del documento HTML. Parte 1.
CSS Main - Parte 24:12
En esta sección vamos a darle estilos CSS a la sección MAIN del documento HTML. Parte 2.
CSS Main - Parte 39:02
En esta sección vamos a darle estilos CSS a la sección MAIN del documento HTML. Parte 3.
CSS Mapa1:41
En esta sección vamos a darle estilos CSS al MAPA del documento HTML.
CSS Footer8:15
En esta sección vamos o darle estilos CSS al FOOTER del documento HTML.
Meta Tags1:57
En esta sección vamos a implementar las etiquetas META necesarias para iniciar el SEO orgánico de nuestro proyecto.
Validación del Código2:03
En esta sección vamos a aprender a validar el código que hemos generado para verificar si es correcto.

Análisis archivos3:59
En esta sección vamos a revisar los documentos o archivos que vamos a utilizar a través del proyecto.
Rejilla7:17
En esta sección vamos a hablar de la importancia de utilizar una rejilla para la diagramación de nuestro proyecto.
Mockup Home10:49
En esta clase nos vamos a dedicar a crear el MockUp del proyecto, en especial la sección HOME.
Mockup Servicios6:52
En esta clase nos vamos a dedicar a crear el MockUp del proyecto, en especial la sección SERVICIOS.
Mockup Galería7:12
En esta clase nos vamos a dedicar a crear el MockUp del proyecto, en especial la sección GALERÍA.
Mockup Contacto12:21
En esta clase nos vamos a dedicar a crear el MockUp del proyecto, en especial la sección de CONTACTO.
Mockup Footer4:14
En esta clase nos vamos a dedicar a crear el MockUp del proyecto, en especial la sección FOOTER.
Detalles Mockup2:32
En esta clase nos vamos a dedicar a ultimar detalles del MockUp del proyecto.
Html base14:49
En esta sección vamos a estructurar el documento HTML Base del cual vamos a partir para nuestro proyecto.
CSS Base4:42
En esta sección vamos a estructurar el documento CSS Base con el cual le vamos a dar estilos al documento HTML.
CSS Header9:14
En esta clase vamos a darle estilos CSS a la sección HEADER del documento.
CSS Home6:33
En esta clase vamos a darle estilos CSS a la sección HOME del documento.
CSS Servicios - Parte 110:15
En esta clase vamos a darle estilos CSS a la sección SERVICIOS del documento. Parte 1.
CSS Servicios - Parte 29:25
En esta clase vamos a darle estilos CSS a la sección SERVICIOS del documento. Parte 2.
CSS Galería13:50
En esta clase vamos a darle estilos CSS a la sección GALERÍA del documento.
CSS Contacto - Parte 15:13
En esta clase vamos a darle estilos CSS a la sección CONTACTO del documento. Parte 1.
CSS Contacto - Parte 210:47
En esta clase vamos a darle estilos CSS a la sección CONTACTO del documento. Parte 2.
CSS Footer9:32
En esta clase vamos a darle estilos CSS a la sección FOOTER del documento.
Ajustes Finales19:21
En esta clase nos vamos a dedicar a afinar algunos detalles finales del proyecto.
FTP7:10
En esta clase vamos a aprender a "subir" o llevar nuestros archivos a un servidor web real y lo veremos funcionando directamente en la web.

Requirements

Es necesario tener conocimientos básicos en HTML5 y CSS3
Manejo básico de un sistema operativo (Windows, Mac OS ó Linux)

Description

En la actualidad el desarrollo de un sitio web, se ha vuelto un proceso un tanto largo y tedioso. No por el hecho del proceso en si, sino porque en las grandes y pequeñas agencias de desarrollo web, se han encargado de utilizar demasiados pasos entre la concepción de la idea y el producto final.

Todo lo anterior se puede resumir en el boceto inicial, maqueta o mockup inicial, mockup final, codificación, ajustes y finalización del proceso.

Es por eso, que en este curso, vamos a abordar el proceso en su totalidad, como se hace en la vida real, partiendo del boceto y culminando todo con el montaje del producto final a un servidor web. Usaremos lo mejor de Photoshop para ello, también utilizaremos las propiedades idóneas del HTML5 y CSS3, generando código óptimo para la correcta construcción de nuestros sitios. De igual forma sacaremos provecho de herramientas de terceros para el proceso y dejaremos de lado todo lo que sea innecesario en el desarrollo, como lo hacen los profesionales de verdad

Who this course is for:

Diseñadores, publicistas, programadores, profesionales y emprendedores en general
Cualquier persona con conocimientos básicos en HTML5 y CSS3, que desee desarrollar sitios web de manera profesional

Aprende a maquetar paginas web: De PSD a HTML5

What you'll learn

Explore related topics

Course content

Introducción5 lectures • 10min

Photoshop8 lectures • 27min

Perfect Pixel1 lecture • 3min

Visual Studio Code7 lectures • 19min

Flexbox16 lectures • 39min

Proyecto 1 - Coffee Cup17 lectures • 2hr 24min

Proyecto 2 - Kings Road16 lectures • 1hr 38min

Proyecto 3 - Clini Vet20 lectures • 2hr 56min

Conclusión y Despedida2 lectures • 9min

Requirements

Description

Who this course is for: