TheDaVis Blog» Recursos

50 sets de iconos profesionales gratis

thedavis — Tue, 17 Feb 2009 18:33:14 +0000

Los chicos de Smashing Magazine han publicado una recopilación de 50 sets de iconos para nuestros proyectos. La calidad de estos destaca y siempre va bien tenerlos a mano :)

Lanzamiento de jQuery 1.3

thedavis — Wed, 14 Jan 2009 18:53:47 +0000

Hoy, día 14 de Enero de 2009, jQuery 1.3 ha sido lanzado. Incluye muchas mejoras que implican una mejor velocidad en todos los aspectos. Realmente este framework de javascript se está convirtiendo en una herramienta imprescindible.

Sizzle

La incorporación de Sizzle hace que la velocidad en búsqueda de selectores se vea incrementada y ofrezca unos resultados muy interesantes.

Inyección HTML reescrita

Los métodos jQuery.html(), .append(),.. encargados de generar HTML dinámicamente han sido reescritos obteniendo una mejora de un 6x en algunos casos sobre jQuery 1.2.6.

Descargar

jQuery Minified / jQuery Regular

Usar con Google Ajax Libraries

Los que usan Google Ajax Libraries para no tener que alojar jQuery en sus servidores lo pueden usar mediante esta URL: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Easy Slider, jQuery Plugin

thedavis — Thu, 08 Jan 2009 06:30:49 +0000

Un nuevo plugin para nuestro querido jQuery que cada día me sorprende más, por lo menos a mi. En este caso Easy Slider nos permite hacer slides de tantas imágenes como queramos verticalmente y horizontalmente. Es fácil configurarlo por CSS y es muy vistoso.

Demos

[Descarga]

Fuente: Xyberneticos

WP Framework, base para tus themes WP

thedavis — Mon, 05 Jan 2009 19:26:03 +0000

WP Framewok es un theme en blanco para poder desarrollar tus themes sin partir de “cero”. Es ideal para tener una base y poder aplicar el diseño deseado.

Se instala como un theme normal y ya puedes trabajar con él.

Una muy buena idea para poder generar themes para WordPress.

Fuente: Xyberneticos

10 técnicas de reset de CSS

thedavis — Sun, 04 Jan 2009 10:49:30 +0000

* { 
 
padding: 0; 
 
margin: 0; 
 
border: 0; 
 
}

10 técnicas Reset CSS que te serán muy útil a la hora de diseñar tus plantillas web. Estas técnicas para resetear CSS te permitirán evitar que los elementos que componen tu web descuadren la página por completo, cuando visiten tu sitio utilizando diferentes Navegadores. Recomendado.

15 utiles herramientas para usuarios de WordPress

thedavis — Fri, 02 Jan 2009 11:00:24 +0000

ScribeFire, combierte tu Firefox en un editor enriquecido conectado a tu blog.
WordPress Helper, toda la documentación de WordPress en tu Firefox.
Screen Grab to WordPress, haz screenshots y envialos directamente a tu WordPress.
WordPress Scanner, revisa la seguridad de tu blog.
Broken Link Checker, plugin que se encarga de revisar los enlaces de tu blog y marcar los que ya no están disponibles.
Google Syntac Highlighter, mejora estéticamente la visualización del código de tus posts. (Alternativas WP-Syntax, WP-Chili, o SyntaxHighlighter Plus.)
Insights, plugin que te permite enlazar tu contenido con contenido multimédia de sitios como Flickr, Youtube, Wikipedia…
Windows Live Writer, Microsoft nos dá la aplicación necesaria para escribir offline nuestros artículos.(Para Mac tenemos ecto o Thingamablog)
Revision Control, herramienta que permite controlar las revisiones de posts, ideal para blogs con multiples autores.
Organize Series, un plugin ideal para crear series de artículos relacionados entre sí.
WordPress Comment Moderation Notifiers, herramienta con la que podremos moderar nuestros comentarios más rápidamente.
WordPress Comment Ninja, extiende las opciones de moderación de comentarios con este script de GreaseMonkey.
Adserve, controla la publicidad de tuWordPress.
Simple Tags, los tags nunca serán más fáciles, usando el Yahoo Term Extractions API este plugin te sugerirá los tags que poner.
Twitme, postea en twitter desde tu WordPress (Alternativas Twitter for WordPress, Twitter Tools, Twitpress, y SimpleTwitter)

Fuente: anieto2k

jQuery Alert Dialogs, reemplazo para alert(), prompt() y confirm()

thedavis — Fri, 02 Jan 2009 09:28:19 +0000

jQuery Alert Dialogs, es un reemplazo muy elegante para las funciones alert(), prompt() y confirm() de javascript.

Uso

