Contenido
- Herramientas de nicho
- 01. Bugherd
- 02. Fontello
- 03. Proto.io
- 04. Fundación 3
- 5. Dreamweaver CS6
- 06. Cloud9 IDE
- 07. Sencha Touch 2
- 08. Adobe Edge Inspect
- 09. Soportes
- 10. Modernizr 2.6
- 11. Trello
- 12. TypeCast beta
- 13. Gridset
- 14. Yeoman
- 15. Emmet
- 16. Sublime Text 2
- 17. Microsoft WebMatrix 2
- 18. PhoneGap 2.0
- 19. Firefox 18
- 20. Fotón
- ¿Me gusto esto? ¡Lee esto!
Si ha tenido un momento de tranquilidad estos últimos 12 meses, enhorabuena, porque el resto de nosotros sudamos solo para mantenernos al día con la tasa base de cambio en línea. HTML5 ha alcanzado una masa crítica, el desarrollo receptivo continuó avanzando a toda velocidad, luego están las API de audio y WebGL ...
Afortunadamente, el grado de cambio se correlaciona positivamente con los esfuerzos de resolución de problemas de los desarrolladores y diseñadores en todas partes, excavados en sus respectivas especialidades.
Herramientas de nicho
Como resultado, junto con las aplicaciones respaldadas por empresas más grandes, tenemos una gran cantidad de pequeñas herramientas y bibliotecas, cada una diseñada para resolver un problema en particular o preservar un cierto conjunto de posibilidades. Un par de estos proyectos se han convertido en instituciones: Modernizr, manteniendo el campo de juego técnico nivelado y PhoneGap manteniendo abierto el mercado móvil para tipos web.
Lo más alentador es que hay espacio para algunos experimentos de tipo "simplemente por el placer de hacerlo". E incluso un poco de autocomplacencia, evidenciada por el hecho de que Google se sentía lo suficientemente seguro acerca de algunas herramientas como para empaquetarlas e incorporarlas al proyecto Yeoman.
De hecho, esta es una lista atractiva, con una buena representación para la mayoría de las porciones del pastel de desarrollo. Desde IDE a gran escala hasta bibliotecas pequeñas y exóticas con una estética hermosa. Pero lo que le da a este año su carácter es el aplomo que exhiben estas herramientas. Dentro de su nicho, cada uno muestra que los que usamos están empezando a superar los problemas, liberándonos para dar más profundidad a las posibilidades creativas de la web. ¿Qué te parece eso de las buenas nuevas? ¡Felices vacaciones!
- Lea todas nuestras funciones relacionadas con las herramientas de diseño aquí
01. Bugherd
Precio: Gratis- $ 99 / mes para 25 miembros
Contrariamente a la creencia popular, el lanzamiento de un nuevo sitio no es el final del trabajo de un equipo de desarrollo. En todo caso, es el punto en el que el sudor realmente comienza a acumularse. A medida que los clientes comienzan a recibir comentarios, estas solicitudes confusas y conflictivas comienzan a filtrarse nuevamente como correos electrónicos, que luego son criticados antes de convertirse finalmente en una manzana de la discordia.
BugHerd proporciona una forma ordenada y bien organizada de manejar comentarios, correcciones de errores y solicitudes de funciones, sin la sobrecarga del correo electrónico. Un simple .js incluye y los visitantes del sitio obtienen un botón de comentarios. Los invitados al proyecto pueden presentar errores y solicitudes, los miembros pueden administrar todo el asunto desde una interfaz amigable e intuitiva. Progresar errores desde el informe hasta la acción y su finalización es mucho más preferible a la situación alternativa: una acumulación gradual que eventualmente abrumará.
Agregar tareas es muy fácil con BugHerd
02. Fontello
Precio: Libre
¿Por qué es tan difícil encontrar un conjunto de iconos que cubra todas las bases con una apariencia y sensación coherentes? Quizás uno de los grandes misterios de la vida.Bueno, no se pregunte más porque Fontello no solo tiene todos los íconos que necesita, sino que también puede elegir los glifos que necesita y compilarlos en su propio conjunto minimalista.
Por supuesto, puede descargar el conjunto completo de iconos del repositorio de GitHub (en realidad, son varios conjuntos) pero la interfaz de fontello.com hace que personalizar su fuente sea tan fácil que es el único enfoque sensato. El proyecto es de código abierto pero, como siempre, se agradecerían las donaciones.
03. Proto.io
Precio: Gratis - $ 49 / mes
Una buena herramienta de creación de prototipos debería permitirle ponerse en marcha rápidamente, pero también proporcionar la profundidad suficiente para que pueda refinar sus ideas hasta el punto en que no necesiten que se incline sobre el hombro de un usuario diciendo cosas como "Simplemente ignore esa parte por ahora". . Proto.io hace precisamente esto.
También maneja todos los gestos táctiles que pueda desear, aborda animaciones y permite compartir y comentar. Es fácil de usar y, afortunadamente, también hay un plan gratuito.
04. Fundación 3
Precio: Libre
El diseño receptivo parece haber pasado de cero a aproximadamente mil millas por hora en un santiamén. Y las cosas todavía están cambiando lo suficientemente rápido como para que los pequeños talleres de desarrollo se vean presionados a mantenerse actualizados, y mucho menos a realizar su propia I + D. Ahí es donde entra en juego Foundation 3.
Desarrollado por ZURB, una agencia con los recursos y la experiencia disponibles para abordar el problema de respuesta, Foundation 3 puede actuar como un modelo para sus propios proyectos, una herramienta de creación rápida de prototipos o incluso como una lección objetiva sobre cómo abordar algunas de las necesidades de la web. asuntos actuales.
La última versión presenta una estructura de cuadrícula simplificada y da el salto a SASS / Compass, lo que permite un enfoque más flexible del estilo. Aunque tiene sentido trabajar con SASS si planea echar un vistazo a Foundation 3, la descarga personalizable está diseñada para permitir una versión CSS directa también.
5. Dreamweaver CS6
Precio: Desde £ 344.32
Los diseños fluidos, las transiciones CSS3 y la compatibilidad mejorada con PhoneGap lideran la carga en la última actualización del todoterreno de diseño web de Adobe. No se puede negar que Dreamweaver CS6 comienza a funcionar.
El problema que siempre ha tenido Dreamweaver es la dificultad de equilibrar su funcionalidad general con la necesidad de mantenerse fuera del camino del usuario. CS6 realmente maneja esto bastante bien.
Los nuevos diseños fluidos son útiles, pero de hecho son la nueva característica menos convincente. Ese galardón probablemente sea para las transiciones CSS3 que, con la ayuda de Dreamweaver, son divertidas de explorar.
06. Cloud9 IDE
Precio: Gratis / $ 12 por mes Premium
Este año, el IDE basado en navegador finalmente alcanzó la mayoría de edad con una serie de proyectos prometedores que ofrecen aplicaciones con todas las funciones que permiten colaborar desde cualquier lugar, incluso en proyectos a gran escala. Entre estos, Cloud9 tiene la ventaja.
El editor de código es muy útil. Finalización de código, árboles de documentos inteligentes de arrastrar y soltar, integración FTP y todo eso, pero es la conectividad lo que hace que Cloud9: si un equipo está pirateando el mismo archivo, cada usuario es identificado por su propio cursor de color. Un módulo de chat cierra el ciclo de retroalimentación.
Integrado con GitHub, capaz de trabajar sin conexión y, en general, intuitivo de usar. Si desea una solución de "código en cualquier lugar", mire esta primero.
07. Sencha Touch 2
Precio: Libre
No se puede negar que el dispositivo móvil / táctil ha cambiado el desarrollo web para siempre. Es un mundo más amplio y heterogéneo y todos quieren una parte de la acción. Sencha Touch 2 tiene como objetivo poner ese sueño al alcance de los desarrolladores de HTML5.
Una API mejorada, documentos más sólidos y materiales de capacitación, así como una integración nativa firme con muchos dispositivos líderes, hacen de Sencha Touch 2 un competidor serio para el marco de desarrollo móvil preferido. Hay una curva de aprendizaje pero, dado que Sencha pretende ser un paquete integral, al menos solo hay una pendiente que escalar.
08. Adobe Edge Inspect
Precio: Libre
Una pequeña aplicación para desarrolladores de dispositivos móviles, anteriormente conocida como Adobe Shadow, que elimina una gran cantidad de molestias en el proceso de diseño. Simplemente empareje sus dispositivos (Android e iOS) con su máquina principal. Luego, los sitios a los que navega se repiten directamente en todos los dispositivos conectados.
Si tiene un código condicional o plantillas receptivas, estas deberían funcionar bien. Y si desea jugar con el código, simplemente presione los corchetes angulares al lado de su dispositivo emparejado (en Chrome) y listo.
09. Soportes
Precio: Libre
A estas alturas, pensaría que el concepto del editor de código sería bastante maduro. Hay tantos por ahí y todos son tan similares que es fácil imaginar que se ha encontrado el plano final. Los corchetes muestran que incluso en este nivel quedan muchas posibilidades por explorar.
El objetivo central de Brackets parece ser la eliminación de todas las pequeñas tareas repetitivas que incluimos en el proceso de desarrollo. Recarga del navegador, edición del CSS de un elemento, búsqueda de funciones. Todo el crédito para los involucrados porque, incluso en la etapa beta, Brackets es refrescantemente bueno de usar. Echa un vistazo a su canal de YouTube.
Y si desea una experiencia mejorada, ahora puede registrarse en la nube creativa de Adobe y obtener Edge Code. Construido sobre soportes, Edge Code agrega algunas características excelentes para la tipografía y PhoneGap.
10. Modernizr 2.6
Precio: Libre
Liderando con una geolocalización mejorada, WebGL y una gran cantidad de detecciones contribuidas por la comunidad, la última actualización de Modernizr ofrece algunas detecciones nuevas e importantes para que la camarilla de mejora progresiva se ponga a trabajar.
La versión 2.6 de la popular herramienta de detección de capacidad del navegador también actualiza un par de dependencias, pero el mayor volumen de nuevas detecciones proviene de la comunidad. La lista en sí es una lectura interesante: css-backgroundposition-xy, css-subpixelfont, svg-filtros, vibración…
Si está interesado en hacer uso de las funciones más recientes de manera responsable, esta es una biblioteca que debe mantenerse al día.
11. Trello
Precio: Libre
Existe una cantidad sorprendentemente grande de herramientas de gestión de proyectos. Ellos cronometran el tiempo y asignan equipos, pero muy pocos de ellos tienen el tipo de atractivo natural que Trello exhibe con creces.
La metáfora visual es el tablero. Un concepto simple, pero Trello lo convierte en algo capaz de mostrar todos los entresijos de un proyecto de un vistazo. Qué hacer, listo, completo. Comentar, compartir, adjuntar archivos, priorizar. Trello hace que todo esto sea divertido y, al hacerlo, te ayuda a convertir tu yo lamentable en algo parecido a la forma de un barco. Buena cosa.
12. TypeCast beta
Precio: Gratis mientras está en beta
Gracias al gran avance de las fuentes web, la tipografía se está convirtiendo en un elemento cada vez más importante del trabajo del diseñador web. Pero, el simple hecho de que ahora hay miles de fuentes para elegir no facilita el trabajo en realidad. Para eso, querrás TypeCast.
TypeCast le permite elegir sus fuentes de los proveedores Fonts.com, TypeKit, FontDeck y Google. Pero también le permite crear composiciones, diseñarlas y compararlas lado a lado con diseños alternativos. Luego, simplemente publique una URL cuando desee comentarios. No es necesario que compre las fuentes hasta que se haya decidido por una solución final aprobada.
La interfaz es tan intuitiva que no tardará en descubrir nuevos conceptos de página. No hay duda de que esta es una excelente manera de experimentar con la tipografía en la Web y los resultados hablan por sí mismos. Si esto es realmente un ahorro de tiempo es discutible: para los desafiados tipográficamente, podría ser una enorme (pero agradable) madriguera de conejo en la que desaparecer.
13. Gridset
Precio: $ 12 por juego / $ 18 por mes
La cuadrícula se está convirtiendo en un punto focal para el diseño web, tanto como lo ha sido tradicionalmente para el mundo de la impresión, pero con algunas complicaciones adicionales. Obviamente, estas cuadrículas deben ser flexibles y receptivas. Pero, ¿cómo se "juega" con este tipo de cosas cuando los cálculos siguen entorpeciendo? Respuesta: Gridset.
Creado por la gente de Mark Boulton Design, el conjunto de cuadrículas le permite explorar las posibilidades de las cuadrículas, agregar columnas, definir proporciones y establecer canaletas, todo sin preocuparse por la aritmética subyacente. El código generado es de tamaño generoso por la sencilla razón de que intenta cubrir todas las bases. También obtienes pngs, una superposición .js y archivos CSS / HTML. Abre la red para la exploración.
14. Yeoman
Precio: Libre
El desarrollo web moderno parece estar fusionándose en torno a una serie de pequeños proyectos y herramientas de código abierto. Los gustos de Bootstrap, Compass y PhantomJS. Cada paquete aporta un aspecto único a un nuevo trabajo: pueden ser pruebas, marcos CSS o compilación de código.
Yeoman es el intento de Google de reunir lo mejor de estas aplicaciones en un solo banner personalizable. Construyendo nuevas aplicaciones web, manteniendo los paquetes actualizados, compilando automáticamente su código, optimizando sus imágenes. Yeoman te respalda. Como ellos dicen.
Una vez que Yeoman y sus dependencias están instalados, toda la magia ocurre en la línea de comandos, por lo que idealmente te sentirás cómodo emitiendo comandos allí. Si no es así, no se preocupe, el sistema está muy bien documentado, incluso hasta el punto de hacer de este un buen lugar para aprender los conceptos básicos de las cosas que Yeoman empaqueta.
15. Emmet
Precio: Libre
Anteriormente conocido como Zen Coding, el proyecto Emmet ofrece una abreviatura similar a CSS para sus páginas codificadas manualmente. Es un concepto simple, que se basa en la idea del "fragmento", lo que le proporciona una herramienta para realizar las tareas de codificación más repetitivas, como un cuchillo a través de la mantequilla.
Aplique la sintaxis simple: "p.class_name" le da "p> / p>". El anidamiento es simple: "div> p.class_name" se convierte en "div> p> / p> / div>". Te dan la imagen. Incluso puede incrustar texto lorem impsum, generar listas y, una vez que tenga una idea de las cosas, crear sus propios accesos directos y estructuras de fragmentos.
Con todo, esta es una extensión realmente poderosa, disponible para una amplia selección de editores populares. Si está codificando a mano, le ahorrará mucho tiempo. Sin embargo, no se exceda, ya que las cadenas se vuelven rápidamente indescifrables.
16. Sublime Text 2
Precio: $59
Hacer que su entorno de codificación sea el adecuado puede resultar complicado. ¿Quieres muchos botones, menús y resaltados? ¿O prefiere una interfaz mínima y prefiere manejar las dependencias usted mismo? Las preguntas son infinitas una vez que empiezas a hacerlas.
Sublime Text 2 favorece el enfoque minimalista. Un editor de texto maravillosamente simple, se enfoca en hacer que la experiencia de escritura sea suave como la seda, para que pueda hacer que su código se vea y maneje de la manera que desee.
Se admiten muchos lenguajes, incluidos C ++, Clojure y Markdown, las funciones de edición como sangrías y colapso de código se manejan bien y Minimap le brinda una navegación rápida por la página.
17. Microsoft WebMatrix 2
Precio: Libre
En un momento u otro, casi todos los que trabajan en la web habrán maldecido a Microsoft. Digamos que tienen algunas marcas negras junto a su nombre. WebMatrix 2 muestra que no tiene por qué ser así. Lejos de ahi.
WebMatrix 2 es un excelente IDE con el que trabajar, independientemente del idioma que prefiera o del marco en el que opere. Es limpio a la vista, rápido de usar, útil pero discreto. Y si eres un devoto de .NET, entonces te hará la vida mucho más fácil.
Conectarse a bases de datos o instalar un CMS base, incluso piratear con Node.js. WebMatrix maneja las cosas con eficiencia. Donde los productos anteriores de EM han sufrido un desorden excesivo como resultado de la necesidad de gritar sobre sus logros, esta aplicación lo trata como a un adulto. Si eres un adulto que trabaja en C #, mucho mejor.
18. PhoneGap 2.0
Precio: Libre
Todo el mundo parece estar de acuerdo en que el móvil es el nuevo negro. Y dado que ese es el caso, es un gran problema el proverbial que esta 'nueva' plataforma logró recrear muchos de los problemas que enfrenta el escritorio: diferentes API, idiomas, navegadores, formatos de archivo ... Afortunadamente, PhoneGap ha avanzado mucho en suavizando esas dificultades.
PhoneGap 2, el primer lanzamiento desde que Adobe tomó las riendas, es un avance significativo por al menos dos razones. El primero es el simple aumento de plataformas alcanzado, incluido el teléfono Windows 8. El segundo es la disponibilidad de PhoneGap Build, que brinda a los desarrolladores un único punto de compilación capaz de llegar a todas las plataformas. No es de extrañar que haya tantas aplicaciones.
19. Firefox 18
Precio: Libre
La web se está moviendo bastante rápido en este momento, incluso según sus propios estándares. En consecuencia, ha sido un año ajetreado para Firefox. Algo por lo que el resto de nosotros deberíamos estar muy agradecidos.
Al presentar una gran cantidad de nuevas tecnologías, desde Web Sockets hasta IndexedDB y herramientas útiles como Web Console y Javascript Scratchpad, Firefox ha brindado a los desarrolladores la oportunidad de explorar nuevas posibilidades y las herramientas para hacerlo considerablemente más rentable.
La constancia del esfuerzo de Mozilla por hacer que el uso de nuevas tecnologías disponibles y las antiguas sean más eficientes es impresionante, por decir lo menos.
20. Fotón
Precio: Libre
Este es un proyecto divertido. Photon crea un efecto de iluminación simple para elementos DOM renderizados en espacio 3D. Esto es posible gracias a la nueva propiedad de transformación CSS. O, como se conoce más correctamente, la propiedad "[prefijo del proveedor] - transformar".
Es algo inteligente, aunque algo complicado de entender, y un poco pesado para la vieja CPU. Pero el creador de Photon, Tom Giannattasio, justifica su uso en forma de grulla de origami. Inicie un navegador decente y pruébelo.
¿Me gusto esto? ¡Lee esto!
- Cómo crear una aplicación
- Descarga las mejores fuentes gratuitas
- Las mejores fuentes web gratuitas para diseñadores
- Descubra lo que sigue para la realidad aumentada
Si ha encontrado alguna herramienta interesante recientemente que no está en nuestra lista, pero cree que debería haberlo hecho, háganoslo saber en los comentarios. Del mismo modo, si ha creado una herramienta que le gustaría que incluyéramos en el próximo resumen, envíenos un correo electrónico.
