Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de la categoría "Codigo"

Railsify, encuentra plugins y herramientas para Rails

Railsify

Si buscas herramientas y plugins para Rails o andas buscando un sitio para publicar tus creaciones echale un vistazo a Railsify, un directorio de plugins y herramientas, completamente gratuito.

Railsify: http://www.railsify.com/

Vía eHub

Editores de HTML, CSS, Javascript y PHP para Gnome (gtk)

Ayer, cuando os pedía consejo sobre editores de código para Gnome no me esperaba esa respuesta (gracias, de verdad). Ahora tengo un montón de ellos para escoger y creo que lo mejor es que los pongamos todos juntos en un artículo como referencia para futuros linuxeros desamparados. Cito por orden alfabético:

Algunos son completos IDEs, otros simples editores de código con resaltado de sintáxis y algunos son sólo para los más fuertes de ánimo.

Seguro que nos hemos dejado muchos en el tintero, una vez más quedan abiertos los comentarios, por si se os ocurre algún otro.

Una hoja de estilo para diagnosticar fallos en el marcado

De la mano de Eric Meyer nos llega una solución que, por simple, es sin duda un gran hayazgo.
Haciendo un uso magistral de los selectores de CSS, va filtrando situaciones comunes en cualquier sitio (imagenes sin alt, enlaces que no van a ningún sitio…), haciéndolas mucho más fáciles de localizar.

La hoja de estilo queda algo así (por supuesto, adáptala a tus necesidades)


a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

Sin duda, la Web Developer Toolbar ya nos sirve para esto pero, de esta manera, recibimos referencias visuales más concretas (sabremos de un vistazo qué está mal y por qué).

Para profundizar en la lógica de esta hoja de estilo nada mejor que leer el artículo de Eric: Diagnostic Styling

Una forma menos agresiva de mostrar imágenes grandes

Seguro que alguna vez os habéis visto en la situación: llegáis a un sitio web con unas imágenes enormes y tarda en cargarse años. Desanima y desespera horriblemente.

A través de Ajaxian me entero de que desde hace tiempo la librería javascript de Yahoo contaba con un plugin, YUI Image Loader, que nos permitía ir cargando sólo las imágenes necesarias (las que están dentro del punto de vista del usuario) y hacer así más cómoda la visualización de muchas imágenes grandes en una sola página.

A partir de ahora, los amantes de prototype también disponen de uno: Lazy Loader por Mika Tuupola.

Pasaos por la demo para comprobar lo interesante del script.

¿Conocéis algún otro independiente de librerías o que utilice otras?

LiveValidation, validando los campos según escribes

Si validar los campos al finalizar de completarlos no es lo bastante moderno para tu sitio, ahora lo tendrás más que sencillo para darle un toque simpático a la validación.

LiveValidation

LiveValidation es una pequeña librería Javascript que te permitirá dar ese efecto de validación “al vuelo” y, de paso, validar cuantas cosas necesites validar en tus sitios.

Está escrita de una forma muy cercana a Ruby on Rails por lo que, como comenta su autor, son compañeros ideales. No obstante, puede usarse con cualquier otro lenguaje ya que es una librería sencilla de aprender e implementar.

LiveValidation: http://www.livevalidation.com/

Via dZone

df Javascript Smooth Scroll

Buscando otra cosa me encuentro en Deziner Folio este ligerísimo script con el que podremos dotar a nuestros enlaces internos (anchors) de ese elegante efecto de desplazamiento suave

df Javascript Smooth Scroll

Ver demo

Deziner Folio: df Javascript Smooth Scroll

Magento, e-commerce 2.0

Hace unos días empecé a rondar la idea de montar una tienda online. No, no es que vaya a vender nada. Simplemente es un terreno interesante y sobre el que no tengo demasiada experiencia, he montado un par de osCommerce y un par de Zencart pero poco más.
Pensé que, en todo este tiempo, quizá habrían surgido nuevas aplicaciones open source con las que crear una tienda online algo más apetecible que las antes mencionadas (al menos algo más simple de personalizar, no sé) y a través de del.icio.us me encontré con Magento.

Magento

Magento es un desarrollo jóven (actualmente por la beta 0.6) pero que realmente promete. Cargado de características y con un aspecto muy actual y agradable promete ser la herramienta por excelencia para montar tiendas online.
Según sus desarrolladores se trata de una herramienta potente, escalable, flexible y con todo lo que puedas necesitar. Desarrollado con licencia libre en PHP y MySQL.

Magento Front End

Magento Backend

En su sitio disponéis de numerosa información, una demo, videos, capturas de pantalla etc.

Magento: http://www.magentocommerce.com/

SQL Designer, diseñando bases de datos online

Modelar una base de datos es una tarea tediosa y cualquier herramienta capaz de faciliarnos realmente la tarea es interesante tenerla cerca. A través de Bitelia descubro SQLDesigner un script, pensado para ser descargado e instalado desde tu servidor (puede ser un servidor local, claro) mediante el cual podrás diseñar las tablas de tu base de datos, exportar el modelo en XML y crear los scripts SQL necesarios para crear nuestra base de datos en los servidores de base de datos más comunes y utilizados: Oracle, Postgres, MySQL, MSSQL, etc.

