Desarrollador Web Profesional
4.5 (239 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,745 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Desarrollador Web Profesional to your Wishlist.

Add to Wishlist

Desarrollador Web Profesional

Conviértete en un profesional en el desarrollo web, y aplica las técnicas que se ocupan en la vida del mundo web.
4.5 (239 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,745 students enrolled
Created by Klinsmann Fabian
Last updated 7/2014
Spanish
Price: $45
30-Day Money-Back Guarantee
Includes:
  • 12 hours on-demand video
  • 1 Article
  • 11 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Crear desarrolladores Front-End
  • Dominar las ultimas tecnologías que los maquetadores están implementando hoy en dia
View Curriculum
Requirements
  • Conocimientos basicos de html5 y css3
  • Un editor de codigo
  • Muchas ganas de aprender y convertirse en un desarrollador profesional
Description

¿Quieres convertirte en un Front-End Profesional? ¿Te gustaria aprender las nuevas tecnologías que se están utilizando en el desarrollo web?

Entonces este curso es para ti....

En este curso no solo aprenderas las bases del desarrollo web, si no que seras todo un profesional para que puedas aplicar estos conocimientos en empresas y porque no, para tu propio emprendimiento en el mundo web.

Who is the target audience?
  • Apasionados por las nuevas tecnologias
  • Desarrolladores jr que quieren llevar sus conocimientos a otro nivel
  • Freelances que quieren expandir su arsenal de herramientas en el desarrollo web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 162 Lectures Collapse All 162 Lectures 16:59:19
+
Introducción al curso
1 Lecture 00:37

Breve descripcion del contenido del curso.

Preview 00:37
+
Bases de la maquetación
13 Lectures 01:40:50

En este vídeo veremos las partes en las que están compuestas un sitio web.

Preview 03:33

En este vídeo veremos como esta estructurado un sitio web para nosotros como maquetadores para tenerlo en cuenta a la hora de realizar proyectos.

Estructura de un sitio para maquetadores
01:44

Veremos la diferencia entre div y secciones en html5

Divs y Secciones
02:32

Manual básico de html
184 pages

Manual básico de css
13 pages

En esta primera practica realizaremos un sitio a una columna.

Preview 10:49

En esta segunda practica realizaremos un sitio a 2 columnas.

Practica 2: Maquetación a dos columnas
24:29

En esta tercera practica realizaremos un sitio web completo.

Practica 3: Maquetación completa - Cabecera
11:33

Vamos ahora a estructurar el código del contenido.

Practica 3: Maquetación completa - Contenido
07:55

Vamos a darle estructura al pie de la pagina.

Practica 3: Maquetación completa - Pie
05:40

En este vídeo vamos a darle los estilos al sitio.

Practica 3: Maquetación completa - CSS I
09:35

En este vídeo vamos a darle los estilos al sitio.

Practica 3: Maquetación completa - CSS II
09:36

En este vídeo vamos a darle los estilos al sitio.

Practica 3: Maquetación completa - CSS III
13:24
+
Maquetación Web Estructurada
20 Lectures 02:11:36

Presentación de lo que vamos a lograr en este modulo "Maquetación Estructurada"

Preview 01:10

Vamos a empezar a crear una planificacion del proyecto a realizar.

Planificación del proyecto
03:48

En este vídeo veremos las características de este excelente editor de código.

Sublime Text 3
01:28

Vamos a personalizar el editor sublime text para adaptarlo mas a nuestras necesidades.

Personalizar sublime text
07:52

Vamos aprender a crear un snippet que nos ayudara a optimizar el tiempo en que hacemos codigo en nuestros proyectos.

Como crear un snippet en sublime text
09:05

Vamos a instalar el control de paquetes que nos permite instalar multiples paquetes muy utiles para nosotros como desarrolladores.

Instalando package control
02:22

Vamos a instalar el plugin emmet, veras que este complemento instalado en tu editor te sera de gran ayuda en tu carrera como maquetador.

Instalando plugin emmet para sublime text
02:15

En este vídeo vamos a ver como es la sintaxis de este framework para html5

Como usar emmet (sintaxis)
07:01

Emmet tambien tiene accesos rapidos para crear codigos html

Como usar emmet (html)
03:34

Ahora veremos como crear codigo facil en css con emmet.

Como usar emmet (css)
05:34

Vamos a ver algunos atajos de teclados y trucos bien utiles en el editor sublime text.

Trucos y atajos de teclados en sublime text
05:13

En este vídeo vamos a empezar a desarrollar un sitio de manera completa y en esta primera parte vamos aprender a seccionar una plantilla PSD.

Presentación de la plantilla PSD - Secciones parte 1
06:55

Vamos a continuar creando secciones de la plantilla PSD.

Presentación de la plantilla PSD - Secciones parte 2
03:42

Vamos a crear las ultimas secciones de la plantilla PSD.

Presentación de la plantilla PSD - Secciones parte 3
03:24

En este vídeo veremos como recortar y exportar imágenes del PSD con el método que personalmente ocupo que es con la herramienta marco rectangular.

Cortes/Slides (método marco rectangular)
14:07

En este vídeo veremos como recortar y exportar imágenes del PSD con el método de la herramienta sectores.

Cortes/Slides (método sectores)
06:14

Vamos a poner manos al código creando la estructura de la cabecera del sitio.

Estructura HTML5 (cabecera)
09:01

Vamos a seguir estructurando ahora con el contenido y el pie de pagina.

Estructura HTML5 (contenido y pie)
10:49

Vamos a empezar a darle estilos CSS a la cabecera.

Estilos CSS (cabecera)
14:51

Seguimos dando estilos CSS ahora al contenido y pie de pagina.

Estilos CSS (contenido y pie)
13:11
+
jQuery
24 Lectures 01:14:14

Veremos que es y que podemos hacer con jQuery.

¿Que es jQuery?
01:38

Vamos a descargar jQuery de su pagina oficial.

Descarga de jQuery
01:41

Vamos aprender a vincular jQuery en nuestros proyectos.

Vinculación de jQuery
01:14

Veremos como importar archivos JS.

Importación de jQuery
01:17

Veremos como seleccion un elemento ID de html con jQuery.

Selección por ID
05:05

Ya que aprendimos a agregar una propiedad css, veremos ahora como añadir mas de una propiedad.

Varias propiedades CSS
01:52

Veremos como seleccionar un elemento clase de html con jQuery.

Selección por clase
04:38

Veremos como añadirle propiedades a una etiqueta html.

Cambio de propiedades por etiqueta
03:09

Vamos aprender a seleccionar elementos html con atributos con jQuery.

Selección por atributo
03:46

Veremos como con jQuery podemos seleccionar mas de un elemento html.

Selecciones multiples
04:10

En este vídeo vamos aprender a añadir y quitar clases css con jQuery

Añadir y quitar clases
07:42

Vamos aprender como crear codigo html desde jQuery.

Añadir html
03:06

Veremos en este video el evento mouseOver y mouseOut de jQuery.

MouseOver y MouseOut
03:55

Veremos en este vídeo el evento hover de jQuery.

Hover
01:14

Veremos en este video el evento mouseMove de jQuery.

Mousemove
03:14

Veremos en este vídeo el evento mouseUp y mouseDown de jQuery.

MouseUp y MouseDown
03:35

Veremos en este vídeo el evento focus de jQuery.

Focus
03:46

Veremos en este vídeo el evento blur de jQuery.

Blur
02:09

Veremos en este vídeo el evento hide y show de jQuery.

Hide y show
05:08

Veremos en este vídeo el evento fade in y fade out de jQuery.

Fade in y fade out
01:09

Veremos en este vídeo el evento fade to de jQuery.

Fade to
01:54

Veremos en este vídeo el evento toggle de jQuery.

Toggle
01:40

Veremos en este vídeo el evento slide de jQuery.

Slide
02:28

Veremos en este vídeo el evento animate de jQuery.

Animate
04:44
+
jQuery UI
17 Lectures 32:16

En este video veremos que jQuery UI y que podemos hacer con esta extension de jQuery.

Preview 00:46

Vamos a descargar de la pagina oficial el framework jQuery UI.

Descargando jQuery UI
00:27

Veremos que tambien podemos elegir los componentes de jQuery UI y personalizarla a nuestro gusto.

Personalizar jQuery UI
01:22

Vamos a preparar los archivos necesarios de jQuery UI

Preparación de archivos
00:46

En este vídeo veremos el método draggable de jQuery UI

Draggable
04:35

En este vídeo veremos el método droppable de jQuery UI.

Droppable
04:44

En este vídeo veremos el método resizable de jQuery UI

Resizable
02:01

En este vídeo veremos el método selectable de jQuery UI

Selectable
03:02

En este vídeo veremos el método sortable de jQuery UI

Sortable
00:50

En este vídeo veremos el método acordeon de jQuery UI

Acordeon
01:31

En este vídeo veremos el método autocomplete de jQuery UI

Autocomplete
02:43

En este vídeo veremos el método botones de jQuery UI

Botones
01:35

En este vídeo veremos el método calendar de jQuery UI

Calendar
01:35

En este vídeo veremos el método dialog de jQuery UI

Dialog
01:18

En este vídeo veremos el método progress bar de jQuery UI

Progress Bar
01:27

En este vídeo veremos el método slider de jQuery UI

Slider
00:54

En este vídeo veremos el método tabs de jQuery UI

Tabs
02:40
+
Framework 960 Grid System
18 Lectures 01:36:13

En este video vamos a ver que es un framework de css y que podemos hacer con el.

¿Qué es un framework de css?
01:14

Vamos a ver las ventajas y desventajas de usar un framework y saca tus propias conclusiones en que momento usarlo y en que momento no.

Preview 02:37

Vamos a ver algunos frameworks que se estan ocupando en la actualidad para que investigues mas sobre ellos a detalle.

Frameworks existentes
01:01

Vamos a ver en detalle que es el framework 960 system.

¿Qué es 960 Grid system?
04:07

Vamos aprender los fundamentos basicos de usar este framework css

Fundamentos de 960 GS I
01:40

En este video veremos como se compone una grilla de 12 columnas con 960GS

Fundamentos de 960 GS II
00:55

Veremos que tenemos un sistema donde podemos crear una version fluido del framework 960GS

Version 960 Grid Fluido
01:35

Vamos a empezar a conocer el flujo de trabajo de este framework.

Flujo de trabajo con 960GS
03:06

Vamos a empezar a usar el sistema 960gs de manera muy practica y basica.

Manejo del framework 960GS básico
03:31

Comenzamos con un proyecto completo que realizaremos usando el framework 960, comenzaremos primero seccionando la plantilla PSD del proyecto.

Presentación de la plantilla - Secciones
11:26

Vamos a recortar y exportar las imágenes del PSD.

Cortes/Slides de la plantilla I
07:12

Vamos a continuar con los cortes y exportacion de la plantilla PSD.

Cortes/Slides de la plantilla II
07:48

Vamos a poner manos en el codigo creando la estructura html de la cabecera del sitio.

Estructura HTML5 (cabecera)
09:58

Vamos ahora a estructurar el contenido del sitio.

Estructura HTML5 (contenido)
04:14

Terminamos de estructurar el pie de la pagina.

Estructura HTML5 (pie)
07:00

Ahora pasamos con los estilos css de la plantilla.

Estilos CSS I
09:29

Seguimos dando los estilos css de la plantilla.

Estilos CSS II
10:21

Vamos a terminar dando estilos a la pagina.

Estilos CSS III
08:59
+
Bootstrap
16 Lectures 01:10:26

En este vídeo veremos que es bootstrap.

Preview 01:38

Vamos a ver el metodo scaffolding de columnas sencillas.

Columnas
04:11

Vamos a ver el metodo scaffolding de columnas anidadas.

Columnas anidadas
01:51

Vamos a ver el metodo scaffolding de columnas adaptables.

Columnas adaptables
01:45

Vamos a ver el método scaffolding de columnas adaptables anidadas.

Columnas adaptables anidadas
02:26

Vamos a crear una pagina con el metodo de plantilla fija.

Plantilla fija
01:32

Bootstrap nos estiliza las fuentes de nuestros proyectos de una manera muy agradable para el usuario.

Tipografia
01:59

Vamos a ver como personalizar las tablas con bootstrap con unas clases bien sencillas.

Tablas
05:17

Vamos a ver todo lo relacionado a los formularios con bootstrap.

Formularios I
07:47

Continuamos como personalizar mas los formularios.

Formularios II
04:33

Vamos a ver los componentes de botones, imagenes e iconos.

Botones, imágenes, iconos
09:28

Vamos a ver el componente de botones de bootstrap.

Botones
02:27

Vamos a ver los componentes de navegacion por pestañas y pastillas.

Navegación tabs y pills
04:13

Veremos como crear paginaciones y migajas en las paginas.

Paginación y breadcrubms
05:38

Vamos a ver las etiquetas y thumbnails.

Etiquetas, insignias y thumbails
07:04

Vamos aprender a crear barras de progreso y alertas.

Alertas y barras de progreso
08:37
+
Responsive Web Design
9 Lectures 58:02

En este video vamos a ver que el diseño adaptable o diseño responsivo.

Preview 01:16

Vamos aprender a crear media queries en forma de bloque

Media queries en bloque
06:05

Vamos a crear buenas practicas creando media queries externos.

Media queries externos
04:20

Vamos a crear a un proyecto real que sea adaptable para distintos dispositivos - vamos a crear la estructura HTML5

Proyecto final - HTML5
08:30

Vamos a crear a un proyecto real que sea adaptable para distintos dispositivos - vamos a crear los estilos CSS

Proyecto final - Estilos CSS
05:39

Vamos a crear a un proyecto real que sea adaptable para distintos dispositivos - vamos a crear los estilos CSS para la versión de monitor.

Proyecto final - Estilos CSS (monitor)
13:44

Vamos a crear a un proyecto real que sea adaptable para distintos dispositivos - vamos a crear los estilos CSS para la versión de tablet.

Proyecto final - Estilos CSS (tablet)
09:36

Vamos a crear a un proyecto real que sea adaptable para distintos dispositivos - vamos a crear los estilos CSS para la versión de movil.

Proyecto final - Estilos CSS (movil)
08:31

Fin del curso.
00:21
+
Modulo Bonus: Librerias JS
4 Lectures 00:00

Olvidate de poner los prefijos para hacer compatibles ciertas propiedades de CSS3 en los diferentes navegadores, esta libreria prefix free te ahorra todo ese trabajo.

Manual de Prefix Free
4 pages

Aprende en este sencilo manual bien explicado como CSS ya se convierte mas en un lenguaje de programacion.

Manual de LESS
30 pages

Ya no te preocupes por la compatibilidad de tu sitio en navegadores como internet explorer, esta poderosa libreria resolvera todos esos inconvenientes.

Manual de modernizr
31 pages

Aprende a crear presentaciones muy visuales y faciles con la libreria de javascript reveal js

Manual de Reveal JS
3 pages
+
Modulo Bonus: SEO para desarrolladores
11 Lectures 56:53
Introducción al SEO
8 pages

Advertencias del seo
02:52

Tipos de SEO
3 pages

Plan de trabajo
02:14

Eligiendo palabras claves
16:29

Técnicas SEO que funcionan
3 pages

Depurando y expandiendo las palabras claves posibles 1/3
05:37

Depurando y expandiendo las palabras claves posibles 2/3
05:16

Depurando y expandiendo las palabras claves posibles 3/3
08:40

Verificando a la competencia
02:40

Asignando las palabras claves a las paginas
13:05
2 More Sections
About the Instructor
Klinsmann Fabian
4.1 Average rating
681 Reviews
6,253 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.