Latest Entries »

Como sabrán amigos soy fanatico de Linux, principalmente de la distros derivadas de Debian (Ubuntu) y leí un articulo donde se hacia referencia a la posibilidad de seleccionar la carpeta para compartir desde el menú contextual.

Esto implica una ventaja grande, ya que estuve probando (en post anteriores hice la comparación de diferentes servicios de nube “gratis”) y con la que oportunamente me habia quedado, era sugarsync.

En este caso, la plataforma de Dropbox trae consigo un script que mejora sensiblemente la accesibilidad de las carpetas dentro del entorno de Linux/Ubuntu.

View full article »

VNDesign Argentina

Slidy excelente plugin en jquery.

Realizando una búsqueda rápida de plugins para implementar en una solución que estaba desarrollando, me encontré con la necesidad de agregar al sitio un slide pero que sea ademas de configurable, estéticamente agradable y minimalista, sin tantas flechas, recuadros y demas.

Entre los resultados que googlee me interesé por la opcion de Washington Botelho, un plugin desarrollado bajo Jquery altamente configurable, mas que nada para lo que se necesita, y además simple.

La utilización de este plugin, Slidy fue realmente rápida y transparente, de hecho, no demoré mas de 10 minutos en dejar todo funcionando, con incrustado de código incluido.

Para iniciar tan solo llamamos (ademas de agregar, para los novatos, el jquery.js y el tag script) slidy de la siguiente manera:

$('.group').slidy({
    animation:  'fade',
    height:     97,
    width:      240
});

<div class="group">
    <img src="image-1.jpg"/>
    <img src="image-2.jpg"/>
    <img src="image-3.jpg"/>
</div>

<div class="group">
    <img src="image-2.jpg"/>
    <img src="image-3.jpg"/>
    <img src="image-1.jpg"/>
</div>

<div class="group">
    <img src="image-3.jpg"/>
    <img src="image-1.jpg"/>
    <img src="image-2.jpg"/>
</div>

Algunas opciones seteadas por default son:

action:       'mouseenter'
Acion para cambiar el slide. ('mouseenter', 'fade' or 'slide')
animation:    'normal'
Tipo de efecto de animacion. ('normal', 'fade' or 'slide')
children:     'img'
El elemento donde la transición ocurrirá.
cursor:       'default'
Tipo de cursor que se mostrara cuando se pase por encima del slide.
height:       200
Altura del banner/imagen.
menu:         false
Crea automaticamente un menu.
pause:        false
Detiene la transición cuando el mouse pase por encima.
speed:        600
Duracion en milisegundos en el efecto de transicion.
target:       ''
Tipo de apertura para el link vinculado al banner/imagen/menu.
time:         3600
Duracion en milisegundos de la transicion del banner.
width:        500
Ancho del banner.

Como verán es bastante amplio, y puede acceder al sitio 

Por cierto costo? bajo MIT lo unico que si les resolvió algun inconveniente o problema o les agilizó el trabajo, pues, le pueden donar un CAFE. ;)

Bueno, retomamos la costumbre de ir analizando recursos en este inmenso mar que denominamos internet, y la generosidad de los códigos que abundan por aqui, me tomaré un poco de tiempo para analizar algo tan mítico, como el mismo problema definido en el título.

Sombras bajo CSS, quien no ha renegado recientemente o alguna vez con ello. Esto implicaba un trabajo arduo entre el Photoshop y el manejo del CSS para que el diseño final quedara bien.

Ahora bajo CSS3 no es necesaria la implementación de imágenes para lograr este efecto, de hecho, como Nicolas Gallagher transcribe en su blog, es mucho mas simple lograrlo con lineas de código bajo CSS.

En su blog, principalmente en el articulo que hace referencia, nos brinda un ejemplo muy claro de como se implementa y se vé correctamente esta aplicacion de css en http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

Ni lerdo ni perezoso, opté por analizar que navegadores soportan CSS3(mas que CSS es el efecto en si lo que soportarían, ya que según los navegadores las características soportadas varían en función a la empresa y que hayan decidido tomar, ya que del vamos todavía no hay concenso en el empleo unificado de atributos)  me dí con el siguiente resultado:

  • Safari 4 y versiones superiores (lanzamiento inicio 2009)
  • Opera 9 y versiones superiores (lazamiento mediados de 2006)
  • Firefox 3.5 / Firefox 3.6 / Firefox 4 (lanzamiento mediados 2009)
  • IExplorer 9 (15 sept. de 2010)

y la parte triste, pero celebre de los no soportados Seamonkey 1.1 / IExplorer 7 / IExplorer 8 (19 de marzo de 2009)

(Notese la inclusión del Seamonkey como premio consuelo y  la tan obvia tardanza ciertas implementaciones que forman parte de “CSS3” en IExplorer)

Les dejo el enlace para que puedan estudiarlo e implementarlo en sus sitios y proyectos. AQUI

Saludos!

 

 

 

Hace unos dias que no posteo mucha info, por que estoy con una diplomatura que me lleva algo de tiempo, pero es entretenida. Luego realizaré algunos posteos al respecto, pero vamos al grano, lo que me llamó la atención.

Googleando y Smasheando por alli, encontre un titulo interesante de Frameworks para trabajar bajo HTML5 y CSS3 y la idea no parece del todo mala, mas sabiendo que de a poco, la mayoria de los ultimos navegadores, Incluyendo por fin IExplorer 9 soportan las caracteristicas de HTML5.

Principalmente se ven beneficiados los equipos de bajos recursos, como los moviles, los cuales de una manera u otra terminan resolviendo las diferencias con los navegadores para escritorio gracias a la manera de procesar HTML en el equipo.

Justamente a consecuencia de la diversidad de navegadores uno de los frameworks que no le pierdo de vista, es el Modernzr.

View full article »

Hoy gracias al blog de http://morris-photographics.com les adjunto un listado completo de la combinación de las teclas para mejorar la rapidez de trabajo con Adobe Photoshop CS4

Se trata de 4 hojas con los atajos fundamentales, con lo cual se puede mejorar sensiblemente el rendimiento de trabajo, y evitar “desplazarse” de aqui para allá con el puntero del mouse.

En efecto, la mejor manera de aprenderlos, es ponerlos en práctica.

View full article »

Es muy conocido hace tiempo que los sitios desarrollados bajo la tecnología de Adobe Flash, son sitios muy vistosos, con gran capacidad de interacción gráfica, y animaciónes que aseguro a mas de uno ha dejado pasmado al pensar en implelentar estas soluciones pero a nivel HTML.

Con el paso del tiempo y gracias a la generosa ambigüedad de Apple, en dejar libre el uso de la tecnología CANVAS bajo Webkit, la implementación de este bajo los nuevos navegadores con soporte HTML se esta logrando de manera exitosa. Agreguemos luego el soporte nativo para base de datos locales, soporte para reproductores inline y procesamiento de parte del navegador, se esta llegando a desarrollar webapps y webs con alta sofisticación tanto a nivel gráfica como de programación.

Por ese mismo lado existe una empresa (de hecho hay varias pero esta me llamó la atención por lo que ofrecía y ser pionera) que esta presentando de manera económica un generador de código HTML para el manejo de animación bajo HTML5

Jonathan Deutsch and Ryan Nielsen dejaron Apple hace un año para fundar Hype, uno de los primeros productos de esta clase. El concepto es ayudar y asistir a los diseñadores en la construcción de animaciones bajo HTML5, como oposición a Flash. Hype se vende por casi U$S30 y emplea Webkit para renderizar las paginas. Ellos resaltan la caracteristicas de que su producto no solo funciona en PC de escritorios y Mac sino tambien en IPad y Smartphones.

Bueno, vamos con algunos ejemplos del potencial HTML5, recuerdo que es necesario tener un navegador Webkit compatible (Chrome) o una de las ultimas versiones de Firefox o en su defecto IExplorer9:

http://www.openrise.com/lab/FlowerPower/

http://www.xs4all.nl/~peterned/3d/

http://bomomo.com/

http://openrise.com/lab/PlasmaTree/

http://tumultco.com/hype/gallery/BirthdayParty/BirthdayParty.html

http://tumultco.com/hype/gallery/WooGrit2/WooGrit2.html

http://tumultco.com/hype/gallery/BabyShower/BabyShower.html

Por ultimo, una sitio con aplicaciones desarrolladas bajo HTML5, tienen una serie de apps para probar.

http://www.canvasdemos.com/

Recuerdo, son tan solo codigo en HTML5 + Jscript + CSS cero Flash!

Saludos!

Bueno continuando con mi búsqueda de galerías e interfaces para la presentación de imágenes, me tocó esta vez la oportunidad de probar un carrusel.

Cloud Carrousel

Sinceramente no soy muy amante de los carruseles por sentir la sensacion de estar limitado a un entorno muy “circular”, en si esa es la idea, pero es algo que no me agrada del todo y menos tratándose de algo en 3d, ya que debe ser muy bien implementado como para no parecer tosco o de linea inferior.

Sin embargo, siempre existen excepciones a la regla y en este caso considero que es algo muy excepcional ya que me agrado bastante.

Se trata de Cloud Carrousel, un carrousel 3d personalizable, el cual se encuentra integramente realizado en javascript. La calidad final da la impresion que esta realizado en Flash, pero sinceramente, se logró un efecto muy acabado, e inclusive el hecho de scrollear el carrusel con la rueda del mouse es un detalle que suma a la impresión final.

Este carrousel ya se encuentra implementado en mas de una decena de sitios, lo cual lo hace efectivamente seguro para implelemtnar, ademas es personalizable, y como se observa en el sitio original mas que flexible.

Algunas de las características:

  • Funcion en la mayoria de los navegadores (IE6-IE9, Firefox (incl V4), Chrome, Opera, Safari).
  • Perspective 3d  bien lograda.
  • Posibilidad de generar auto reflections – no es necesario modificar las imagenes o agregar codigo.
  • Facil integracion con codificacion basica y validada en HTML y un pequeño codigo en JavaScript.
  • Jscript tan solo de 5Kb (minizado).
  • Degrade incluido aun con sin Javascript funcionando.
  • Accesibilidad completa aun sin emplear CSS o navegadores textuales.
  • Integrable con otros plugins ej:  Slimbox, preservando los links y eventos de mouse.
  • Soporte para rueda de scroll para mouse opcional. Version 1.0.2.
  • Lo mejor de todo es free.

Bueno, creo que tiene muchas características deseables, tan solo te falta probarlo… desde AQUI

Fuente: http://www.professorcloud.com/

Viendo dentro de los fotos y accediendo a diferentes recursos de galerias creadas en JScript, Flash, etc. ingresé a un galeria muy particular por sus características:

HTML5 compactible

Fallback en Flash para navegadores que no soporten HTML5

Muestra Imagenes, Video y Audio

Estética muy agradable

Facil de implementar

View full article »

A %d blogueros les gusta esto: