Avisar de contenido inadecuado
Expand

Libro manual jQuery UI 1.7

jQuery UI 1.7Hace unos meses cayó en mis manos este fantástico libro: jQuery UI 1.7 de Dan Wellman. Y lo llevo usando casi a diario desde entonces puesto que estoy metido en un proyecto en el cual usamos casi toda la librería (Dialog, Slider, Tabs, Sortable...). Al principio pensé que no le daría uso puesto que existen demos y documentacion de jQuery UI, pero desafortunadamente no es tan buena como me esperaba.

Creo que una de las partes que más conflicto crea entre los usuarios del framework es la cantidad de clases que añade a los elementos involucrados. Y es cierto, añade muchas, pero todas ellas necesarias. Gracias a eso te permite controlar a tu gusto la interfaz. Ellos te proporcionan una serie de temas, los cuales puedes personalizar mediante el jQuery UI ThemeRoller, pero hay casos en los que te quieres salir de la norma y dar, en un caso concreto, un estilo diferente. Conociendo bien el porqué de cada clases es muy fácil, y para este caso el libro me ha venido como anillo al dedo. He podido aprender, ya en el capítulo 2, el CSS Framework, algo imprescindible para dotar a tu interzar la personalidad que buscabas.

Por otro lado el libro me ha venido muy bien para entender paso a paso el funcionamiento de los widgets. Con lo que he podido crear mis propois plugins para automatizar ciertos procesos, como por ejemplo la creación de sliders, o paneles configurables mediante sortable.

La verdad que siendo sincero, si piensas desarollar algo con jQuery UI 1.7 y quieres hacer bien, te recomeiendo este libro.

{
}
Expand

Javascript y jQuery: Consejos y Buenas Practicas (Parte II)

Hace unas semanas iniciamos una serie de 2 posts para hablar de lo que consideramos que son unas buenas practicas para desarrollar codigo Javascript con la libreria jQuery.

http://stc.obolog.net/multimedia/fotos/309000/308801/308801-209198.jpg

Con este post cerramos la serie y profundizamos un poco más en el tema

En el primer post de esta serie comentamos algunas generalidades que nos pueden servir de base a la hora de desarrollar un código JS eficiente. En este segundo post hablaremos de como solucionar de forma eficiente problemas concretos que nos solemos encontrar en nuestros desarrollos.

Asi que, ahi vamos...

Expand

Enlaces de la semana (semana 5 de 2010)

Comenza febrero y con ello inauguramos una nueva sección el en blog "Enlaces de la semana", en la que haremos un resumen de todos los enlaces que hemos ido poniendo en twitter (@pixelovers) y en la página Pixelovers en Facebook.

Javascript

CSS

HTML

Diseño

  • MagazineXpert, publicación para la comunidad hispanohablante de tecnologías y aplicaciones Adobe - http://bit.ly/cXaZP5.
  • A Set Of User Interface Design Elements (PSD) - http://bit.ly/d2Lg1V | Control buttons, info boxes, breadcrumbs, forms, scrollbars & more.
  • Color Theory for Designers, Part 1: The Meaning of Color - http://bit.ly/9ixnJb | Smashing Magazine.
  • Color Theory For Designers, Part 2: Understanding Concepts And Terminology - http://bit.ly/asn06E | Smashing Magazine.
  • 100+ Seamless Patterns Great for Creating Website Backgrounds - http://bit.ly/a9JoCE.
  • Beautiful Free Vector Downloads Roundup - http://bit.ly/9jQ8o8.

Utilidades web

  • Using firebug lite on Google Chrome. Originaly made by Firebug Team - http://bit.ly/doKjxi.
  • How to Use sIFR 3 - http://bit.ly/dlGflM | Video explicativo de este sistema que te permite usar cualquier fuente en la web
  • Best Practices To Develop Perfect Websites for iPhone and Mobile Devices - http://bit.ly/bFzPDd

Espero que os resulten interesantes y si queréis descubrir estos enaces antes siguenes en Twitter @pixelovers y hazte fan de la página Pixelovers en Facebook.

Expand

Nuevos campos de formulario en HTML5

Leo en anieto2k todo lo que necesitamos saber sobre los formularios HTML5, un artículo de Dive into HTML5 titlulado A Form of Madness. Habla de atributos y valores de atributos ya existentes, que abren un nuevo mundo alrededor de los formularios. Desafortunadamente no lo soportan casi ningún navegador, pero poco a poco todos van implementándolo.

Actualización: Como nos indica neiker, en Buffer Overflow encontramos una review en castellano sobre HTML5: Novedades en los formularios.

{
}
Expand

jQuery 1.4: 15 nuevas características que debes conocer

Estamos preparando un análisis de la nueva versión jQuery 1.4. Pero mientras la probamos y estudiamos las nuevas funcionalidades, leo en Intenta un interesante artículo sobre jQuery 1.4 Released: The 15 New Features you Must Know. ¿Conoces ya estas nuevas características?

  1. Pasar atributos a jQuery(...)  – jQuery( html, propiedades )
  2. ¡Tódo "hasta que"!  – .nextUntil([ selector ]), .prevUntil([ selector ]) y .parentsUntil([ selector ])
  3. Enlazar múltiples controladores de eventos – .bind( eventos )
  4. Per-property-easing (Facilitando por propiedad) – .animate(propiedades, opciones)
  5. ¡Nuevos eventos live! – .live("submit|change|focusin|focusout", controlador)
  6. Control del contexto de una función – jQuery.proxy(función, contexto)
  7. Demora una cola de Animación – .delay(duración, [ nombre de la cola ])
  8. Comprobar si un elemento tiene algo – .has(selector) y jQuery.contains(contenedor, contenido)
  9. Desenvolver elementos – .unwrap()
  10. Eliminar elementos sin borrar datos – .detach([ selector ])
  11. Mejoras en index(...) – .index(selector)
  12. Los métodos de manipulación DOM aceptan "callbacks":
  13. Determinar el tipo del objetojQuery.isPlainObject(objeto) y jQuery.isEmptyObject(objeto)
  14. Mejoras en Closest(...) – .closest(selector, [ contexto ])
  15. Nuevos eventos! focusIn y focusOut – .focusin(manejador) y .focusout(manejador)
Expand

Interfaces gráficas de usuario (plantillas de diseño)

Ahora que empieza un año nuevo es un buen momento para hacer nuevos propósitos, y qué mejor que mejorar tus diseños siguiendo una retícula o desarrollando para nuevos dispositivos. Os traemos unas cuantas plantillas que pueden hacerte más facil llevar a cabo este propósito de año nuevo.

Navegadores de escritorio

Retícula de 960px

960px Grid

Es una buena base para tus diseños web puesto que es una medida muy versatil que te permite multiples divisiones en columnas de diferentes anchos. Además este ancho cabe perfectamente en los navegadores a una resolución de pantalla de 1024x768 px., que es la más estandar actualmente, quitándo bordes y barras de scroll.

Más info | Plantilla de retícula de 960px.

Descargar 960px Grid.

Elementos del navegador web

Si quieres dotar a tus diseños de algo más de realismo puedes presentarlos incrustados en una ventana de navegador o añadiendo elementos de formulario, como botones, inputs, barras de scroll, etc... Siendos sinceros la interfaz gráfica de Mac OS X es la más bonita y apreciada por los diseñadores, pero de todas formas os dejamos las plantillas de los más habituales.

Navegadores en Mac OS X

Navegadores en Windows Vista

Navegadores en Windows XP

Dispositivos Móviles

Cada vez es más frecuente el uso de móviles para navegar por internet, por ello la necesidad de crear una versión móvil de tu web se está conviertiendo en algo indispensable. Debido a la multitud de dispositivos diferentes que existen tenemos la opción de crear una web genérica, o si le queremos dotar de valor añadido a nuestra web, podemos adaptar nuestro sitio a cada uno de los diferentes dispositivos.

Plantilla de la interfaz de iPhone

Nuestro compañero Albert García, ya nos habló sobre Plantilla para photoshop de la interfaz de iPhone. Y ahora os traemos el PSD del la última versión del sistema operativo Móvil de Apple, el iPhone OS 3.0, que viene con nuevos elementos gráficos como:

• Mapa y elementos del mapa, inluido el enrrollado
Elementos para copiar y pegar
• Editor de barra de línea de tiempo
• iPhone Horizontal
• Barras de paneles horizontales y teclados

iPhone GUI 3.0

Más info | iPhone GUI PSD 3.0.

Descargar iPhone GUI PSD 3.0.

Plantilla de la interfaz del iPad

Si tienes pensado desarrollar también para el iPad seguro que la anterior GUI se te queda corta. Así que te dejo una específica para el iPad.

Más info | iPad GUI PSD.

Descargar iPad GUI PSD.

Plantilla de la interfaz de Andrid

Los chicos de Smashing Magazine, que recientemente han publicado The Smashing Book, nos dejan esta interfaz completita para su uso libre.

Android GUI

Más info | Android GUI PSD Vector Kit.

Descargar Android GUI PSD Vector Kit.

Plantilla de la interfaz de Palm Pre

La gente de teehan+lax, los que han desarrollado iPhone GUI PSD 3.0., nos vuelve a sorprender con Palm Pre GUI PSD.

Palm Pre GUI

Más info | Palm Pre GUI PSD.

Descargar Palm Pre GUI PSD (tipografía Coconut).

Descargar Palm Pre GUI PSD (tipografía Avenir).

Expand

RMSForms, framework CSS para formularios

Robert M. Sandy Jr.Si eres desarrollador web, seguro que alguna vez has maldecido cuando te ha tocado maquetar formularios. Y es totalmente normal, a veces se convierte en un quebradero de cabeza suplicio. Robert M. Sandy Jr. ha pensado en ello y por eso a desarrollado RMSForms, un framework CSS para ayudar a dar estilo a los molestos formularios. No solo se centra en las incoherencias de los navegadores, si no también en conseguir una disposición correcta tanto visualmente como semánticamente. Así que si tienes que hacer una web con muchos formularios, puedes plantearte utilizar esta hoja de estilo de menos de 100 líneas, sin comentarios, y un tamaño de 8Kb.

Está basado en una estructura HTML muy simple:

<fieldset>
<legend></legend>
<ul class="form [modifier]">
<li><label class="[label modifier]"></label><input/></li>
</ul>
</fieldset>

Donde los modificadores están compuestos por 3 letras:

  • H = Bloque Horizonal
  • V = Bloque Vertical
  • I = Inline

Y se pueden generar los siguientes:

  • vvv – Vertical <li>, Vertical <label>, Vertical campos de formulario
  • hvv – Horizontal <li>, Vertical <label>, Vertical campos de formulario
  • hii – Horizontal <li>, Inline <label>, Inline campos de formulario
  • hhh – Horizontal <li>, Horizontal <label>, Horizontal campos de formulario
  • vii – Vertical <li>, Inline <label>, Inline campos de formulario
  • vhh – Vertical <li>, Horizontal <label>, Horizontal campos de formulario

Si queréis ver el resultado, aquí tenéis un ejemplo de RMSForm.

Expand

Crear un CSS inicial con PrimerCSS

PrimerCSSSi te da miedo enfrentarte a una hoja de estilos en blanco, no sabes por donde empezar. ¿Qué  elementos tienes en el HTML? ¿Qué clases has usado? ¿Qué identificadores empeaste? Y también si no te quieres dejar ningún elemento de la página sin estilo una buena forma de empezar es con PrimerCSS.

Personalmente le veo más utilidad cuando quieres hacer una hoja de estilo para una web ya existent, más que para empezar un proyecto. Por ejemplo es muy útil para hacer una plantilla de Wordpress u otro CMS. Si te gustaría crearte tu propio CSS para Stylish no te dejarías nada por diseñar. ¿Para qué utilizarías tu PrimerCSS? ¿Le ves utilidad o prefieres ir sacando tu mismo los selectores?

Expand

Feliz 2010

Feliz 2010

El año 2009 ha sido importante para pixelovers porque hemos consegudo formar un nuevo equipo de editores, Juanma Garrido y Jorge del Casar, para poder devolverle la actividad al blog. Estamos seguros que 2010 será un año rico en artículos de calidad y más frecuencuentes.

Si no lo has hecho ya, síguenos en Twitter (@pixelovers) o suscríbete a nuestro RSS, para estar al día de todas las novedades de Pixelovers. Si quieres contactar con nosotros para propornernos nuevos propósitos para el año 2010 puede hacerlo comentando esta entrada o mediante el formulario de contacto.

¡Feliz 2010 a todos!

Expand

Geoposicionamiento web y la API de Google Maps V3

El otro día hablabamos de Cómo geoposicionar un dispositivo con el navegador, pero por si sola no podemos darle mucha utilidad, puesto que necesitamos ejecutar algo en el successCallback. Y aquí es donde aparece la nueva versión de la API de Google Maps V3. La API Javascript es muy parecida a su antecesora, la versión 2. Sin embargo ha cambiado mucho internamente, ya que ha sido diseñada para cargar más rápidamente, especialmente en navegadores móviles, como los dispositivos basados en Android y el iPhone™.

Una caracteristica muy destacable de esta nueva versión es que ha sido implementada usando un marco de trabajo MVC. También cabe descatacar la desaparición de API key, lo cual elimina trámites previos a la hora de implementar tu trabajo en diferentes dominios.

Ponerlo en marcha es realmente fácil. Sólo tienes que seguir estos 5 sencillos pasos:

  1. Incluir el código JavaScript de la API de Google Maps usando la etiqueta script
    <script
    type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
    </script>
  2. Crear un elemento div llamado "map_canvas" para contener el Mapa.
    <div id="map_canvas" style="width:100%; height:100%"></div>
  3. Crear un objeto en JavaScript para guardar una serie de propiedades del mapa.
    var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  4. Escribir una función de JavaScript para crear el objeto "mapa".
    function initialize() {
    var latlng = new google.maps.LatLng([latitud], [longitud]);
    var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions
    );
    }
  5. Inicializar el objeto mapa en la función onload del body.
    <body onload="initialize()">

Nostros, en Pixelovers, hemos querido ir un poco más lejos y hacer una prueba de integración con el borrador de la especificación de la API de Geoposicionamiento de la W3C. Como ya os dijimos la función successCallback necesitaba pintar los datos obtenidos en un mapa. Pues qué mejor hacerlo con la nueva API de Google Maps.

La demo consta de 2 partes, una primera que pretende simplemente mostrar la posición actual y gestionar los posibles errores. Y otra segunda parte que pretende dar una utilidad práctica a ese resultado. Por tanto, una vez geoposicionado, podrás filtrar una lista que aparece atendiendiendo al país donde te encuentras.

Nota: Solo se han usado para la demo los 3 países con más visitantes de Pixelovers, España, México y Argentina, al resto también os apreciamos, pero si no, la demo sería muy extensa.

Demo

¿Qué te parece la nueva versión de la API de Google Maps? ¿Ya la has probado? Cuentanos qué te ha parecido.