Editores Html 5, CSS, y JavaScripts

TRUCO: Crea una fuente con tu propia letra en solo 6 pasos | ¿Qué es el hoisting en JavaScript?

Los 10 mejores editores gratuitos (o casi) de HTML, CSS y JavaScript

Lo único que necesitamos para crear páginas y aplicaciones web es un simple editor de texto plano y nuestra imaginación. El propio Bloc de notas o similar que viene con Windows nos sirve perfectamente. No obstante siempre viene bien contar con el soporte que nos brindan ciertas herramientas especializadas.

Las más potentes nos ofrecen todo tipo de ayuda contextual para no tener que recordar cada detalle de los cientos de atributos de CSS y etiquetas HTML disponibles, vista previa de las páginas que estamos creando, soporte de navegadores, validación de etiquetas, verificación de accesibilidad, y muchas otras cuestiones avanzadas.

Dentro de la miríada de herramientas disponibles voy a destacar algunas de las más conocidas e interesantes de carácter gratuito (o realmente baratas) y que he utilizado y conozco, si bien existen muchísimas más y no se trata de una lista exhaustiva.

Este es mi “top ten” de las mejores herramientas para crear aplicaciones y páginas web editando código HTML5, CSS3 yJavaScript.

Como buen ranking que se precie, comienzo del peor (dentro de los buenos) al mejor ;-)

10.- CoffeCup Free Editor

Un editor multiplataforma (Windows, Mac) y gratuito con soporte para multitud de características: ayuda contextual a la escritura de código, vista previa del resultado a medida que escribimos, etc..  La versión gratuita se ve recortada frente a la de pago, pero aún así es una buena opción también.

CoffeCuphttp://www.coffeecup.com/free-editor/

9.- TextWrangler

Editor gratuito para Mac especializado en escritura de código HTML, CSS y JavaScript. Se asemeja mucho a Notepad++ o a Sublime (ver más abajo en el ranking), pero es más limitado. Es uno de los más conocidos y utilizados en Mac.

Bare Bones Software
http://www.barebones.com/products/textwrangler/

8.- TextMate

Editor especializado de código para Mac. Es similar a Notepad++ y a Sublime. Al igual que el anterior es muy utilizado por programadores en el sistema de la manzana.

MacroMates
http://macromates.com/

7.- Kompozer

Archiconocido editor de HTML y CSS que es gratuito y multiplataforma (Windows Mac y Linux). Ofrece vista previa de la página mientras se escribe código, múltiples pestañas, edición específica de CSS, etc...

Kompozerhttp://www.kompozer.net/

6.- Aptana Studio

Otro editor multiplataforma de carácter gratuito. Ofrece una excelente ayuda contextual a la hora de escribir código HTML, que incluye también el soporte de los diferentes navegadores para cada característica. Sólo por esto ya merece la pena. Tiene características avanzadas para programación con JavaScript y soporta además múltiples lenguajes de servidor, como PHP, Python y Ruby on Rails. Está basado en Eclipse, y por lo tanto en Java, por lo que tenlo en cuenta si no te gusta instalar esa plataforma en tu equipo (por sus muchos problemas de seguridad y lentitud).

Aptanahttp://www.aptana.org/products/studio3

BONUS: ¿Quieres ser mejor programador? Evita "Las 10 meteduras de pata más comunes"

5.- Notepad++

Es gratuito y además Open Source aunque solo funciona bajo Windows. Dispone de multitud de plugins para extender su funcionalidad, y como es muy popular hay muchos donde elegir. Va mucho más allá que el bloc de notas ya que ofrece sintaxis coloreada, estructuración de código (para poder plegar y desplegar zonas cubiertas por etiquetas), soporte de otros muchos lenguajes de programación, etc... Está bien tenerlo a mano para pruebas o ediciones rápidas. Es uno de mis favoritos.

Notepad++
http://notepad-plus-plus.org/

4.- BlueGriffon

Este excelente editor WYSIWYG utiliza por debajo el motor de renderizado de Firefox para visualizar las páginas a medida que las vamos editando. Cuenta con ayudas a la escritura de código (como las “miguitas de pan” de la parte de abajo o el acceso a la estructura jerárquica de la página), y ofrece incluso la posibilidad de probar en tiempo real transformaciones 3D de CSS3 sin abandonar el editor (ventajas de utilizar el motor Gecko de Mozilla). Es gratuito, Open Source y multiplataforma (Windows, Mac y Linux) y está disponible en Español entre otros muchos idiomas. La última versión es de hace casi un año, pero el proyecto sigue activo.

