Cadenas de escape: cómo poner tildes en Javascript

Generalmente, cuando trabajamos con Javascript nos encontramos con que tenemos problemas a la hora de representar tildes o caracteres especiales en nuestras aplicaciones.

Por ejemplo, es frecuente que tengamos que mostrar un alert manteniendo el formato original del texto, esto puede ser, con tildes, eñes o saltos de línea:

alert( ' Contraseña errónea ' );

Dependiendo de la codificación de caracteres, el texto puede aparecer mal formateado:

Para evitar estos errores, recurrimos al estándar UNICODE, una codificación diseñada para facilitar la visualización de documentos en múltiples lenguajes preservando sus grafías y caracteres originales.

La siguiente tabla muestra aquellos caracteres más utilizados en castellano:

Para introducir estos caracteres en nuestros scripts, tenemos que recurrir a la cadena de escape ‘\u’ seguida de su correspondiente código. Así, nuestro ejemplo anterior quedaría como sigue:

alert( ' Contrase\u00F1a err\u00F3nea ' );

El resultado si corresponde con lo esperado:

Para el resto de caracteres especiales, como los saltos de línea o las tabulaciones, recurrimos al siguiente resumen:

* \n: Salto de linea.
* \r: Retorno de carro.
* \t: Tabulación horizontal.
* \v: Tabulación vertical.
* \’: Comilla simple o apostrofe.
* \”: Comilla doble.
* \\: Barra invertida.

Para utilizarlos, solo hace falta escribirlos tal cual. Así, para conseguir un mensaje con un salto de línea, escribiríamos los siguiente:

alert(  ' Contrase\u00F1a err\u00F3nea\u0021 \n Int\u00E9ntalo de nuevo. ' );

Y obtendríamos:

Fuente

Sisyphus: Que tus usuarios no pierdan la información de los formularios

¿Cuántas veces estamos llenando un formulario largo y por alguna razón perdemos la información? Desde que crashea el explorador, un corte de luz, cerrar la pestaña/ventana sin querer… ¿no sería genial, como desarrolladores, darle una solución a los visitantes de nuestros sitios webs ante ese problema?

Ahí es cuando Sisyphus nos viene a salvar. Un ligerísimo plugin de jQuery (3.5KB) que nos permite guardar localmente la información llenada en el formulario para no perderla. La data ingresada se guarda automáticamente al interactuar con los campos, no hace falta que el formulario se envíe ni mucho menos. Y su implementación es facilísima:

^?Ver código PHP

1	$('#form1, #form2').sisyphus();

Eso guardaría la información de los formularios identificados con los ids form1 y form2. Si quisiéramos aplicárselo a todos los formularios, tranquilamente podríamos hacer:

^?Ver código PHP

1	$('form').sisyphus();

El plugin permite personalizar ciertas opciones, como el tiempo durante el que se guarda la información, si queremos que se realice una acción cuando se guarda o cuando se obtiene, etc.

Una forma muy útil de ahorrarle dolores de cabeza a tus visitantes, si es que tu sitio web tiene algún formulario tedioso de llenar.

Fuente

Campos "required" de formularios HTML5 en IE8 y Firefox 3.6

Vuelvo para escribir un tutorial sobre un problema que he tenido que resolver esta mañana por unos formularios de HTML5.

HTML5 trae novedades muy buenas para el uso de formularios que nos simplifican el trabajo, pero que son ignoradas por navegadores como Internet Explorer y versiones antiguas de Firefox.

Para solucionar esto hay varios plugins que a través de jQuery simulan los mismos comportamientos. Como es el caso del plugin jQuery.html5form de Matias Mancini.

El uso de este plugin es extremadamente sencillo. Únicamente vincularemos las librerías de Jquery y Html5 Form, e inicializaremos el formulario:

Código :

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://html5form.googlecode.com/svn/trunk/jquery.html5form-1.4-min.js">
</script>
    
<script>
    $(document).ready(function(){
        $('#formulario').html5form();    
    });
</script>

Con esto ya tendríamos los mismos comportamientos (en principio) de los formularios de HTML5 en navegadores que no soportan estas nuevas características.

EL problema

El problema que me he encontrado utilizando este plugin ha sido con los campos "required" al hacer submit desde un botón que es una imagen:

Código :

//funciona OK
<input type="submit" value="Enviar"/>

//se ignoran los atributos required de html5
<input type="image" src="img/boton.png" alt="Enviar">

En este caso los atributos required son ignorados y el formulario se envía con los datos vacíos...

El problema viene porque en el script sólo se asignan los controladores que detectan los campos requireds a los elementos :submit, con lo que las imágenes envían el formulario de forma normal.

La solución

Esto lo podemos solucionar fácilmente editando un poco el código del script, en la parte donde asignamos los comportamientos a los elementos :submit, también se los asignaremos a los elementos input:image.

Código :

//cambiamos esto:
$.each($(':submit',this),function(){ ... }

//por esto:
$.each(new Array($(':submit',this),$('input:image',this)),function(){ ... }

Y listo! problema resuelto 

Espero a alguien le sea útil.

Fuente

Desarrollo primera etapa del CRM para seguimiento de clientes para e-preu.

ascii

[ " ] quotation mark [name: "] [number: "]
[ & ] ampersand [name: &] [number: &]
[ < ] less than [name: &lt;] [number: &#60;]
[ > ] greater than [name: &gt;] [number: &#62;]
[ ] non-breaking space [name: &nbsp;] [number: &#160;]
[ ¡ ] inverted exclamation mark [name: &iexcl;] [number: &#161;]
[ ¢ ] cent [name: &cent; ] [number: &#162;]
[ £ ] pound [name: &pound;] [number: &#163;]
[ ¤ ] currency [name: &curren;] [number: &#164;]
[ ¥ ] yen [name: &yen;] [number: &#165;]
[ € ] euro sign [name: &euro;] [number: &#8364;]
[ ¦ ] broken vertical bar [name: &brvbar;] [number: &#166;]
[ § ] section [name: &sect;] [number: &#167;]
[ ¨ ] spacing dieresis [name: &uml;] [number: &#168;]
[ © ] copyright [name: &copy;] [number: &#169;]
[ ª ] feminine ordinal indicator [name: &ordf;] [number: &#170;]
[ « ] left angle quotation mark [name: &laquo;] [number: &#171;]
[ ¬ ] negation [number: &not;] [number: &#172;]
[­] soft hyphen [name: &shy;] [number: &#173;]
[ ® ] registered trademark [name: &reg;] [number: &#174;]
[ ™ ] trademark [name: &trade;] [number: &#8482;
[ ¯ ] spacing macron [name: &macr;] [number: &#175;]
[ ° ] degree - e.g. 45° [name: &deg;] [number: &#176;]
[ ± ] plus-or-minus [name: &plusmn;] [number: &#177;]
[ ² ] superscript 2 [name: &sup2;] [number: &#178;]
[ ³ ] superscript 3 [name: &sup3;] [number: &#179;]
[ ´ ] spacing acute [name: &acute;] [number: &#180;]
[ µ ] micro [name: &micro;] [number: &#181;]
[ ¶ ] paragraph [name: &para;] [number: &#182;]
[ · ] middle dot [name: &middot;] [number: &#183;]
[ ¸ ] spacing cedilla [name: &cedil;] [number: &#184;]
[ ¹ ] superscript 1 [name: &sup1;] [number: &#185;]
[ º ] masculine ordinal indicator [name: &ordm;] [number: &#186;]
[ » ] right angle quotation mark [name: &raquo;] [number: &#187;]
[ ¼ ] fraction 1/4 [name: &frac14;] [number: &#188;]
[ ½ ] fraction 1/2 [name: &frac12;] [number: &#189;]
[ ¾ ] fraction 3/4 [name: &frac34;] [number: &#190;]
[ ¿ ] inverted question mark [name: &iquest;] [number: &#191;]
[ × ] multiplication [name: &times;] [number: &#215;]
[ ÷ ] division [name: &divide;] [number: &#247;]
[ À ] capital a, grave accent [name: &Agrave;] [number: &#192;]
[ Á ] capital a, acute accent [name: &Aacute;] [number: &#193;]
[ Â ] capital a, circumflex accent [name: &Acirc;] [number: &#194;]
[ Ã ] capital a, tilde [name: &Atilde;] [number: &#195;]
[ Ä ] capital a, umlaut mark [name: &Auml;] [number: &#196;]
[ Å ] capital a, ring [name: &Aring;] [number: &#197;]
[ Æ ] capital ae [name: &AElig;] [number: &#198;]
[ Ç ] capital c, cedilla [name: &Ccedil;] [number: &#199;]
[ È ] capital e, grave accent [name: &Egrave;] [number: &#200;]
[ É ] capital e, acute accent [name: &Eacute;] [number: &#201;]
[ Ê ] capital e, circumflex accent [name: &Ecirc;] [number: &#202;]
[ Ë ] capital e, umlaut mark [name: &Euml;] [number: &#203;]
[ Ì ] capital i, grave accent [name: &Igrave;] [number: &#204;]
[ Í ] capital i, acute accent [name: &Iacute;] [number: &#205;]
[ Î ] capital i, circumflex accent [name: &Icirc;] [number: &#206;]
[ Ï ] capital i, umlaut mark [name: &Iuml;] [number: &#207;]
[ Ð ] capital eth, Icelandic [name: &ETH;] [number: &#208;]
[ Ñ ] capital n, tilde [name: &Ntilde;] [number: &#209;]
[ Ò ] capital o, grave accent [name: &Ograve;] [number: &#210;]
[ Ó ] capital o, acute accent [name: &Oacute;] [number: &#211;]
[ Ô ] capital o, circumflex accent [name: &Ocirc;] [number: &#212;]
[ Õ ] capital o, tilde [name: &Otilde;] [number: &#213;]
[ Ö ] capital o, umlaut mark [name: &Ouml;] [number: &#214;]
[ Ø ] capital o, slash [name: &Oslash;] [number: &#216;]
[ Ù ] capital u, grave accent [name: &Ugrave;] [number: &#217;]
[ Ú ] capital u, acute accent [name: &Uacute;] [number: &#218;]
[ Û ] capital u, circumflex accent [name: &Ucirc;] [number: &#219;]
[ Ü ] capital u, umlaut mark [name: &Uuml;] [number: &#220;]
[ Ý ] capital y, acute accent [name: &Yacute;] [number: &#221;]
[ Þ ] capital THORN, Icelandic [name: &THORN;] [number: &#222;]
[ ß ] small sharp s, German [name: &szlig;] [number: &#223;]
[ à ] small a, grave accent [name: &agrave;] [number: &#224;]
[ á ] small a, acute accent [name: &aacute;] [number: &#225;]
[ â ] small a, circumflex accent [name: &acirc;] [number: &#226;]
[ ã ] small a, tilde [name: &atilde;] [number: &#227;]
[ ä ] small a, umlaut mark [name: &auml;] [number: &#228;]
[ å ] small a, ring [name: &aring;] [number: &#229;]
[ æ ] small ae [name: &aelig;] [number: &#230;]
[ ç ] small c, cedilla [name: &ccedil;] [number: &#231;]
[ è ] small e, grave accent [name: &egrave;] [number: &#232;]
[ é ] small e, acute accent [name: &eacute;] [number: &#233;]
[ ê ] small e, circumflex accent [name: &ecirc;] [number: &#234;]
[ ë ] small e, umlaut mark [name: &euml;] [number: &#235;]
[ ì ] small i, grave accent [name: &igrave;] [number: &#236;]
[ í ] small i, acute accent [name: &iacute;] [number: &#237;]
[ î ] small i, circumflex accent [name: &icirc;] [number: &#238;]
[ ï ] small i, umlaut mark [name: &iuml;] [number: &#239;]
[ ð ] small eth, Icelandic [name: &eth;] [number: &#240;]
[ ñ ] small n, tilde [name: &ntilde;] [number: &#241;]
[ ò ] small o, grave accent [name: &ograve;] [number: &#242;]
[ ó ] small o, acute accent [name: &oacute;] [number: &#243;]
[ ô ] small o, circumflex accent [name: &ocirc;] [number: &#244;]
[ õ ] small o, tilde [name: &otilde;] [number: &#245;]
[ ö ] small o, umlaut mark [name: &ouml;] [number: &#246;]
[ ø ] small o, slash [name: &oslash;] [number: &#248;]
[ ù ] small u, grave accent [name: &ugrave;] [number: &#249;]
[ ú ] small u, acute accent [name: &uacute;] [number: &#250;]
[ û ] small u, circumflex accent [name: &ucirc;] [number: &#251;]
[ ü ] small u, umlaut mark [name: &uuml;] [number: &#252;]
[ ý ] small y, acute accent [name: &yacute;] [number: &#253;]
[ þ ] small thorn, Icelandic [name: &thorn;] [number: &#254;]
[ ÿ ] small y, umlaut mark [name: &yuml;] [number: &#255;]
[ Π] Latin capital ligature [name: &OElig;] [number: &#338;]
[ œ ] Latin small ligature [name: &oelig;] [number: &#339;]
[ Š ] Latin capital letter S with caron [name: &Scaron;] [number: &#352;]
[ š ] Latin small letter s with caron [name: &scaron;] [number: &#353;]
[ Ÿ ] Latin capital letter Y with diaeresis [name: &Yuml;] [number: &#376;]
[ ˆ ] modifier letter circumflex accent [name: &circ;] [number: &#710;]
[ ˜ ] small tilde [name: &tilde] [number: &#732;]

General Punctuation

[ ] en space [name: &ensp;] [number: &#8194;]
[ ] em space [name: &emsp;] [number: &#8195;]
[ ] thin space [name: &thinsp] [number: &#8201;]
[ ‌ ] zero width non-joiner [name: &zwnj;] [number: &8204;]
[ ‍ ] zero width joiner [name: &zwj;] [number: &#8205;]
[ ‎ ] left-to-right mark [name: &lrm;] [number: &#8206;]
[ ‏ ] right-to-left mark [name: &rlm;] [number: &#8207;]
[ – ] en dash [name: &ndash;] [number: &#8211;]
[ — ] em dash [name: &mdash;] [number: &#8212;]
[ ‘ ] left single quotation mark [name: &lsquo;] [number: &#8216;]
[ ’ ] right single quotation mark [name: &rsquo;] [number: &#8217;]
[ ‚ ] single low-9 quotation mark [name: &sbquo;] [number: &#8218;]
[ “ ] left double quotation mark [name: &ldquo;] [number: &#8220;]
[ ” ] right double quotation mark [name: &rdquo;] [number: &#8221;]
[ „ ] double low-9 quotation mark [name: &bdquo;] [number: &#8222;]
[ † ] dagger [name: &dagger;] [number: &#8224;]
[ ‡ ] double dagger [name: &Dagger;] [number: &#8225;]
[ ‰ ] per mille sign [name: &permil;] [number: &#8240;]
[ ‹ ] single left-pointing angle quotation mark [name: &lsaquo;] [number: &#8249;]
[ › ] single right-pointing angle quotation mark [name: &rsaquo;] [number: &#8250;]
[ ƒ ] Latin small f with hook [name: &fnof;] [number: &#402;]
[ • ] bullet = black small circle [name: &bull;] [number: &#8226;]
[ … ] horizontal ellipsis = three dot leader [name: &hellip;] [number: &#8230;]
[ ′ ] prime = minutes = feet [name: &prime;] [number: &#8242;]
[ ″ ] double prime = seconds = inches [name: &Prime;] [number: &#8243;]
[ ‾ ] overline = spacing overscore [name: &oline;] [number: &#8254;]
[ ⁄ ] fraction slash [name: &frasl;] [number: &#8260;]
[ ℘ ] script capital P = power set = Weierstrass p [name: &weierp;] [number: &#8472;]
[ ℑ ] black-letter capital I = imaginary part [name: &image;] [number: &#8465;]
[ ℜ ] black-letter capital R = real part symbol [name: &real;] [number: &#8476;]
[ ℵ ] aleph symbol = first transfinite cardinal [name: &alefsym;] [number: &#8501;]
[ ← ] leftwards arrow [name: &larr;] [number: &#8592;]
[ ↑ ] upwards arrow [name: &uarr;] [number: &#8593;]
[ → ] rightwards arrow [name: &rarr;] [number: &#8594;]
[ ↓ ] downwards arrow [name: &darr;] [number: &#8495;]
[ ↔ ] left right arrow [name: &harr;] [number: &#8596;]
[ ↵ ] down arrow - corner leftwards = carriage return [name: &crarr;] [number: &#8629;]
[ ⇐ ] leftwards double arrow [name: &lArr;] [number: &#8656;]
[ ⇑ ] upwards double arrow [name: &uArr;] [number: &#8657;]
[ ⇒ ] rightwards double arrow [name: &rArr;] [number: &#8658;]
[ ⇓ ] downwards double arrow [name: &dArr;] [number: &#8659;]
[ ⇔ ] left right double arrow [name: &hArr;] [number: &#8660;]

Mathematical Operators

[ ∀ ] for all [name: &forall;] [number: &#8704;]
[ ∂ ] partial differential [name: &part;] [number: &#8706;]
[ ∃ ] there exists [name: &exist;] [number: &#8707;]
[ ∅ ] empty set = null set = diameter [name: &empty;] [number: &#8709;]
[ ∇ ] nabla = backward difference [name: &nabla;] [number: &#8711;]
[ ∈ ] element of [name: &isin;] [number: &#8712;]
[ ∉ ] not an element of [name: &notin;] [number: &#8713;]
[ ∋ ] contains as member [name: &ni;] [number: &#8715;]
[ ∏ ] n-array product = product sign [name: &prod;] [number: &#8719;]
[ ∑ ] n-array summation [name: &sum;] [number: &#8721;]
[ − ] minus sign [name: &minus;] [number: &#8722;]
[ ∗ ] asterisk operator [name: &lowast;] [number: &#8727;]
[ √ ] square root [name: &radic;] [number: &#8730;]
[ ∝ ] proportional to [name: &prop;] [number: &#8733;]
[ ∞ ] infinity [name: &infin;] [number: &#8734;]
[ ∠ ] angle [name: &ang;] [number: &#8736;]
[ ∧ ] logical and = wedge [name: &and;] [number: &#8743;]
[ ∨ ] logical or = vee [name: &or;] [number: &#8744;]
[ ∩ ] intersection = cap [name: &cap;] [number: &#8745;]
[ ∪ ] union = cup [name: &cup;] [number: &#8746;]
[ ∫ ] integral [name: &int;] [number: &#8747;]
[ ∴ ] therefore [name: &there4;] [number: &#8756;]
[ ∼ ] tilde operator = varies with = similar to [name: &sim;] [number: &#8764;]
[ ≅ ] approximately equal to [name: &cong;] [number: &#8773;]
[ ≈ ] almost equal to = asymptotic to [name: &asymp;] [number: &#8776;]
[ ≠ ] not equal to [name: &ne;] [number: &#8800;]
[ ≡ ] identical to [name: &equiv;] [number: &#8801;]
[ ≤ ] less-than or equal to [name: &le;] [number: &#8804;]
[ ≥ ] greater-than or equal to [name: &ge;] [number: &#8805;]
[ ⊂ ] subset of [name: &sub;] [number: &#8834;]
[ ⊃ ] superset of [name: &sup;] [number: &#8835;]
[ ⊄ ] not a subset of [name: &nsub;] [number: &#8836;]
[ ⊆ ] subset of or equal to [name: &sube;] [number: &#8838;]
[ ⊇ ] superset of or equal to [name: &supe;] [number: &#8839;]
[ ⊕ ] circled plus = direct sum [name: &oplus;] [number: &#8853;]
[ ⊗ ] circled times = vector product [name: &otimes;] [number: &#8855;]
[ ⊥ ] up tack = orthogonal to = perpendicular [name: &perp;] [number: &#8869;]
[ ⋅ ] dot operator [name: &sdot;] [number: &#8901;]

Miscellaneous Technical

[ ⌈ ] left ceiling = apl upstile [name: &lceil;] [number: &#8968;]
[ ⌉ ] right ceiling [name: &rceil;] [number: &#8969;]
[ ⌊ ] left floor = apl downstile [name: &lfloor;] [number: &#8970;]
[ ⌋ ] right floor [name: &rfloor;] [number: &#8971;]
[ 〈 ] left-pointing angle bracket = bra [name: &lang;] [number: &#9001;]
[ 〉 ] right-pointing angle bracket = ket [name: &rang;] [number: &#9002;]

Expanded Character Entity List: Miscellaneous Symbols

[ ℠ ] Service Mark [number: &#8480]
[ ℃ ] Celsius [number: &#8451;]
[ ℅ ] care of [number: &#8453;]
[ ◊ ] diamond [name: &loz;] [number: &#9674;]
[ ℉ ] Fahrenheit [number: &#8457;]
[ № ] numero symbol - number sign [number: &#8470;]
[ ℗ ] Sound Recording Copyright [number: &#8471;]
[ ℞ ] Prescription Take pharmaceutical symbol [number: &#8478;]
[ Ω ] Ohm [number: &#8486;]
[ ℧ ] Inverted Ohm [number: &#8487;]
[ ☀ ] sunshine - sun [ number: &#9728;]
[ ☁ ] cloudy - cloud [ number: &#9729;]
[ ☂ ] raining - rain [ number: &#9730;]
[ ☃ ] snow - snowman [ number: &#9731;]
[ ☄ ] comet [ number: &#9732;]
[ ★ ] star solid [ number: &#9733;]
[ ☆ ] star outline [ number: &#9734;]
[ ☇ ] lightning [ number: &#9735;]
[ ☈ ] thunderstorm [ number: &#9736;]
[ ☉ ] sun [ number: &#9737;]
[ ☊ ] ascending node [ number: &#9738;]
[ ☋ ] descending node [ number: &#9739;]
[ ☌ ] conjunction [ number: &#9740;]
[ ☍ ] opposition [ number: &#9741;]
[ ☎ ] phone number - phone service [ number: &#9742;]
[ ☏ ] phone symbol outline [ number: &#9743;]
[ ☐ ] check box - ballot box [ number: &#9744;]
[ ☑ ] ballot box check mark [ number: &#9745;]
[ ☒ ] ballot box with X [ number: &#9746;]
[ ☓ ] Saltire - St. Andrew's Cross [ number: &#9747;]
[ ☚ ] left-pointing index finger [number: &#9754;]
[ ☛ ] right-pointing index finger [number: &#9755;]
[ ☜ ] left-pointing index finger [number: &#9756;]
[ ☝ ] upwards pointing index finger [number: &#9757;]
[ ☞ ] right pointing index finger [number: &#9758;]
[ ☟ ] downwards pointing index finger [number: &#9759;]
[ ☠ ] skull & crossbones [number: &#9760;]
[ ☡ ] caution sign [ number: &#9761;]
[ ☢ ] radioactive sign [number: &#9762;]
[ ☣ ] biohazard sign [number: &#9763;]
[ ☤ ] Caduceus or "Kerykeion" [number: &#9764;]
[ ☥ ] Ankh [number: &#9765;]
[ ☦ ] Eastern Christian Cross [number: &#9766;]
[ ☧ ] Chi Rho Cross [number: &#9767;]
[ ☨ ] Patriarchal Cross [number: &#9768;]
[ ☩ ] Greek Cross [number: &#9769;]
[ ☪ ] Crescent Moon & Star [ number: &#9770;]
[ ☫ ] Farsi symbol [ number: &#9771;]
[ ☬ ] Adi Shakti [ number: &#9772;]
[ ☭ ] hammer & sickle [ number: &#9773;]
[ ☮ ] peace sign [ number: &#9774;]
[ ☯ ] yin & yang [ number: &#9775;]
[ ☰ ] trigram Heaven [ number: &#9776;]
[ ☱ ] trigram Lake [ number: &#9777;]
[ ☲ ] trigram Fire [ number: &#9778;]
[ ☳ ] trigram Thunder [ number: &#9779;]
[ ☴ ] trigram Wind [ number: &#9780;]
[ ☵ ] trigram Water [ number: &#9781;]
[ ☶ ] trigram Mountain [ number: &#9782;]
[ ☷ ] trigram Heaven [ number: &#9783;]
[ ☸ ] Dharma Wheel [number: &#9784;]
[ ☹ ] frowning face [number: &#9785;]
[ ☺ ] smiley face [number: &#9786;]
[ ☻ ] black smiley face [number: &#9787;]
[ ☽ ] waxing crescent moon [number: &#9789;]
[ ☾ ] waning crescent moon [number: &#9790;]
[ ☿ ] Mercury [number: &#9791;]
[ ♀ ] Venus - Female symbol [number: &#9792;]
[ ♁ ] Earth symbol [number: &#9793;]
[ ♂ ] Mars - Male symbol [number: &#9794;]
[ ♃ ] Jupiter [number: &#9795;]
[ ♄ ] Saturn [number: &#9796;]
[ ♅ ] Uranus [number: &#9797;]
[ ♆ ] Neptune [number: &#9798;]
[ ♇ ] Pluto [number: &#9799;]
[ ♈ ] Aries [number: &#9800;]
[ ♉ ] Taurus [number: &#9801;]
[ ♊ ] Gemini [number: &#9802;]
[ ♋ ] Cancer [number: &#9803;]
[ ♌ ] Leo [number: &#9804;]
[ ♍ ] Virgo [number: &#9805;]
[ ♎ ] Libra [number: &#9806;]
[ ♏ ] Scorpio [number: &#9807;]
[ ♐ ] Sagittarius [number: &#9808;]
[ ♑ ] Capricorn [number: &#9809;]
[ ♒ ] Aquarius [number: &#9810;]
[ ♓ ] Pisces [number: &#9811;]
[ ♔ ] White King [number: &#9812;]
[ ♕ ] White Queen [number: &#9813;]
[ ♖ ] White Rook [number: &#9814;]
[ ♗ ] White Bishop [number: &#9815;]
[ ♘ ] White Knight [number: &#9816;]
[ ♙ ] White Pawn [number: &#9817;]
[ ♚ ] Black King [number: &#9818;]
[ ♛ ] Black Queen [number: &#9819;]
[ ♜ ] Black Rook [number: &#9820;]
[ ♝ ] Black Bishop [number: &#9821;]
[ ♞ ] Black Knight [number: &#9822;]
[ ♟ ] Black Pawn [number: &#9823;]
[ ♠ ] black spade suit [name: &spades;] [number: &#9824;]
[ ♡ ] red heart suit [number: &#9825;]
[ ♢ ] red diamond suit [number: &#9826;]
[ ♣ ] black club suit = shamrock [name: &clubs;] [number: &#9827;]
[ ♤ ] red spade suit [number: &#9828;]
[ ♥ ] black heart suit = valentine [name: &hearts;] [number: &#9829;]
[ ♦ ] black diamond suit [name: &diams;] [number: &#9830;]
[ ♧ ] red club suit [number: &#9831;]
[ ♨ ] hot springs [number: &#9832;]
[ ♩ ] musical quarter note [number: &#9833;]
[ ♪ ] musical eighth note [number: &#9834;]
[ ♫ ] musical single bar note [number: &#9835;]
[ ♬ ] musical double bar note [number: &#9836;]
[ ♭ ] flat note [number: &#9837;]
[ ♮ ] natural note [number: &#9838;]
[ ♯ ] sharp note [number: &#9839;]
[ ✁ ] cut above [number: &#9985;]
[ ✂ ] cut here [number: &#9986;]
[ ✃ ] cut below [number: &#9987;]
[ ✄ ] scissors [number: &#9988;]
[ ✆ ] public pay phone [number: &#9990;]
[ ✇ ] film reel - tape spool [number: &#9991;]
[ ✈ ] airport jet airplane [number: &#9992;]
[ ✉ ] envelope mail email [number: &#9993;]
[ ✌ ] victory sign [number: &#9996;]
[ ✍ ] signature - sign here [number: &#9997;]
[ ✎ ] pencil diagonal down [number: &#9998;]
[ ✏ ] pencil [number: &#9999;]
[ ✐ ] pencil diagonal up [number: &#1000;]
[ ✓ ] check mark [number: &#10003;]
[ ✔ ] heavy check mark [number: &#10004;]
[ ✕ ] multiplication sign X [number: &#100005;]
[ ✖ ] heavy multiplication sign X [number: &#10006;]
[ ✗ ] ballot X [number: &#10007;]
[ ✘ ] heavy ballot X [number: &#10008;]
[ ✝ ] Latin Roman Cross [number: &#10013;]
[ ✞ ] Latin Cross 3D shadow [number: &#10014;]
[ ✟ ] Latin Cross outline [number: &#10015;]
[ ✠ ] Maltese Cross [number: &#10016;]
[ ✡ ] Star of David [number: &#10017;]
[ ❛ ] quotation mark single turned comma [number: &#10075;]
[ ❜ ] quotation mark single comma [number: &#10076;]
[ ❝ ] quotation mark double turned comma [number: &#10077;]
[ ❞ ] quotation mark double comma [number: &#10078;]

Greek Letters & Symbols Character Entity Reference

[ Α ] Greek capital letter alpha [name: &Alpha;] [number: &#913;]
[ Β ] Greek capital letter beta [name: &Beta;] [number: &#914;]
[ Γ ] Greek capital letter gamma [name: &Gamma;] [number: &#915;]
[ Δ ] Greek capital letter delta [name: &Delta;] [number: &#916;]
[ Ε ] Greek capital letter epsilon [name: &Epsilon;] [number: &#917;]
[ Ζ ] Greek capital letter zeta [name: &Zeta;] [number: &#918;]
[ Η ] Greek capital letter eta [name: &Eta;] [number: &#919;]
[ Θ ] Greek capital letter theta [name: &Theta;] [number: &#920;]
[ Ι ] Greek capital letter iota [name: &Iota;] [number: &#921;]
[ Κ ] Greek capital letter kappa [name: &Kappa;] [number: &#922;]
[ Λ ] Greek capital letter lambda [name: &Lambda;] [number: &#923;]
[ Μ ] Greek capital letter mu [name: &Mu;] [number: &#924;]
[ Ν ] Greek capital letter nu [name: &Nu;] [number: &#925;]
[ Ξ ] Greek capital letter xi [name: &Xi;] [number: &#926;]
[ Ο ] Greek capital letter omicron [name: &Omicron;] [number: &#927;]
[ Π ] Greek capital letter pi [name: &Pi;] [number: &#928;]
[ Ρ ] Greek capital letter rho [name: &Rho;] [number: &#929;]
[ Σ ] Greek capital letter sigma [name: &Sigma;] [number: &#931;]
[ Τ ] Greek capital letter tau [name: &Tau;] [number: &#932;]
[ Υ ] Greek capital letter upsilon [name: &Upsilon;] [number: &#933;]
[ Φ ] Greek capital letter phi [name: &Phi;] [number: &#934;]
[ Χ ] Greek capital letter chi [name: &Chi;] [number: &#935;]
[ Ψ ] Greek capital letter psi [name: &Psi;] [number: &#936;]
[ Ω ] Greek capital letter omega [name: &Omega;] [number: &#937;]
[ α ] Greek small letter alpha [name: &alpha;] [number: &#945;]
[ β ] Greek small letter beta [name: &beta;] [number: &#946;]
[ γ ] Greek small letter gamma [name: &gamma;] [number: &#947;]
[ δ ] Greek small letter delta [name: &delta;] [number: &#948;]
[ ε ] Greek small letter epsilon [name: &epsilon;] [number: &#949;]
[ ζ ] Greek small letter zeta [name: &zeta;] [number: &#950;]
[ η ] Greek small letter eta [name: &eta;] [number: &#951;]
[ θ ] Greek small letter theta [name: &theta;] [number: &#952;]
[ ι ] Greek small letter iota [name: &iota;] [number: &#953;]
[ κ ] Greek small letter kappa [name: &kappa;] [number: &#954;]
[ λ ] Greek small letter lambda [name: &lambda;] [number: &#955;]
[ μ ] Greek small letter mu [name: &mu;] [number: &#956;]
[ ν ] Greek small letter nu [name: &nu;] [number: &#957;]
[ ξ ] Greek small letter xi [name: &xi;] [number: &#958;]
[ ο ] Greek small letter omicron [name: &omicron;] [number: &#959;]
[ π ] Greek small letter pi [name: &pi;] [number: &#960;]
[ ρ ] Greek small letter rho [name: &rho;] [number: &#961;]
[ ς ] Greek small letter final sigma [name: &sigmaf;] [number: &#962;]
[ σ ] Greek small letter sigma [name: &sigma;] [number: &#963;]
[ τ ] Greek small letter tau [name: &tau;] [number: &#964;]
[ υ ] Greek small letter upsilon [name: &upsilon;] [number: &#965;]
[ φ ] Greek small letter phi [name: &phi;] [number: &#966;]
[ χ ] Greek small letter chi [name: &chi;] [number: &#967;]
[ ψ ] Greek small letter psi [name: &psi;] [number: &#968;]
[ ω ] Greek small letter omega [name: &omega;] [number: &#969;]
[ ϑ ] Greek small letter theta symbol [name: &thetasym;] [number: &#977;]
[ ϒ ] Greek upsilon with hook symbol [name: &upsih;] [number: &#978;]
[ ϖ ] Greek pi symbol [name: &piv;] [number: &#982;]

Fuente

Cuando no me tomo en internet explorer tuve que sacar las clases que tenían las etiquetas superiores.

En caso de que eso no funcionara tuve que colocar el siguiente estilo :  style="font-family: Arial Unicode MS;"

Sublime Text analizado a fondo

Como programador creo que a muchos de ustedes a veces le preocupa el no poder encontrar un buen editor de texto que nos ayude de forma rápida en un proyecto que no implique tener que usar un IDE como Netbeans, Eclipse o Xcode. La verdad es que aunque a mí me agrada Notepad++ no me convence para programar como maniático, y usar TextMate tampoco ofrece cierta ayuda aunque ambos casos son muy buenos, por eso hoy les presento Sublime Text.

Sublime Text es un excelente editor de textopara programar en un montón de lenguajes de programación que trae nativamente, y hablaremos un poco de él el día de hoy en este análisis a fondo.

¿Qué es Sublime Text?

Sublime Text es un potente editor de texto muy ligero con el cuál nosotros podremos empezar a programar de una forma muy cómoda. Quizá no tenga una vista de diseño como Dreamweaver en el caso de que se trabaje con HTML, pero la verdad es que un buen programador nunca la necesitará.

Lo mejor de esta herramienta es que hay dos versiones, una de pago y una gratuita, y aunque no le quitan ninguna funcionalidad  ala versión gratuita es de agradecer ese detalle, podemos usar Sublime Text sin pagar un quinto, aunque si de verdad nos vamos a adentrar a usarlo como nuestro pan de cada día pues mejor pagar por la versión de pago.

Interfaz

Hace tiempo que yo mismo probé los beneficios de usar una interfaz oscura para programar, por el hecho de que ya mis ojos están medio amolados como para seguir ayudando al mal. La interfaz de Sublime Text por defecto es así, oscura. Podemos cambiar los colores de toda la sintaxis y del fondo, pero considero que así como está se ve muy bien.

Algo que también me ha gustado es que ya te preparan la interfaz lo más simple que se pueda, para que tengas que perder el tiempo ocultando paneles, menús de herramientas y cosas por el estilo, ya que lo último que queremos es tener menos pixeles para ver nuestro código. Hay que decir que al estar hecho en parte con Python se puede programar casi lo que sea para configurar la interfaz a nuestra medida, pero ya que somos unos masters y no unos hardcores obsesivos pues la verdad no le veo tanto caso a este punto.

Características

Lo más importante obviamente es ver lo que nos ofrece a nosotros los programadores, de tal forma que podamos sacarle mucho jugo y no perdamos el tiempo o nos sintamos incómodos con su uso. A mi parecer Sublime Text ofrece algunas características que siempre tienen que estar presentes en un editor de texto poderoso.

• Auto Completado: cuando digo auto completado me refiero a un auto completado bestial. Pongamos un ejemplo, si ustedes hacen un archivo para C pueden incluir todo el main con argumentos con un sólo clic, realmente increíble. 
• Colapso de código: también ya es por defecto que lo traiga y es indispensable cuando quieres tener un orden mejor al momento de programar y no ver tanta línea de código desglosada. 
• Iluminado de coincidencias: un clásico también. Podemos ver todas las variables seleccionadas en nuestro documento nada más acercándonos a ella, al igual que funciones, parámetros y demás que realmente facilitan la vida.

Pero bueno, estas son mis funciones que más que necesarias deberían estar nativamente en cada editor de texto. Sublime Text nos ofrece unas cuantas más muy interesantes:

• Mini mapa de navegación: nunca lo había visto antes, pero podemos navegar muy fácil entre nuestro código (cuando ya llevamos unas cuantas miles de líneas de código) usando el mapa que hay a un lado, pudiendo desplazarnos incluso más rápido que usando el scroll
• Múltiples columnas: podemos dividir el espacio de trabajo en varias columnas, dos es lo que a mi me ha gustado, pero dependiendo del tamaño de su pantalla podrían poden tres o más, incluso como cuadrantes se ve interesante la forma de trabajar.
• Pestañas: son las pestañas de siempre, para no tener que trabajar con multiples ventanas, pero si decimos que usamos las múltiples columnas podremos ver que podemos tener diferentes pestañas en cada sección, multiplicando la posibilidad de tener muchos archivos abiertos sin tener que andar buscando mucho en ellos para trabajar.
• Mucha configuración personalizable: podemos configurar muchas cosas, la fuente, color, pero incluso el remarcado de sintaxis, usar muchos cursores, para olvidar tener que situarnos en alguna parte específica, porque podremos navegar por todas las partes que hemos seleccionado previamente.

Hay muchas más características muy buenas, pero es más agarrar experiencia para irlas descubriendo, lo que si es que es la curiosa experiencia que tienes con el programa el que hace que te guste y te obligue a usarlo por más tiempo.

Conclusiones

La verdad me ha gustado, porque como les decía al principio, al menos nunca me ha gustado usar un IDE enorme para codear un ratito, sin ninguna intención de usar muchas herramientas de testeo o de validación, y Sublime Text es eso, el programa que nos ayuda a programar como pasatiempo o para algo un poco ya más avanzado, dependiendo de nuestras capacidades de manejar el código que tenemos.

Por supuesto que lo recomiendo ampliamente, más si no han encontrado una buena alternativa a notepad++ o incluso a su bloc de notas hablando en Windows. En Mac la verdad si es más de gusto que de necesitad porque hay buenos editores en esta plataforma, pero igual podría decir que se junta con los grandes, y teniendo una versión gratuita es una opción más viable.

Fuente

Desarrollando en html5