Os deseo Feliz Año 2010 a todos los que de vez en cuando pasáis por aquí y leéis algo ! Un saludo y disfrutad de esta maravillosa noche !
Leia Mais…jueves, diciembre 31, 2009
martes, octubre 13, 2009
jueves, octubre 08, 2009
Obtener Huso en Google Maps
cómo obtener el HUSO a partir de la latitud y longitud:
1: /* devuleve el HUSO */ 2: function getHUSO(lat, lon){ 3: var txtHuso = "S"; 4: if(lat > 0){
5: txtHuso = "N" 6: } 7: for(var i = -30; i <> (i*6) && lon < (1+i)*6){
8: return "" + ((i+30)+1) +""+txtHuso; 9: } 10: } 11: }lunes, octubre 05, 2009
Google Maps: Iconos Personalizados
Trabajar con iconos propios sobre google maps
1: var icon = new GIcon();
2: icon.image = "http://www.xyzt.com/planta30x30.png";
3: icon.iconAnchor = new GPoint(16, 16);
4: icon.infoWindowAnchor = new GPoint(16, 0);
5: icon.iconSize = new GSize(24, 24);
Google Maps - Inicios
¿Cómo crear una simple mapa con Google Maps API? En primer lugar tenemos que solicitar una KEY para usar la API de google maps. Aqui: http://code.google.com/intl/es-ES/apis/maps/signup.html Añadimos la KEY al código:
<script src="http://maps.google.com/maps?file=api&v=2& sensor=true_or_false& key=ABQIAAAA-dCOIe9wvCndq8kKZDklJRQhL6vn9PNcXa7eSPja3EjRwozD8hTXU IiDBDVfDdeo3YIkjZk4-07sFA" type="text/javascript"></script>Creamos el mapa:
sábado, mayo 23, 2009
"Page Peel" con jQuery
Tutorial que muestra como realizar el famoso efecto "page-peel" mediante jQuery y CSS. Aunque el tutorial está en inglés, es fácil de seguir y el código necesario está perfectamente detallado.
Simple Page Peel Effect with jQuery & CSS » »
Leia Mais…lunes, mayo 18, 2009
Recursos del buen maquetador
Siempre digo que tengo que escribir un pequeño post con todos los recursos que suelo usar cuando trabajo, soy demasiado vago para meterlos en delicious y muchos los tengo por ahí guardados o listas de correo.
El caso es que pretendo que este espacio me sirva también para tener ordenado todos aquellos tutoriales, demos, prácticas varias o curiosidades con los que me he ido encontrado en estos tiempos, si de paso le sirve a alguien más, mejor que mejor.
Problemas con esquinas redondeadas, sean de la complejidad que sean:
Nifty Corners Cube: Los de toda la vida, los de la abuela, para hacer redondeos más o menos típicos
Shaded Border: Para los que buscan grandes emociones, con fondos degradados y demás historias.
Reemplazo de fuentes
Cufón: Mi nuevo muy mejor amigo, funciona generalmente bien (a veces se pega con otros niños-plugins) , es fácil de implementar y las librerias no ocupan demasiado
Sprites
CSS Sprite Generator: Reconozco que yo soy más de hacerlo a mano, pero una buena herramienta se agradece (no penséis mal leches)
Tooltips
Simpletip: Claro y consiso, para hacer tooltips, sin chorradas.
Beauty Tips: Todo lo contrario al anterio plugin, con todas las opciones y chorraditas varias que se puedan imaginar.
Lightboxs
Shadowbox: Muy chulo, con bastantes opciones
Thickbox: El rey de la selva, básico fundamental en todos mis proyectos
Retícula
Jquery-reticulator: Basada en el reticulator de Ale Muñoz, una creación de Manuel Muñoz, básico para cualquier maquetación que tenga que estar al pixel.
Transparencias en IE6
IE Png Fix: Mi otro mejor amigo, este es el que te salva el culo siempre, especialmente cuando llegan diseños puteantes complejos.
Tablas Ordenadas:
Tablesorter: Salvador para aquellos proyectos llenos de tablas con datos de ordenados de usuarios y demás rollos
Bola extra: Google Buttons Style: Fáciles de implementar y quedan chulísimos en cualquier proyecto
Leia Mais…domingo, abril 19, 2009
IconPot
IconPot es un sitio web que recopila conjuntos de iconos que se encuentran disponibles para su libre descarga en Internet. La diferencias respecto a otros sitios son que: 1.- Únicamente se recopilan iconos que sean útiles para el desarrollo de aplicaciones web. 2.- Los iconos deben ser totalmente libres tanto para su uso personal como para su uso comercial. Ni siquiera se admiten aquellos que requieren crédito o backlinks a su autor.
Leia Mais…
Tiny JS | scripts pequeños pero poderosos
TinyJS es un sitio que, según su 'tagline' recoge plugins pequeños y específicos que hacen una cosa bien. La máxima es recoger scripts tan pequeños como sea posible y desechar códigos 'hipertrofiados'. Se incluyen scripts para jQuery, YUI y Moo Tools.
Leia Mais…
jueves, marzo 26, 2009
ColorBox para jQuery 1.3
ColorBox es un plugin para jQuery 1.3 muy ligero (12kb) que permite hacer unos lightbox muy atractivos. Cada dia se utilizan mas los lightbox y son mas los plugins que se crean para ello. Este en especial es muy ligero, personalizable y facil de utilizar.
Estas son unas de sus caracteristicas mas interesantes:
Hay varias demos para poder ver ColorBox en acción: Demo 1, Demo 2, Demo 3 y Demo 4. Por otro lado, para descargar ColorBox acceder al sitio web de los desarrolladores.
miércoles, marzo 04, 2009
Sexy Alert Box
Sexy Alert Box es un clon “sexy” del clásico alert de javascript. Está basado en PBBAcpBox — un script que lamentablemente el autor paró de desarrollar — sin embargo, el código fue publicado bajo una licencia libre, con lo cual pude mejorarlo y adaptarlo a la versión 1.2 de Mootools.
Entre las características de SexyAlertBox encontramos:
- Estilo: Mostrar mensajes de error de una manera más bonita.
- Compatibilidad: Funciona tanto en navegadores modernos, como en Internet Explorer.
- Requiere: Mootools 1.2
Puedes descargar Sexy Alert Box desde el blog www.coders.me
Leia Mais…
martes, marzo 03, 2009
Animated JavaScript Slideshow
Posted by Michael in JavaScript
This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. This script was built ground-up and will soon be included at scriptiny where all my scripts will be added as they are updated, debugged and incorporated in the new TINY namespace. I will also document the scripts more thoroughly and publish multiple examples. I will continue to publish scripts there and support as I have time via the new community forum. I will try and post more frequently here on a wide range of web development related topics.
Images
imgSpeed = int; (10) navOpacity = int; (25) navHover = int; (70) letterbox = “string”; (#000) required color for letterbox on portrait images link = “string”; class name for link hover state
Auto Slideshow
auto = boolean; (false) speed = int; (10)
Information Dialog
info = boolean; (true) infoID = “string”; required for information dialog infoSpeed = int; (10)
Thumbnail Slider
thumbs = “string”; id of thumbnail slider, disabled if not set scrollSpeed = int; [1-20] (5) thumbOpacity = int; [0-100] (70) active = “string”; required for thumbnail active border spacing = int; (5) spacing between thumbnails left = “string”; id of left navigation link, required for slider right = “string”; id of right navigation link, required for slider
Click here to download the source.
Leia Mais…lunes, marzo 02, 2009
Iconos gratuitos en DryIcons.com
En DryIcons.com podemos encontrar unos cuantos sets de iconos gratuitos y de gran calidad. Todos los paquetes contienen los iconos en formato PNG en los tamaños más usuales (16×16, 24×24, 32×32, 48×48) y en formato PSD. Los iconos se distribuyen bajo varias licencias de uso, la versión gratuita de los iconos lo hace bajo una licencia Creative Commons Attribution 3.0. Lo que significa que podemos utilizarlos en proyectos personales o comerciales, siempre y cuando inluyamos el enlace pertinente a DryIcons.
DryIcons.com | Free Icons » »
domingo, marzo 01, 2009
Neositios, creador de sitios web con aspecto profesional, deja de estar en fase beta
Siempre es agradable conocer como muchos proyectos de Internet evolucionan con el tiempo, e incluso algunos de ellos quitan esa etiqueta tan característica de muchas aplicaciones online: beta.
Y quien ha retirado el cartel de beta no es otro que Neositios, una interesante aplicación online en español que nos permite la creación de sitios web. Como bien nos comenta su CEO, Alejandro Trybiarz, Neositios destaca precisamente por la calidad de sus diseños, disponibilidad de suficientes aplicaciones, y también importante, la sencillez de uso.
Pues eso vamos a comprobarlo ahora mismo, que no se diga. Eso si, tenemos que tener en cuenta que Neositios dispone de diferentes planes según nuestras necesidades, con lo que nosotros vamos a optar por la versión gratuita, con 100 Mb de espacio y 1 GB de transferencia mensual. Con las cuentas pro puedes tener dominios propios con cuentas de correo, más capacidad de espacio y transferencia, editor de logos o incluso acceso a su banco de imágenes, entre otras características.
Cuando nos registramos y accedemos a nuestra cuenta, accedemos primeramente a nuestro panel de administración, desde donde podemos empezar a editar nuestra web, acceder al webmail, a las estadísticas, o a otras muchas funciones. Pero nos vamos a centrar en la edición, que es lo que verdaderamente nos interesa.
Para ello disponemos de un asistente inicial, que nos permitirá la creación de nuestro sitio web desde cero, guiándonos paso a paso. Elegiremos la categoría, seleccionaremos uno de sus diseños de calidad que tienen disponibles, y posteriormente iremos añadiendo los diferentes tipos de páginas que disponemos, modificando el menú de acceso. Ya sólo nos quedará editar cada una de las páginas, de forma visual, que dependerá su edición del tipo de página que hayamos seleccionado.
Lo último que nos queda es publicar, seleccionando aquellas páginas que queramos que sean publicadas, con lo que ya sólo nos queda por acceder al sitio y ver lo bien que nos ha quedado, sin conocimientos de programación ni de diseño, con resultados que saltan a la vista.
Una opción a tener en cuenta para crear nuestros sitios web, y la verdad, uno de los mejores y más completos.
Enlace | Neositios
Leia Mais…sábado, febrero 28, 2009
PrestaShop: ideal para implementar la primer tienda online de la empresa
Tarde que temprano muchas de las empresas deciden implementar una tienda online dentro de su web site, o bajo un dominio propio, para comenzar a ejercer comercio electrónico. Hoy veremos una herramienta que puede apoyarnos en nuestros primeros pasos en este rubro.
Para ello partiremos de una aplicación gratuita relativamente nueva, diseñada para implementar tiendas online los más sencillo posible; su nombre PrestaShop.
PrestaShop es una solución para crear un sitio e-Commerce (comercio electrónico) en código abierto con gran facilidad y en poco tiempo. Esta preconfigurada para usar servicios de pagos como PayPal, realizar etiquetado de productos, generar nubes de etiquetas, administrar contenidos sindicados (RSS), destacar productos, así como ofrecer prácticamente todo los necesario para comenzar tu tienda online. PrestaShop pesa apenas 5 MB y se instala con una facilidad sorprendente. Una vez instalada, el panel de administración de la herramienta nos brinda todo lo necesario para poner en marcha nuestra tienda online. El software es completamente gratuito y requiere para funcionar de un servidor web Apache, PHP 5.0 y MySQL 5.0 (o superiores).
Si se le dificulta la instalación de las aplicaciones open source citadas anteriormente, no hace mucho publicamos un post relativo a este tema, donde mencionamos instaladores automatizados para estos software. Claro, esto si es que tiene su propio servidor web, que si usa hosting compartido estas aplicaciones comúnmente ya están preinstaladas por el proveedor en su cuenta de hosting.
Respecto a PrestaShop, si bien la información en el sitio oficial solo está disponible de momento en idioma ingles y francés; la herramienta cuenta con un pack de idioma español, con el que podemos dejar la plataforma en nuestro idioma, y además ya cuenta con una comunidad hispana en todoprestashop.com, en la cual podemos apoyarnos y sobre todo con la disponibilidad de tutoriales para las cuestiones más fundamentales y básicas en el lanzamiento de esta tienda online.
Al momento PrestaShop apenas está haciendo presencia en el universo de la web, y por eso aun son pocas las tiendas online que son soportadas por esta herramienta, ello en comparación con osCommerce, que es la plataforma opensource predominante en este campo. Sin embargo, si comparamos PrestaShop contra osCommerce encontraremos que la primera va dirigida a organizaciones o usuarios que desean implementar tiendas online sencillas, y con ello la simplicidad del software; mientras que osCommerce es mucho más robusta y por ende requiere mayores recursos de administración y gestión.
Si desea ver si PrestaShop puede servirle para algún proyecto de comercio electrónico sencillo y no desean hacer instalaciones; en el sitio oficial se disponen un par de cuentas de DEMO con las que podemos ver una demostración en línea tanto de la parte de la tienda, como de su administración. Esperamos esta herramienta les sea de utilidad.
Sitio Oficial | PrestaShop Leia Mais…viernes, febrero 27, 2009
Snipt, comparte fragmentos de código en redes de microblogging
En Twitter hemos pasado de decir lo que estamos haciendo en un momento dado a compartir todo lo que se pueda compartir, ya sean canciones, imágenes, noticias, etc. Y una de las cosas que si podemos compartir en un momento dado, sobre todo, si nos dedicamos a la programación, son fragmentos de códigos. Es por ello que existe Snipt, tratándose simplemente de un servicio al cual introduciremos un código de programación, y éste nos generará una breve url que será la que publiquemos en nuestro Twitter o en otra red de microblogging.
Para poder usar Snipt no hace falta registrarse, ya que basta con que le indiquemos el nombre del código, seleccionemos uno de los lenguajes de programación que tenemos en la lista, y de forma opcional indiquemos si queremos mostrar los números de línea.
Finalmente añadiremos el código, aunque luego podemos indicar nuestros datos de acceso a Twitter para que la url generada se publique directamente en nuestra cuenta, e incluso podemos hacerlo privado, con lo que no aparecerá en las búsquedas.
Una vez introducido el código, éste ya será accesible mediante la url generada, en la cual, además de acceder al código, podemos valorarlo, compartirlo en algunas redes sociales, y también incrustar el código en nuestro sitio web gracias al código que tan amablemente nos facilitan.
Quizás sea de utilidad para aquellos desarrolladores que usen las redes de microblogging para intercambiarse información, aunque está pensado principalmente para Twitter.
Vía | FeedMyApp Enlace | Snipt
Leia Mais…jueves, febrero 26, 2009
Dreamhost Apps, alojamiento gratuito de aplicaciones
Dreamhost es un proveedor de hosting bastante conocido por ofrecer grandes cantidades de espacio en disco y de transferencia por un precio bastante reducido. Podríamos discutir sobre su calidad y velocidad, pero lo cierto es que tienen una gran cantidad de clientes y funcionan razonablemente bien.
Pero no quiero hablar de su hosting de pago, sino de Dreamhost Apps, su nuevo servicio con el que ofrecen alojamiento gratuito para diversas aplicaciones web, de forma que dispondremos de software gestionado por ellos, que se encargan de la instalación, actualización,... sin pagar nada.
Entre las aplicaciones soportadas actualmente se encuentra Wordpress, Drupal, ZenPhoto, MediaWiki o phpBB, además de las Google Apps, a las que tienen intención de añadir de nuevas en el futuro.
Estas aplicaciones podrán usar un dominio ya existente, uno nuevo o un subdominio de dreamhosters.com. La idea de Dreamhost es que una parte de sus usuarios se acaben pasando al servicio de pago, pero parece una buena opción si necesitamos algún software y no queremos pagar nuestro propio hosting.
Más información | Dreamhost Apps.
Leia Mais…miércoles, febrero 25, 2009
1000 iconos gratuitos
from My Open Studio by 
En el sitio Webbyarts quisieron mostrar lo que les parece la mejor lista de iconos gratuitos para descargar cuantos queramos. Podremos encontrar iconos en formato Png, icn e ico. Por otro lado, en la mayoría de los casos se presenta un archivo Eps para poder modificarlos sin problemas de resolución. La principal idea del post, según nos cuentan, es crear una pequeña fuente de estos recursos para que los diseñadores tengan en cuenta durante sus proyectos.
Los iconos son libres para usar tanto en proyectos comerciales como personales, sin embargo, recuerda simpre leer la licencia antes de descargarlos.
Leia Mais…martes, febrero 24, 2009
osTicket: Sistema de soporte por tickets gratuito
Los sistemas de soporte basados en tickets son muy populares en empresas que permiten realizar consultas con respecto a sus productos y servicios, o en la que los clientes pueden informar acerca de problemas o solicitar cualquier tipo de ayuda sobre algún producto o servicio. Un sistema de tickets permite una mayor organización del soporte que ofrece la empresa; se sistematizan todas las solicitudes y se llega a ofrecer un mejor y más rápido servicio. Asímismo, con un sistema de este tipo, el cliente puede saber en todo momento el estado de su consulta.
oSTicket es un sistema de soporte de tickets opensource, desarrollado en PHP y MySQl. Proporciona una interfaz basada en web donde los usuarios pueden crear nuevos tickets, ver el estado en que se encuentran o responder a los comentarios realizados desde el centro de soporte.
La Administración incorpora acciones de borrado de tickets de la base de datos, creación de categorías y miembros, creación de grupos, implantación de alertas, etc.
Leia Mais…jueves, febrero 12, 2009
miércoles, febrero 11, 2009
Compresores de Javascript
Desde JQuery Howto nos ofrecen una lista de compresores de código Javascript:
- YUI Compressor (desde Yahoo)
- JSMin (por Douglas Crockford)
- ShrinkSafe (desde la librería Dojo)
- Packer (por Dean Edwards)
martes, febrero 10, 2009
Easy Slider: Plugin para jQuery
easySlider es un plugin para generar carruseles de imágenes, también llamados "slideshows", para jQuery. Su uso es muy sencillo y posee bastantes opciones de personalización. A continuación un listado con los parámetros que se pueden configurar y sus valores por defecto:
En la web oficial del plugin encontraremos más información, unas cuantas demos y la descarga del plugin.
prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefore: '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 800, auto: false, pause: 2000, continuous: false
- controlsShow: Por defecto a true, pero si está establecido en false no añade ningún control. Puede ser utilizado junto con auto-deslizante cuando se quiera desactivar la interacción del usuario.
- controlsBefore y controlsAfter: En el caso de que se quiera añadir algunos métodos adicionales para obtener más control sobre los botones, puedes hacerlo mediante el uso de estos parámetros.
- controlsFade: Por defecto asignado a true. Si se pone a false deshabilitará el ocultamiento de botones cuando el slider llega al final.
- firstShow and lastShow: Estos parámetros ocultan (o muestran) los botones "ir a la primera" e "ir a la última".
- auto: Esta opción habilita el auto-deslizante. Sólo tienes que ponerla a true.
- pause :Esta opción se configura en milisegundos y representan la duración de cada diapositiva cuando el plugin está configurado para auto-deslizante.
- continuous: Si es asignado true cuando hacemos click en el botón "Siguiente" cuando hemos llegado al final se saltará al principio (y viceversa). La combinación de esta opción con auto (ambos establecidos a true) obtendrá una animación sinfín.
lunes, febrero 09, 2009
Los 50 mejores sets de iconos para aplicaciones web
Otra enorme recopilación de iconos. En este caso centrados en que sean adecuados para el desarrollo de aplicaciones web. La mayoría ya los conoceréis pero siempre puede haber alguna sorpresa. En mi caso ha habido más de una sorpresa.
domingo, febrero 08, 2009
Reemplazo de alert(), confirm() y prompt() de JavaScript con jQuery
jQuery Alert Dialogs se trata de una serie de métodos que nos proveen de una forma completamente personalizable por medio de CSS de mostrar las alertas, confirmaciones y notificaciones JavaScript.
jQuery plugin busca reemplazar las funcionalidades básicas que se logran mediante la implementación de los comandos estándares JavaScript alert(), confirm()y prompt(). Para implementarlo solo tenemos que añadir estas líneas a nuestro :
<link href="%E2%80%9D/path/to/jquery.alerts.css%E2%80%9D" rel="”stylesheet”" type="”text/css”" media="”screen”">
Una vez hecho esto debemos llamar a las funciones que mostrarán las alertas.
jAlert es el sustituto de alert() y nos muestra alerta básica con un botón de aceptar para que el usuario acepte que ha visto el aviso.
jAlert(’This is a custom alert box’, ‘Alert Dialog’);
El sustituto de prompt() nos permite introducir un valor desde la ventana, se llama así:
jPrompt(’Type something:’, ‘Prefilled value’, ‘Prompt Dialog’, function(r) { if( r ) alert(’You entered ‘ + r); });
Y finalmente la elternativa a confirm() nos permite ofrecer al usuario la opción de aceptar o cancelar una acción, la implementamos de la siguiente manera:
jConfirm(’Can you confirm this?’, ‘Confirmation Dialog’, function(r) { jAlert(’Confirmed: ‘ + r, ‘Confirmation Results’); });
Desde Anieto2k nos proponen, además, un sistema para implementar esta opción como una alternativa y que en caso de fallar nos muestre la funcionalidad original. Para ver el articulo completo haz clic aquí>>
Leia Mais…sábado, febrero 07, 2009
ERP has... "issues"
Imagen extraída de una demo de Workday, the first Enterprise Business Management Solution created since Sarbanes met Oxley, the Web turned 2.0 and the world became flat
Lo de las tiritas tiene su gracia
Leia Mais…
viernes, febrero 06, 2009
Rollover sobre imágenes con jQuery
Para realizar un efecto de rollover con imágenes, quizá la mejor opción sea la utilización de sprites con CSS, pero ésta solución puede resultar más sencilla a bastante gente. En "Easy Image Rollover Script With jQuery" me he encontrado una función que de una forma sencilla nos permite crear rollovers.
Con esta función podemos interactuar con todas las imágenes a las que le hayamos asignado la clase "'roll". Únicamente deberemos nombrar a la imagen del rollover del mismo modo pero añadiendo '_hover'. Por ejemplo, para la imagen "MiBoton.gif", la imagen de rollover será "MiBoton_hover.gif".
Ver ejemplo en funcionamiento en la web del autor
Descargar ejemplo completo Leia Mais…
Con esta función podemos interactuar con todas las imágenes a las que le hayamos asignado la clase "'roll". Únicamente deberemos nombrar a la imagen del rollover del mismo modo pero añadiendo '_hover'. Por ejemplo, para la imagen "MiBoton.gif", la imagen de rollover será "MiBoton_hover.gif".
Ver ejemplo en funcionamiento en la web del autor
Descargar ejemplo completo Leia Mais…
domingo, enero 18, 2009
Frase del día
Esta crisis es peor que divorcio. He perdido la mitad de todo mi patrimonio, pero todavía tengo a mi mujer...
Leia Mais…lunes, enero 12, 2009
Texturas grunge de alta resolución
via Intenta on 1/11/09
Interesante colección de paquetes de texturas grunge, de aspecto oxidado y en formato de gran resolución, obtenidas desde Deviantart.
miércoles, enero 07, 2009
Marcas de agua con CSS
via Intenta on 1/7/09
CSS Watermark es una forma sencilla de crear una marca de agua para nuestras imágenes. Se puede personalizar el lugar donde aparecerá la marca de agua: superior-izquierda (topleft), superior-derecha (topright), inferior-izquierda (bottomleft) e inferior-derecha (bottom-right).
Simplemente hay que incluir el CSS:
<link href="Watermark/Watermark.css" type="text/css" rel="stylesheet"></link>
y añadir el siguiente código cada vez que deseemos añadir una imagen con marca de agua:
<div class="watermark posicion"> <div class="text">Marca de agua</div> <img src="Nombre_Imagen.jpg" width="300" height="199" alt="alt imagen" > </div>
donde "posicion" puede tomar los valores: topleft, topright, bottomleft, bottomright.
Podemos modificar tanto el formato del texto, como la opacidad del mismo si modificamos la siguiente clase CSS incluida en el fichero Watermark.css:
div.watermark .text {
position: absolute;
cursor: default;
font: bold 22px Verdana, Arial, Sans-serif;
color: White;
margin: 4px;
line-height: 20px;
filter:
progid:
DXImageTransform.Microsoft.Alpha(opacity=50);
opacity: .5;
-moz-opacity: .5;
}Distinguir Google Chrome y Safari con CSS
via Intenta on 1/6/09
No es lo más ortodoxo pero a veces no hay más remedio que echar mano de ellos: dos hacks para distinguir los navegadores Chrome y Safari.
/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
/* Propiedades para Google Chrome */
}
/* Safari hack */
body:first-of-type .elementOrClassName{
/* Propiedades para Safari */
}
lunes, enero 05, 2009
SimpleTabs
via Intenta on 1/5/09
SimpleTabs es un script no intrusivo para realizar "tabs" (pestañas). Quizá la gran ventaja es que no depende de ninguna biblioteca como jQuery, Mootools, etc. Lo que significa, por un lado, que nos podremos evitar posibles conflictos entre librerías o incompatibilidades con otros scripts, y por otro qe el tamaño final del script será mucho menor. También cabe destacar que es capaz de recordar el último tab al que se ha accedido si se recarga la página.
Para implementarlo hay que incluir los ficheros simpletabs.js y simpletab.css files y replicar una estructura XHTML similar a la siguiente:
<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="simpleTabsContent">
Contenido llamado cuando a "Tab 1" se le hace click.</div>
<div class="simpleTabsContent">
Contenido llamado cuando a "Tab 2" se le hace click.</div>
<div class="simpleTabsContent">
Contenido llamado cuando a "Tab 3" se le hace click.</div>
</div>sábado, enero 03, 2009
Efecto "nudging"
via Intenta on 1/3/09
En el blog de David Walsh nos muestran como lograr un interesante efecto con jQuery para nuestros menús. Al posar el ratón sobre una opción de menú ésta se desplaza hacia la derecha con una animación. Es un efecto denominado "nudging", que se podría traducir como dar con el codo al enlace.
Para realizar el efecto, lo primero que tendríamos que hacer es enlazar en nuestro documento con la librería de jQuery.
<script type="text/javascript" src="jquery-1.2.6.js"></script>
Seguidamente construimos un menú al que deberemos añadir la clase "nudge" a cada uno de los enlaces:
<ul> <li><a href="#" class="nudge">home</a></li> <li><a href="#" class="nudge">acerca de nosotros </a></li> <li><a href="#" class="nudge">servicios</a></li> <li><a href="#" class="nudge">productos</a></li> <li><a href="#" class="nudge">contacta con nosotros</a></li> </ul>
Ahora tan sólo queda animar la propiedad "padding-left" tanto cuando estamos sobre una opción y cuando salimos de ella:
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '35px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '15px' }, 400);
});
}); Yo he establecido un valor inicial de "padding-left" de 15 px y que es el valor al que ha de retornar la opción de menú al evento "mouse-out". Cuando se está sobre la opción ésta se desplaza hasta un valor de 35 px. Para ambas acciones la velocidad es de 400 milisegundos. Lógicamente todas estos valores son modificables y se deberán ajustar a las pretensiones de cada uno.
Suscribirse a:
Entradas (Atom)