BlueGriffon
http://bluegriffon.org/

3.- Sublime Text

Un editor de texto avanzado para programadores, multiplataforma. Aunque es bastante espartano lo cierto es que todo el que invierte tiempo en aprender a dominarlo luego no lo quiere dejar, ya que aumenta mucho la productividad a la hora de escribir código. No ofrece muchas de las características de ayuda al programador web que sí ofrecen la mayoría de los otros entornos, por lo que es recomendable sobre todo si vamos a trabajar mucho directamente con código, especialmente JavaScript. Lo podemos descargar y utilizar gratuitamente, pero si lo vamos a usar a menudo para trabajar sus creadores nos solicitan que les paguemos una licencia (es lo justo). Ésta tiene un precio muy razonable.

Sublime Text
http://www.sublimetext.com/

2.- JetBrains WebStorm

Este es sin duda uno de los mejores editores de código del mercado, y no solo para el trinomio HTML/CSS/JavaScript. De hecho soporta otros lenguajes como CoffeeScript, TypeScript y Node.js, y multitud de librerías de JavaScript, sistemas de control de código, testeo unitario, etc.... Es muy espectacular la capacidad de editar y ver en tiempo real los cambios en un Chrome, incluso en aplicaciones de tipo SPA/AJAX. La lista de características es tan larga que mejor te enlazo a la misma en su página. Lleva un rato aprender todas sus posibilidades, pero merece la pena.

Es multiplataforma. No es gratuito, pero su precio (solamente 44€ para uso individual) es un regalo para todo lo que ofrece. Muy recomendable.

JetBrains
http://www.jetbrains.com/webstorm/

1.- Microsoft Visual Studio Express for Web

Está disponible en varios idiomas (incluyendo el Español) y su única limitación es que sólo funciona bajo Windows. Es decir, que si trabajas en Mac o Linux no podrás utilizarlo. Por lo demás es un entorno integrado de desarrollo (IDE) espectacular. Aunque, al igual que el anterior, es una herramienta técnica orientada a programadores y con muchas otras posibilidades avanzadas, ofrece un soporte estupendo para diseño de páginas Web, con editores avanzados de HTML, CSS y JavaScript, capacidad de depuración, ayuda contextual para todos los lenguajes, validadores de código, validadores de accesibilidad, visualización real de cómo van a quedar las páginas, etc... Echarás de menos muy pocas cosas (aunque algunas sí, sobre todo si usas Sublime). Es totalmente gratuito.

Framework

(Editor’s note: purely for reasons of length and readability, this article is the first of two parts. This one focuses on the Bootstrap family, more will be profiled in the second part.)

As the Web matures and the range of mobile devices we use to access it rapidly grows, our jobs as web designers and developers get considerably more complicated.

A decade ago things were much simpler. Then, it was almost certain that most of our users were visiting our sites while sitting at their desk, looking at a large monitor. 960 pixels was more or less considered as a good width for a web page. Our main care was dealing with the dozen or so desktop browsers and jumping through a few extra browser hacks to support quirky old versions of Internet Explorer. But now, with the boom of handheld electronic devices in the last five to six years, everything has changed. We’ve seen the introduction of smartphones and tablets of all different sizes, eReaders, browsers on TVs and many others. The diversity is only going to increase each day.

Soon, more people will be accessing the Web on their mobile and alternate devices than on a desktop computer. In fact, already a significant number of people use their mobile phones as their only access to the Internet. That means it is important for us designers and developers to understand how to deal with this entire mobile world. And although, as of this writing, we haven’t entirely figured out how to make all the content we are accustomed to seeing at our desk provide an equally pleasing experience on our handheld devices, the technologies and tools for doing that get better.

One of the primary strategies we use when we deal with unknown viewport size is the so-called responsive web design. It’s a mechanism for providing custom layouts to devices based on the size of the browser window. By default, most browsers on small devices such as smartphones and tablets shrink a web page down to fit the screen and provide ways for zooming and moving around the page. Although it technically works, it is not such a great experience. The text is too small to read, the links too small to tap, and all that zooming and panning around is more or less distracting.

