Mostrando entradas con la etiqueta Herramientas. Mostrar todas las entradas
Mostrando entradas con la etiqueta Herramientas. Mostrar todas las entradas

martes, 13 de septiembre de 2011

jsFiddle, un buen invento!

Recientemente he descubierto la aplicación JSFIDDLE, y he de decir que me ha gustado mucho.

JSFIDDLE es un sandbox (entorno de pruebas) que te permite probar rápidamente pequeños códigos HTML, CSS y Javascript.

¿Cuántas veces has abierto Visual Studio, te has descargado la última versión de jQuery, has agregado una nueva página .htm y has pulsado Ctrl+F5 para iniciar sin depuración y todo ello sólo para probar como funciona un pequeño código en HTML, CSS o Javascript? Pues bien, JSFIDDLE te permite justamente hacer estas pruebas de una forma nñas sencilla y desde un entorno web.

Lógicamente, JSFIDDLE además soporta otra serie de características que la hacen merecedora de estar entre tus favoritos de Internet.

Aunque esta herramienta se puede utilizar sin registrarse, algunas funciones no estarán disponibles si no estás registrado y es por ello que te recomiendo que te registres para sacarle el máximo rendimiento.

Si disponer de un entorno de pruebas vía web en un par de clics no te parece suficientemente motivo para utilizar JSFIDDLE, te doy a dar (en mi opinión) otras razones por las que yo considero esta herramienta imprescindible:

Te permite probar código en diferentes frameworks y en diferentes versiones del mismo framework (Mootools, jQuery, Prototype, YUI, Dojo, ExtJs, etc.). Está claro que podrías descargar en local todos estos frameworks y sus correspondientes versiones pero, con franqueza, para probar unas pocas líneas de código y ver el resultado me parece un exceso. Además, actualiza rápidamente las versiones disponibles (al menos para jQuery, que es el framework con el habitualmente trabajo) y por cada framework podrás seleccionar “qué extras” quieres incluir (piensa en jQuery y en jQuery UI o jQuery Mobile).

Igualmente, también puedes seleccionar que DTD tendrá tu documento (HTML5, XHTML, HTML, etc.).

Para el código Javascript puedes utilizar JSLint para garantizar su calidad.

Puedes guardar tu código y así estará siempre disponible en un solo repositorio (nada de ficheros de prueba desperdigados por tu disco duro que luego pierdes y te tiras de los pelos). Además, este repositorio está en Internet, así que estará accesible desde cualquier lugar.

Tu código guardado lo podrás compartir de muy distintas formas. Lo podrás compartir a través de twitter, facebook, como una enlace al propio editor de JSFIDDLE, como el resultado de tu código a pantalla completa también en JSFIDDLE, como un iframe embebido, etc. Está claro que JSFIDDLE es una herramienta que quiere compartir tu código.

También es posible discutir “sanamente” tus fragmentos de códigos con otros usuarios (no tiene por qué estar dados de alta en JSFIDDLE, puede ser anónimos o a través de gmail, twitter, yahoo, etc.).

Ahora un caso práctico, como tengo un blog y a veces quiero mostrar cómo funcionan ciertas cosas en CSS, HTML o Javascript,  puedo pegar código y también una captura de pantalla para mostrarte como queda mi código, o bien puedo darte este enlace y así lo ves funcionar y cambias lo que quieras si lo crees oportuno.

Imagina ahora que también quieres compartir tu código con tu cliente (al que podrías dar el enlace al resultado en pantalla completa), compartir con un amigo vía Internet, compartir un código en un foro, etc.

A mí me ha gustado el invento ¿y a ti?

Un saludo!

jueves, 7 de octubre de 2010

Herramientas on-line

Pues a modo de recordatorio para mi mismo y para quien le interese, aquí dejo algunos enlaces de herramientas web útiles para un programador .NET.

Programación
https://dotnetfiddle.net/
http://csharppad.com/
http://jsperf.com/
http://jsfiddle.net/

Expresiones regulares
http://gskinner.com/RegExr/
http://txt2re.com/
http://www.regexpr.com/
http://regexlib.com
http://www.regexper.com/

Generador de imágenes para el típico “cargando…” de ajax
http://ajaxload.info/

Formateador y optimizador de CSS
http://www.cuervoblanco.com/csstidy/css_optimiser.php

Formateadores de sentencias SQL
http://www.sqlinform.com/online.phtml
http://www.dpriver.com/pp/sqlformat.htm

Traductor de C# a VB y viceversa
http://converter.telerik.com/

Temas para Visual Studio
http://studiostyles.info/

Generador de machineKey
http://aspnetresources.com/tools/machineKey
http://www.eggheadcafe.com/articles/GenerateMachineKey/GenerateMachineKey.aspx

Codificar/Descodificador en Base64
http://www.motobit.com/util/base64-decoder-encoder.asp
http://ostermiller.org/calc/encode.html

Generador de MD5
http://www.adamek.biz/md5-generator.php

Decodificador de ViewState
http://lachlankeown.blogspot.com/2008/05/online-viewstate-viewer-decoder.html
http://ignatu.co.uk/ViewStateDecoder.aspx

Correo rápido y anónimo
http://www.yopmail.com

Traductor de reglas CSS a lenguaje humano
http://gallery.theopalgroup.com/selectoracle/

Lorem ipsum
http://www.lipsum.com/ (texto)
http://www.lorempixum.com/ (imágenes)
http://www.picksumipsum.co.uk/ (textos graciosos)
http://hhhhold.com/ (imágenes)

Screenshots en distintos exploradores
http://browsershots.org/

Traducción de ficheros de recursos (.resx) a través de google y bing
http://resxgen.odelvalle.com

Traductor de texto, binario, hexadecimal, decimal, octal, base64, etc.
http://redir.dasumo.com/hex/

Creador de temas para jQuery UI.
http://jquit.com/

Cálculo de especifidad CSS
http://specificity.keegan.st/
http://css-specificity.webapp-prototypes.appspot.com/
http://josh.github.com/css-explain/

Icon
http://thenounproject.com/
http://www.iconfinder.com/
http://iconlet.com/
http://www.iconwanted.com/
http://iconmonstr.com/
http://dakirby309.deviantart.com/art/Metro-Uinvert-Dock-Icon-Set-678-Icons-294529071
http://speckyboy.com/2012/12/17/top-50-free-icon-sets-from-2012/
http://one-div.com/
http://www.iconsdb.com/
http://www.endlessicons.com/
http://findicons.com/
http://www.flaticon.com/
http://flaticons.net/
http://inspiretrends.com/collection-of-free-flat-icons-pack/

Texturas
http://www.cssblog.es/24-sitios-de-texturas-gratis-para-diseno-web/
http://www.noisetexturegenerator.com/

Key Code Checker (Javascript)
http://www.west-wind.com/weblog/posts/2011/Dec/08/A-Key-Code-Checker-for-DOM-Keyboard-Events

Convertir pixeles a porcentaje
http://responsv.com/flexible-math/

Comprimir CSS
http://www.csscompressor.com/

Validar Javascript
http://jslint.com/
http://www.jshint.com/

Generador JSON
http://www.json-generator.com/

GIF
http://gif-explode.com/

HTML5/CSS3
http://webdirections.org/tools/ (herramientas)
http://css3button.net/ (botones)
http://css3buttongenerator.com/ (botones)
http://www.cssdrive.com/css3button/ (botones)
http://button.csscook.com/ (botones)
http://www.patternify.com/ (imágenes con patrón)
http://csslayoutgenerator.com/ (layouts)
http://www.colorzilla.com/gradient-editor/ (degradados)
http://css3generator.com/ (herramientas)
http://www.css3generator.in/ (herramientas)
http://css3gen.com/ (herramientas)
http://css3please.com/
http://layerstyles.org/ (cajas)
http://border-image.com/ (imágenes)
http://css3pie.com/ (cajas)
http://matthewlein.com/ceaser/ (animaciones)
http://www.fontsquirrel.com/fontface/generator/ (fuentes)
http://www.wordpressthemeshock.com/css-drop-shadow/ (cajas)
http://border-radius.com/ (bordes redondeados)
http://css-tricks.com/examples/ButtonMaker/ (botones)
http://gradients.glrzad.com/ (degradados)
http://www.cssmatic.com/ (herramientas)
http://prefixmycss.com/ (prefijos de vendedores)
http://codepen.io/dcullen/pen/AFtCJ (botones awesómicos para epilépticos)

Tamaños de pantalla y resoluciones
http://screensiz.es/phone
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/

Checklist
http://webdevchecklist.com/

Bootstrap
http://www.layoutit.com/

Un saludo!