wordpress visitor
» JavaScript | Informática Práctica |

Script para detectar el navegador, sistema operativo y versión

Escrito por ffuentes el Domingo, 26 de Julio del 2009 a las 8:59

Si lo que desean es mostrar el navegador a sus visitantes, les muestro un script que les permite hacer eso y ahorrarse bastante trabajo. JF había mostrado un script el año pasado, sin embargo, era bastante más sencillo y orientado (por lo que vi) a CSS.

Este script hace 2 cosas:

  • Detecta el Sistema Operativo
  • Detecta el navegador y su versión

Lo creó Laura Sanz y lo pueden encontrar en su propio blog donde pueden verlo en acción o aquí.

Como pueden apreciar, este script funciona perfectamente en Blogger y en cualquier CMS para blogs que permita editar plantillas. A diferencia de otros éste script cuenta con muchas entradas de navegadores y está bastante actualizado por lo tanto puede detectar prácticamente cualquier combinación sin problemas.

Su uso más habitual y lógico sería para presentar al lector qué navegador está usando y qué sistema operativo, lo cual en principio es decorativo.

Algo en lo que se podría experimentar es integrarlo en loops para utilizarlo en comentarios de blogs, aunque eso sólo serviría en CMS donde existan bases de datos que llenar como WordPress.org o similares. Espero que a más de alguno de ustedes le sirva.

Categoría: JavaScript | No hay Comentarios »

PrintableChecklist - Crear listas de tareas pendientes para imprimir (y cómo montarse el propio en tu servidor)

Escrito por ffuentes el Sábado, 7 de Febrero del 2009 a las 9:24

pcjkl.jpg

Por el nombre es de perogrullo lo que vamos a hablar. Es una web rematadamente simple y fácil entender. Casi que no necesita explicación, vamos, pero lo interesante y hermoso es su sencillez extrema.

La idea de esta web, llamada “Printable Checklist” al menos aparentemente es que podamos hacer listas de pendientes para imprimirlas en el PC y llevárnosla al trabajo o al supermercado. Imagínate una lista de supermercado ya impresa con todos los elementos que hay que comprar, agregarle cosas con lápiz BIC en una lista así se vería muy distinto y hasta es un buen ejercicio mental para evitar el consumismo.

Prácticamente todos los campos son editables, es cosa de hacer clic y reemplazar cada espacio con el texto que nos venga en gana.

¿Y si nos montamos uno en nuestro servidor local / hosting?

Pero lo que me llama más la atención es que si miras bien los elementos, estamos hablando de un simple html bien hecho pero sencillo para hacer lo que tiene que hacer y nada más. Fíjate en el código fuente, no hay nada complejo, de hecho, tomando los elementos listados en el código fuente podemos crearnos nuestra propia web “Printable Checklist”

Yo lo hice, montándome una web igual en el servidor local de mi PC, ese que uno siempre utiliza para jugar o para probar la enésima versión de WordPress. En ese y tomando cada parte de la web me he logrado montar la misma web, claro, sin permiso de nadie (espero que el creador de la web no se vaya a enojar) pero sirve para aprender un poco a curiosear sobre todo si eres como yo, un no profesional del diseño web o de la programación.

Alguien con más conocimientos de diseño podría hacer cambios con esta web y hacer algo más, quizás que se vea de otra forma o hacer que el cuadro se pueda clickear (no se puede ya que se supone que está hecho para rayarlo en el papel). Les invito a curiosear y si hacen algo con esto, me cuentan.

Lo vi en Feed My App. La imagen de arriba es de la web que me monté en mi servidor, vamos, que queda igual.

Categoría: JavaScript, Diseño Web | No hay Comentarios »

$fx() - Librería para animaciones javascript

Escrito por ffuentes el Martes, 20 de Enero del 2009 a las 3:49

Con buenos ejemplos sobre cómo crear animaciones, las cuales no sólo se pueden crear a partir del flash, ni sólo con plugins pesados aparece este plugin de javascript llamado $fx().

Para quienes hayan trabajado con javascript siempre viene bien saber de nuevas librerías desarrolladas para apoyar su trabajo gráfico. No soy yo uno de ellos pero me llaman la atención estas cosas y me gustaría trabajar con ellas en algún momento. Se ve bastante al alcance aprender y usar esto.

Algunos detalles sobre la librería:

  • Tiene un manual donde hay ejemplos visibles que no pude reproducir aquí.
  • Pesa casi nada, sólo 3.7 kb.
  • Lo que les muestro hoy está en su versión 0.1, con todo lo que implica, aunque ellos no se esfuerzan en advertirnos nada.

Los resultados con esta librería que muestran son dignos de admirar.

$fx() | Página oficial

Categoría: JavaScript | 1 Comentario »

Playtweets - Escucha música en twitter sin salir de él (tiembla blip.fm)

Escrito por ffuentes el Martes, 13 de Enero del 2009 a las 8:03

twitterlogo

Esta es una pequeñita aplicación que me he encontrado paseando por ahí como siempre. No es un sitio web, sino un script para usar con Twitter* y que nos puede venir bien para cuando nos linkeen un mp3 o cuando nosotros linkeemos uno.

Es un bookmarklet llamado PlayTweets que nos instalamos en el navegador y que nos permite escuchar directamente los mp3 que aparezcan de nuestros followers o de los perfiles que estemos revisando, esto a través del reproductor de medios de Yahoo!.

 

El autor del script nos sugiere que cada vez que posteemos un mp3, introduzcamos la palabra “play” antes de un mp3, porque ya que Twitter acorta las URL’s puede que veamos un TinyURL de un mp3 y ni nos enteremos. Además nos sugiere, con el objeto de hacer el asunto más social que se la “repliquemos” a @playTweets un bot que, a su vez, la comparte con el resto.

Una alternativa bastante buena para mantener y una buena razón para usar de vez en cuando la web de Twitter.

* El script está orientado a Twitter pero funciona en toda web que tenga un enlace directo a un mp3 (que son más de las que aparentan).

La imagen pertenece a aan00b.xfire quien nos presta su imagen bajo licencia CC y que he modificado un poquito con el logo de Twitter dentro.

Playtweets | Web oficial del script | Bot de PlayTweets | Visto en el tumblelog de pepa

Categoría: Recursos, JavaScript | 1 Comentario »

Texto sobre las imágenes con s3Slider

Escrito por J.F. el Martes, 9 de Diciembre del 2008 a las 10:48

s3Slider es un plugin construido con jQuery que nos permite crear un efecto slide show con varias imágenes, además de poder incluir texto encima de las imágenes de una manera muy elegante y atractiva. Para utilizarlo en nuestras páginas web, tan sólo hemos de incluir los archivos js correspondientes a la librería jquery, y al plugin que vamos a utilizar, s3Slider. Luego seguimos las instrucciones que nos da el autor del script, y en unos minutos habremos configurado s3Slider a nuestro gusto.

s3Slider se distribuye bajo licencia Creative Commons, y es compatible con los principales navegadores (Firefox, Opera, Safari, Internet Explorer y Google Chrome). Sin duda un recurso que será de gran utilidad a todos los aficionados al diseño de páginas web, con el que poder dar un toque de elegancia a nuestros diseños, sin necesidad de tener profundos conocimientos.

s3Slider

Enlaces: | s3Slider | Demo

Categoría: Recursos, JavaScript, Diseño Web | No hay Comentarios »

Detectar navegador y versión con Javascript

Escrito por J.F. el Lunes, 22 de Septiembre del 2008 a las 12:30

Con el siguiente código Javascript, seremos capaces de detectar el navegador y la versión de éste utilizado a la hora de cargar nuestra página web. Soporta Internet Explorer, Firefox, Opera y Netscape.

JavaScript:
  1. // Browser detection
  2. // Internet Explorer
  3. var ie  = document.all != null//ie4 and above
  4. var ie5 = document.getElementById && document.all;
  5. var ie6 = document.getElementById && document.all&&(navigator.appVersion.indexOf("MSIE 6.")>=0);
  6. // Netscape
  7. var ns4 = document.layers != null;
  8. var ns6 = document.getElementById && !document.all;
  9. var ns  = ns4 || ns6;
  10. // Firefox
  11. var ff  = !document.layers && !document.all;
  12. // Opera
  13. var op  = navigator.userAgent.indexOf("opera")>0;
  14. var op7 = op && operaVersion() <= 7;
  15. var op8 = op && operaVersion()>= 8;
  16. // Detects the Opera version
  17. function operaVersion() {
  18.     agent = navigator.userAgent;
  19.     idx = agent.indexOf("opera");
  20.     if (idx>-1) {
  21.         return parseInt(agent.subString(idx+6,idx+7));
  22.     }
  23. }

Categoría: JavaScript, Diseño Web | 2 Comentarios »

Galería espectacular con JavaScript

Escrito por J.F. el Viernes, 15 de Agosto del 2008 a las 12:00

Los desarrolladores de EyeCon, han creado un script para hacer una galería de fotos. El resultado es buenísimo.
En su web, también hay un selector de color, una tragaperras, un script que realiza una función parecida al LightBox, y muchos efectos más todos en JavaScript.
Encima son gratuitos, y los puedes descargar y usar sin problemas.
Enlace: | Galería

Categoría: JavaScript, Diseño Web | 1 Comentario »

Enlace directo al traductor de páginas de Google

Escrito por J.F. el Martes, 15 de Julio del 2008 a las 9:18

¿El inglés no es lo tuyo? Es algo muy normal en mucha gente, y sobre todo en el mundo de la informática y la tecnología (porque no decirlo, en practicamente la mayorías de los campos), la mejor información está en inglés.

Desgraciadamente no a todo el mundo se le da bien la lengua de Shakespeare, y gracias a dios algunos traductores como el de google van mejorando paso a paso, y son de utilidad a la hora de "descifrar" alguna página web en otro idioma. Todavía debe mejorar, ya que en ocasiones pareceun robot, pero de momento es lo mejor que tenemos.

Si quieres disponer siempre de un enlace rápido para traducir cualquier página web en la que estés, simplemente arrastra el siguiente enlace a la barra de tu navegador (yo lo hago en Firefox), y cuando pinches sobre él, la página actual que estés visitando será traducida al instante, así de fácil y útil.

Enlace: | Traducir página

Categoría: JavaScript | No hay Comentarios »

Editar cualquier página web

Escrito por J.F. el Miércoles, 9 de Julio del 2008 a las 4:06

Nuevamente gracias al uso de Javascript introducido directamente en la barra de direcciones, podemos descubrir una nueva utilidad curiosa. En éste caso, para poder editar cualquier página web que se nos antoje directamente en el navegador (localmente en nuestro ordenador, logicamente).

Si quieres manipular alguna noticia aparecida en algún sitio web, de ésta forma podrías ahorrarte el trabajo de un pantallazo modificado con Adobe Photoshop. Eso sí, es algo que no debe de hacerse, y estoy seguro que alguién podría crear un pantallazo falso con algo absurdo con tal de aparecer en Menéame... Lo dicho, una cosa curiosa sin demasiada utilidad, y que no debe usarse con malicia.

El código en cuestión es el siguiente:

JavaScript:
  1. javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Visto en: | Microsiervos

Categoría: Curiosidades, JavaScript | No hay Comentarios »

Menú en forma de acordeón con Javascript de 1kb

Escrito por J.F. el Martes, 27 de Mayo del 2008 a las 13:18

Es fácil encontrar bonitos menús con impactantes efectos realizados con la ayuda de Javascript. Lo que no es tan fácil es encontrar menús que ocupen poco. Normalmente una de las razones más comunes de que una página web vaya lenta se debe a las validaciones y código Javascript que tiene la web.

Librerías como jQuery ocupan espacio, en ocasiones innecesario, ya que no lo utilizamos en todas nuestras páginas, a pesar de incluirlo (un buen ejemplo podría ser Wordpress, si incluyeramos en algún plugin alguna librería, y solo la utilizáramos en alguna entrada puntual). Por ello hay que destacar éste curioso menú realizado con Javascript que ocupa tan solo 1kb. Es simple, cumple su cometido, y puede quedar más o menos vistoso en función de las imágenes que utilices para su confección.

Menú JS

Enlaces: | Menu Javascript de 1kb | Descargar

Categoría: Recursos, JavaScript, Diseño Web | No hay Comentarios »

« Entradas previas