Curso de maquetación web de lo básico a lo avanzado
4.7 (17 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.
81 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Curso de maquetación web de lo básico a lo avanzado to your Wishlist.

Add to Wishlist

Curso de maquetación web de lo básico a lo avanzado

Aprende a maquetar sitios web de una manera fácil y efectiva en los lenguajes HTML5 y CSS3
4.7 (17 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.
81 students enrolled
Last updated 6/2017
Spanish
Current price: $15 Original price: $35 Discount: 57% off
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 1 Article
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Aprenderás a pasar tus diseños hechos en programas de diseño como Photoshop o Illustrator a lenguajes de maquetación web HTML5 y CSS3 de una manera fácil y práctica.
  • Aprenderás a utilizar el método de las ayudas visuales.
  • Aprenderás la maquetación de cajas principales e internas para elaborar un correcto wireframe.
  • Aprenderás a integrar los elementos gráficos y así realizar la estructura del sitio web para internet en el lenguaje de marcado HTML5 y hojas de estilo CSS3.
  • Aprenderás a crear tu propio sistema de columnas al mejor estilo de Bootstrap sólo con HTML5 y CSS3 para que se adapten a cualquier dispositivo.
View Curriculum
Requirements
  • Descargar el material de trabajo del curso, lo entregaremos en la clase 1. Ver los cursos gratuitos introductorios de HTML5 y CSS3 en Tutoriales a tu Alcance.
Description

¿DE QUÉ SE TRATA EL CURSO?

Cuando diseñas páginas web, debes crear tus diseños en programas gráficos como photoshop o illustrator. La pregunta es ¿Cómo pasar mis diseños a un lenguaje de marcado HTML y a hojas de estilo CSS?. Si te has hecho esta pregunta, en este curso aprenderás a pasar tus diseños hechos en photoshop a lenguajes de maquetación web HTML5 y CSS3 de una manera fácil y práctica.

¿CÓMO ES EL CURSO?

Utilizando el método de las ayudas visuales, la maquetación de cajas principales e internas para elaborar un correcto wireframe, y finalmente integrando los elementos gráficos realizaremos así la estructura del sitio web para internet en el lenguaje de marcado HTML5 y hojas de estilo CSS3.

En este curso podrás descargar una carpeta donde está todo el material necesario para la elaboración del mismo.

¿CUÁNTO SE TARDA EN COMPLETAR EL CURSO?

Depende de ti. Estimo que menos de una semana puedes completar el curso, pero dependerá de tu ritmo de trabajo y de tu disponibilidad.

¿CUÁLES SON LOS REQUISITOS?

Descargar el material que se encuentra en los recursos de la clase 1.

¿A QUIÉN VA DIRIGIDO ESTE CURSO?

Diseñadores gráficos, visuales, artistas, desarrolladores

Empresas y emprendedores

Cualquier persona que quiera tener una página web

Who is the target audience?
  • Este curso va dirigido a todas las personas que diseñen páginas web en photoshop y las deseen pasar al lenguaje de código web HTML5 y CSS3.
Curriculum For This Course
20 Lectures
03:02:28
+
Maquetación Web Básica
17 Lectures 02:21:50

En esta clase te doy la bienvenida a este curso de Convierte diseños en Photoshop a HTML5 y CSS3, mostrándote el archivo base con el cual trabajaremos durante todo el curso. Recuerda descargar la carpeta comprimida de medios_maquetación_web_Tutoriales_a_tu_alcance.zip

Preview 04:00

Comenzaremos a maquetar nuestro sitio web gracias a las ayudas visuales que traeremos del archivo de photoshop.

Preview 07:26

Continuaremos editando los archivos html5 y css3 para la ubicación de nuestras ayudas visuales.

Creando ayudas visuales - parte 2
06:39

En esta clase comenzaremos a ubicar las cajas principales de acuerdo a las ayudas visuales que colocamos anteriormente en las hojas de estilo.

Creando las cajas principales - parte 1
09:13

En esta clase finalizaremos la ubicación de las cajas principales para continuar con la ubicación de las cajas internas.

Creando las cajas principales - parte 2
08:10

En esta clase, comenzaremos a ubicar las cajas internas que están dentro de cada caja principal en nuestra maquetación web.

Creando las cajas internas - parte 1
10:00

En esta clase continuaremos agregando estilo a las cajas internas.

Creando las cajas internas - parte 2
09:18

Continuamos con la ubicación de las cajas internas dentro de las cajas principales. Aprenderás varios trucos de maquetación en estas clases de creando las cajas internas.

Creando las cajas internas - parte 3
09:30

Finalizamos las clases de crear las cajas internas, ahora, a integrar el diseño.

Creando las cajas internas - parte 4
07:19

En las próximas clases a continuación, comenzaremos a integrar los elementos gráficos que compone nuestro diseño web hecho en photoshop.

Preview 08:41

En esta clase finalizamos la integración del diseño de la página de inicio. En las próximas clases continuaremos con las otras secciones del sitio web.

Integrando el diseño - parte 3
08:09

Continuamos la integración del diseño de la sección de la página de inicio.

Integrando el diseño - parte 2
08:50

Comenzaremos a organizar las secciones que quedan faltando de nuestro sitio web, comenzando por la sección de Quienes Somos.

Integrando la sección Quienes Somos - parte 1
09:01

Hemos aprendido a organizar estéticamente un artículo compuesto por título, imagen y párrafo con CSS3.

Integrando la sección Quienes Somos - parte 2
09:19

En esta clase aprenderemos a organizar una galería de imágenes con HTML5 y CSS3.

Integrando la sección Servicios - parte 1
08:36

Gracias a las ayudas visuales nuevamente hemos logrado organizar la galería de imágenes.

Integrando la sección Servicios - parte 2
08:11

En esta clase aprenderemos a organizar un formulario de envío de acuerdo a un diseño preestablecido.

Integrando la sección Contáctenos
09:28
+
Maquetación web avanzada
3 Lectures 40:47

Te invito a que veas este tips de Tutoriales a tu Alcance que está en mi canal de you tube: https://www.youtube.com/c/TutorialesatuAlcance

Encontramos muchos recursos para facilitar el desarrollo web, pero soy partidario de aprender hacer las cosas desde cero, así se tiene control sobre todo desarrollo, por eso en este TIP de Tutoriales a tu Alcance aprenderemos a crear nuestro propio sistema de columnas tipo Bootstrap!

Preview 35:21

Hemos culminado este curso de Convertir un diseño hecho en Photoshop a HTML5 y CSS3 exitosamente. Los invito a que vean más cursos gratuitos en la página web de Tutoriales a tu Alcance. También los invito a que vean el próximo curso de esta secuela de Desarrollo Web llamado "Aprende a crear Animaciones y Efectos Interactivos con CSS3" sin usar JavaScript. Feliz Diseño!

Despedida
04:13

Clase extra!
01:13
About the Instructor
Juan Fernando Urrego
4.5 Average rating
2,913 Reviews
12,882 Students
8 Courses
Diseñador Visual y Desarrollador Web

Mi nombre es Juan Fernando Urrego, soy profesional en Diseño Visual y Especialista en Administración de la Informática Educativa. Dedicado tiempo completo a la docencia en Desarrollo Web, Diseño Interactivo, Animación 3D e Ilustración. Fundador del portal de cursos Tutoriales a tu Alcance. Soy un convencido de que la internet es la oportunidad del conocimiento, la educación y los empleos del futuro.