Herramientas para el desarrollador web

Herramientas gratuitas y multiplataforma para programar mejor y más rápido

Created byFrancisco Javier Arce Anguiano

Last updated 5/2016

Spanish

What you'll learn

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

Course content

6 sections • 77 lectures • 7h 12m total length

Bienvenida al curso de Herramientas Web6:33
Introducción a Aptana Studio 3 e instalación en una computadora Mac5:26
Entra a la página de Aptana Studio 3
Selecciona Download
Te pide tu correo
Selecciona nuevamente Download
Instalar Aptana en una computadora con Windows4:35
En este video veremos la forma de instalar Aptana Studio 3 en una computadora con Windows.
La interface del usuario de Aptana Studio4: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.
Crear un archivo nuevo o desde una plantilla en Aptana6: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.
Crear un proyecto en Aptana Studio4: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.
Promover una carpeta como proyecto en la computadora3:24
Si tienes una carpeta en tu computadora con archivos web (html, js, php, css, etc.) puedes “promoverlos” como proyectos.
El panel de historia en Aptana4: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.
Preferencias de los editores en Aptana Studio 37: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.
Manejar la ventana del editor en Aptana9:33
En Aptana es muy poderosa el área del Editor. En este video vemos nueve actividades comunes en el manejo del área del editor.
La funcionalidad Content-Assist o Autocomplete en Aptana5: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.
Los snippets en Aptana Studio 33:28
Los snippets son líneas de código que son frecuentemente utilizadas en programación.
La funcionalidad Quick Diff en Aptana4: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.
Administrar nuestro trabajo con task y bookmarks6:12
Los “bookmarks” son marcas o recordatorios dentro de los programas.
Las “task” son tareas que por realizar y tienen prioridades.
Window > show view
La vista Outline en Aptana Studio 32:57
La vista de “outlines” nos permite ver documentos HTML, JavaScript, JSON, XML o CSS como nodos.
Nos permite navegar en documentos complejos.
Manejo de navegadores en Aptana Studio 35: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.
Subir archivos al servidor por medio de FTP en Aptana9: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)0:03

Introducción a Sublime Text 34: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.
Instalar Sublime Text 3 en una MAC1:43
Entra a la página sublimetext.com
Baja el paquete
Instalalo y listo :)
Instalar Sublime Text 3 en Windows1:35
Entra a la página sublimetext.com
Baja el paquete
Instalalo y listo :)
La interface de Sublime Text 35:07
Sublime Text tiene una interface muy austera, pero que le permitirá editar perfectamente su código.
Navegación entre archivos en Sublime Text 34: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.
Comandos básicos de edición en Sublime Text10: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

Desplegar varios archivos simultáneos en Sublime Text 34: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

Manejo de proyectos en Sublime Text 38: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.
Buscar y remplazar cadenas en uno o varios archivos13: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
Seleccionar contenido en Sublime Text 310:28
Podemos seleccionar:
Por palabra
Por línea
Por párrafo
Por etiqueta
Por paréntesis
Por sangría
Por alcance o scope
Transponer y manipular las líneas con Sublime Text 38: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
Manejo de marcas o bookmarks en Sublime Text6: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
La herramienta Goto Anything6: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)
La paleta de comandos4: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)
Utilizar selectores múltiples en Sublime Text6: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
Los snippets y la funcionalidad autocomplete10:23
Los “snippets” son trozos de código que podemos llamar desde la función de autocompletar.
Apuntes a Sublime Text (pdf)0:03
En esta lección puedes bajar el PDF de los apuntes de la sección de Sublime Text 3

Introducción a Brackets2: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
Instalación de Brackets en Mac OS X2:00
En este video veremos los pasos necesarios para instalar Brackets en una MAC OS X
Instalación de Brackets en Windows3:01
En este video veremos la forma de instalar Brackets en una máquina con Windows.
La interface de trabajo de Brackets6:01
La interface de brackets es muy austera.
Brackets nos permite visualizar nuestros cambios en un navegador como Google Chrome.
Manejo de archivos y proyectos en Brackets10: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
Los principales comandos del editor en Brackets10: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)
Personalizar el editor de código de Brackets7:23
Brackets no cuenta con preferencias
Aumentar y disminuir el tamaño de las fuentes:
Cmd + / cmd - (mac)
Ctrl + / ctrl - (windows / Linux)
Navegar dentro del documento en Brackets7:09
Navegar dentro del documento
Quick open, apertura rápida:
shift+cmd+O (mac)
shift+ctrl+O (windows/linux)
El comando Quick Edit o Edición Rápida en Brackets5: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)
Seleccionar texto dentro de los archivos en Brackets3: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)
Buscar y remplazar texto con Brackets7:58
Buscar:
Cmd + F (mac)
Ctrl+ F (windows/linux)

Buscar siguiente:
Cmd + G (mac)
F3 (windows/linux)
Buscar anterior:
Completar Brackets con extensiones o plugins4:30
Por medio de los plugins podemos completar las funcionalidades de Brackets.
Apuntes a Brackets (pdf)0:03
En esta clase puedes bajar los apuntes (pdf) de Brackets

¿Qué es EMMET?3:21
Emmet es una extensión gratuita para los editores de código que agilizan la programación con HTML y CSS.
Instalar EMMET en SublimeText 34:30
Instalar el “Package Control”
Buscar e instalar “EMMET”
Reiniciar Sublime Text (recomendado)
Instalar EMMET en Aptana Studio 32:46
Entrar a Aptana
Ir a Help > Install new software
Reiniciar Aptana
Instalar EMMET en Brackets2:41
Entrar a Brackets
Entrar a File > Extension Manager
Seleccionar la extensión “EMMET”
Reiniciar Brackets (por si las dudas)
Trabajar con etiquetas HTML con Emmet5:38
Para añadir una clase se utiliza un punto (.)
Para añadir un identificador se utiliza (#)
Sin elemento, se añade una división
Con > se añade un elemento hijo
Con + se añade un elemento hermano
Multiplicar las etiquetas con el asterisco4:29
Para crear etiquetas múltiples utilizamos el asterisco y el número de etiquetas que deseamos crear.
ul>li*5
Ingresar texto de prueba, contenido a las etiquetas y a los atributos8: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 [ ].
Agrupar etiquetas y saltar hacia atrás los grupos de etiquetas9:01
Podemos agrupar con los paréntesis ( )
Podemos saltar a los elementos embebidos con ^
Enumerar elementos con Emmet5: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 @-
Etiquetas implícitas en Emmet3:00
Podemos omitir algunas etiquetas, ya que Emmet las toma como implícitas:
.clase
em>.clase
ul>.clase
table>.ren>.col
Abreviaciones más comunes en Emmet5:23
Emmet tiene muchas abreviaciones muy potentes.
Consulta la siguiente página para su consulta
Ememt y el manejo de estilos en cascada6:12
Los estilos en cascada también se escriben por abreviaciones.
Crear gradientes lineales con Emmet5: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 :(
Añadir valores por omisión dentro de las abreviaciones5:45
Por medio Shift+Ctrl+G podemos tomar una lista de datos por omisión.
shift+ctrl+g
Apuntes a la herramienta Emmet0:03
En esta lección encontrará los apuntes del la herramienta Emmet en formato PDF

Introducción a los debuggers6:31
Chorme (Canary):

Debugger incluido

Mobile: Android

Mobile: iOS webkit debug proxy (hay que instalarlo)
Los problemas de AJAX y los navegadores2:51
AJAX y la seguridad

Same origin policy

file://

CORS (cross-origin resource sharing)
Primeros pasos en los depuradores o debuggers de los navegadores9:29
Cada navegador tiene pequeñas diferencias entre sus herramientas de depuración, pero el funcionamiento del mismo es muy similar.
El manejo de la consola de JavaScript11:42
Consola:

Teclear console

Pasar variables y objetos

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

%c y las reglas de estilo CSS
Modificar un script desde el depurador o LiveEdit7: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
Conceptos generales de los depuradores o debuggers4: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.
Los puntos de interrupción o breakpoints11: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 ==
Los breakpoints condicionales6: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 ==
Navegar en el script: step over, step in, step out9: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.
La pila de llamadas o el call stack5: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
Los vigilantes o watches de las variables y expresiones5: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
Apuntes a los depuradores o debuggers en los navegadores0:02
Apuntes a los depuradores o debuggers en los navegadores

Requirements

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

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.

Who this course is for:

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

Herramientas para el desarrollador web

What you'll learn

Explore related topics

Course content

Aptana Studio 318 lectures • 1hr 35min

Sublime Text 317 lectures • 1hr 49min

Brackets13 lectures • 1hr 11min

Codificar HTML y CSS más rápido con EMMET15 lectures • 1hr 13min

Los depuradores o debuggers para JavaScript, HTML y CSS12 lectures • 1hr 22min

A manera de conclusión2 lectures • 3min

Requirements

Description

Who this course is for: