HERRAMIENTAS DE DESARROLLO WEB EN FIREFOX

INSPECTOR DE PGIN A
Una herramienta til que te muestra el cdigo HTML del
elemento que ests apuntando a con el ratn, en su contexto.
CONSOLA WEB
Una consola que le permite interactuar con la informacin de
salida , ejecutar fragmentos de JavaScript , y experimentar con
su contenido.
BLOC EDITOR
Un editor de texto integrado en Firefox que te permite editar y
ejecutar cdigo JavaScript.
EDITOR DE ESTILO
Le permite editar los estilos CSS de la pgina actual en tiempo
real y, adems , puede alternar y apagarlos . Una fantstica
manera de trabajar en tiempo real con la apariencia y
comportamiento de los contenidos web!.
DEPURADOR DE J AVASCRIPT
Recorrer el cdigo JavaScript que se ejecuta en el navegador
(o incluso en un navegador remoto) y ver las variables para
ayudar a localizar los fallos. Esta documentacin tambin
cubre el depurador remoto, que se puede utilizar para depurar
el cdigo que se ejecuta en un dispositivo de Firefox OS o en
Firefox en un dispositivo Android.
VISTA DE DISEO AD APTABLE
Vea cmo sus diseos luciran en diferentes tamaos de
pantalla sin cambiar el tamao total de la ventana del
navegador.
USANDO EL EDITOR DE CDIGO
El Editor de cdigo fuente no es una herramienta
independiente, en su lugar, es el editor de base usado por Bloc
y el Editor de estilos. Este artculo contiene informacin comn
a todas las herramientas que hacen uso de la API del Editor de
Cdigo.
BARR A DE HERRAMIENTAS DE DESARROLLADOR

La Barra de herramientas de desarrollador proporciona una

interfaz de lnea de comandos para manipular y trabajar con
las herramientas de desarrollo de Firefox y botones para
acceder rpidamente a las herramientas ms utilizadas.

HERRAMIENTAS DE DESARROLLO WEB EN CHROME

Los Chrome Developer Tools (DevTools para abreviar), son un
conjunto de creacin web y herramientas de depuracin integradas
en
Google
Chrome.
Los
DevTools
proporcionan
a
los
desarrolladores web profunda acceso en las interioridades del
navegador y su aplicacin web. Utilice los DevTools para rastrear
de manera eficiente por problemas de diseo, establecer puntos de
interrupcin de JavaScript, y obtener ideas para la optimizacin del
cdigo.
Nota: Si usted es un desarrollador web y desea obtener la ltima
versin de DevTools, debe utilizar Google Chrome Canary.

ACCESO A LAS DEVTOOLS

Para acceder a los DevTools, abrir una pgina web o aplicacin
web en Google Chrome. O bien:

Seleccione el men Chrome

en la parte superior derecha
de la ventana del navegador, seleccione Herramientas>
Herramientas de Desarrollo.

Haga clic en cualquier elemento de la pgina y selecciona

Inspeccionar Elemento.

La ventana DevTools se abrir en la parte inferior de su navegador

Chrome.
Hay varios
DevTools:

accesos

directos

tiles

para

la

apertura

de

las

Utilice Ctrl + Shift + I (o Cmd + Opt + I en Mac) para abrir el

DevTools.

Utilice Ctrl + Mays + J (o Cmd + Opt + J en Mac) para abrir

los DevTools y traer el foco a la consola.

Utilice Ctrl + Shift + C (o Cmd + Shift + C en Mac) para abrir

los DevTools en Inspeccionar Elemento modo, o alternar
Inspeccionar Elemento modo si los DevTools ya estn
abiertas.

Para el flujo de trabajo del da a da, el aprendizaje de los accesos

directos le ahorrar tiempo.

HE RR AM I E NTAS DE DE S AR RO L L O W E B
1. ADOBE KULER

Si necesitas crear una paleta de color para tu proyecto Adobe

Kuler es tu solucin. Una aplicacin de internet de Adobe gratuita,
que te permitir crear y buscar combinaciones de colores . Para
hacer uso de esta aplicacin debers estar registrado como
usuario en la pgina de Adobe, y con tu usuario y password podrs
tener acceso a l.

2. TYPECAST

Esta aplicacin te permite trabajar con mas de 5.000 fuentes

desdeTypekit, Fontdeck, Fonts.com y Google Web Fonts en un solo
panel de control.
El objetivo es poder decidir la tipografa que utlizars en los
textos que publicars en la web de forma sencilla y rpida, de la
misma forma que lo hacemos con los editores de texto y fotografa
tradicionales. Puedes crear columnas de contenido y alterar la
tipografa usada, escogiendo en el men lateral el proveedor de las

fuentes y escribiendo cualquier tipo

resultados directamente en la web.

de

texto

para

ver

los

Adems podrs obtener el cdigo CSS para poder utilizar esas

fuentes en tus pginas web, con la total certeza de de que tus
usuarios cargarn la fuente y vern el mismo resultado que tu.

3. MOCKFLOW

Te permite montar un prototipo en cuestin de minutos, online y

para multitud de plataformas diferentes: Android, iPhone,
WordPress, Joomla, Drupal, Facebook Es muy intuitiva ya que es
tan fcil como hacer drag and drop con los componentes que te
proporciona para construir tu wireframe .
La versin gratuita slo permite un proyecto con 4 pginas, pero
puedes descargarlas en diversos formatos y borrarlas conforme las
dejes de necesitar.

4. GUIDEGUIDE

Es una extensin de Adobe Photoshop con la que preparar tu

documento para comenzar a disear tus webs ser cuestin de
minutos. Un plugin que se ha convertido en un imprescindible dada

la importancia de las guas para conseguir diseos web perfectos.

Una vez que la instales no vas a querer dejar de usarla.

5. LAYERVAULT

Seguro que ms de una vez hemos tenido dificultades para

gestionar dentro de un proyecto las ltimas versiones de los
archivos. Sobre todo cuando un mismo archivo va siendo editado
por varias personas a la vez.
Layervault es una aplicacin web que te permitir controlar y
gestionar todos los aspectos de tu proyecto (comunicacin con
compaeros, gestin de archivos, etc.) desde una misma interfaz.
Puedes aadirla a la barra de tareas, lo que te permitir ir
guardando de forma automtica a travs de la sincronizacin
cualquier cambio, archivo, carpeta, etc. en el directorio de
LayerVault. As tus compaeros de proyecto irn recibiendo
actualizaciones para estar informados de qu aspectos del trabajo
se actualizan o cambian, y tambin recibiremos dichas
notificaciones en nuestros otros dispositivos si tambin los
sincronizamos.

6. INVISION

Esta herramienta ha revolucionado el mundo de las aplicaciones de

representacin de prototipados. Esta herramienta transforma tus
diseos rpidamente en prototipos interactivos con transiciones y

animaciones web dotando de gran realismo a tus mockups. Te

permite compartir un mismo proyecto con cuanta gente se desee
(entre ellas el cliente) por lo que resulta muy prctica a la hora de
que este pueda previsualizar e interactuar con el diseo de su
web antes de comenzar con su desarrollo.

7. CODEKIT

Es una herramienta que te ayuda a construir webs de manera ms

rpida y ms ordenada. Adems te permite compilar Sass y Less y
optimiza tus archivos.
Con Codekit podrs importar tus frameworks de manera que si
haces un include de algn archivo lo buscar primero en el
proyecto concreto en el que ests trabajando y, si no lo
encuentra, recorrer tus frameworks para incluirlo.

8. PROTO-IO
Si lo que ests diseando es una aplicacin proto.io es una de las
herramientas ms potentes de prototipado que ofrece el
mercado de las apps hoy en da.
Ofrece un entorno de creacin de prototipos que podrs usar para
crear y presentar el diseo de tu futura aplicacin.

Posee multitud de opciones para incluir y configurar nuevos

componentes, as como definir los agentes (iPhone y iPad, de
momento) que debern acceder al proyecto creado.

Tambin te permite decidir si la aplicacin ser mostrada en

posicin horizontal o vertical, por ejemplo, as como incluir
botones, formularios, cdigo html, barras, textos, listas, mens,
etc., todo sobre una pantalla dividida en zonas para facilitar la
posicin correcta de cada componente.
La versin gratuita est limitada a un proyecto y un agente,
permitiendo guardarlo dentro del subdominio que decidamos.
Estas herramientas que te hemos mostrado es una pequea
recoleccin de las ms aceptadas y utilizadas por los diseadores
web hoy en da y que mejor te pueden funcionar.

9. SUBLIME TEXT

Para aquellos diseadores que decidan sumergirse en la primera

fase desarrollo de la web Sublime Text es un editor de cdigo
multiplataforma, ligero y con pocas concesiones a las florituras. Es
una herramienta concebida para programar sin distracciones y
bastante intuitiva.
Sublime Text te permite tener varios documentos abiertos mediante
pestaas, e incluso emplear varios paneles para aquellos que
utilicen ms de un monitor. Dispone de modo de pantalla completa,
para aprovechar al mximo el espacio visual disponible de la
pantalla.
A partir de ahora disear un proyecto web perfecto de principio a
fin ser una tarea mucho ms fcil e intuitiva y tus clientes estarn
mucho ms satisfechos.