AJAX Upload Visit Source

.

AJAX file Upload Visit Source

.

AJAX file Upload Visit Source

.

AJAX file Upload Visit Source

.

AJAX file Upload Visit Source

.

AJAX file Upload Visit Source

Ahora que Apple ha lanzado oficialmente la iPad queremos empezar a diseñar para el.
El PSD se ha construido utilizando los vectores, así que es totalmente editable y escalable. Usted notará que hay algunos elementos nuevos de la interfaz con respecto a la interfaz del iPhone. El diseño de pantalla viable es el formato de 768 × 1024 por lo que nada de diseño en el archivo de Photoshop puede ser fácilmente traídos para el SDK.

Es 1.0, así que estoy seguro de que se dará cuenta de los elementos faltantes cuando comenzamos a usarlo.?

A continuacion les dejo el link de descarga.

Espero puedan sacarle mucha utilidad

Una fuente única puede ayudar a su documento de destacar y llamar la atención. Una fuente perfectamente adecuada puede ayudar a hacer un diseño atractivo y con éxito. Encontrar estas fuentes de alta calidad es una tarea más fácil con SearchFreeFonts.com. La nueva colección contiene más de 13.000 fuentes gratis.

Fuentes de dominio público pueden ser utilizadas con fines comerciales o no comerciales sin necesidad de adquirir el permiso de derecho de autor, siempre y cuando no se beneficiara de la utilización de la fuente. Información detallada del derecho de autor está disponible para fuentes individuales en el archivo readme.txt, o copyright.txt que se incluyen como parte del archivo .zip para descargar en formato comprimido.

Demo: http://www.searchfreefonts.com/

FormToWizard es un plugin Jquery que me ha llamado la atención ya que sale de lo común ofreciendo dividir formularios largos en tantos pasos como deseamos.

Supongamos que tenemos un formulario en donde el visitante tiene que completar su CV. En vez de hacer un formulario en donde le saquemos humo a la ruedita del mouse de tanto bajar, podemos dividir el mismo en Datos Personales, Formación Académica, Experiencia Laboral, etc. Su licencia de uso es gratuita.

Demo: FormToWizard
Implementación y Descarga: Plugin Jquery

Una de las buenas prácticas de Javascript es el uso de eventos para separar la estructura de la funcionalidad, en ella especificamos la funcionalidad que los elementos indicados deberán ejecutar al ser accionados.

Este uso de eventos, puede ser tratado de dos formas:

• Gestión de eventos
• Delegación de eventos

Ambas ofrecen el mismo resultado, aunque, como veremos una es más óptima que otra a la hora de gestionar grandes cantidades de elementos.

Para enteder las diferencias entre ellas, mejor ver unos ejemplos y luego los comentamos.

HTML

<ul id="nav">
 <li><a href="#hola">Hola</a></li>
 <li><a href="#hola2">Hola2</a></li>
 <li><a href="#hola3">Hola3</a></li>
 <li><a href="#hola4">Hola4</a></li>
 <li><a href="#hola5">Hola5</a></li>
</ul>

Gestión de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   var as = nav.getElementsByTagName("a");
   for (var x = 0; x < as.length; x++) {
     as[x].onclick = function(){
        alert(this.innerHTML);
     }
   }
</script>

Como vemos esta técnica se basa en asociar un evento a cada link del listado #nav. Esto nos hace tener que recorrer todos los enlaces que encontramos dentro del listado y asociarle el evento.

Delegación de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   nav.onclick = function(e){
      var e = e || window.event; // Obtenemos el evento
      var el = e.target || e.srcElement; // Obtenemos el elemento que lanza el evento
      alert(el.innerHTML);
   }
</script>

Con esta opción delegamos al elemento #nav la tarea de decidir que elemento se está ejecutando y la tarea asociada a ellos. Esto es posible gracias al orden de ejecución de eventos sobre varios elementos.

Rendimiento

He hecho una serie de pruebas, sobre este mismo código, añadiendo 300/900 y 5000 elementos.

Tenemos que partir de dos mediciones a tener en cuenta:

• Tiempo en aplicar los eventos
• Tiempo en ejecutar el evento

A simple vista ya podemos conocer el resultado, la primera opción se vé penalizada por tener que aplicar a cada elemento del listado la funcionalidad, pero una vez hecho esto, la ejecución rápida y simple, ya que está asociada al elemento.

Por otro lado, la segunda opción es mucho más rápida a la hora de asociar la funcionalidad al elemento ya que siempre, sin importar el número de subelementos haya,  será un único elemento al que asociar. Pero por otro lado nos encontramos con que la ejecución de la funcionalidad debe detectar el elemento y despues la funcionalidad asociada.

Conclusiones

Como siempre digo, no es una forma mejor que otra, son diferentes formas que al conocerlas nos permitirá decidir cual es la que más se ajusta a las necesidades de cada proyecto.

Fuente: www.anieto2k.com

A continuación puede encontrar más de 250 iconos de Navidad para su uso. Cada icono es de alta calidad y tiene un estilo único.

jParse es un plugin jQuery para analizar XML que trae el método .ajax de jQuery.

Se puede seleccionar el valor de cualquier nodo XML o parámetro de un nodo y puede devolver un HTML totalmente personalizado.

El plugin es muy flexible y ofrece características como:

* Las funciones de devolución de llamada en ejecución antes de que comience y después de que termine
* Limitando el número de items para ser procesados
* Con exclusión de los nodos XML con ciertas palabras, números o símbolos
* Devolviendo el número de items en un feed en cualquier lugar de su documento

Como jQuery el metodo .ajax no permite las peticiones Ajax entre dominios diferentes, el XML debe estar en el mismo dominio.

Para ver lo fácil que es para analizar un archivo XML con jParse, compruebe la demostración.

Fuente: www.webresourcesdepot.com

Esta vez les acercamos unas texturas de madera de alta resolucion y gratuitas las cuales pueden ser descargadas y utilizadas en sitios como imágenes de fondo por ejemplo, lo cual le dara mucha mas presencia e impacto a sus diseños web. Es una tendencia que seguro no va a desaparecer en un futuro próximo. Con un poco de ajuste, los paneles de madera de estas texturas se pueden transformar en mosaico de imágenes de fondo  y en el impresionante tamaño de 3264 × 2448 píxeles son geniales para sus proyectos de impresión también.
Como siempre estas texturas son gratuitos para uso personal y comercial, sin la necesidad de crédito.

Fuente y descarga: www.fudgegraphics.com

Encontramos via el blog elwebmaster este genial post traducido al español en el que se ven los detalles mas importantes referidos al tema.

Antes de empezar, veamos lo que vamos a crear:

API Google Maps API

La API Google Maps te permite embeber mapas directamente en tu sitio web. Sólo se necesita un poco de JavaScript, y algo de CSS para embellecer. Recientemente ha sido lanzada la Version 3 de la API Google Maps que es la que vamos a utilizar.

Obteniendo las coordenadas

Como seguramente no conocen las coordenadas precisas de su locación, les explicaremos una forma rápida que Google ha puesto a nuestra disposición para conocerlas. Cuando conoces la dirección exacta, puedes ingresar una URL de esta forma:

Cuando ingreses esto en tu barra de direcciones, verás lo siguiente:

Las coordenadas del cuartel general de Apple en Cupertino

El primer número es el código de estado, y 200 quiere decir que todo está bien. El segundo número muestra cuán precisa es la dirección, en este caso el número es 8, que es bastante bueno. Los últimos dos números son latitudes y longitudes, que son los números que necesitamos.

Añadiendo el mapa a tu web

Abre tu editor HTML favorito y crea un archivo HTML estándar con codificación UTF-8. Primero que nada es necesario crear el puerto de visualización y decirle a nuestro archivo HTML que obtenga el archivo Javascript del código Google. Añade estas líneas entre <head> y </head>:

Luego de la URL, notarás sensor=false. Dado que no utilizamos ningún sensor, como un GPS, para localizar el lugar, esto se programa en false.

Justo debajo de lo que hemos insertado, escriban lo siguiente:

En la línea 2 creamos la función initialize(). Dentro de esta function vamos a definir las configuraciones básicas del mapa. En la línea 3 creamos una nueva variable, latlng. latlng que representa las latitudes y longitudes. La variable contiene las coordenadas que utilizaremos como centro de nuestro mapa.

Luego de esto creamos la variable settings. Aquí tenemos muchas opciones.

• zoom específica cuánto zoom tundra el mapa.
• center específica nuestro centro. Al escribir latlng, nos referemos a la variable que hemos creado antes y se utilizará la coordenada dentro de ésta.

El último código cambia el diseño del mapa para que sea un poco más minimalista. Los controles en la esquina superior derecha (Map, Satellite, Terrain) se cambian por un menu desplegable y los controles de navegación/escalamiento en el lado izquierdo se cambiar por controles pequeños.

mapTypeId: google.maps.MapTypeId.ROADMAP define que nuestro mapa debe ser del tipo ROADMAP – lo puedes cambiar por SATELLITE, HYBRID o TERRAIN.

Debajo del código anterior, escriban esto:

Este código crea la variable map, y define que el mapa debe utilizar las configuraciones que hemos creado.

Escriban

Para terminar la función, y en <body>, escriban esto:

Al hacer esto le decimos a nuestro sitio que ejecute la función the initialize() al cargar, y que inserte un <div> con el tamaño que deseamos que tenga nuestro mapa.

Añadiendo marcadores

Ahora debemos añadir algunos marcadores. Comencemos por crear los estándar y luego los personalizaremos.

Justo debajo de:

Inserten el siguiente código:

Primero, hemos creado la variable companyPos, dónde especificamos la posición del marcador. Luego hemos creado al marcador en sí utilizando la variable companyMarker.

Personalizando los marcadores

Podemos hacer mucho más bonitos nuestros marcadores. Simplemente creemos una imagen en Photoshop con un tamaño de 100×50 pixeles, y creemos algo similar a esto:

Luego, creemos una sombra para la imagen:

Para añadir estas imágenes como marcadores, tenemos que cambiar el código del marcador por esto:

La variable companyImage apunta al nombre de la imagen logo. Luego define el tamaño, origen y el tip de la imagen (dónde estará la imagen añadida a la coordenada). Luego, hacemos exactamente lo mismo para la sombra en la variable companyShadow. En la variable companyMarker añadimos icon y shadow, y listo.

Ahora, si actualizan tu sitio verás que el marcador ha cambiado por su propio logo. Para añadir más marcadores, sigan simplemente el mismo método, cambiando los nombres de las variables.

Si tienen dos marcadores muy cerca el uno del otro, quizá deban agregar algo de z-index. El marcador con el z-index más alto, es el que más arriba está:

Añadir zIndex nos permite seleccionar qué marcador debe ir arriba.

Añadiendo cajas de información

Para añadir una descripción de tu compañía cuando un visitante hace clic en el logo podemos agregar un infobox. Con la API Google Maps esto es fácilisimo.

Peguemos este código luego de definir la variable map:

Para hacer que las cajas de información aparezcan al hacer clic en nuestro logo, simplemente debemos añadir este código justo antes del último } en la función initialize():

Para hacer un poco más bonita la caja de información, añadamos algo de estilo en nuestra hoja de estilos:

Y ahí lo tienen. Un Google Map bonito y fácilmente añadido en su sitio web o blog.

Descarga

Para descargar los archivos de muestra hagan clic aquí.

Fuente: Stiern