| Pictonic Icons | |
| Contiene 266 íconos en formato PNG. descargar | |
 |
| PW Drawn Icon Font | |
| Contiene un archivo en formato TTF. descargar | |
 |
Notas desde el navegador |
El artículo de Jose Jesus Perez Aguinaga llamado One line browser notepad me llamó la atención, no sólo por lo original de la idea sino por el grado de participación y aportes de los lectores, algo que, no suele ser habitual en estos tiempos donde sólo vale la inmediatez y la "practicidad" de las cosas.
Seguramente, no es algo que maraville ya que es posible que haya decenas de sistemas similares pero, no deja de ser interesante ya que demuestra dos cosas: que siempre se puede darle una vuelta de tuerca más a algo y que vale la pena hacerlo.
La idea es simple; usar el navegador para tomar notas rápidas sin necesidad de agregar plugins o aplicaciones extras, valiéndose sólo de un bookmarklet, algo que puede ser agregado a los marcadores.
¿Cómo funcionaría? Basta abrir una ventana o pestaña y escribir lo siguiente en la barra de direcciones:
Seguramente, no es algo que maraville ya que es posible que haya decenas de sistemas similares pero, no deja de ser interesante ya que demuestra dos cosas: que siempre se puede darle una vuelta de tuerca más a algo y que vale la pena hacerlo.
La idea es simple; usar el navegador para tomar notas rápidas sin necesidad de agregar plugins o aplicaciones extras, valiéndose sólo de un bookmarklet, algo que puede ser agregado a los marcadores.
¿Cómo funcionaría? Basta abrir una ventana o pestaña y escribir lo siguiente en la barra de direcciones:
data:text/html, <html contenteditable>
Haciendo eso, la ventana se convertirá en un editor de textos sencillo donde podremos escribir cualquier cosa. Bastaría guardarla así en los marcadores para no tener que tipear eso cada vez que lo necesitemos.
De ahí en más, comenzaron a aparecer variaciones de todo tipo:
De ahí en más, comenzaron a aparecer variaciones de todo tipo:
data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
data:text/html;charset=utf-8, <html contenteditable>
data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false">
data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Text Editor</h1><p>Start Here.
data:text/html, <style>html,body{margin: 0; padding: 0;}</style><textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %23EEE; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="empezar a escribir" />
data:text/html,<pre onkeyup="(function(d,t){d[t]('iframe')[0].contentDocument.body.innerHTML = d[t]('pre')[0].textContent;})(document,'getElementsByTagName')" style="width:100%;height:48%;white-space:pre-wrap;overflow:auto;" contenteditable></pre><iframe style="width:100%;height:48%">Una vez que terminamos de escribir, sólo necesitamos guardar el resultado como haríamos con cualquier página web.
Incluso hay quien llevó la idea al extremo de crear un bookmarklet que guarda cualquier contenido seleccionado.
Incluso hay quien llevó la idea al extremo de crear un bookmarklet que guarda cualquier contenido seleccionado.
El futuro y la propiedad @supports |
Así como hace más de dos años, se mostraba el uso de una propiedad de CSS3 llamada @media que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará y hoy se va generalizado a partir de la intención de muchos desarrolladores de tener diseños adaptables; esta otra, llamada @supports, es probable que pronto se convierta en una de esas cosas imprescindibles.Por ahora, su uso práctico es limitado o nulo ya que sólo está soportado por Opera 12 y Firefox 17 e incluso en este último, sólo funciona si se coloca en TRUE el valor layout.css.supports-rule.enable en la configuración del navegador (about:config) pero, se espera que pronto sea algo corriente y Chrome dice que lo implementará a partir de la versión 24.
¿Para qué serviría esto? Para algo que el CSS aun es incapaz de manejar, detectar el navegador que se está utilizando de tal forma de poder condicionar el uso de determinadas reglas o propiedades.
La sintaxis sería.
@supports una_condición {
/* y aquí las reglas de estilo si la condición se cumple */
}Por ejemplo, supongamos que quiero que una etiqueta tenga una animación que use @keyframes sólo si estas son soportadas y, caso contrario que no se vean:
#mi_animacion {display:none;} /* por defecto no lo muestro */
@supports (animation-name: un_ejemplo) {
/* y sólo se verá si el navegador soporta animaciones */
@keyframes un_ejemplo {
from {background-color:#000;border: 0px solid #444;}
to {background-color:#F00;border: 15px solid #FF0;}
}
#mi_animacion {
display:block;}
animation: un_ejemplo 1s infinite alternate;
}
}En ese caso, sólo hay una condición pero puede haber varias y combinarse con OR y AND:
@supports (animation-name: un_ejemplo) or (-webkit-animation-name: un_ejemplo) {
/* las reglas se aplicarían en cualquiera de los dos casos */
}
@supports (animation-name: un_ejemplo) and (box-shadow: 1px 1px 5px #FFF) {
/* las reglas se aplicarían si ambas propiedades son reconocidas por el navegador */
}O incluso, puede usarse el NOT para hacer lo contrario:
@supports not (display: flexbox) {
/* estas reglas se aplicarían si la propeidad no es reconocida por el navegador */
}Si bien la condición debe tener un valor, este puede ser cualquiera y no es necesario que se utilice en las reglas de la condición así que, por ejemplo, esto sería válido (inútil pero válido):
@supports (background: red) {
body {background: white;}
}Sí, ya sé, no tiene utilidad pero ... el tiempo pasa volando.
Los comentarios de Google+ en cualquier página |
Por si a alguien le interesa, esto acaba de ser publicado en Google Operating System
Se trata de agregar los comentarios de Google+ a cualquier página de modo independiente.No es algo oficial así que ... prudencia:
Se trata de agregar los comentarios de Google+ a cualquier página de modo independiente.No es algo oficial así que ... prudencia:
<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
data-href="url"
data-width="642"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div>donde debe reemplazarse url por la dirección de la página.
En el caso de un blog, esa url es dinámica, varia y en Blogger sería algo así siempre y cuando el script se coloque dentro del includable post de manera similar a como se hace con otros plugins de redes sociales:
En el caso de un blog, esa url es dinámica, varia y en Blogger sería algo así siempre y cuando el script se coloque dentro del includable post de manera similar a como se hace con otros plugins de redes sociales:
data-href="'<data:post.url/>'"
y, eventualmente, imagino que si se coloca en cualquier otra parte, podría usarse esto:
data-href=location.href;
El valor 642 de data-width es el ancho y deberán probar qué pasa si se cambia porque yo no pienso hacerlo.
A diferencia del sistema que propone Blogger, esto no sincroniza los comentarios sino que funcionan de manera independiente, algo similar a lo que se puede hacer con los comentarios de Facebook.
A diferencia del sistema que propone Blogger, esto no sincroniza los comentarios sino que funcionan de manera independiente, algo similar a lo que se puede hacer con los comentarios de Facebook.
jQuery 2.0: IE8 y cómo resolver problemas |
Hace pocos meses, comentaba sobre las actualizaciones de la librería jQuery y de los recaudos que había que tomar si los implementábamos. Ahora, que ya está disponible la versión 2, todo lo dicho en ese momento sigue siendo válido pero, le debemos agregar un punto extra: la nueva librería NO es compatible con las versiones de Internet Explrorer anteriores a la 9.
Esto, no significa que funcionará mal significa que directamente: NO FUNCIONARÁ en IE8 por ejemplo porque los desarrolladores han dejado de dar soporte a ese navegador, ahorrando, de este modo, decenas de líneas de código.
¿Qué debemos tener en cuenta si es que utilizamos esta librería?
Primero que nada, sólo necesitamos una; es muy común ver que se cargan varias versiones porque se copian los códigos tal como se muestran en las páginas de ejemplo sin tener en cuenta que, cualquier cosa que agreguemos o querramos probar, debe pasar por el filtro del sentido común y tratar de entender qué estamos haciendo.
Por otro lado, si bien es fácil agregar la librería con algo así:
Esto, no significa que funcionará mal significa que directamente: NO FUNCIONARÁ en IE8 por ejemplo porque los desarrolladores han dejado de dar soporte a ese navegador, ahorrando, de este modo, decenas de líneas de código.
¿Qué debemos tener en cuenta si es que utilizamos esta librería?
Primero que nada, sólo necesitamos una; es muy común ver que se cargan varias versiones porque se copian los códigos tal como se muestran en las páginas de ejemplo sin tener en cuenta que, cualquier cosa que agreguemos o querramos probar, debe pasar por el filtro del sentido común y tratar de entender qué estamos haciendo.
Por otro lado, si bien es fácil agregar la librería con algo así:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
Esto, cargará siempre la última versión con lo cual, ciertas cosas que antes funcionaban, pueden dejar de funcionar.
La nueva versión ya está disponible en los repositorios de Google así que podemos usarla cambiando el número:
La nueva versión ya está disponible en los repositorios de Google así que podemos usarla cambiando el número:
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' type='text/javascript'/>
Ahora bien ¿Y que hacemos con IE8? Recuerden que jQuery 2 no funcionará en ese navegador.
Una alternativa es aprovecharse de los condicionales que inventó Microsoft para lidiar con estas cosas. Hay varios sitios que hablan sobre l tema e incluso el mismo blog de jQuery propone una alternativa pero, es completamente errónea así que, acá está la solución tal como define Impresive Webs y que funciona de manera correcta aunque el código parezca un poco absurdo.
Una alternativa es aprovecharse de los condicionales que inventó Microsoft para lidiar con estas cosas. Hay varios sitios que hablan sobre l tema e incluso el mismo blog de jQuery propone una alternativa pero, es completamente errónea así que, acá está la solución tal como define Impresive Webs y que funciona de manera correcta aunque el código parezca un poco absurdo.
<!--[if lt IE 9]> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/> <![endif]--> <!--[if (gte IE 9) | (!IE)]><!--> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' type='text/javascript'/> <!--<![endif]-->
Lo que hará eso es cargar la versión 1.9.1. en Internet Explorer 8 o inferior y la versión 2 en cualquier otro navegador.
Si quieren verificarlo, el código está colocado tal cual en este mismo blog.
Si quieren verificarlo, el código está colocado tal cual en este mismo blog.
Comentarios, Google+, blogs y el final de una era |
Seguramente, todos han recibido el mail de Blogger anunciando la integración de los comentarios de Google+ en Blogger; algo que permite sincronizar los comentarios entre ambos servicios. Los detalles (en inglés) y en español.
Dicen: "Este mensaje se ha enviado a porque nos indicaste que querías recibir avisos sobre las funciones nuevas de Blogger."
Pero, si en casi siete años, esta es la primera vez que envían un mail ... uno se pone a pensar ¡pucha!, se ve que este asuntito es algo que REALMENTE les interesa ¿A quién? ¿a mi? no, a Google.
Dicen: "Este mensaje se ha enviado a porque nos indicaste que querías recibir avisos sobre las funciones nuevas de Blogger."
Pero, si en casi siete años, esta es la primera vez que envían un mail ... uno se pone a pensar ¡pucha!, se ve que este asuntito es algo que REALMENTE les interesa ¿A quién? ¿a mi? no, a Google.
Para algunos, es un sueño hecho realidad, para otros, entre quienes me incluyo, es la confirmación de eso que uno viene suponiendo hace tiempo: que Blogger terminará siento integrado, absorbido o deglutido por Google+ ya que estamos en tiempos de redes sociales
Los blogs fueron la explosión de la participación activa pero, al parecer, ahora, cuando ya no nos quedan muchas palabras, le llegó el turno al micro-blogging y a las redes sociales, ese "cruce entre patio andaluz con sus cotilleos y foro romano" o "una fuente de información para poder crear un medio o apoyar uno ya existe".
Los blogs fueron la explosión de la participación activa pero, al parecer, ahora, cuando ya no nos quedan muchas palabras, le llegó el turno al micro-blogging y a las redes sociales, ese "cruce entre patio andaluz con sus cotilleos y foro romano" o "una fuente de información para poder crear un medio o apoyar uno ya existe".
Todo el mundo ama a Google ... hasta que es demasiado grande. Demasiado poder para alguien aunque sea un angelito sin malas intenciones.
Llegó Google+ y algunos se enamoraron, a otros les resulta indiferente. Si es bueno, si es malo, si es lindo, si es feo, si es mejor o peor que otro servicio carece de importancia. Habrá quien lo use para esto y otro para aquello. Habrá quién lo use mucho y habrá quien lo use menos. Cada cual atenderá su juego como pueda.
Pero que nadie se olvide que no hay monopolios buenos y monopolios malos. Todos son malos. El gran imperio de la web tiene muchos pretendientes al trono y la verdad, como soy un simple mortal, andar levantando tal o cual bandera para que otro se llene los bolsillos me parece una tremenda estupidez.
Distopía: utopía perversa donde la realidad transcurre en términos opuestos a los de una sociedad ideal, es decir, en una sociedad opresiva, totalitaria o indeseable. El término fue acuñado como antónimo de utopía y se usa principalmente para hacer referencia a una sociedad ficticia frecuentemente emplazada en el futuro cercano en donde las tendencias sociales se llevan a extremos apocalípticos.
Seguir a alguien no es estar junto a alguien, es ir detrás.
Creo que la idea de la web es otra: es ir juntos y no en fila india. Creo que la idea de la web es ir para cualquier lado y encontrarse con otros en el camino, sin tratar de venderles nada.
Llegó Google+ y algunos se enamoraron, a otros les resulta indiferente. Si es bueno, si es malo, si es lindo, si es feo, si es mejor o peor que otro servicio carece de importancia. Habrá quien lo use para esto y otro para aquello. Habrá quién lo use mucho y habrá quien lo use menos. Cada cual atenderá su juego como pueda.
Pero que nadie se olvide que no hay monopolios buenos y monopolios malos. Todos son malos. El gran imperio de la web tiene muchos pretendientes al trono y la verdad, como soy un simple mortal, andar levantando tal o cual bandera para que otro se llene los bolsillos me parece una tremenda estupidez.
Distopía: utopía perversa donde la realidad transcurre en términos opuestos a los de una sociedad ideal, es decir, en una sociedad opresiva, totalitaria o indeseable. El término fue acuñado como antónimo de utopía y se usa principalmente para hacer referencia a una sociedad ficticia frecuentemente emplazada en el futuro cercano en donde las tendencias sociales se llevan a extremos apocalípticos.
Seguir a alguien no es estar junto a alguien, es ir detrás.
Creo que la idea de la web es otra: es ir juntos y no en fila india. Creo que la idea de la web es ir para cualquier lado y encontrarse con otros en el camino, sin tratar de venderles nada.
jFontSize: Manejar el tamaño de los textos |
Hay muchos scripts que hacen lo mismo que jFontSize pero este es bastante simple ya que usa la librería jQuery.
En general, no creo que sea algo demasiado útil ya que hacer zoom es algo que cualquier navegador admite de modo nativo pero, aún así, muchos sitios lo utilizan así que no hay nada de malo en tenerlo como opción. La idea es facilitar la generación de botones que permitan aumentar o disminuir el tamaño de las fuentes de los textos.
El script es muy pequeño y puede descargarse desde la web del desarrollador aunque lo que ahí nos ofrecen no admiten las opciones que posee el plugin (es raro pero es así) entonces, lo mejor, es descargar el zip con los scripts y los ejemplos. Allí, en la carpeta JS, veremos el archivo que necesitamos: jquery.jfontsize-1.0.js
Una vez agregado a nuestro sitio, antes de </head> deberíamos establecer las reglas de estilo de esos botones. En este caso, puse lo siguiente pero, puede ser cualquier otra cosa:
En general, no creo que sea algo demasiado útil ya que hacer zoom es algo que cualquier navegador admite de modo nativo pero, aún así, muchos sitios lo utilizan así que no hay nada de malo en tenerlo como opción. La idea es facilitar la generación de botones que permitan aumentar o disminuir el tamaño de las fuentes de los textos.
El script es muy pequeño y puede descargarse desde la web del desarrollador aunque lo que ahí nos ofrecen no admiten las opciones que posee el plugin (es raro pero es así) entonces, lo mejor, es descargar el zip con los scripts y los ejemplos. Allí, en la carpeta JS, veremos el archivo que necesitamos: jquery.jfontsize-1.0.js
Una vez agregado a nuestro sitio, antes de </head> deberíamos establecer las reglas de estilo de esos botones. En este caso, puse lo siguiente pero, puede ser cualquier otra cosa:
<style>
.jfontsize-button {
background-color: #EEE;
border-radius: 4px;
box-shadow: 0 0 0.2em #888 inset;
color: #000;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 13px;
font-weight: bold;
margin: 0 1px;
opacity: 0.8;
padding: 0.3em 0;
text-align: center;
text-decoration: none;
width: 2em;
}
.jfontsize-button:hover {
opacity: 1;
}
.jfontsize-disabled, .jfontsize-disabled:hover {
opacity: .5;
pointer-events: none;
}
<style>Y de manera genérica, lo ejecutamos de este modo:
$(document).ready(function() {
$('#nombreID').jfontsize();
// o bien esto otro si queremos hacer referencia a la clase
$('.nombreCLASE').jfontsize();
})Donde nombreID o nombreCLASE deben indicar la etiqueta sobre la que funcionará, teneindo en cuenta que esa etiqueta debe tener una regla de estilo con un tamaño de fuente ya sea específico o heredada de su contenedor. Por ejemplo, si quisiéramos aplicarlo a todas las entradas de este blog, debería usar algo así:
$('.post-body').jfontsize();ya que los textos se encuentran en un DIV con esa clase sin embargo, si dentro de esa etiqueta, hay otras que especifican un tamaño, estas no se verán afectadas; veamos un ejemplo concreto:
<div id="demojfontsize">
<div style="text-align:right;">
<a id="jf1-b1" class="jfontsize-button" href="#">A-</a>
<a id="jf1-b2" class="jfontsize-button" href="#">A</a>
<a id="jf1-b3" class="jfontsize-button" href="#">A+</a>
</div>
... un texto cualquiera ...
<span style="color:#FF0; font-family:cursive; font-size:20px;">otra fuente y otro tamaño</span>
... un texto cualquiera ...
</div>si el script lo ejecutamos así:
$('#demojfontsize').jfontsize({
btnMinusClasseId: '#jf1-b1',
btnDefaultClasseId: '#jf1-b2',
btnPlusClasseId: '#jf1-b3'
});veríamos algo como esto:
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce pulvinar mauris ac purus lobortis et dapibus libero facilisis. Praesent consectetur odio et massa congue mollis nec non turpis. Morbi in leo in est congue lobortis sed et enim.
otra fuente y otro tamaño
Praesent hendrerit risus vel velit eleifend ornare. Ut eu metus elit. Nullam sollicitudin, quam at dictum tristique, odio nunc vestibulum nibh, vel molestie erat eros eu metus. Fusce leo purus, venenatis ut adipiscing ut, placerat rutrum ligula. Maecenas pellentesque posuere arcu nec sagittis? Pellentesque feugiat dignissim risus, id laoreet lectus pulvinar id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tincidunt mi in erat lobortis egestas. Integer lacus odio, tincidunt quis ullamcorper non, adipiscing aliquam nibh. Sed bibendum turpis aliquet purus dignissim fringilla.
Los botones A- y A+ aumentarán o disminuirán el tamaño del texto y el botón A central restaurará el tamaño a su valor original pero, nada de eso afectaría el span de color amarillo ya que en la etiqueta, el tamaño del texto es explícito porque se encuentra en un atributo style o está definido en alguna otra regla.
La cantidad de clicks sobre los botones es infinita así que llegará un momento en que el tamaño sea gigantesco o no se vea nada. Eso es algo que podemos controlar con las opciones:
btnMinusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede decrementarse el tamaño
btnPlusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede incrementarse el tamaño
sizeChange es un valor que establece cuanto aumenta o disminuye y por defecto es 1y está expresado en pixeles
Si el script dijera esto:
La cantidad de clicks sobre los botones es infinita así que llegará un momento en que el tamaño sea gigantesco o no se vea nada. Eso es algo que podemos controlar con las opciones:
btnMinusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede decrementarse el tamaño
btnPlusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede incrementarse el tamaño
sizeChange es un valor que establece cuanto aumenta o disminuye y por defecto es 1y está expresado en pixeles
Si el script dijera esto:
$('#demojfontsize2').jfontsize({
btnMinusClasseId: '#jf2-b1',
btnDefaultClasseId: '#jf2-b2',
btnPlusClasseId: '#jf2-b3',
btnMinusMaxHits: 5,
btnPlusMaxHits: 5,
sizeChange: 1
});Habría un máximo de cinco clicks disponibles y al llegar a ese límite, el botón se deshabilitaría.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce pulvinar mauris ac purus lobortis et dapibus libero facilisis. Praesent consectetur odio et massa congue mollis nec non turpis. Morbi in leo in est congue lobortis sed et enim.
otra fuente y otro tamaño
Praesent hendrerit risus vel velit eleifend ornare. Ut eu metus elit. Nullam sollicitudin, quam at dictum tristique, odio nunc vestibulum nibh, vel molestie erat eros eu metus. Fusce leo purus, venenatis ut adipiscing ut, placerat rutrum ligula. Maecenas pellentesque posuere arcu nec sagittis? Pellentesque feugiat dignissim risus, id laoreet lectus pulvinar id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tincidunt mi in erat lobortis egestas. Integer lacus odio, tincidunt quis ullamcorper non, adipiscing aliquam nibh. Sed bibendum turpis aliquet purus dignissim fringilla.
Para usarlo en distintas etiquetas de la misma página, debemos indicar al script, el ID o la clase de los botones que es lo que hacemos con estas opciones:
btnMinusClasseId es el ID o clase del botón decrementar
btnDeafultClasseId es el ID o clase del botón incrementar
btnPlusClasseId es el ID o clase del botón restaurar
btnMinusClasseId es el ID o clase del botón decrementar
btnDeafultClasseId es el ID o clase del botón incrementar
btnPlusClasseId es el ID o clase del botón restaurar
