4.62 de 5
4.62
2937 valoraciones en Udemy

Herramientas de desarrollo y diseño web gratis

Una completa colección de recursos que debes tener y conocer, totalmente gratuitos
Profesor:
Fernando Herrera
39.117 Estudiantes apuntados
Spanish [Auto-generated]
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.

Información básica sobre herramientas de desarrollo y diseño web

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 de desarrollo y diseño web 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!

Empezar aquí

1
Introducción y requisitos.

Vamos a responder las siguientes preguntas:

  • De qué se trata el curso? 
  • Qué haremos en él? 
  • Qué lograremos hacer al finalizarlo
2
Cómo funcionará el curso

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

3
Archivo maestro y una breve introducción al Bootstrap

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.

Fuentes

1
Links de esta sección

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

2
Font-Awesome

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

3
ionicons

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

4
Glyphicons

La fuente de iconos del Bootstrap

5
Google Fonts

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

6
blokkfont

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

7
Weather-icons

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

Iconos, letras e imágenes

1
Links de esta sección

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

2
Favicon Generator. For real.

Generador de iconos.

3
iconspedia

Una colección impresionante de iconos e imágenes

4
CSSAuthor

Mockups gratuitos y de excelente calidad.

5
freepik

Recursos gráficos para todos.

6
Skitch

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

7
ARCTEXT.JS

Texto curvo usando jQuery y CSS3

8
Shuffle Letters

Texto animado mezclado.

9
mThumb

Imágenes siempre del tamaño que necesitas.

Generadores de código y otras cosas.

1
Links en la descripción

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

2
json-generator

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

3
Htmlcompressor

Un compresor de código en linea totalmente gratuito.

4
css3generator

Generador de efectos CSS3 en linea.

5
Gradient-editor por Colorzilla

Gradientes HTML y CSS

6
Generador de color HTML por hailpixel

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

7
placehold.it

Imagens dummy para tus temas y demostraciones 

Plugins especiales

1
Metro Notification

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

2
Crystal Notification

Notificaciones transparentes personalizables

3
Yose Modal

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

4
Mountain Notifications

Sistema completo de notificaciones con el estilo de Mountain Lion.

5
Autumn

Una decoración para tus aplicaciones y sitios web.

6
Metro Menu

Un menu de jQuery inspirado en Windows 8

7
Tour Tip Guide

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

8
KL-Animate

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

9
Metro Modal

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

Animaciones

1
Links en la descripción

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

2
Animate.css

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

3
GreenSock

Engaging the internet!

4
GreenSock - Parte 2

JavaScript animations, parte 2

Slideshows

1
Link en la descripción

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

2
Super Simple Slider

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

3
Galleria

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

4
Supersized!

Slideshow a pantalla completa!

5
Swiper

Increíble plugin que genera TOUCH Enable slideshows!

Servicios en linea

1
Links en la descripción

Descarguen el PDF para tener los links a mano.

2
JSON Parser Online

Validador gratuito de formato json en linea.

3
Pingdom

Qué tanto estamos cargando nuestra página web?

4
Codepen

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

5
Responsinator

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

Utilidades para aplicaciones web

1
Links en la descripción

Descarguen el PDF para tener los links a mano.

2
http-server

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

3
Sweetalert

Un reemplazo elegante para la alerta de JavaScript.


4
Bootstrap modals

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

5
The date picker

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

6
Chosen

Un manejador de multiples opciones para nuestros controles HTML.

7
jQuery Complexify

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

Especiales de jQuery

1
Links en la descripción

Descarguen el PDF para tener los links a mano.

2
Masonry

Tarjetas ordenadas de manera perfecta

3
detectmobilebrowsers

Variable para detectar navegadores móviles.

4
Lazyload

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

5
STICKY

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

Video de fondo

1
Links de descarga en la descripción

Por favor descarguen el PDF para tener los links

2
BigVideo

Plugin de video de fondo

3
VideoBG

Plugin de video de fondo

4
tubular

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

Misceláneos

1
Links de los plugins de la sección

Aquí está la referencia a las librerías que usaremos en esta sección

2
Color Thief

Qué color predomina en una imágen? 

3
ColorZilla

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

4
Tippy - Tooltip

Un plugin hermoso para crear tooltips que no requieren de librerías externas para funcionar

Gráficas

1
Morris.JS - Parte #1

Gráficas elegantes, dinámicas y gratuitas!

2
Morris.JS - Parte #2

Completando el ejemplo anterior.

Node y NPM

1
lite-server - NodeJS

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

Mapas

1
Usando Google Maps - Api-Key

Aprenderemos a usar Google Maps

Lightboxes

1
Links en la sección de descargas

Pueden proceder a descargar los archivos de referencias

2
SwiperBox

Lightbox touch enable

3
Fancybox

Lightbox ligero y responsive

4
Fresco

Lightbox elegante y potente

5
Lightbox

El original desde hace más de 8 años

Plugins con Formularios

1
jqueryFlexdatalist

Un plugin de jQuery para convertir cajas de texto en selectores dinámicos.

Despedida

1
Más sobre mis cursos

Si te gusto este curso y deseas aprender sobre otro curso mío, aquí es el lugar

2
Despedida y que les ha parecido el curso!?

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

Puede ver y revisar los materiales del curso de forma indefinida.
¡Seguro! Si tiene una conexión a Internet, los cursos de Udemy están disponibles en cualquier dispositivo en cualquier momento. Si no tiene conexión a Internet, algunos instructores también les permiten a los estudiantes descargar las clases del curso. Eso depende del profesor.
4.6
4.6 de 5
Calificaciones 2937

Calificación Detallada

5 estrellas
1957
4 estrellas
767
3 estrellas
167
2 estrellas
37
1 estrellas
9
herramientas de desarrollo y diseño
DEBES ESTAR REGISTRADO PARA ACCEDER AL CURSO

Contenido

8 horas de video online
3 articles
Acceso sin limites
Acceso desde Móvil y Smart TV
Certificado de finalización