The technique of responsive web design is to serve a single HTML document to all devices by applying different style sheets based on the screen size in order to provide the most optimized layout for that device. For example, when the page is viewed on a large desktop browser, the content can be placed into multiple columns with normal navigation elements. But when that same page is viewed on a small smartphone screen, it appears in one column with large links for easy tapping. You can see just how responsive web design works at the Media Queries gallery site. Just open a design in your browser and then resize the window very narrow and very wide, and watch as the layout changes based on the window size.

So far we’ve seen that, at least for now, responsive web design is an sufficient solution for fighting with the growing device diversity, but what are the actual tools and technologies to implement it in our designs? Do we have to be web gurus to handle it or will just the essential skills we already have be enough? Are there any tools that can help us?

This is where front-end development frameworks come into play. Responsive web design is not so hard to implement but it can be a little bit tricky to make it all work on all targeted devices. Frameworks make this job easier. They allow you to create responsive, standard-compliant websites with minimum effort while at the same time keeping everything simple and consistent. Frameworks give you a lot of benefits such as speed and simplicity, consistency across different devices, and much  more. One of the most important advantages is that they are so easy to use that even a person with minimal knowledge can utilize them without any problem.

In brief, if you are serious in today’s web development then using frameworks is a must and not an option. Nowadays your site must be extremely flexible in order to satisfy different browsers, tablets, smartphones and a whole bunch of other handheld devices.

A front-end web development framework is simply a collection of production ready HTML/CSS/JavaScript components that we can use in our designs. There are many frameworks out there but some of them stand out from the crowd. For your facilitation below you will find outlined some of the most powerful and popular frameworks available today. Bear in mind that these are not just CSS grids or so, but instead full-featured front-end development frameworks.

1. Bootstrap

Bootstrap is definitely the most popular and widely used framework, nowadays. It’s a beautiful, intuitive and powerful web design kit for creating cross browser, consistent and good looking interfaces. It offers many of the popular UI components with a plain-yet-elegant style, a grid system and JavaScript plugins for common scenarios.

It is built with LESS and consists of four main parts:

• Scaffolding – global styles, responsive 12-column grids and layouts. Bear in mind that Bootstrap doesn’t include responsive features by default. If your design needs to be responsive you have to enable this functionality manually.
• Base CSS – this includes fundamental HTML elements like tables, forms, buttons, and images, styled and enhanced with extensible classes.
• Components – collection of reusable components like dropdowns, button groups, navigation controls (tabs, pills, lists, breadcrumbs, pagination), thumbnails, progress bars, media objects, and more.
• JavaScript – jQuery plugins which bring the above components to life, plus transitions, modals, tool tips, popovers, scrollspy (for automatically updating nav targets based on scroll position), carousel, typeahead (a fast and fully-featured autocomplete library), affix navigation, and more.

Bootstrap is already powerful enough to empower any web interface. But in order to make more use of it and making the development process easier, you can find plenty of tools and resources that complement it. Some of them are listed below:

• jQuery UI Bootstrap – an awesome resource for jQuery and Bootstrap fans that combines the power of both. It brings nicely the slickness of Bootstrap to jQuery UI widgets.
• jQuery Mobile Bootstrap Theme – similar to the jQuery UI theme above, this is a theme built for jQuery Mobile. It is a handy resource if you have a web front-end built with Bootstrap and want to offer a similar look for mobile.
• Fuel UX – this extends Bootstrap with additional lightweight JavaScript controls. It’s easy to install, customize, update, and optimize.
• StyleBootstrap.info – Bootstrap has its own customizer but StyleBootstrap is a more detailed one with color pickers and the ability to style each component differently
• BootSwatchr – a Bootstrap theme roller that shows the immediate results of your changes. For every generated style, the application generates a unique URL in case you want to share it with others or return and edit anytime later.
• Bootswatch – a nice set of free themes for Bootstrap.
• Bootsnipp – a good collection of design elements and HTML snippets for Bootstrap. It offers also form and button builders.
• LayoutIt – drag and drop interface builder based on the elements and components of Bootstrap. It helps you to compose your design visually by placing and arranging different elements into your layout via drag and drop and then allows you to edit their properties. You get the base code and then expand it. Simple and easy.

2. Fbootstrapp

Fbootstrapp is based on Bootstrap and gives you the same functionality for Facebook iframe apps and designs. It includes base CSS and HTML for all standard components like typography, forms, buttons, tables, grids, navigation, and more, styled in the typical Facebook look and feel.

3. BootMetro

BootMetro is a framework inspired by the Metro UI CSS, which is built on top of Bootstrap, for creating Metro/Windows 8-styled websites. It includes all Bootstrap’s features plus some additional extras like tiled pages, an application bar, and more.

4. Kickstrap

Simply put, Kickstrap is a kind of Bootstrap on steroids. It uses Bootstrap as its base and extends it with many apps, themes and extras. This makes the framework a complete kit for building websites without the need to install anything. Just put it in your site and you are ready to go.

Apps are just bundles of JavaScript and CSS files that run together as a package after your page has finished loading. Some of the apps included by default are Knockout.js, Retina.js, Firebug Lite, and Updater. And you can add many more.

Themes give you the ability to differentiate from most Bootstrap websites’ standard look and feel.

Extras are fan-created additions to extend Bootstrap UI library. They usually use the same or similar syntax.

And Next Time…

Here we conclude our journey in the land of Bootstrap related frameworks. Stay tuned for the next part where more frameworks are waiting for you.

Comments on this article are closed. Have a question about CSS frameworks? Why not ask it on ourforums?

Ready to start building websites with Bootstrap? Learnable has you covered — start your free trialtoday.

Was this helpful?

Get our latest JavaScript articles

Scratch. Bebe_parlante

Web Proyecto

Creación de un Comic. ¿Dónde Hacerlo?

HERRAMIENTAS
A continuación presentamos una serie de herramientas digitales para elaborar Cómics:

	Pixton http://www.pixton.com/es/ Aplicación en línea con características Web 2.0 para crear cómics. Ofrece una serie de plantillas para seleccionar el número y disposición de los recuadros, varios personajes prefabricados, fondos y artículos decorativos, etc. Los estudiantes pueden crear historias sobre temas relacionados con las diferentes asignaturas. El primer paso consiste en seleccionar el tipo de cómic (rápido, clásico, chiste, gran formato, avatar, 4-Koma, largo y estilo libre). A continuación, se selecciona la plantilla más apropiada para la historia que se quiere contar. Luego se eligen los personajes a utilizar; esto genera una página nueva con el cómic en versión editable (modificar título, personajes, globos y textos). Español | Versiones Gratuita y de Pago | En Línea | Requiere registro.
	GoAnimate http://goanimate.com/ Aplicación en línea para crear videos con algunas opciones gratuitas y otras de pago. Con GoAnimate se pueden crear cómics en los que los personajes hablan en lugar de utilizar viñetas y globos con texto. Lo primero es hacer clic en el botón “Crea tu vídeo”, luego elegir el escenario, los personajes y escribir o grabar los diálogos. La herramienta ofrece las opciones de utilizar música ambiental para el video y de crear personajes propios. Español | Gratuito + Pro US$199 x Año | En Línea | Requiere registro.
	Comic Maker https://play.google.com/store/apps/details?id=com.apppie.comicstrip Aplicación para Android que permite elaborar fácilmente Cómics a partir de fotografías. Ofrece varios diseños para los recuadros y en cada recuadro se puede insertar una fotografía y agregarle uno, de los seis tipos de globo, con su correspondiente texto. A las imágenes se les puede aplicar uno de cuatro efectos especiales disponibles: imagen antigua, dibujo a lápiz, dibujo animado y sepia. Inglés | Gratuito | Android |
	Toondoo http://www.toondoo.com/ Con Toondoo los estudiantes pueden crear en línea sus propias historietas sobre cualquier tema. Para ello, utilizan los  personajes, escenarios y objetos que ofrece la aplicación o crean los propios. Además, es posible cambiar la expresión del rostro y del cuerpo del personaje seleccionado, lo cual contribuye a que se adapte al texto de cada viñeta. El primer paso consiste en registrarse en el sitio. Luego se debe seleccionar el diseño de las viñetas (entre 1 y cuadro recuadros) para la historieta a elaborar. Si el Cómic es largo, la herramienta permite unir varias historietas en un solo libro. A continuación se arrastra a cada viñeta el fondo y los personajes prefabricados. Por último, se agregan los globos y sus respectivos textos. Es posible crear una biblioteca con varios cómics y publicarlos en un Blog o página Web. Inglés | Gratuito | En Línea | Requiere registro
	Bitstrips http://www.bitstrips.com/create/comic/ Aplicación en línea muy sencilla para crear cómics. Una vez seleccionado el número de viñetas, se procede a seleccionar y configurar cada uno de los fondos, personajes, objetos, efectos y figuras que irán en cada recuadro de la historieta. Posteriormente se agregan los globos con los textos. Por último se aplican controles y filtros a personajes y globos. Inglés | Gratuito | En Línea | Requiere registro
	Comic Strip It https://play.google.com/store/apps/details?id=com.roundwoodstudios.comicstripit Con Cómic Strip It los estudiantes pueden elaborar en sus dispositivos Android atractivas historietas. La aplicación permite utilizar las imágenes de la galería o tomar nuevas fotos directamente en el Cómic. Estas fotos se pueden agrandar o achicar, rotar y ubicar en diferentes posiciones. Al igual que en todos los programas para elaborar Cómics, se puede añadir título, globos con texto y aplicar efectos de imagen a cada fotograma. El Cómic resultante se puede compartir en todas las plataformas sociales. Inglés | Gratuito | Android |
	Creaza Cartoonist https://itunes.apple.com/us/app/creaza-cartoonist/id517674681?mt=8 Programa para iPad que facilita crear historias. Permite guardar los trabajos en línea en una cuenta de Creaza para su posterior edición, distribución y exportación. Se pueden crear películas a partir de los dibujos animados creados en el iPad. Características: Crear historias basadas en personajes prefabricados, accesorios y fondos realizados por diseñadores profesionales y artistas; cambiar el estado de ánimo y la expresión de los personajes; utilizar la cámara del iPad para añadir fotos a la historieta; guardar las historietas en línea y compartirlas con otros, o exportarlas a archivos PDF de alta resolución.

Recursos Web

Las herramientas disponibles son:

Wordle es una herramienta que convierte un texto libre o el texto que contiene una web determinada en una nube de palabras. Una vez escrito el texto o elegida la URL que vamos a utilizar, podemos elegir un diseño que se ajuste a nuestros gustos o necesidades según los colores, la disposición y dirección de las palabras y el tipo de letra. Por último, podemos imprimir el resultado o copiarlo e insertarlo en una web.

Generador de letras del alfabeto que se pueden tocar (Educalia). Mediante esta herramienta es posible generar plantillas de cada letra del alfabeto en 3D para recortar y montar. Basta con elegir la letra, colorearla si se desea e imprimir la plantilla.

Generador de cuentos de GenMàgic. Permite crear fichas con escenarios y personajes con la finalidad después de redactar cuentos o hacer descripciones.

Generador de firmas manuscritas en flash para insertar en una web/blog. Tras escribir en el recuadro un nombre o un texto o bien realizar un dibujo,  se configuran los colores del tondo y del trazo y las dimensiones. Esta herramienta genera una animación flash que se puede insertar en una web.

Generador de dados con imágenes y palabras (Tools for Educators). Esta aplicación crea dados para recortar y montar con vocabulario o con vocabulario e imágenes. Funciona seleccionado las imágenes  y escribiendo las palabras que se desean. Ideal para realizar juegos de comunicacióncomo los que se describen en esta página (en inglés). Recurso visto en el blog: rocio mendez PT.

Wix es una herramienta on line para sitios web con mucha facilidad y gran atractivo, ya que están basados en tecnología flash lo que le entrega a estos sitios, grandes posibilidades de animación y personalización a partir de una serie de diseños predeterminados de planillas a elección.

Con la herramienta que funciona totalmente en línea, se pueden crear sitios web con widgets como por ejemplo el contacto o comentarios, tarjetas de presentación, recursos pedagógicos (como por ejemplo del que anteriormente hablamos aquí), e incluso animaciones en flash para después usar en otro sitio web o en un blog.

La herramienta funciona con drag&drop, lo que quiere decir que con tan sólo arrastrar, cortar y pegar podemos armar el sitio web en minutos, aunque de igual forma permite incorporar formato HTML por si se quiere agregar algún elemento externo.

El registro es sumamente sencillo al igual que el uso de la herramienta, aunque sus comandos están en inglés, pero son muy intuitivos para utilizar, además de que se puede basar un diseño en alguna plantilla de las que ofrece la aplicación con lo que el diseño es mucho más sencillo todavía, o en su efecto, borrar la plantilla y comenzar un sitio desde cero.

Aquí está la página de preguntas frecuentas sobre Wix:http://support.wix.com/index.php/P%C3%A1gina_principal

Para acceder a Wix, presionen aquí, pudiendo revisar desde un primer momento las páginas y sitios que van creando los usuarios o las planillas que ofrece el programa y que nos permiten hacernos una idea de sus potencialidades.