De PSD a HTML5

En este curso aprenderás a maquetar un sitio web en HTML5 a partir de una plantilla en photoshop.
4.1 (39 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.
1,809 students enrolled
$19
$25
24% off
Take This Course
  • Lectures 58
  • Length 14.5 hours
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2013 Spanish

Course Description

En este curso aprenderás a maquetar un sitio web en HTML5 a partir de una plantilla basica en photoshop.

Podrás descargar la plantilla PSD para que puedas seguir sin problema la clase, en tan solo 5 vídeos aprenderás a maquetar este sitio de manera fácil y sencilla.

El curso se compone primero estudiando y estructurando la plantilla psd de tal manera que primero veremos como esta compuesta la plantilla, luego crearemos secciones sobre como se va a maquetar y exportaremos las imágenes de la plantilla, una vez hecho todo este proceso pasaremos manos en el código.

Te recomiendo completamente este curso si quieres iniciarte en esto del desarrollo web.

What are the requirements?

  • Necesitaras un editor de código puedes incluso usar notepad de windows
  • Photoshop en cualquiera de sus versiones para poder trabajar la plantilla psd

What am I going to get from this course?

  • Una vez finalizado este curso de 5 volumenes podrás maquetar sitios web sencillos y complejos
  • Aprenderás como seccionar y exportar de manera correcta una plantilla en photoshop
  • Como crear sitios de manera semántica y ordenada.

What is the target audience?

  • Para tomar este curso solo necesitas saber lo básico del html y css y sobre todo ganas de aprender

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

01:26

En este video te mostrare de manera rapida que aprenderas en el curso, espero te ayude.

Section 1: Volumen 1
11:02

En este videotutorial vamos haber como estructurar la primera plantilla a maquetar, son unos pasos sencillos que la mayoria de los maquetadores que quieren hacer las cosas bien deben tomar en cuenta.

13:34

En este segundo video vamos a exportar las imagenes de la plantilla, vamos a optimizarlas al minimo para que tengan una calidad buena con un minimo peso para que la carga del sitio sea mas rapido.

28:40

Ahora vamos manos al codigo usando la estructura semantica en HTML5.

26:28

Ya que tenemos la estructura semantica en HTML5 vamos a darle los estilos a la plantilla en CSS.

15:45

Terminamos con este video dando los ultimos detalles en el codigo CSS.

Section 2: Volumen 2
13:07

En este segundo volumen de como maquetar una plantilla de photoshop PSD a html5 y css3, realizaremos algunas técnicas un poco mas complejas al estructurar y maquetar la plantilla.


En este vídeo te mostrare la segunda plantilla y la empezaremos a estructurar de manera muy fácil como en el Volumen 1.

28:00

Continuando con los videotutoriales de maquetacion web, en este videutotorial vamos a maquetar la plantilla que presentamos en el primer videotutorial que puedes ver en la descripción. En esta primera parte del videotutorial vamos a codear html.

31:33

Vamos a terminar de maquetar nuestra plantilla en html5 dándole estilos css paso a paso y de manera sencilla y eficaz.

Section 3: Volumen 3
13:57

En este primer capitulo del volumen 3 haremos la estructura de la plantilla seccionando el psd antes de empezar con el código.

15:50

En este segundo videotutorial sobre como maquetar una plantilla psd a html5 haremos los cortes para luego exportarlos.

20:59

En este tercer videotutorial vamos a empezar a codear el codigo html para crear nuestro esqueleto de la plantilla PSD anteriormente trabajada.

13:35

Continuando la segunda parte, En este tercer videotutorial vamos a empezar a codear el codigo html para crear nuestro esqueleto de la plantilla PSD anteriormente trabajada.

18:30

En este cuarto videotutorial de la serie vamos a darle estilos a la plantilla.

18:27

En este cuarto videotutorial de la serie vamos a darle estilos a la plantilla. Parte 2

15:07

En este cuarto videotutorial de la serie vamos a darle estilos a la plantilla. Parte 3

Section 4: Volumen 4
14:01

En este primer videotutorial del volumen 4 de maquetación web con html5 y css hacemos la presentación de la plantilla psd.

15:05

En este segundo videotutorial de la serie de volumenes en su edicion 4 de maquetacion web con html5 y css vamos hacer los recortes con photoshop y exportarlos para poder maquetar la plantilla.

16:03

En este videotutorial vamos a crear el código html5.

11:30

En esta segunda parte vamos a terminar de hacer la estructura semantica en html5

22:17

En este video comenzamos con los estilos de la plantilla antes estructurada en html5.

18:21

En esta segunda parte, vamos a terminar los estilos css de la plantilla.

Section 5: Volumen 5
19:30

En este video vamos a seccionar la plantilla psd y hacer una introduccion rapida de los cortes del psd, ya que en otros volumenes ya se ah explicado a detalle como realizar este proceso.

20:25

Vamos a comenzar a crear el codigo semantico html5 de la plantilla.

08:42

Continuamos escribiendo codigo en html5.

17:48

Una vez que tenemos toda la estructura semantica en html, vamos a pasar a los estilos css.

17:31

Continuando dando estilos css a nuestro proyecto web en html5

Section 6: Volumen 6
Presentación de la plantilla PSD
06:47
Cortes/Slides de la plantilla
13:37
Estructura HTML5 1/2
16:00
Estructura HTML5 2/2
07:21
Estilos CSS 1/2
13:11
Estilos CSS 2/2
17:54
Section 7: Volumen 7
Presentación de la plantilla
09:30
HTML5 1/2
11:27
HTML5 2/2
22:49
CSS 1/2
25:25
CSS 2/2
11:12
JS - Carrousell y Lightbox
13:59
Section 8: Volumen 8
Presentación de la plantilla
11:26
Cortes/Slides
08:30
HTML5
16:16
CSS 1/2
19:59
CSS 2/2
15:11
Section 9: Volumen 9
Presentación de la plantilla
12:06
HTML5 2/2
16:12
HTML5 1/2
12:40
CSS 1/4
16:56
CSS 2/4
19:42
CSS 3/4
17:22
CSS 4/4
09:33
Section 10: Volumen 10
HTML5 1/3
10:12
HTML5 2/3
09:08
HTML5 3/3
06:37
CSS 1/3
14:37
CSS 2/3
13:29
Section 11: Clases Bonus
Como crear un snippet en sublime text
09:05
Article

Felicidadez por concluir el curso "De PSD a HTML5"

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Klinsmann Fabian, 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.

Ready to start learning?
Take This Course