Estos premios son otorgados por diseñadores, agencias y bloguers más reconocidos internacionalmente, puedes ver el jurado en este enlace. Y juzgan los proyectos por las siguientes criterios:

• Diseño
• Creatividad
• Contenido
• Usabilidad

En portada nos aparecen las webs que han sido premiadas por días, la interface es muy amigable y con un diseño que me ha encantado, asi como sus efectos con jquery.

Y sobretodo es un sitio altamente recomendado para buscar inspiración web entre los mejores diseño de websites.

Viccarbe es una empresa Valenciana dedicada al diseño de mobiliario de gama alta para el hogar e todo tipo instalaciones como son oficinas, restaurantes, hoteles, etc…

Una colección para quien vive el presente y piensa en el futuro, Viccarbe.

Enlaces interesantes:

1. Viccarbe en la voz de Galicia
2. Viccarbe en Bureau Veritas

Para averiguar las direcciones ip de nuestros servidores DNS, puedes
ejecutar la orden nslookup en ms-dos.

En Microsoft Windows, tendría que seguir el siguiente proceso:

- Pulse sobre Inicio.

- En Ejecutar, escriba “cmd” y pulse enter.

- En la ventana de ms-dos que se le muestra, escriba:

Ejemplo: nslookup ns63.1and1.es

y pulsa enter.

- Obtendrá una dirección y un “Address” que es la IP correspondiente al
dominio / subdominio que has indicado.

Espero que sirva de ayuda.

Empezaré como siempre con las librerias que vamos a utilizar.

1. Jquery
2. Ui.base.js
3. Ui.base.draggable.js
4. Ui.base.droppable.js

Con estas librerias vamos a poder hacer unos efectos muy interesante, a continuacion os voy a detallar un poco un codigo de ejemplo.

HTML

Javascript

Vamos a explicar por partes cada elemento.
.dragable ( con esta opcion le damos la propiedad Dragg al objeto con clase .block, es decir el div con la  clase .block se puede arrastrar y mover por la pantalla)
.helper:’clone’ <- Evidentemente como su nombre indica le hemos dicho que a la hora de arrastar clone el objeto a arrastrar.

Por otro lado tenemos las ordenes para el objeto con clase .drop:
accept:’.block’ <- le indicamos que el objeto solo aceptara aquellos con clase .block, es decir que solo podremos arrastrar a la zona .drop objetos con clase . block
activeClass: ‘nombre de clase’ <- obvio no? clase asignada al objeto con clase .drop cuando esta activo.
hoverClass:’nombre de clase’<- lo mismo que la anterior pero en este caso cuando situamos el objeto por encima de la zona .drop
drop:function<- se utiliza esta opcion para decirle que vamos a hacer cuando el objeto sea arrastrado a la zona .drop.

$(this).append(”<br>Dropped!”); <- obviamente en este ejemplo cuando arrastramos .block sobre .drop en el div con clase .drop se le añade el mensaje Dropped y un salto de linea.

Imaginaros ahora las posibilidades, lo sencillo que ha sido darle a un objeto la movilidad y lo sencillo que es asignar una zona para dejar esos objetos, evidentemente esa zona la podemos definir dentro de un css, otorgandole el estilo que nos venga bien en cada momento, como veis es muy sencillo hacer un carrito de compra al mas puro estilo arratrar y soltar.

Este plugin de Jquery tiene multiples opciones asi como no solo con objetos si no tambien con listas o tablas, de esta forma resulta muy util por ejemplo si queremos ordenar una lista o cambiar los contenidos de una celda  otra en una tabla.

Aqui os dejo un ejemplo,

http://docs.jquery.com/UI/Droppables

En el siguiente tutorial explicare algunos metodos mas de arrastrar y soltar objetos, y haremos un carrito de compra arrastrando productos del escaparate a la cesta, saludos.

Daniel.

1. Pegando este codigo en la barra de dirección cuando tengas situada la localización en google maps

2. En el código que obtienes pinchando en "Enlazar con esta página" que tienes en la esquina superior derecha de Google Maps.

Te vendrá bien si deseas utilizar googlemaps en Flash mediante el componente GMap V. Dispones de un buen tuturial de configuración en español en http://blog.unijimpe.net/google-maps-en-flash

Como siempre necesitaremos una serie de archivos que aquí os enseño.

La magestuosa
- Jquery.js
- MultiFile.js
- Metafile <-- Lo necesitaremos para ahorrar un poco de trabajo ( en otro Post comentare su funcionamiento).

Y ahora el código para empezar y algunos ejemplos.

METODO 1.

Aquí os voy a explicar un poco los argumento que se han usado y para lo que valen, este ejemplo utiliza el plugin METADATA ¿Por que? por que pasamos los argumento directamente dentro de la class del objeto tipo FILE.

En primer lugar podeis observar que dentro de la class metemos varias cosas directamente.
Accept:'Tipo de extension | Tipo de extension, etc..' Soporta todas las extensiones graficas, tambien podriamos poner las extensiones tipo word o txt, etc...
remove:'Texto', es el texto que saldra junto al fichero seleccionado en caso de que no queramos subirlo.
Selected:'texto: $file' <-- Igual que el anterior la variable $file contiene el nombre del archivo seleccionado.
denied:'texto $ext'<-- el texto que sale cuando el archivo tiene una extensión no válida, la variable $ext contiene la extension del archivo que ha intentado subir.
duplicate:'texto:\n$file!' <-- texto bla bla, y el nombre del archivo.

METODO 2 ( sin el plugin METADATA ):

HTML

JAVASCRIPT

Evidentemente en este tutorial no voy a explicar el funcionamiento del framework Jquery, para los que aun no sepan como funciona pueden buscar en google manuales o esperar que en breve hare un pequeño tutorial para explicar el funcionamiento, nomenclaturas, usos y demas para programadores novatos.

En este ejemplo la funcion Jquery cuando se ejecuta al comienzo de la carga coge los elementos que contengan "<span style="color: #900;">#PortugueseFileUpload</span>" y le da la propiedad multifile del plugin, lo único que comentare aquí es la nueva opción
Max: 'Numero', <-- el numero es la cantidad de archivos que dejara subir de una vez.

METODO 3
HTML

JAVASCRIPT

En este ejemplo es un claro uso de Jquery en multi seleccion de objetos y agregarles a estos la opcion de multifile.

La demo de todo esto lo podeis ver en la pagina donde he traducido todo esto.
- Fyneworks

Aquí termina el tutorial.

ATENCIOOONN, por supesto javascript no está preparado para subir archivos a un servidor, este ejemplo sólo funciona con la siguiente rutina PHP, ASP; ETC.. que son los encargados de hacer estos menesteres, en el siguiente tutorial explico cómo subir archivos al modo FLICKR o GMAIL un saludo.....

DANIEL

Además de los marcadores de enlaces generales, existen servicios especializados en diferentes áreas como libros, vídeos, música, compras, mapas, etc. Los marcadores sociales también forman parte de los marcadores sociales de noticias como Digg.com.

En un sistema de marcadores sociales los usuarios guardan una lista de recursos de Internet que consideran útiles. Las listas pueden ser accesibles públicamente o de forma privada. Otras personas con intereses similares pueden ver los enlaces por categorías, etiquetas o al azar.

También categorizan los recursos con 'tags' o 'etiquetas' que son palabras asignadas por los usuarios relacionadas con el recurso. La mayoría de los servicios de marcadores sociales permiten que los usuarios busquen marcadores asociados a determinadas 'tags' y clasifiquen en un ranking los recursos según el número de usuarios que los han marcado.

Su popularidad va creciendo y la competición ha hecho que los servicios ofrezcan algo más que compartir marcadores y permitan votos, comentarios, importar o exportar, añadir notas, enviar enlaces por correo, notificaciones automáticias, rss, crear grupos y redes sociales, etc.

Ventajas:

Este sistema tiene varias ventajas sobre otras herramientas tradicionales como los motores de búsqueda. Toda la inclusión y clasificación de recursos está realizada por seres humanos en lugar de máquinas que procesan la información de forma automática según un programa.

Además de esto, los usuarios marcan los recursos que encuentran más útiles, por lo tanto, los recursos más útiles son marcados por más usuarios. De esta forma se crea un ranking de recursos basado en el criterio de los usuarios. Es una forma de medir la utilidad de los recursos mejor que la que proporcionan otros sistemas automatizados como los que se basan en el número de enlaces externos, etc. (Fuente: wikipedia)

Aqui teneis los más populares:

• Mister Wong
• del.icio.us
• de.lirio.us

Manos a la obra... La utilidad que os presento es Jeditable, un plugin de Jquery que nos permitira la edicion in situ de etiquetas en nuestra página web de esta forma podremos hacer unos CMS mucho mas vistosos y atractivos tanto para nuestras páginas como para nuestros clientes.

Necesitaremos.

Jquery - Descarga.
Jeditable - Descarga.

Voy a basar este tutorial exclusivamente a Jeditable dando por sentado que conoceis un poco el framework Jquery y sus nomenclaruras.

EJemplo básico:

Codigo HTML:

Codigo JAVASCRIPT

Con esto le hemos dicho a Jeditable que escoja todos los elementos con clase "edit" y les de las funcionalidades de Jeditable, entre parentesis ponemos que programa php ha de recibir los datos y gestionarlos "http://www.example.com/save.php".

Un ejemplo visual sacado del creador de Jeditable.

Pero esto no queda aquí Jeditable tiene multiples configuraciones para poder realizar todas las tareas más basicas de edición de una pagina, tanto como el uso de SELECTS, TEXTAREAS, control sobre los eventos, CLICK, DOBLECLICK, HOVER, ETC.. A continuación os hago un breve resumen de todas opciones, para mas información podeis ir a la web del creador, está en ingles pero es bastante visual.

En primer lugar haré una breve descripcion de las opciones y las posibilidades de cada una.

'Type': 'Select' (para que al editar salga una lista SELECT), 'Text' (para un cuadro de texto), 'TextArea' (obviooooooo)

'Cancel': 'Etiqueta' (Saldrá un boton de cancelar y podremos darle el nombre que deseemos'

'SUbmit': 'OK' (igual que el anterior pero para que salga un botón de confirmar'

'Indicator': ' ' (Es lo que sale cuando se está procesando la etiqueta "... Cargando", "<img src="mi_imagen.jpg" />)

'tooltip': 'Mensaje' (Obviamente saldrá cuando nos situemos por encima de la etiqueta el texto escrito en Mensaje)

'loadurl': 'url' (En este parametro pondremos la direccion de una url en caso de que queramos generar ese parametro dinámicamente "ejem:carga.php")

Estas son la utilidades basicas a continuación os explico varios usos mas, por ejem la introducción de clases dentro de las propias ediciones.

En este ejemplo a todos los elementos con la clase ".editable" le añadimos la clase ".someclass"

¿Util verdad? Ahora os mostrare algunos ejemplos mas del uso de Jeditable añadiendo las opciones que os he mostrado anteriormente.

SELECT

Lo mismo a todas los objetos con clase editable le añade la opcion de poder editarlas y para ello en la etiqueta data le añade la, "'opción' : 'valor', 'opcion':'valor'" separando con comas cada elemento.
Le dice que es un tipo SELECT ( muestra objeto de formulario SELECT).
Le dice que quiere un boton de confirmación con la etiqueta 'OK'.

Además podemos hacer que esos mismos datos que hemos picado a mano en la etiqueta "data", los saque dinámicamente de un php por ejem:

El archivo Php. (miarchivo.php)

JAVASCRIPT

Aqui podemos observar que el campo SELECT los datos los obtiene de miarchivo.php

TEXTAREA

Podemos observar el type le dice que sea un text area.
No comentare lo del submit.
Observamos la inclusión de una nueva opción "callback" esto se utiliza para un manejo mas minucioso del flujo de datos, por ello introducimos una funcion dentro del propio Jeditable.

Abreis observado que en ningún momento e usado la etiqueta (type : "TEXT") es la que sale por defecto al crear el objeto .editable.

Por último os enseñare los eventos que se pueden usar sobre este plugin.
Para ello utilizaremos la opcion "event:'evento'"
Codigo

Cuando agamos doble click sobre el objeto se podrá editar.

Cuando pasemos el raton por encima del objeto se podrá editar.

Para finalizar la pregunta del millón, ¿Como localiza mi programa php que variable ha de modificar?, pues bien dentro de la codificacion html Jeditable pasará como variables por defecto el ID y VALUE=a los datos modificados.

Ejemplo de recepción del php (Maskadito no os quejareis :>)
save.php

Bueno aquí os dejo otra vez la demo para que podais observar las posibilidades un saludo y hasta otro Post.

Daniel Perez.

Traducido al castellano por lordmax.org