Herramientas para el desarrollador web

Herramientas gratuitas y multiplataforma para programar mejor y más rápido
4.2 (5 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.
149 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 77
  • 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

Una de las mayores barreras cuando iniciamos a desarrollar aplicaciones en Web con HTML, CSS y JavaScript, es que desconocemos las herramientas que nos harían más productiva nuestra tarea. 

Lo mismo sucede cuando somos expertos en el desarrollo web, generalmente nos anclamos a un editor y desconocemos que hay otras opciones más poderosas al rededor, así como gratuitas (a mi me paso esto).

Este curso tiene como objetivo que obtengas bases firmes para seleccionar un editor de código, conocer la poderosa herramienta de codificación que es Emmet y poder utilizar con fluidez la consola de los navegadores, así como la herramienta de depuración de los mismos, conociendo los términos generales a los depuradores de cualquier plataforma.

Hicimos una selección de las herramientas a base de que fueran gratuitas, muy extendidas en su uso, que existiera una amplia comunidad a su alrededor y usuarios que desarrollen para ellas.

Desafortunadamente no hay suficiente tiempo para analizar todas las herramientas del mercado, pero estamos seguros que hemos elegido poderosas herramientas que ayudarán a aumentar tu productividad como desarrollador web.

Este curso está dirigido a desarrolladores web que maneje HTML, CSS y JavaScript, pues son los lenguajes en que se basan las herramientas que analizamos en el curso.

Si usted no utiliza estos lenguajes, o busca soporte en otros lenguajes, como PHP, .NET o Java, no le será de utilidad el presente curso.

Por último, este curso lo he querido desarrollar desde hace mucho tiempo como instructor de lenguajes web, ya que veo como el desconocimiento de dichas herramientas entorpece el aprendizaje.

Sinceramente espero que este curso te sea de mucha utilidad. 

What are the requirements?

  • Tener bases de programación en HTML, CSS y JavaScript

What am I going to get from this course?

  • Tener bases sólidas para el manejo del editor de código Sublime Text 3
  • Instalar Sublime Text 3 en diversas plataformas como Mac y Windows
  • Conocer el editor de código de Aptana Studio 3
  • Instalar Aptana Studio 3 en Windows y Mac
  • Subir los archivos desde Apatana Studio a un servidor por medio de su FTP
  • Utilizar las funcionalidades de Brackets en el manejo de código
  • Instalar Brackets en Windows y Mac
  • Completar los editores de código con la herramienta EMMET
  • Escribir estructuras de etiquetas complejas con Emmet
  • Modificar los estilos en cascada con Emmet
  • Manejo de la consola web con los principales 4 navegadores web
  • Depurar programas en JavaScript por medio de los debuggers de los navegadores
  • Desarrolladores web desde novatos hasta expertos

What is the target audience?

  • Personas que desconozcan los lenguajes de desarrollo web, como HTML, CSS y JavaScript

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

Bienvenida al curso de Herramientas Web
Preview
06:33
Section 1: Aptana Studio 3
05:26
  • Entra a la página de Aptana Studio 3

  • Selecciona Download

  • Te pide tu correo

  • Selecciona nuevamente Download
04:35

En este video veremos la forma de instalar Aptana Studio 3 en una computadora con Windows.

04:58

La interface del usuario de Aptana se apega al estándar de Eclipse, por lo que si usted conoce otra aplicación basada en este estándar, le será muy sencillo adaptarse a Aptana, y si es la primera vez que maneja una interface de Eclipse, le parecerá muy intuitiva.

06:12

Apatana está muy enfocado a los proyectos, más que a los archivos individuales, por lo que al principio resulta un poco confuso crear un archivo nuevo. En este video veremos la forma de crear archivos nuevos o desde una plantilla. 

04:54
  • Los proyectos son la base de Aptana y nos permite agrupar diferente tipo de archivos con un fin específico.

  • Podemos hacer proyectos de PHP, Web, Ruby, entre otros.

  • A partir de un proyecto, es más sencillo crear los archivos de diferente tipo, como javascript, html, css, php, etc.

03:24

Si tienes una carpeta en tu computadora con archivos web (html, js, php, css, etc.) puedes “promoverlos” como proyectos.

04:22

El panel de historia en Aptana es de enorme utilidad, pues nos permite recuperar cambios en los archivos o recuperar archivos que hemos borrado por equivocación.

07:05

Antes de pasar a la funcionalidad de los editores, revisamos las preferencias de los mismos para que podamos modificar todos los aspectos, como colores, tipos de fuentes, tamaño de las fuentes, etc.

09:33

En Aptana es muy poderosa el área del Editor. En este video vemos nueve actividades comunes en el manejo del área del editor.

05:51
  • La función “auto-complete” se conoce como “Content-Assist” en Aptana

  • También se conoce como “statement complete”

  • Puedes modificar el Content Assist en preferencias.

  • Puedes utilizar ctrl+barra para llamar sugerencias.
03:28

Los snippets son líneas de código que son frecuentemente utilizadas en programación.

04:29
  • La funcionalidad “Quick Diff” permite identificar líneas recién añadidas, líneas modificadas o eliminadas entre las veces que se guardan los archivos.

  • Una vez que el archivo es guardado, estos indicadores se eliminan.

  • Se pueden modificar por medio de las preferencias.
06:12
  • Los “bookmarks” son marcas o recordatorios dentro de los programas.

  • Las “task” son tareas que por realizar y tienen prioridades.

  • Window > show view
02:57
  • La vista de “outlines” nos permite ver documentos HTML, JavaScript, JSON, XML o CSS como nodos.

  • Nos permite navegar en documentos complejos.
05:28
  • Podemos ejecutar o visualizar un archivo en un navegador por medio del botón “run” en la parte superior del panel.

  • También podemos añadir o quitar navegadores instalados en nuestra computadora.
09:25
  • Por medio de la funcionalidad del ftp (file transfer protocol) o protocolo de transferencia, podemos subir los archivos trabajados con Aptana a un servidor Web.

  • Utilizamos el botón derecho sobre el nombre del proyecto.
Apuntes a Aptana Studio 3 (pdf)
Article
Section 2: Sublime Text 3
04:24
  • Sublime 3 es un editor de código con costo de $70 dlls, pero lo puedes evaluar completamente y en forma indefinida.

  • No cuenta con ftp o debuggers, como otras herramientas, pero es muy potente en la edición del código.
01:43
  • Entra a la página sublimetext.com

  • Baja el paquete

  • Instalalo y listo :)
01:35
  • Entra a la página sublimetext.com

  • Baja el paquete

  • Instalalo y listo :)
05:07

Sublime Text tiene una interface muy austera, pero que le permitirá editar perfectamente su código.

04:57

La mayoría de las operaciones que realicemos con Sublime Text las haremos con el teclado. En este video veremos cómo hacer la navegación entre diferentes archivos abiertos.

10:51

Sublime cuenta con: 

  • Notación coloreada
  • Funcionalidad de auto-complete
  • Auto-identación
  • Identificación de la etiqueta de cierre o de la llave de cierre
  • [Ctrl]+[m] para navegar entre paréntesis o llaves
04:34

Contamos con muchos comandos para visualizar simultáneamente varios archivos

OS X

WIndows

Comando

⌘ + ⌥ + 1       

Alt + Shift + 1

Una sóla columna    

⌘ + ⌥ + 2       

Alt + Shift + 2

Dos columnas   

⌘ + ⌥ + 3      

Alt + Shift + 3

Tres columnas    

⌘ + ⌥ + 4       

Alt + Shift + 4

Cuatro columnas   

08:50
  • Podemos arrastrar una carpeta para convertirla en un proyecto.

  • Los proyectos solo son persistentes cuando los guardamos.

  • Los proyectos se administran en la opción del menú correspondiente.
13:30

En Sublime Text tenemos muchas formas de encontrar y remplazar cadenas:

  • Buscar
  • Búsqueda incremental
  • Buscar y reemplazar
  • Búsqueda rápida
  • Búsqueda en una selección
  • Búsqueda en archivos
10:28
  • Podemos seleccionar:

    • Por palabra

    • Por línea

    • Por párrafo

    • Por etiqueta

    • Por paréntesis

    • Por sangría

    • Por alcance o scope

08:32
  • Para controlar las líneas:

    • Mover las líneas arriba y abajo

    • Duplicar la línea

    • Eliminar la línea

    • Insertar antes y después

  • Transponer caracteres
06:22
  • Para controlar las líneas:

    • Mover las líneas arriba y abajo

    • Duplicar la línea

    • Eliminar la línea

    • Insertar antes y después

  • Transponer caracteres
06:36
  • Goto Anything es uno de los comandos más completos de Sublime Text. Ctrl+P:

    • Por carpeta

    • # Búsqueda parcial

    • Búsqueda combinada

    • : no de línea

    • @     Funciones y clases (símbolos)

04:13
  • Con la paleta de comandos tenemos a todos los comandos disponibles según el contexto.

  • La activamos con:

    • ⌘ + ⇑ + P (Mac)    

    • Ctrl + Shift + P (Windows / Linux)

06:27
  • Hay tres maneras de hacer selectores múltiples:

    • Por medio de los atajos

    • Por medio del ratón

    • Por medio de selección y dividir por líneas
10:23

Los “snippets” son trozos de código que podemos llamar desde la función de autocompletar. 

Article

En esta lección puedes bajar el PDF de los apuntes de la sección de Sublime Text 3

Section 3: Brackets
02:28
  • Brackets es un editor de código ligero.
  • Es de código abierto (Open Source) y tiene representación visual, aunque no genera código.
  • Está especializado en web (HTML+CSS+JavaScript).
  • Cuenta con muchas extensiones que lo acompletan.
  • www.brackets.io


02:00

En este video veremos los pasos necesarios para instalar Brackets en una MAC OS X

03:01

En este video veremos la forma de instalar Brackets en una máquina con Windows.

06:01
  • La interface de brackets es muy austera.

  • Brackets nos permite visualizar nuestros cambios en un navegador como Google Chrome.
10:56
  • Archivo inicial
  • Crear nuevo documento
  • Abrir un proyecto
  • Crear un proyecto
  • Opciones de los archivos
  • Cerrar un archivo
  • Diferentes opciones de archivos
  • Ocultar la barra de archivos
  • Apertura rápida
  • Mostrar en el árbol de directorios
10:10
  • Auto-acompletar

  • Te sugiere atributos

  • Señala la etiqueta de apertura y cierre

  • Código sugerido con ctrl+barra espaciadora
  • Identación de bloque con
  • Cmd + corchete (mac)
  • Ctrl + corchete (windows)
07:23
  • Brackets no cuenta con preferencias

  • Aumentar y disminuir el tamaño de las fuentes:

    • Cmd + / cmd - (mac)

    • Ctrl + / ctrl - (windows / Linux)
07:09
  • Navegar dentro del documento

  • Quick open, apertura rápida:

    • shift+cmd+O (mac)

    • shift+ctrl+O (windows/linux)
05:44
  • Quick edit, edición rápida, podemos editar los estilos en cascada relacionados a la etiqueta html y visualizarlos en el navegador:

    • cmd+E (mac)

    • ctrl+E (windows/linux)

03:45
  • Seleccionar todo

    • cmd+A (mac)

    • ctrl+A (windows/linux)
  • Seleccionar línea
    • cmd+L (mac)
    • ctrl+L (windows/linux)
  • Dividir selección en líneas
    • Alt+cmd+L (mac)
    • Alt+ctrl+L (windows/linux)
07:58

Buscar:

    Cmd + F (mac)

    Ctrl+ F (windows/linux)


    Buscar siguiente:

    Cmd + G (mac)

    F3 (windows/linux)

    Buscar anterior:


04:30

Por medio de los plugins podemos completar las funcionalidades de Brackets.

Article

En esta clase puedes bajar los apuntes (pdf) de Brackets

Section 4: Codificar HTML y CSS más rápido con EMMET
03:21

Emmet es una extensión gratuita para los editores de código que agilizan la programación con HTML y CSS.

04:30
  1. Instalar el “Package Control”

  2. Buscar e instalar “EMMET”

  3. Reiniciar Sublime Text (recomendado)
02:46
  1. Entrar a Aptana

  2. Ir a Help > Install new software

  3. Reiniciar Aptana
02:41
  1. Entrar a Brackets

  2. Entrar a File > Extension Manager

  3. Seleccionar la extensión “EMMET”

  4. Reiniciar Brackets (por si las dudas)
05:38
  1. Para añadir una clase se utiliza un punto (.)

  2. Para añadir un identificador se utiliza (#)

  3. Sin elemento, se añade una división

  4. Con > se añade un elemento hijo

  5. Con + se añade un elemento hermano

04:29
  • Para crear etiquetas múltiples utilizamos el asterisco y el número de etiquetas que deseamos crear.

  • ul>li*5
08:41
  • Simplemente escribimos “lorem” y se genera el texto “lorem ipsum”.

  • Para escribir texto en una etiqueta, escribimos el texto dentro de llaves { }.

  • Para escribir el valor de uno a más atributos, los escribimos dentro de corchetes [ ].

09:01
  • Podemos agrupar con los paréntesis ( )

  • Podemos saltar a los elementos embebidos con ^
05:38
  • Podemos enumerar elementos con $

  • Podemos añadir más dígitos con $$$

  • Iniciar en un número diferente a 1 con @

  • Numerar negativamente con @-
03:00
  • Podemos omitir algunas etiquetas, ya que Emmet las toma como implícitas:

    • .clase

    • em>.clase

    • ul>.clase

    • table>.ren>.col
05:23
  • Emmet tiene muchas abreviaciones muy potentes.

  • Consulta la siguiente página para su consulta

06:12
  • Los estilos en cascada también se escriben por abreviaciones.

05:54
  • Por medio de la abreviación lg() en los CSS podemos realizar el gradiente lineal.

    • lg(direccion, colorStop1, colorstop2…)

  • No existe abreviación para el gradiente radial :(
05:45
  • Por medio Shift+Ctrl+G podemos tomar una lista de datos por omisión.

  • shift+ctrl+g
Article

En esta lección encontrará los apuntes del la herramienta Emmet en formato PDF

Section 5: Los depuradores o debuggers para JavaScript, HTML y CSS
06:31

Chorme (Canary):

Debugger incluido

Mobile: Android

Mobile: iOS webkit debug proxy (hay que instalarlo)

02:51

AJAX y la seguridad

Same origin policy

file://

CORS (cross-origin resource sharing)

09:29

Cada navegador tiene pequeñas diferencias entre sus herramientas de depuración, pero el funcionamiento del mismo es muy similar.

11:42

Consola:

Teclear console

Pasar variables y objetos

Log, error, count, clear, table, comandos y editar.

%c y las reglas de estilo CSS

07:46
  • Break Point (puntos de interrupción): punto donde detenemos la ejecución del programa.
  • Step over (paso a paso por procedimientos): ir al siguiente procedimiento.
  • Step Into (paso a paso por instrucciones) : Nos lleva dentro de la siguiente función o procedimiento.
  • Step out (paso a paso para salir): nos lleva a afuera de la función en la que nos encontramos
04:29

Break Point (puntos de interrupción): punto donde detenemos la ejecución del programa.

Step over (paso a paso por procedimientos): ir al siguiente procedimiento.

Step Into (paso a paso por instrucciones) : Nos lleva dentro de la siguiente función o procedimiento.

Step out (paso a paso para salir): nos lleva a afuera de la función en la que nos encontramos.

11:57

Primero creamos el breakpoint y con botón derecho escribimos la condición.

De preferencia utilizar el operador estricto === en lugar del operador condicional normal ==

06:20

Primero creamos el breakpoint y con botón derecho escribimos la condición.

De preferencia utilizar el operador estricto === en lugar del operador condicional normal ==

09:49

Step over, step into, step out

Step over, line to line

Se actualizan stack panel y local scope

Boton en el breakpoint: “continue to here”

Step into: entra a las funciones.

Step out: Sale de la función.

05:45

Como se ve una función anónima en el debugger call stack

Con step into nos vamos al inicio de call stack

Clausure muestra las variables definidas en el punto anterior

Para regresar, pulsa la primer función en el call stack

Cada una de las entradas es llamada un “frame”

Puedes consultar el contenido de arreglos y objetos

05:32
  • Los watches nos sirven para ver los contenidos de las variables o las expresiones para ver cómo cambian dependiendo del scope
  • Crear un watch, escribir una variable y te muestra su contenido
  • Podemos observar si el valor se mantiene o no
  • Podemos eliminar el watch por medio del botón menos
  • Nos indica el frame o función donde se modifica el valor dentro del call stack
Article

Apuntes a los depuradores o debuggers en los navegadores

Section 6: A manera de conclusión
Article

En esta lección encontrará los archivos del curso en formato zip.

02:38

Con este video damos por concluido el curso de Herramientas web. Hasta pronto

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Francisco Javier Arce Anguiano, Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.

Ready to start learning?
Take This Course