De PSD a HTML5
4.2 (40 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,828 students enrolled
Wishlisted Wishlist

Please confirm that you want to add De PSD a HTML5 to your Wishlist.

Add to Wishlist

De PSD a HTML5

En este curso aprenderás a maquetar un sitio web en HTML5 a partir de una plantilla en photoshop.
4.2 (40 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,828 students enrolled
Created by Klinsmann Fabian
Last updated 7/2014
Spanish
Current price: $10 Original price: $25 Discount: 60% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 14.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
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
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.

Who is the target audience?
  • Para tomar este curso solo necesitas saber lo básico del html y css y sobre todo ganas de aprender
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 58 Lectures Collapse All 58 Lectures 14:35:54
+
Introducción - Que vas aprender en este curso
1 Lecture 01:26

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

Preview 01:26
+
Volumen 1
5 Lectures 01:35:29

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.

Preview 11:02

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.

Optimizar y Exportar imagenes
13:34

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

Codeando HTML5
28:40

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

Codeando CSS 1/2
26:28

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

Codeando CSS 2/2
15:45
+
Volumen 2
3 Lectures 01:12:40

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.

Presentación de la plantilla PSD
13:07

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.

Codeando HTML5
28:00

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

Codeando CSS
31:33
+
Volumen 3
7 Lectures 01:56:25

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

Presentación de la plantilla PSD
13:57

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

Cortes/Slides de la plantilla
15:50

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

Codeando HTML5 1/2
20:59

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.

Codeando HTML5 2/2
13:35

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

Codeando CSS 1/3
18:30

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

Codeando CSS 2/3
18:27

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

Codeando CSS 3/3
15:07
+
Volumen 4
6 Lectures 01:37:17

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

Presentación de la plantilla PSD
14:01

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.

Cortes/Slides de la plantilla
15:05

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

Codeando HTML5 1/2
16:03

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

Codeando HTML5 2/2
11:30

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

Codeando CSS 1/2
22:17

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

Codeando CSS 2/2
18:21
+
Volumen 5
5 Lectures 01:23:56

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.

Presentación de la plantilla PSD
19:30

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

Codeando HTML5 1/2
20:25

Continuamos escribiendo codigo en html5.

Codeando HTML5 2/2
08:42

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

Codeando CSS 1/2
17:48

Continuando dando estilos css a nuestro proyecto web en html5

Codeando CSS 2/2
17:31
+
Volumen 6
6 Lectures 01:14:50
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
+
Volumen 7
6 Lectures 01:34:22
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
+
Volumen 8
5 Lectures 01:11:22
Presentación de la plantilla
11:26

Cortes/Slides
08:30

HTML5
16:16

CSS 1/2
19:59

CSS 2/2
15:11
+
Volumen 9
7 Lectures 01:44:31
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
2 More Sections
About the Instructor
Klinsmann Fabian
4.1 Average rating
681 Reviews
6,251 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.