Contenido

60 Directrices para realizar formularios usables

28 Feb

aNieto2k hace 5761 días en: Asides, estandares, Programacion, semántica, usabilidad, web, webdev

+ 0

Olga, como es de costumbre, nos deleíta con un artículo que recoge las 60 directrices para realizar formularios usables. Algo que todo desarrollador web debería tener presente.

Internet Explorer 8.0 beta para todos el 5 de Marzo

28 Feb

aNieto2k hace 5761 días en: Asides, estandares, web, webdev

+ 11

Microsoft tiene previsto hacer una demostración de Internet Explorer 8.0 el próximo día 5 de Marzo en el evento Mix 08 que se celebrará en las Vegas. Trás este momento Microsoft dará la posibilidad de testear el nuevo navegador a cualquier persona que quiera descargarlo, una gran noticia para los desarrolladores.

Include, carga y comprime tu javascript ondemand

27 Feb

aNieto2k hace 5762 días en: javascript, Programacion, web, webdev

+ 10

Ayer Brian Moschel me envió un mail informándome de la publicación de Include, un componente de JavascriptMVC, que nos permite cargar y comprimir nuestro javascript de una forma muy sencilla, sin importar la complejidad de dependencias que por debajo haya.

Imaginemos que tenemos un entorno de trabajo del que necesitamos cargar una gran cantidad de funcionalidad javascript, toda ella desperdigada en diferentes ficheros javascript. Con Include podemos cargar esa funcionalidad a medida que la vamos necesitando, de forma comprimida, usando el script de Dean Edwards, para reducir el tiempo de carga por parte de nuestro navegador

Instalación

Al estar desarrollado sobre Javascript, basta con incluir la llamada al fichero en el <head> de nuestro HTML. Los ficheros Compres.js y Compres.html deben estar en la misma ruta que el include.js. 

<script src="include.js" type="text/javascript"></script>

Modo de uso

Incluir otros ficheros javascript es algo tan sencillo como esto:

<script type="text/javascript">
   include('javascripts/prototype', 'javascripts/myapplication');
</script>

Lo que nos permite cargar el javascript en cualquier lugar simplemente llamando a la función con los parámetros necesarios. Los ficheros serán cargados a medida que se solicitan, por lo que el orden de carga lo definimos nosotros.

Comprimir el javascript

Para que Include se ponga en modo compress, simplemente tenemos que especificarlo antes de solicitar los ficheros, a modo de configuración previa. 

<script type="text/javascript">
   include.setup({env: 'compress'});
   include('javascripts/prototype', 'javascripts/myapplication');
</script>

Ejecutar en producción

Tambien dispone de un modo «production» ideal para trabajar en la versión final de nuestras aplicaciones. Podremos especificar una ruta diferente de en donde se encuentran los ficheros javascript mediante un parámetro más. 

<script type="text/javascript">
   include.setup({env: 'production', production: 'path/to/prod'});
   include('javascripts/prototype', 'javascripts/myapplication');
</script>

API

Tambien disponemos de una serie de funciones con las que podremos complementar nuestros scripts. 

include.get_absolute_path() // Nos devuelve la ruta absoluta.
include.get_env() // Nos informa del entorno que hemos definido ("development", "compress" o "production")
include.get_path() // Directorio de trabajo
include.include() // Función principal que carga N ficheros javascrips solicitados por parámetro.
	- path: Ruta del fichero (String)
	- base62: Activar la compresión para el fichero concreto (true/false)
	- shrink_variables: Shrink variables de dicho fichero (true/false)
include.opera() // Debe ir detrás de los includes si estás usando Opera
include.setup() // Configuración del script
	- env: Entorno de desarrollo ("development", "compress" o "production")
	- production: Ruta de los ficheros javascript (String)
	- base62: Activa la compresión (true/false)
	- shrink_variables: Shrink variables de dicho fichero (true/false)
	- remote: Activa el sistema de compresión remota desde otra aplicación (true/false)
include.plugin() // Nos permite cargar un plugin de JavascriptMVC
include.plugins() // Nos permite cargar plugins de JavascriptMVC
include.set_path() // Definimos la ruta de los ficheros

Descargar

[Descargar] [Demo]

Obtener latitud y longitud de Google Maps con Javascript

27 Feb

aNieto2k hace 5762 días en: Curiosidades, javascript, Programacion, webdev

+ 5

Vía Lifehacker descubro una forma curiosa y simple de conocer la longitud y latitud del centro de un mapa de Google Maps. Basta con introducir esto en la barra de navegación y nos aparecerá una ventana con los datos que estamos solicitando. 

javascript:void(prompt('',gApplication.getMap().getCenter()));

Realmente sencillo y que mirando el API podríamos sacar casi sin parpadear 😀 

Nokia Maps, mapas para el GPS de tu bolsillo

27 Feb

aNieto2k hace 5762 días en: General

+ 9

Artículo patrocinado por Zync.es.

Hace casi 2 meses que tengo el Nokia N95 y desde que lo tengo no he parado de trastear y probar aplicaciones. Gracias a mis amigos de SymbianForever que están a la última en todas las novedades sobre Symbian he podido sacarle el máximo partido a este maravilloso móvil.

scr000009.jpgscr000015.jpgscr000014.jpg

Una de las funcionalidades más llamativas del N95 es la integración del GPS en el mismo dispositivo, y en ese punto Nokia Maps es la aplicación que estoy usando y estoy bastante contento con ella. Como toda herramienta de GPS se encarga de darnos la posición actual de nuestro dispositivo y geoposicionarla en un mapa, estas herramientas suelen ser útiles para consultar calles, mostrar rutas de un punto A a otro B, consultar establecimientos cercanos a nuestra posición. Nokia Maps se integra perfectamente con nuestro dispositivo, lo que hace que funcione de una forma muy holgada.

Nokia Maps en detalle

Veamos unas de las opciones más interesantes de Nokia Maps, desde el Zoom hasta las opciones internas de configuración.

El Zoom

scr000018.jpgscr000019.jpgscr000023.jpg

El Zoom nos permite elegir la forma más óptima para nuestras necesidades, desde un rango de entre más de 100km hasta 50m sobre nuestras cabezas.

Categorías

scr000024.jpgscr000025.jpgscr000026.jpgscr000027.jpgscr000028.jpgscr000029.jpg

Las categorías son la gracia de los GPS, ya que gracias a ellas definimos que comercios o sitios de interés deseamos mostrar cerca de nuestra posición, de esta forma siempre podremos encontrar lo que estemos buscando sin tener que dar vueltas innecesarias. Muy útil para nuestros viajes.

Las voces

Como todos los GPS, Nokia Maps te va guían de forma oral por la ruta que hemos de seguir, sin duda es una gran ayuda para evitar alejar la visión de la carretera, en caso de usarlo mientras conducimos. Aquí es donde está el único problema que le he encontrado a esta aplicación, ya que para disponer de las voces te obligan a pagar la licencia de uso, aunque puedes usarlo de forma visual, es menos llamativo pero igual de funcional.

Conclusiones

Para ser un gestor de mapas para GPS para un dispositivo móvil, es realmente bueno. No se puede comprobar con gestores destinados exclusivamente para ello como los dispositivos TomTom y sus pantallas táctiles, pero nos ayuda a cumplir el deseo de tenerlo todo integrado en el mínimo número de dispositivos.

Pon un chat en tu página con Google Talk

26 Feb

aNieto2k hace 5763 días en: javascript, Programacion, web, webdev

+ 16

Google Talk, hace tiempo que se convirtió en una herramienta indispensable en mi PC, tiene lo necesario para estar en contacto con los amigos, este cliente de mensajería instantánea ha nublado mi corazón desde que lo ví. Cuando Google lo integró en gMail, pensé, «Bueno!!, Estó ya va mejorando…»

Integrar el correo con las mensajería instantánea, podría complementar muchas de las tareas que ahora estamos haciendo por separado, pero ahora han dado un paso más, y te permiten crear un badge para incrustar en tu web y hacer que el que te lea, pueda contactar contigo directamente. Mediante unas líneas de código, podemos insertar un globo en nuestra web desde el cual los usuarios podrán contactar contigo via gTalk (en formato web).

google_talk_bagde.jpg

Código

<iframe src="http://www.google.com/talk/service/badge/Show?tk=z01q6amlq....."
frameborder="0" allowtransparency="true" width="200" height="60"></iframe>

Así, sin extrujarme mucho el coco, veo que esto puede ser ideal para empresas que den soporte online en tiempo real, siendo un sistema gratuito y fácil de integrar en cualquier sitio. Genera el tuyo propio desde la página de Google Talk.

Polar Clock versión Javascript gracias a Prototype

26 Feb

aNieto2k hace 5763 días en: Curiosidades, javascript, Programacion, webdev

+ 3

Hace unos 10 meses que vimos la posibilidad de vacilar a la gente usando el reloj más geek de todos los relojes (de los que se entienden, por que hay alguno por ahi que ….).

Polar Clock

Desde entonces han ido apareciendo herramientas que integran este tipo de reloj polar:

Y ahora via Ajaxian, descubro una implementación en Javascript mediante el uso de Prototype y exCanvas, personalmente creo que poca utilidad se le puede dar, pero al igual que las diferentes versiones, está curioso para mostrar la fecha de una forma diferente.

[Demo][Descargar]

Google Maps sin Javascript

25 Feb

aNieto2k hace 5764 días en: Curiosidades, Programacion, webdev

+ 15

Google Maps es la herramienta de Google que ha revolucionado la idea de los mashups en Internet. Gracias a la geolocalicación, aplicaciones como Panorámio son posibles. Algo que se echaba en falta era la posibilidad de usar los mapas como imagenes estáticas, y ahora eso es posible.

staticmap.gif

Para usar estas imagenes necesitaremos disponer de una key, que obtendremos al registrar nuestro sitio en Google Maps API. Una vez con esta key, podremos obtener la imagene estática como si de una imagen externa a nuestro server se tratara.

<img src="http://maps.google.com/staticmap?center=47.238336,8.827171&zoom=12&markers=40.416741,-3.70325,red&size=512x512&key=MAPS_API_KEY">

Si descomponemos la URL veremos los diferente parámetros que intervienen y con los que podemos personalizar nuestro gráfico.

  • center:              //Centro de la imagen (ej: 0.0000,0.0000)
  • zoom:                //Zoom que se le aplica a la imagen, de 0 a 19 (0 más lejos, 19 más cerca)
  • size:                  //Tamaño de la imagen en pixeles (máximo 512×512)
  • maptype:          //Tipo de mapa (roadmap => Mapa para páginas web, mobile => Mapa para bajas resoluciones)
  • markers:          //Marcadores dentro del mapa. (ej: markers=40.702147,-74.015794,blues|40.711614,-74.012318,green)

WordPress 2.5: Media Library

25 Feb

aNieto2k hace 5764 días en: webdev, Wordpress

+ 6

Alex publica este fin de semana una novedad para el WordPress 2.5 que muchos estamos esperando, un Media Library. En sí, no es más que un sistema de visualización del contenido multimedia subido a nuestro blog. Una forma más visual y cómoda de gestionar nuestros fichero subidos.

media_library.JPG

Además, me ha gustado mucho una opción nueva que se ha añadido al editor enriquecido de nuevos posts. Se trata de la posibilidad de trabajar a «Full Screen», ocupando la página entera para escribir nuestros posts, me ha recordado Google Docs cuando he probado a escribir algo.

full_screen.JPG

Como podemos ver la imagen habla por si misma, y el resultado es una pantalla completa para escribir lo que se nos antoje.

full_screen2.JPG

Pruebaló en AlexSeo. 

Curiosa utilidad SVG para Firefox 3.0

21 Feb

aNieto2k hace 5768 días en: estandares, Programacion, web, webdev

+ 4

Desde que aparecieron las primeras noticias sobre Firefox 3.0, me he volcado a conocer nuevas funcionalidades y estar, más o menos, atento a todo lo que va saliendo sobre él. Entre todas las nuevas funcionalidades encuentras de todo, hasta esta curiosa funcionalidad SVG. 

<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
  <g transform="translate(300, 0) rotate(20)">
      <foreignObject x="10" y="10" width="800" height="800">
            <body xmlns="http://www.w3.org/1999/xhtml">
	            <iframe src="https://www.anieto2k.com" style="width:700px;height:700px"></iframe>
	 </body>
	</foreignObject>
     </g>
</svg>

[Ver Demo] (Requiere Firefox 3.0)

Esto es posible gracias a la implementación de la especificación 1.1 de SVG (Scalable Vector Graphics) por parte del equipo de Mozilla y al objeto foreignObject de SVG. No le encuentro ninguna funcionalidad práctica salvo el cargar el CPU del cliente, pero como curiosidad vale ¿no?

↑ ← Anterior
wordpress. themes wordpress.plugins wordpress.hacks Wordpress webkit usabilidad tweet themes Safari prototype plugins plugin PHP optimización Opera navegadores MooTools lightbox jquery.plugin jquery javascript itouch iphone internet explorer imagenes IE8 IE6 HTML5 HTML hack google.chrome google framework flash firefox3 firefox firebug estandares CSS3 CSS canvas ajax Accesibilidad 2.7 2.6