Simplemente hay que añadir estas líneas al :

<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
 
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Una vez cargados los ficheros necesarios podremos llamar a las funciones personalizadas:

Alert()

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');

jPrompt()

Sustituto de prompt() que nos da la opción de introducir un valor desde la ventana.

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

jConfirm()

Alternativa a confirm() en la que ofrecemos al usuario la opción de aceptar o cancelar una acción.

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

Demo

Los chicos de jQuery Alert Dialogs han publicado una demo para que podamos ver que tal funciona este sistema.

Consejo de Uso

anieto2k ha propuesto utilizar estas modificaciones de las funciones clásicas de javascript utilizando un sistema que convierta esta opción en una alternativa y que en caso de fallar nos muestre su funcionalidad original, pienso que es muy buena idea:

//alert()
var oAlert = alert;
function alert(txt, title) {
    try {
        jAlert(txt, title);
    } catch (e) {
        oAlert(txt);
    }
}
alert("Hola", "Prueba");
 
//confirm()
var oConfirm = confirm;
function confirm(txt, title, func) {
    try {
        jConfirm(txt, title, func);
    } catch (e) {
        if (oConfirm (txt, title)) func();
    }
}
confirm("Hola", "Prueba", function(){
	alert("Prueba", "Superada");
});
 
//prompt()
var oPrompt = prompt;
function prompt(txt, input, title, func){
    try {
        jPrompt(txt, input, title, func);
    } catch(e) {
        func(prompt(txt, input, title));
    }
}
prompt("Hola", "Valor", "Prueba", function(r) {
	if (r) alert(r);
});

Fuente: anieto2k

30 menus basados en tabs y acordeones animados

thedavis — Thu, 01 Jan 2009 14:39:07 +0000

Con la ayuda de Javascript se pueden conseguir muchos efectos en la representación y visualización de un menú de navegación:

Fuente: anieto2k

I Love Maker

thedavis — Tue, 16 Sep 2008 00:30:05 +0000

I Love Maker es posiblemente la primera aplicación Web para generar bonitas imágenes del estilo I ♥ TheDavisBlog

Es muy fácil de utilizar y además te genera las imágenes en varios tamaños y formatos.

Bonus: También genera QR-Codes del texto generado, genial :)

Fuente: GeeksRoom

jQuery AlphaNumeric

thedavis — Fri, 12 Sep 2008 18:52:07 +0000

jQuery AlphaNumeric es un plugin que te permite restringir los caracteres que se pueden escribir en un input o textarea. La idea es evitar complicadas validaciones, si un campo solo puede ser númerico ¿para qué dejar escribir letras? o viceversa, si sólo se deben introducir letras…¿para qué dejar entrar todos los caracteres del teclado?

Funciones

alphanumeric – permite letras y números
alpha – sólo permite letras
numeric – sólo permite números

Propiedades

allow – añade caracteres permitidos
ichars – define caracteres personalizados a prevenir
allcaps – sólo permite mayúsculas
nocaps – sólo permite minúsculas

Ejemplos

Sólo permitir letras: $(‘.sample1′).alphanumeric();
Sólo permitir números: $(‘.sample4′).numeric();
No permitir “.” “1″ “a”: $(‘.sample6′).alphanumeric({ichars:’.1a’});

[Demo] [Descargar]

Existe también un plugin llamado Numeric, pero que solo previene la entrada de números, no puedes optar entre uno u otro. Es interesante disponer de las dos opciones en un mismo plugin. Por otra parte también os recuerdo que existe el plugin llamado Masked Input que te permite generar máscaras de entrada personalizadas. Funciona perfecto para introducir números IP, teléfonos, cuentas bancarias…

SexyAlertBox, mejorando el alert()

thedavis — Fri, 22 Aug 2008 10:51:31 +0000

SexyAlertBox es un script desarrollado en javascript, usando MooTools como Framework, con el que ampliamos las posibilidades que alert() nos ofrece, una herramienta que nos permite mostrar mensajes de una forma más amigable para el usuario y que además podemos personalizar para adaptar a nuestra aplicación.

Demo | Descargar

Fuente: anieto2k

DragTable, la Tabla de las tablas

thedavis — Sat, 28 Jun 2008 16:45:37 +0000

DragTable es una librería JavaScript que permite mover de posición las columnas de las tablas HTML tradicionales y además permite ordenar las columnas de forma ascendente y descendente. Ver Demo

Fuente: anieto2k

CSS hasta en la sopa

thedavis — Tue, 22 Apr 2008 17:59:08 +0000

CSS es un lenguaje de maquetación muy potente y que cada día más, está integrandose más en la vida cotidiana. Gracias a esta nueva tendencia de uso, surgen increibles manuales, con impresionantes ejemplos que nos muestran las posibilidades que CSS nos permite aprovechar.

Fuente: anieto2k

Como traducir plugins de WordPress

thedavis — Mon, 14 Apr 2008 15:49:45 +0000

Vale, la mayoría de plugins ya están traducidos al Español, los más comunes sí, pero otros no, o no nos gusta la traducción realizada por el autor y quieres adaptarla para ti.

La solución: Poedit.

Poedit es un programa GPL que te permite editar los archivos de traducción ( los .po y .mo ) que se usan generalmente para generar los textos de idiomas de los plugins, en realidad el core de wordpress también usa este sistema, como otros programas habituales.

Además Poedit permite abrir las definiciones de los textos a traducir desde un archivo .pot

Esto es útil cuando el desarrollador del plugin no ha incluido los archivos de traducción y solo ha generado el catalogo .pot

Instalación de Poedit

En la web del proyecto están todos los links de descarga disponibles, hay versión para Windows, Linux y Mac. La instalación es del tipo Siguiente, Siguiente, Siguiente para el caso de Windows, vamos como casi todo.

Generar traducción usando un archivo .pot

Voy a explicar el procedimiento usando el archivo wp-print.pot del plugin WP-Print:

Desde Poedit abrimos el archivo .pot

Luego nos preguntará por las propiedades de la nueva traducción, debemos especificar el idioma y país, en este caso Español y España:

Al pulsar sobre Aceptar nos preguntará como y dónde guardar el nuevo catálogo .po, el nombre a usar suele ser el nombre del plugin con el código de idioma y país, para este caso seria así: wp_print-es_Es.po

Una vez realizados estos pasos veremos la lista de textos a traducir, basta con elegir la linea que deseamos traducir y escribir en el cuadro de abajo nuestra traducción, cuando lo tengamos todo traducido podemos guardar el catálogo ( Archivo -> Guardar ) y Poedit automáticamente generará el binario .mo

Hay que tener especial cuidado cuando existen variables o modificadores en los textos, por ejemplo %s no se debe modificar, si el orden en que aparece dentro del texto, pero nunca eliminar o substituir.

Ahora solo falta subir los archivos .mo y .po a nuestro WordPress, dentro de la carpeta del plugin y ya tenemos nuestra traducción funcionando :)

Editar una traducción

Solo con abrir el archivo .po de la traducción ya se cargan todos los textos, editamos el texto que deseamos cambiar, guardamos y subimos los archivos de nuevo al servidor.

Pues solo espero que os haya sido útil la información, ya me contaréis como van las traducciones :)

Traducción al Español de WP-Print

thedavis — Mon, 14 Apr 2008 15:05:12 +0000

Acabo de realizar la traducción de WP-Print al Español.

Instalación:

Tan fácil como descomprimir los 2 archivos dentro de la carpeta plugins/wp-print y listo.

Descargar: wp-print_es-ES

Si hay algún problema o error se agradece un comentario para corregirlo, gracias :)

WP-Print para WordPress 2.5

thedavis — Sat, 12 Apr 2008 23:06:49 +0000

Lester ‘GaMerZ’ Chan ya ha publicado la versión beta de sus plugins para adaptarlos al WP 2.5, entre ellos el WP-Print que permite crear una versión imprimible de nuestros posts. Yo ya lo tengo activo en TheDavisBlog, me gusta el icono de la impresora FaMFaMFaM

Instalación WP-Print:

Basta con descomprimir el paquete y subir la carpeta wp-print a nuestra carpeta plugins de WordPress, activar el plugin usando el panel de administración ( Dashboard) y luego actualizar la estructura de permanent links en Opciones -> Enlaces Permanentes. Finalmente solo queda configurar las opciones de WP-Print que se encuentran en Opciones del Dashboard.

Descargar: WP-Print 2.30 Beta 2

Estiramientos específicos para desarrolladores

thedavis — Fri, 11 Apr 2008 17:22:34 +0000

Si algo tiene pasarse muchas horas delante del ordenador ya sea por nuestro trabajo o por ocio son las dolencias musculares en cuello, cervicales, brazos, piernas.. por una mala postura o simplemente por estar demasiado tiempo en la misma postura poco ergonómica. Para ello debemos seguir unas mínimas normas de ergonomía que nos ayudarán prevenir estos dolores.

Otra actividad que podemos hacer para mejorar nuestro estado físico, y evitar esas tan comunes dolencias es el de prácticar una serie de estiramientos que nos ayuden a tener los músculos en mejor estado.

10 consejos para evitar dolencias

Usa la menor cantidad de fuerza posible para mover el ratón y hacer clic .
Mueve el ratón con el antebrazo y no sólo con la muñeca, de esta forma nos aseguramos de tener la muñeca recta.
Cambia la alfombrilla si sufre algún tipo de deformación.
Apoya el antebrazo sobre la mesa pero nunca el codo y utiliza algún producto ergonómico para apoyar la muñeca.
Coloca el teclado en una posición cómoda y al alcance de la mano.
Utiliza un teclado ergonómico o en su defecto un reposamuñecas ergonómico para el teclado.
El ángulo del teclado debe ser igual al ángulo formado por el antebrazo.
Para escribir ayúdate de los músculos del brazo y antebrazo.
La distancia aconsejable entre la pantalla y los ojos está entre 45 y 60 cm
Adopta una postura correcta en la silla, sobre todo la espalda recta y los pies apoyados en algún reposapiés ergonómico

Como cuidar la vista trabajando frente al PC

La vista es sin duda lo que más sufre, cuando trabajamos frente al ordenador. Para evitar tener que recurrir a gafas correctoras podemos seguir una serie de pequeños consejos que agradeceremos dentro de unos años.

Utilizar filtros de pantalla antirradiación y anti-reflejo en los viejos monitores de tubo de imagen.
Hacer pausas breves casa 30 minutos enfocando la vista en objetos más lejanos durante unos segundos.
Mantener los ojos mojados intensificando el parpadeo o con el uso de gotas oculares para evitar que el ojo se seque.
Colocar el monitor a una distancia mínima de 50 cm y por debajo de la línea de los ojos. Cuando nuestro sistema visual enfoca de cerca, lo hace con más eficiencia y comodidad cuando la mirada se dirige hacia abajo.
Ajustar la resolución para poder leer sin esfuerzo a esa distancia.
Bajar el nivel de contraste desde el menú del monitor disminuye drásticamente la emisión de rayos nocivos sobre nuestra vista.
La luminosidad ambiente debe ser mayor que la de la pantalla, se aconseja que la luz del ambiente sea sólo tres veces mayor que la de la pantalla.

Fuente: anieto2k

Generador de QR-Codes

thedavis — Tue, 26 Feb 2008 15:54:31 +0000

Acabo de subir al servidor una aplicación web para generar tus propios QR-Codes. La aplicación genera el QR-Code y se almacena en el servidor como una imagen JPEG que puedes descargar en tu ordenador. Si quieres poder leer estos códigos con tu móvil y mandar mensajes a tus colegas, ya sabes, usa el Kaywa Reader.

Generador de QR-Codes por thedavis

Si encuentras un fallo en la aplicación te agradezco que hagas un comentario en esta entrada.

Favikon – Generador de favicones para tu web

thedavis — Fri, 16 Nov 2007 23:45:48 +0000

Favikon es un sitio web que permite crear en unos pocos pasos un favicon para nuestra web. Primero debes subir una imágen o indicar la URL de esta, cargar la imagen y seleccionar el área de la imagen con la que crear el favicon. Finalmente podemos previsualizar el favicon antes de descargarlo y ¡ya está!

La web nos crea un enlace para descargar nuestro recién creado favicon.ico qué por si no lo sabéis para que se muestre en la web, hay que incluir entre las etiquetas de nuestros archivos html el siguiente código:

<link rel="shortcut icon" href="favicon.ico" />

Piensa que el archivo favicon.ico lo debes subir al servidor donde tengas alojada la web y en el mismo directorio donde tengas las páginas html, a no se que cambies la ruta del “href”, parece obvio pero por si las moscas…
Los formatos de imagen que soporta son PNG, GIF y JPG. Si quieres saber qué es un favicon, puedes visitar la wikipedia.

Fuente: xyberneticos.com

Tablas con CSS y JavaScript: TableCloth

thedavis — Fri, 12 Oct 2007 10:07:11 +0000

TableCloth es una libreria javascript que permite dar efectos a nuestras tablas. Además podemos cambiar el estilo a nuestro gusto usando CSS, además es muy fácil de implementar.

Descargar, descomprimir y alojar toda la carpeta de nombre “tablecloth” que contiene los archivos tablecloth.css y tablecloth.js en la raíz tu sitio.

Haremos la llamada en nuestra web incluyendo el siguiente código en el :

&lt;link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" /&gt;&lt;script src="tablecloth/tablecloth.js" type="text/javascript"&gt;&lt;/script&gt;

He colgado el ejemplo para que puedas verlo: Ver demo.

Si quieres cambiar el efecto de resaltado de las tablas puedes editar el archivo tablecloth.js:

var highlightCols = false; //Resaltar las Columnas (false-true)

var highlightRows = true; //Resaltar las Filas (false-true)

var selectable = true; //Resaltar al hacer Click (false-true)

Fuente: Xyberneticos