SQL Designer

Podéis haceros una idea de como funciona mediante la beta online disponible en su sitio oficial, no obstante me permito recomendaros que lo descarguéis e instaléis en local si pensáis utilizarlo a menudo. Generalmente este tipo de proyectos tiene recursos limitados y si todos utilizamos la demo podríamos llegar a causar un perjuicio económico a alguien que nos brinda una herramienta tan práctica. (sería un agradecimiento algo peculiar).

SQL Designer: http://ondras.zarovi.cz/sql/

Frameworks para CSS

Con el furor de los frameworks para todos los lenguajes de programación era previsible que, tarde o temprano, alguien decidiera crear un framework para ensamblar hojas de estilo como churros (con todo mi respeto a los artesanos churreros). En principio suena bien, maquetar una página casi completa con facilidad mecánica empleando unas u otras clases e id predefinidos.

Blueprint, Tripoli, los grids de Yahoo… Todos ellos nos prometen sencillez y productividad, no obstante, el precio que suponen no vale el trato.

En primer lugar, cargar nuestros sitios con todo el código extra que contiene un framework completo (por muy modular que sea) es contraproducente. Pararnos a buscar por la hoja justo el trozo que vamos a usar es casi tanto trabajo o más que escribir los estilos nosotros mismos y, por muy comprimido que esté, es peso extra para nuestros sitios (con la consiguiente incomodidad para nuestros usuarios, costes extras en ancho de banda etc.).

Para empezar a ser realmente productivo con un framework es necesario aprender a utilizarlo, si ya sabemos escribir hojas de estilo será tiempo perdido en un conocimiento limitado.
Por supuesto, si no sabemos puede parecer muy buena idea empezar con gran parte del camino andado y dedicarnos sólo a lo bonito que queremos que sea el diseño y poco más. Por contra, tratar de eludir el aprendizaje puede suponernos serios quebraderos de cabeza.

Imagina que desaparece el framework, que no está demasiado bien documentado o que no tiene una comunidad fuerte alrededor. Todo tu esfuerzo para aprender a manejarlo habrá sido para nada y, tarde o temprano, tendras que afrontar el auténtico aprendizaje. Además, en caso de lenguajes complicados o con procesos de desarrollo largos y tediosos, es justificable el uso de frameworks e incluso recomendable. Escribir hojas de estilo es sencillo, comparado con los lenguajes de programación propiamente dichos es un juego de niños y, con un poco de práctica, escribiras tus estilos tan deprisa o más que apoyándote en frameworks.

Además, es imposible preveer todas las necesidades de maquetación y estilos que tendrá cada sitio. Si buscamos dotar a la web de un significado semántico tendremos que aprender a etiquetar las cosas correctamente y a emplear los elementos html de forma correcta. A apoyar nuestros estilos en ellos y no manchar todo el código con clases e id de nombre criptico y ningún significado (si aún no la habéis leído os recomiendo la traducción que hice del artículo: Div Mania).

No obstante, la idea que se trasluce de estos frameworks no es inútil en si misma. Disponer de un set de herramientas con el que aligerar ciertos trabajos rutinarios.
Me gusta entender al desarrollo web como una especie de artesanía de nueva generación. Los orfebres, artesanos de la plata, dentro de su proceso de aprendizaje y como conocimiento útil para el resto de su vida, aprenden y crean su juego de buriles. De esta manera, disponen de un set de herramientas tan completo y extensible como quieran. Sea cual sea la necesidad, buril más ancho, más estrecho, más o menos afilado, son capaces de crear uno y empezar a trabajar en seguida.
Por eso, lo que si me parece una idea genial, tanto para aprender como para aligerar trabajo es crearse una caja de herramientas con todos esos elementos que tú empleas tan a menudo. Sólo tu sabes tus manías, sólo tu conoces a fondo tu manera de escribir estilos. Al ser tu propio trabajo te resultará sencillo encontrar y emplear justo esa pieza de código que necesitas. Incluso, en lugar de crear archivos css enormes o decenas de ellos chiquititos, puede interesarte crear un wiki o algo por el estilo donde realizar consultas rápidas (puedes emplear alguna solución tipo TiddlyWiki que no necesita servidor web ni base de datos y es muy sencilla de utilizar).

Vosotros ¿qué opináis? ¿utilizáis frameworks para css? ¿tenéis un set de herramientas básico o empezáis de cero siempre?

Proto.Menu: un menú contextual con Prototype

Proto.Menu es una interesante solución para crear un menú contextual basado en la librería Prototype.

Proto.Menu

Entre sus principales caracteristicas destacan:

  • Ligero: ~2 KB (~1.5 KB comprimido)
  • No obtrusivo
  • Totalmente personalizable
  • Compatible con todos los principales navegadores
  • Rápido

Para funcionar requiere prototype.js 1.6.0_rc0

Proto.Menu:
http://yura.thinkweb2.com/scripting/contextMenu/

Via Ajaxian

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory