bumpbox clon de lightbox con soporte para PDF

Bumpbox no es sólo otro clon para montar nuestras galerías como lightbox, sino que además de soportar los más comunes formatos de arhivos multimedia también soporta archivos PDF.

La integración en tus webs es muy sencilla: poner los scripts en la cabecera y añadir un class a los links y un rel para indicar el tamaño que bumpbox debe tener.

Bumpbox detecta automáticamente el tipo de archivo que quieres mostrar, así que no necesitas especificarlo o realizar acciones distintas para distintos archivos.

Sencillo y muy recomendable: Bumpbox

Fondos de Escritorio

En Dezignus publican una recopilación de unos wallpapers impresionantes. Si ya estás aburrido de los fondos por defecto de los sistemas operativos esta es una buena forma de darle un reestiling a nuestras máquinas.

Link: Full Spectrum Wallpapers

AJAX EFFECT

Los chicos de Nettus han realizado una magnífica recopilacíon de los 20 mejores efectos ajax que deberíamos conocer. Galerías de imágenes, precargas, checkbox, etc. Una magnífica recopilación de herramientas para nuestros desarrollos.

Link: Nettus

Select con estilos

Javascript Image Combobox es un plugin jQuery que permite poner imágenes para adornar las opciones de neustros desplegables. Algo bastante útil pues los select son los grandes deserados del CSS. Siempre quedan feos y tienen pocas opciones a la hora de darles vidilla. Así pues casi imprescindible para hacer más vistosos nuestros diseños.

Link Image Combobox

Via Anieto2K

ecoder

Ecoder es un editor basado en javascript y php que nos permite, tras instalarlo en nuestro servidor, editar nuestros ficheros directamente online, sin necesidad de descargarlos. Creo que es el software que siempre he estado esperando.

Link: Ecoder

Via Anieto2K

galerías de imágenes en javascript

Muchas veces podemos darle un toque de distinción a nuestros desarrollos simplemente aplicando diferentes estilos degalerías o carruseles. Aquí os pongo bastantes posibilidades de galerías en javascript muy vistosas:

Link: 12 javascript image galleries

Link: 33 most beautiful javascript and Flash galleries

Una buena herramienta para desarrolladores en forma de una extensión para Firefox. NetRenderer es un servicio online que nos permite comprobar como queda nuestra web en las diferentes versiones de explorer, desde la 5.5 hasta la 8, y ahora nos ofrece una extensión para nuestro querido Firefox. Más fácil imposible.

Link: IE NetRenderer

Via Zonafirefox

html y css

Una buena ayuda para optimizar nuestro tiempo en la maquetación de sitios. Imprescindibles algunos de ellos:

• Grid designer. Herramienta para diseño de grid (rejilla) en línea de manera rápida de tus plantillas. Que hace que sea fácil definir rápidamente la disposición del ancho, el número de columnas, márgenes, etc. para establecer la tipografía y el resto de los elementos.
• Kotatsu. Sencillo generador de tablas HTML, es muy útil, ya que las tablas son probablemente una de las cosas que más aburridas para hacer. Con unas pocas pulsaciones de ratón tenemos el código de la tabla con sus filas y columnas.
• CSS Redundancy Checker. Encuentra los selectores CSS que no son utilizados por los archivos HTML y que puede ser redundante. Viene muy bien cuando el archivo CSS se complica y tememos eliminar cualquier selector.
• CSS Menu Maker. Crear y personalizar tus menús CSS, horizontal o vertical, en línea de forma gratuita.
• CSS Color Editor. Reemplazar fácilmente los colores de tu archivo CSS. Todo lo que necesitas hacer es cargar tu archivo para  reemplazar los colores y generar el nuevo archivo que luego puedes descargar.
• CSS Super Scrub. Reduce el tamaño de tus archivos CSS con solo unos pocos clics del ratón.
• PX to EM. Convierte los tamaños de las letras en píxeles a su equivalente en em y al revés.
• Deploy. Despliega rápidamente un marco de proyecto web con XHTML y CSS válidos, sólo es cuestión de segundos.
• CSS Text Wrapper. De una manera muy sencilla logramos que el texto HTML adquiera una forma que no sean sólo un rectángulo. Puede hacer que el texto fluya alrededor de unas curvas, en zig-zags, o lo que te se ocurra.
• PSDtoCSS online. Convierte tus archivos PSD en un diseño XHTML-CSS. Sólo una rápida carga es lo que se necesita, entonces puedes descargar su disposición en un archivo zip.

Visto en Cosassencillas

Puedes usarlos de forma libre en tus proyectos web, blogs, etc de forma personal, pero para usos profesionales consulta el copyright.

iconos gratis para tu web

Puedes descargarlos todos en Webbyarts

php

PHP es uno de los más ampliamente utilizados lenguajes de programación existentes hoy día. Con más de 20 millones de dominios indexados usando php, incluyendo sitios tan conocidos como Facebook, Digg y Wordpress. Hay buenas razones por las que los desarrolladores web prefieren PHP a otros lenguajes como Python o Ruby.

Si eres uno de los que ya han elegido PHP este enlace te será de gran utilidad.

Lo siento, no he podido resistirme a esta imagen ;-P

Flash

Muchas veces nos encontramos con el problema de validar una página que contiene un pequeño flash y empiezan los quebraderos de cabeza: Las etiquetas flash no validan, pues se trata de unas definiciones que llegaron tarde a la última revisión del estandar HTML.

Si buscamos por internet encontramos cantidad de ¿soluciones? desde simular nuestro código flash como si de un javascript se tratase para finalmente hacerlo invisible a los validadores. Otros hacen uso del objeto SwfObject para ocultar la inclusión de nuestro swf.

Sin embargo hay una forma de validar flash fácilmente sin ocultar su inclusión. Simplemente quitando algunas variables del object y eliminando por completo toda la inclusión del embed podemos validar sin problemas nuestra página. Se trata de dejar vuestro flash tal y como está el que os muestro a continuación (cambiando el nombre y ruta del swf, claro):

<object type="application/x-shockwave-flash" data="/play-audio.swf">
<param name="movie" value="/play-audio.swf" />
<param name="flashvars" value="file=/audio.mp3" />
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</object>

La linea donde declaramos el parámetro Flashvars es únicamente por si tenéis que pasarle un parámetro a vuestro Flash. No es necesario incluirla. Y la  última línea es una imagen que se mostrará a aquellos navegadores que no tengan flash instalado.

Simplemente con esto nuestro flash funcionará perfectamente y la página validará sin problemas.

Via AlejandroArco

Maldito explorer 6

Después de hacer un diseño genial en Photoshop llega la hora de maquetarlo pero como siempre Explorer 6 sale para jodernos el día: no hay forma de tratar las transparencias, las sombras y los destellos. ¿Empeoras tu diseño porque los de Microsoft fuesen tan patéticos en su día? Pues no, aquí te planteo 5 soluciones:

• Unit PNG Fix
• DD_BelatedPNG Fix
• IE7.js Fix
• Twin Helix Fix (from Angus Turnbull)
• Don’t Fix It! Make a Statement!

Y en Nettuts los ha recopilado para nosotros.

jquery

jQuery es increible. Constantemente añado nuevas funcionalidades apoyadas en este framework en los proyectos web en los que trabajo. Pero también puede hacer crecer en complejidad un proyecto y ralentizar una web considerablemente. Por ello me han parecido muy útiles los consejos que nos ofrece WebAppers. Con unos cambios mínimos en nuestro código podemos conseguir una mejora muy considerable, incluso podemos conseguir que la ejecución de un loop sea de hasta 50 veces más rápida.

La lista de tips es la siguiente.

• Load the framework from Google Code
• Use a cheat sheet
• Combine all your scripts and minify them
• Use Firebug’s excellent console logging facilities
• Keep selection operations to a minimum by caching
• Keep DOM manipulation to a minimum
• Wrap everything in a single element when doing any kind of DOM insertion
• Use IDs instead of classes wherever possible
• Give your selectors a context
• Use chaining properly
• Learn to use animate properly
• Learn about event delegation
• Use classes to store state
• Even better, use jQuery’s internal data() method to store state
• Write your own selectors
• Streamline your HTML and modify it once the page has loaded
• Lazy load content for speed and SEO benefits
• Use jQuery’s utility functions
• Use noconflict to rename the jquery object when using other frameworks
• How to tell when images have loaded
• Always use the latest version
• How to check if an element exists
• Add a JS class to your HTML attribute
• Return ‘false’ to prevent default behaviour
• Shorthand for the ready event

Y la tenéis disponible en WebAppers

Un portal que parece terner todo lo que nos gusta a los que desarrollamos webs:

• CSS Layouts (one column, two column, fluid, fixed etc)
• Navigation menus (horizontal, vertical etc)
• Text styles (headings, quotes, bullets, links etc)
• Site Elements (buttons, content boxes, image effects etc)
• Forms (input fields, buttons, fieldsets, validation messages etc)
• Graphics (gradients, icons, backgrounds etc)
• Misc (bars/charts/graphs, tooltips, rating stars etc)

Styleignite.com will help you ‘ignite your site’! We want you to not only be inspired by some of the latest web styles and trends but also be able to use those styles on your own websites.  Please see our about page for more information.

Link indispensable: StyleIgnite

Via Blogsbazaar

¿No estás un poco hasta las narices de tener que usar siempre las mismas fuentes en el texto de tus webs? Pues existen métodos que nos permiten utilizar otras fuentes para nuestros textos, incluso sin que los visitantes de la web la tengan instalada. Para ello os hablaré de sIFR con jQuery:

jQuery sIFR Plugin es un complemento para jQuery que nos permite reemplazar un texto en una página web con otro “texto flash”, técnica conocida como sIFR ( Scalable Inman Flash Replacement). El plugin nos ofrece una función en javascript para reemplazar texto en una web dinámicamente con sIFR, usando la funcionalidad nativa del framework jQuery junto con el  jQuery Flash Plugin

La parte negativa de estos métodos es que requieren de Flash instalado en el navegador del cliente, pero también es cierto que con estilos css podemos dejar los textos preparados para los casos en los que no haya Flash.

Link: jQuery sIFR Plugin

Via WebAppers

Con una serie de mini-tutoriales divididos en capítulos, muy comprimidos pero a la vez totalmente completos que está publicando Ateneu Popular. Actualmente van por el capítulo 5. Una guía rápida pero muy efectiva:

• Maestro CSS, destripando estilos. Cap. 5 – Selectores y demás(y2)
• Maestro CSS, destripando estilos. Cap. 4 – Selectores y demás
• Maestro CSS, destripando estilos. Cap. 3 – La estructura (y2)
• Maestro CSS, destripando estilos. Cap. 2 – La estructura
• Maestro CSS, destripando estilos. Cap. 1 – Resetea tu CSS

Libre y listas para meterles mano. Si tienes algo en mente esta es tu solución:

Si estás pensando en crear tu propia E-Commerce, deberías echarle un vistazo a estas Open Source que podrás modificar libremente y usarlas en tus aplicaciones:

1. PrestaShop (PHP / MySQL).
2. Magento (PHP / MySQL).
3. osCommerce (PHP / MySQL)
4. dashCommerce (ASP.NET)
5. Ubercart (Drupal)
6. Wordpress E-commerce Plugin (Wordpress)
7. VirtueMart (Joomla y Mambo).
8. OXID eSales (PHP / MySQL)
9. Freeway (PHP / MySQL y Joomla)
10. simpleCart(JS) (Javascript)
11. Digistore (PHP / MySQL)
12. OpenCart (PHP / MySQL)
13. zenCart (PHP / MySQL)

Via Anieto2K

mootools

Y aunque el número sea bastante feo, la lista de posibilidades con este framework es increible:

1. Mootools version: 1.2
2. Mootools Ext Adapter
3. Milkbox
4. NoobSlide
5. (E)² Photo Gallery
6. Pathfusion : Slideshow
7. MooSlide
8. SmoothGallery
9. MooFlow
10. Viewer – mootools
11. Slimbox
12. BarackSlideshow
13. SlideShow 2
14. PathFusion : multibox
15. SqueezeBox – Expandable Lightbox
16. MediaBox
17. Javascript Image Gallery Using Mootools (part 2)
18. Sliding Tabs
19. Mootabs
20. SimpleTabs – Unobtrusive Tabs + Ajax
21. Custom Form Elements
22. FormCheck
23. fValidator
24. ForMoo – Form Tools for Mootools
25. MOOdalBox – an HTML Lightbox
26. Javascript Fisheye Example
27. FancyUpload – Swiff meets Ajax
28. UI TESTS :: Drop Menu
29. ddmenu
30. Fancy Menu
31. Mootools :: Drop Menu example
32. UvumiTools drop down menu
33. Drop Down Menu
34. MenuMatic – Drop Down Menu
35. PathFusion : image menu
36. Calendar (date picker)
37. Unobtrusive JavaScript date-picker widgit
38. Another date picker
39. wysiwyg – mootools
40. Pathfusion – Sortable table
41. Mootable
42. Reflection.js
43. Autocompleter
44. Tipsx3
45. Mootools Split Panes – Work in Progress
46. iCarousel
47. MooSocialize
48. Pathfusion : Rounded Corner
49. heySilver – MooTools Edition

Via Anieto2K

Quarkbase

QuarkBase es una herramienta online gratuita que nos ofrece una cantidad enorme de información sobre una web. En realidad es un mashup con más de 30 fuentes de datos y muchos algoritmos que aportan cantidad de información sobre tópicos como popularidad, tráfico, webs similares, … Simplemente escribe la url de tu web y en unos segundos obtendrás un informe muy detallado sobre todos los aspectos importantes. Recomendado.

Link: QuarkBase

Via: WebAppers

Seguro que muchos de vosotros como yo, ya no programais con tablas desde hace tiempo. Casi se nos olvida como funcionaba esto de hacerlo todo con tablas. Pero ciertamente puede que todavía tengas que utilizarlas para mostrar información tabulada en alguna ocasión. Pues si es así te voy a enseñar algo para que las añores de verdad y las apliques con mucho estilo: 10 diseños expectacules de tablas

Via Anieto2K

Link: 192 excelentes ideas publicitarias

Intothepixel2008 es una exhibición de arte visual en videojuegos. Y es que en ocasiones se consigue una calidad tal en los actuales videojuegos, que merece una exposición como esta:

Link: Intothepixel2008

Via Criterion

La gente de LabNol publican una serie de consejos en forma de tutoriales how to, con las recomendaciones básicas a tener en cuenta tras una instalación de wordpress, sobre todo en lo referente a seguridad. El artículo incluye indicaciones como:

• How to change the default image upload folder
• How to remove the WordPress version generator on the header
• How to prevent people from browsing your WP folders
• How to disable Windows Live Writer Templates
• How to turn off post revisions
• How to disable HTML in comments
• How to change the location of WP plugins and themes
• How to change the building mode of XML sitemaps
• How to turn off image tumbnails

Link: basic things that you can/should do after installing WordPress

Via: DailyBlogTips

Volvemos al tema del diseño y lo hacemos con una buena recopilación de la mano de cosassencillas: los 10 mejores tutoriales para crear botones en CSS:

• Botones sexys con CSS.

• Creación de botones con las imágenes PNG y colores de fondo.

• Sexy CSS botones.

• Botón de enviar CSS.

• Botones redondeados (Wii).

• Creación de botones con CSS técnica conocida como “sliding doors”.

• Botones con iconos.

• Técnica “Sliding Door” con una sola imagen.

• Redescubriendo el elemento Button.

• Utilizando la técnica “Sliding Doors” en Wordpress

Via CosasSencillas

Curiosa muestra de arte geek en toda regla: :: IT Everywhere @ Flickr

Via NiceFuckingGraphics