Archivo de Diseño web

mediaboxAdvanced

 En mi anterior entrada comentaba que en la nueva web quería mostrar los pantallazos de las aplicaciones mediante un efecto de lightbox. Estuve probando lightbox y slimbox y los dos me gustaron. El problema vino a la hora de mostrar videos de una manera similar. El motivo de querer mostrar videos es por mostrar la potencia del autocompletado, que es la nueva funcionalidad de los programas.Estuve probando videobox, pero no conseguí hacerlo funcionar al mismo tiempo ni lightbox ni con slimbox. Por lo visto hay problemas entre las versiones de mootools que usa videobox y slimbox, y entre videobox y lightbox porque usan eventos similares para cosas distintas y hay conflictos entre ellos. Como no soy un experto en javascript me puse a buscar una librería que ofreciera la funcionalidad conjunta, mostrar imágenes y videos con el efecto de lightbox, y encontré mediaboxAdvanced que ha resultado ser la solución a todos mis problemas. Permite mostrar imágenes, videos y otros elementos de la manera que yo quiero.De momento he probado a subir el video del autocompletado a YouTube, pero le cambia la resolución a una menor a la original del video con lo que se pierde calidad. Tengo que probar con otros sitios de almacenamiento de videos para ver de mostrar el video a la resolución original sin que pierda calidad.Como primicia para los lectores del blog, aquí teneis el video del autocompletado en Cuaderno de Bitácora.

acerca de la web alanit’08

Hace algún tiempo comenté que quería probar cms ligeros para la nueva web de alanit, que he dado en llamar alanit’08. La verdad es que pronto deseché la idea del cms porque no tenía nada claro como integrar el proceso de compra con el cms. El siguiente paso fue probar con WordPress, pues ahí tenía la posibilidad de hacer la página de compra como una página con entrada independiente del blog. Así que me puse a mirar plantillas para coger ideas, y me llamó mucho la atención las plantillas de tipo magazine, en especial una llamada Mimbo. Creo que a estas plantillas se le pueden sacar mucho provecho para hacer publicaciones on-line que quieran evitar el formato blog tradicional.Al final he optado por hacer la web a mano. Como había cosas de CSS que no tenía claras, en especial el modelo de cajas, me he leido el manual de Introducción a CSS de librosweb.net que recomiendo encarecidamente. El manual es realmente bueno, y no creo que desmerezca de cualquier libro que se pueda comprar en una librería. También he estado mirando editores html/php/css y he encontradado uno que me ha gustado mucho. Se llama WeBuilder 2008 y es un editor de código orientado a lenguajes web muy recomendable.En cuanto a la web en si, he optado por un diseño ligero y está bastante influenciada por alguna web de software para Mac que he visitado ultimamente. Va a tener una sóla página por cada programa donde muestre todo lo relacionado con el mismo. Quiero mostrar capturas de pantalla con Lightbox y también quiero incluir videos para mostrar la funcionalidad de autocompletado. He hecho pruebas de screencasts con una aplicación gratuita llamada TipCam y funciona bien. Ahora tengo el problema de que Lightbox no se lleva bien con videobox, y que este último no muestra FLV que es el formato de salida por defecto de TipCam. Como alternativa estoy viendo la posibilidad de subir los videos a YouTube y tirar de ahí, pero es algo que tengo que probar.Pero todo esto a ratitos, cuando el señorito me deja.

buscando un cms ligero

He decidido rehacer el sitio de alanit por completo, pero quiero hacerlo usando un gestor de contenidos. Por ello estoy buscando un gestor de contenidos ligero, orientado a hacer un sitio web completo mas que orientado a blogging. No quiero meterme con Drupal o Joomla, porque mi intención es hacer una web muy ligera, sin mostrar detalles de los programas sino simplemente presentarlos y dar opción a descargarlos. De momento estoy mirando temas para WordPress, que es el gestor de contenidos que más conozco, pero quiero mirar también otras alternativas. He descubierto la web AyudaWordpress y con ella estoy aprendiendo un montón de cosa, como el Manual CSS cajas coloreadas y el plugin Contact Coldform.El motivo de rehacer la web es debido a que después del verano espero tener listas nuevas versiones de los programas, al menos de Cuaderno de Bitácora y Findemes, y quiero introducir modificaciones en la manera de distribuir los programas. Así que atentos, que se aproximan novedades.

negresbetanics.com

En las últimas semanas he estado haciendo una web para mi comparsa de moros y cristianos, los Negres Betànics. Es una comparsa de solera en las fiestas de Novelda, y una de sus características más importantes es que todas las filás o escuadras desfilamos con trajes de guerrero y pintados de negros. Estas pinturas aportan un plus de vistosidad a los desfiles y siempre somos una de las comparsas más aplaudidas en estos actos.Cuando planteamos hacer una web, yo me negué a hacer una web clásica - con xhtml/css y picado a mano para entendernos - y expuse que la mejor manera era hacerla con un gestor de contenidos, como si fuera un blog de tal manera que cada filá pudiera publicar lo que quisiera dentro de una normas.El sitio está hecho con WordPress y usa como base el tema BlueBox. A la hora de categorizar las entradas, opté por poner enlaces fijos a las distintas categorías, de tal manera que la barra lateral tiene una estructura fija separada en secciones. Además he usado los siguientes plugins de WP:

Además he hecho una modificación sobre el tema de WP para que la imagen de cabecera de la web vaya cambiando cada vez que se carga una página. Esto le da mucha vida a la web, ya que cada vez que haces un click ves una imagen distinta en el encabezado. La web tiene este aspecto:Por cierto, mi filá se llama Viidones.

desarrollo web con OS X

Siguiendo el post ¿Programación web con OSX Intel? no hay problema he montado en mi Mac el trio Apache2+PHP5+Mysql. He cambiado el DocumentRoot de Apache para que apunte a /Users/Joseluis/Web y ya lo tengo funcionando. OS X 10.4 viene con Apache 1.3 de serie, y en este post explican como desinstalarlo e instalar Apache 2. Una vez instalado el servidor web, se inicia y se detiene desde la opción Compartir del apartado Internet y red de las Preferencias del sistema.Para gestionar las bases de datos de MySql se puede optar entre PhpMyAdmin o CocoaMySql que es un cliente gráfico para administrar MySql. Una vez ya tenemos nuestra web montada necesitaremos un cliente ftp, como CyberDuck.Todo lo mencionado hasta aqui Apache2, PHP5. MySql, CocoaMySql y Cyberduck es software gratuito, aunque alguno de ellos aceptan donaciones de los usuarios.Creo que lo más delicado de hacer desarrollo web con OS X es la elección del editor. Hay algunos editores gratuitos bastante buenos, como Smultron, pero hay dos editores de pago que se llevan los mayores elogios: Coda y Textmate.Coda es un editor de sitios web que integra un editor de código, editor de hojas de estilo y cliente ftp. Una de las funciones estrella de Coda es su autocompletado de código que te hace ahorrar un montón de tiempo. Todo con un aspecto super logrado, sólo hace falta ver la web que se gasta este gente para ver el estilazo que tienen.Para mucha gente Textmate es el editor para Mac. De este programa hablan muy bien y tiene una auténtica legión de seguidores. Incluso hay editado un libro sobre Textmate por los autores del Pragmatic Programmer. Es un editor puro y duro para multiples lenguajes, y tiene cosas como folding de código, bundles, integración con Xcode y un montón de funcionalidades que le hacen ser un firme candidato a quedarse como editor de código en mi Mac.Coda cuesta 79$, mientras que Texmate cuesta 39€. La diferencia no es tanta, pero quiza lo que inclina la balanza para mi gusto es que Textmate es un editor que cubre un amplio abanico de lenguajes, mientras que Coda está centrado unicamente en lenguajes web.Mientras preparaba este post he visto que Art-xtreme ha publicado un nuevo post sobre la instalación de Apache2+PHP5+MySql con Leopard. Yo sigo con Tiger.

el fester de novelda

Estos meses he estado haciendo la web de la Junta Central de Moros y Cristianos de Novelda. Surgió como un favor a uno de mis mejores amigos que es el Vicepresidente de la Junta y lo he pasado muy bien haciendo la web. Me metí en el lio porque contaba con el apoyo de Manolo Boyer para todo el tema del grafismo. Manolo Boyer es un diseñador gráfico de Novelda que lleva hechos muchos Betanias, que es la revista de fiestas de Novelda, y es un gran profesional. Si quereis ver la web y conocer la Fiesta de Moros y Cristianos de Novelda, su historia, comparsas, actos festeros, premios a las filás, no dejeis de visitar el fester de Novelda.

elfester.jpg

Una foto mia con mi amigo José Luis Amorós, el Cano, origen y responsable último de este trabajo. Cano es Beduino, dela filà Xicots, y yo soy Negre Betànic, de la filà Viidones, la filà que más premios Arcadi Blasco ha conseguido.

ixus 103.jpg

navegación por pestañas y portadas de libros

Después de mucho probar he llegado a un diseño de la nueva web de alanit que me gusta. Está basado en el artículo taming lists de A list apart, uno de los mejores sitios sobre diseño web que conozco. El nuevo diseño queda así:

20031031.jpg

El caso es que me ha tocado ponerme de nuevo a mirar cosas sobre diseño web, faceta que tenía algo abandonada, y me ha picado la curiosidad el sitio de Jeffrey Zeldman, uno de los editores de A list apart. Resulta que Zeldman tiene un libro sobre diseño de sitios web que tiene buena pinta y que va a ser publicado proximamente en España. Es chocante comparar la portada de la versión original de libro con la que se va a editar aqui.

20031031b.jpg

A lo mejor son manias, pero mira que me fastidia que le cambien la portada a un libro. De verdad que es algo que me toca las narices.

diseño de sitios web

Hubo una época, hará unos 4 años, en que me dediqué al diseño de webs para terceros. De aquella época todavía quedan estos sitios tal cómo los diseñé:

Ahora estoy rediseñando alanit y realmente me doy cuenta de que cada vez busco más el minimalismo y la sencillez.