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

Crear un formulario bonito con HTMLForm

Escrito por ffuentes el Tuesday, 28 de December del 2010 a las 1:36

 

flattr this!

Crear un formulario es algo que todo bloguero debe tener en cuenta, mucho más los dueños de un sitio web de una empresa u organización, pero eso escapa de los conocimientos de una persona con conocimientos básicos de informática y de HTML.

Existen webs para generar formularios de copiar y pegar, con trozos de javascript, pero es la solución chapucera, adecuada para un blog sin hosting propio o algo así, pero no para un sitio mejor gestionado.

HTMLForm permite crear mediante un asistente muy sencillo un formulario web y solucionar los dos problemas anteriores, el resultado del asistente es un formulario hecho en HTML y AJAX listo para descargar. Luego sólo hace falta subir todo al servidor y ya está.

Lo bueno de HTMLForm es que permite agregar los campos que queramos libremente, por ejemplo, un campo de seleccionar país y ciudad o seleccionar una alternativa e incluso agregar un recaptcha sin tener que ponerlo nosotros mismos. Nada nuestro llega a HTMLForm.

HTMLForm permite trabajar un formulario de contacto pero también una encuesta, por ejemplo. Otra ventaja de la web es que no requiere registro (más que entregar tu e-mail para recibir el archivo).

Adelante, pruébenlo y cuéntenme cómo les ha ido.

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

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

Escrito por ffuentes el Sunday, 26 de July del 2009 a las 8:59

 

flattr this!

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 Saturday, 7 de February del 2009 a las 9:24

 

flattr this!

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: Diseño Web, JavaScript | No hay Comentarios »

$fx() – Librería para animaciones javascript

Escrito por ffuentes el Tuesday, 20 de January del 2009 a las 3:49

 

flattr this!

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 Tuesday, 13 de January del 2009 a las 8:03

 

flattr this!

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: JavaScript, Recursos | 1 Comentario »

Texto sobre las imágenes con s3Slider

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

 

flattr this!

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: Diseño Web, JavaScript, Recursos | No hay Comentarios »

Detectar navegador y versión con Javascript

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

 

flattr this!

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: Diseño Web, JavaScript | 2 Comentarios »

Galería espectacular con JavaScript

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

 

flattr this!

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: Diseño Web, JavaScript | 1 Comentario »

Enlace directo al traductor de páginas de Google

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

 

flattr this!

¿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 Wednesday, 9 de July del 2008 a las 4:06

 

flattr this!

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 »

« Entradas previas