55+ Herramientas de desarrollo y diseño web

Una completa colección de recursos que debes tener y conocer, totalmente gratuitos
4.6 (438 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.
3,815 students enrolled
Free
Start Learning Now
  • Lectures 72
  • Length 7 hours
  • Skill Level All Levels
  • 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 5/2016 Spanish

Course Description

Información básica:

Este curso esta orientado a brindarte un amplio repertorio de herramientas y recursos para tus diseños y desarrollos web. Actualmente cuenta con más de 55, y cada uno de ellos es explicado con ejemplos.

Meta final:

Mi objetivo es darte la introducción y una capacitación de como utilizar dichas herramientas y/o código de JavaScript. 

Estos códigos y programas, te ayudaran a ahorrar tiempo y crear cosas increíbles que te tomarían mucho tiempo realizar sin el conocimiento de estos recursos.

Comprenderás desde pequeños slideshows hasta crear unos muy robustos, desde efectos para letras, hasta animaciones, sin contar una gran colección de plugins únicos que he creado que han tenido muy buena aceptación en el mercado australiano y europeo.

Qué necesito saber?

  • Es recomendable que sepan algo de jQuery, ya que la mayoría de los recursos son plugins de jQuery. Pero aquí te explicare como usarlos, así que no te preocupes.
  • Conocimiento de HTML, CSS y JavaScript al menos lo básico.
  • Hay un recurso que utiliza PHP, pero solo es necesario el localhost (igual solo es un recurso de más de 55 disponibles)
  • Hay una herramienta que necesitara poder editar archivos PSDs (Photoshop), pero de la misma manera, solo es un recurso de los más de 55 que están disponibles.


Algún costo adicional?

Todos los recursos utilizados en este curso, son gratuitos, no hay nada de pago. Los códigos creados por mi, yo respondo por las actualizaciones de los mismos. No hay costos adicionales.

Así que no veo razón alguna para que no te animes a tomar este curso!


What are the requirements?

  • Es necesario que conozcan un poco de HTML
  • Es recomendable que se sepan algo de jQuery (selectores básicos)
  • Es necesario que sepan un mínimo de JavaScript, nada complejo.
  • Hay un recurso que necesita poder correr PHP, y otro que utiliza Photoshop. Los demás no tienen requerimientos especiales.

What am I going to get from this course?

  • Tener un repositorio completo de herramientas.
  • Aprender como funcionan más de 65 recursos para sus proyectos.
  • Aprender como utilizar plugins y otras herramientas mediante ejercicios prácticos.

What is the target audience?

  • Cualquier desarrollador
  • Cualquier diseñador gráfico
  • Personas que quieran conocer mas sobre las herramientas mencionadas en el currículo de este curso.

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

Section 1: Empezar aquí
01:56

Vamos a responder las siguientes preguntas:

  • De qué se trata el curso? 
  • Qué haremos en él? 
  • Qué lograremos hacer al finalizarlo
03:43

Antes de comenzar, quiero explicarles como funcionará el curso, hablarles sobre los materiales adjuntos y plantearles los requerimientos.

11:48

El archivo maestro, es el que usaremos para trabajar cada vez que nos toque iniciar nuevamente. 

Favor tenerlo a mano, solo se podrá descargar de aquí, y en caso de actualizaciones, sólo cambiare este archivo.

Section 2: Fuentes
00:14

Pueden descargar el material en la sección de descargas para tenerlo a mano y no tener que escribir.

17:23

Es quizá, la fuente más utilizada para agregar iconos a las páginas web.

05:33

Aunque es un recurso de ionic, esta disponible para proyectos independientes

05:09

La fuente de iconos del Bootstrap

04:14

Como no hablar de esta increíble colección de fuentes.

03:44

Para las personas que no entienden el latín (Lorem ipsum)

05:05

Un hijo o nieto de Font-Awesome. Muy útil e interesante.

Section 3: Iconos, letras e imágenes
00:14

Pueden descargar el material en la sección de descargas para tenerlo a mano y no tener que escribir.  

04:46

Generador de iconos.

01:48

Una colección impresionante de iconos e imágenes

05:13

Mockups gratuitos y de excelente calidad.

02:40

Recursos gráficos para todos.

02:19

Programa gratuito y fácil de usar para una señalización rápida.

08:17

Texto curvo usando jQuery y CSS3

15:25

Texto animado mezclado.

11:16

Imágenes siempre del tamaño que necesitas.

Section 4: Generadores de código y otras cosas.
00:14

Mira la sección de descargas y ten a mano los links de los siguientes plugins

09:16

Un servicio en línea para sus propios desarrollos y pruebas

04:53

Un compresor de código en linea totalmente gratuito.

06:39

Generador de efectos CSS3 en linea.

03:13

Gradientes HTML y CSS

01:09

Una forma rápida para obtener el color HTML que estas buscando.

02:14

Imagens dummy para tus temas y demostraciones 

Section 5: Plugins especiales
16:47

Un completo set de notificaciones estilo "metro", para tu pagina web y aplicación.

06:45

Notificaciones transparentes personalizables

06:52

Alternativa al modal del bootstrap con opciones interesantes y útiles.

05:59

Sistema completo de notificaciones con el estilo de Mountain Lion.

03:36

Una decoración para tus aplicaciones y sitios web.

04:34

Un menu de jQuery inspirado en Windows 8

11:06

Un plugins creado para enseñarle a tus usuarios o visitantes como funciona tu aplicación.

09:03

Animaciones que aparecen cuando están en el punto de vista del usuario!. Scroll animations

06:46

Una alternativa al modal del bootstrap con opciones interesantes y útiles.

Section 6: Animaciones
00:14

Mira la sección de descargas y ten a mano los links de los siguientes plugins

08:18

Animaciones simples pero agradables a la vista muy fáciles de utilizar.

16:54

Engaging the internet!

12:49

JavaScript animations, parte 2

Section 7: Slideshows
00:14

Puedes descargar el PDF con las direcciones de los plugins de esta sección.

08:00

Un slider sumamente ligero, pero hace muy bien su trabajo.

06:46

Perfecto para una galeria de imágenes de cualquier tamaño

04:03

Slideshow a pantalla completa!

16:28

Increíble plugin que genera TOUCH Enable slideshows!

Section 8: Servicios en linea
00:14

Descarguen el PDF para tener los links a mano.

01:56

Validador gratuito de formato json en linea.

02:53

Qué tanto estamos cargando nuestra página web?

03:16

Demostraciones de código, ideas, ejemplo y mucho más...

01:49

Una manera rápida de probar como se ve nuestras páginas o aplicaciones web en diferentes dispositivos

Section 9: Utilidades para aplicaciones web
00:14

Descarguen el PDF para tener los links a mano.

04:02

Un servidor HTTP muy fácil de montar, para pruebas, producción o aprendizaje.

05:20

Un reemplazo elegante para la alerta de JavaScript.


04:47

Información en pantalla de forma elegante y muy práctica.

10:53

Un selector de fechas bastante elegante y fácil de configurar

08:16

Un manejador de multiples opciones para nuestros controles HTML.

09:56

Rutina de validación de contraseñas. Especialmente recomendado cuando necesitamos que nuestros usuarios creen passwords seguros.

Section 10: Especiales de jQuery
00:14

Descarguen el PDF para tener los links a mano.

11:14

Tarjetas ordenadas de manera perfecta

03:37

Variable para detectar navegadores móviles.

05:52

Una manera bastante recomendada de cargar imágenes en nuestro sitio web o aplicación

03:37

Un plugin para mantener objetos en posición estática, aunque hagamos scroll

Section 11: Video de fondo
00:14

Por favor descarguen el PDF para tener los links

05:55

Plugin de video de fondo

02:12

Plugin de video de fondo

05:23

El ID del video de youtube que uso es este: hFjOiAkN8ew

Section 12: Misceláneos
00:14

Descarguen el PDF para tener los links a mano.

08:54

Qué color predomina en una imágen? 

01:47

Cuando necesitamos saber que color tiene un objeto en alguna parte del navegador web.

Section 13: Gráficas
15:50

Gráficas elegantes, dinámicas y gratuitas!

07:29

Completando el ejemplo anterior.

Section 14: Node y NPM
06:22

Un servidor con live-reload, perfecto para realizar pruebas rápidas o trabajar nuestros estilos y diseños

Section 15: Despedida
01:17

Lo recomendarían? les gustaría más? Los escucho!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Fernando Herrera, Analista de Sistemas y Desarrollador Web

Soy un analista de sistemas de computo, con poco más de 17 años en el mundo del desarrollo de aplicaciones de todo tipo.

Me encanta programar, crear cosas que la gente use, enseñar, también soy maestro sustituto en una universidad en las clases de programación, soy autor de código en Envato Marketplace.

Aquí en Udemy, he tenido la increíble experiencia de poder enseñar de todo a más de 4,500 alumno, y espero seguir mejorando mis cursos y los temas con forme la actualidad vaya cambiando.

Ready to start learning?
Start Learning Now