últimoartículo

Slideroll Gallery AV: Crea tus galerías multimedia para webs de forma sencilla

21.03.2007

¿Tienes una web o blog y necesitas una galería de imágenes y/o videos? ¿Necesitas que la galería sea dinámica y con efectos graficos? ¿No quieres complicarte usando códigos?

Con Sideroll Gallery AV puedes generar tu galería en muy pocos clicks. Te permitirá guardar el resultado en una carpeta o bien subirla a tu servidor. Una vez generado ejecutas el fichero index.html y podrás visualizar tu fantástica galería.

artículosanteriores


Chuletas, chuletas y más chuletas

19.12.2006

ChuletasEl Diccionario de la Real Academia de la Lengua Española define CHULETA (3ª acepción) como entre estudiantes, nota o papelito que se lleva oculto para consultarlo disimuladamente en los exámenes.

He visto muchos tipos de chuleta como estudiante y como docente… pero nunca olvidaré una en forma de bolígrafo.

Hace tiempo nuestro amigo eMe publicó varios artículos dedicado a este tema:

Ahora que no se encuentra entre nosotros este fantástico diseñador, tomo su testigo para continuar publicando una relación de chuletas que he descubierto en Smashing Magazine:

Actionscript

Ajax

Apache

ASCII Character Codes

ASP

C# and VB.NET

CSS

CVS

C++

Django

Firefox

Google

HTML/XHTML

Java

JavaScript

LaTeX

Microformats

Misc

MySQL

Oracle

Perl

Photoshop/Gimp

PHP

Python

Regular Expressions

Ruby

Unix/Linux

Weblog

Windows

XML

Pensé que sería buena idea bajarse todos los pdf’s y subirlos comprimidos para facilitar la descarga ¿No? ;)

Web de Cortesía

11.12.2006

Muchas veces nos vemos obligados a mostrar una página web temporal, que informe al visitante que estamos en plena fase de desarrollo o mantenimiento.

Una imagen corporativa, mostrando el logo, un mensaje y un email de contacto, suele bastar.

Esta imagen no debería sobrepasar los 800px de ancho para que pueda visualizarse correctamente en la mayoría de las resoluciones del monitor. Por otro lado sería ideal que quedara la imagen centrada horizontal y verticalmente. Para conseguir este centrado con CSS, os sugiero esta simple solución:

<html>
<head>
<title>ACME LT: Alta Tecnología para Todos</title>

<style type=”text/css”>
<!- -
body{
background-color: #000;
text-align: center;
}
#logo{

position: absolute;
margin-left: -400px;
margin-top: -300px;
top: 50%;
left: 50%;
width: 800px;
height: 600px;
vertical-align: middle;
}
- ->
</style>
</head>

<body>
<div id=”logo”>
<img src=”img/cortesia.jpg” alt=”Bienvenidos a ACME LT”>
</div>
</body>
</html>

Como habréis dado cuenta a los margin-left y margin-top le asignamos la mitad del width y height.

A la propiedad vertical-align le hemos asignado el valor middle por si en lugar de una imagen queremos mostrar texto.

Sustituir Texto en Posts de WordPress

22.09.2006

Sustituir texto con MySQL Muchos de los amigos de BdW también lo son del photoblog jggweb.

Un híbrido entre blog y photoblog, que expone muchas fotografías, publican tutoriales y videotutoriales sobre técnicas de retoque digital, reseñas sobre aplicaciones software para los amantes de la fotografía digital, así como artículos sobre técnica fotográfica.

Desde hace algún tiempo los post se publican en español y en inglés, gracias a la inestimable ayuda de Simon.

En la cabecera de una página web, antes del HEAD, debemos especificar el idioma con el que se piensa escribir, de la siguiente forma:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

A lo largo del documento (en cada uno de los post) si escribimos algo en otro idioma es importante marcarlo para que sea fácilmente identificable durante las futuras indexaciones. Algunos ejemplos podrían ser:

<p>Fue presentado en el festival de cine de San Sebastián.</p>
<p xml:lang="en">It was presented at the Sundance Film Festival.</p>

También podríamos especificar si es inglés británico o americano.

<p xml:lang="en-GB">Where is Paul?</p>
<p xml:lang="en-US">Elvis lives!</p>

Para diferenciar el texto en inglés creé la siguiente clase CSS:

.ingles{
color: #889944; // Color del texto verdoso
padding-top: 8px; // Distancia entre el borde superior y la primera línea
border-top: 1px solid #fff; / Define un borde superior blanco
}

Por lo que para publicar párrafos en inglés usaba el siguiente código:

<div class=”ingles”>It took 2 months to edit and mount the 35 minutes which it lasts.</div>

Ahora tras cientos de artículos publicados en los dos idiomas, pensé que debería añadir la cláusula xml:lang=”en” en cada etiqueta <div class=”ingles”>. Una labor que si la hubiera realizado a mano me habría llevado mucho, mucho tiempo.

Por esto decidí que lo mejor sería ejecutar una consulta SQL que lo realizara con un sólo clic. Para ello accedí al Panel de Control de phpMyAdmin (aunque también podría haber usado el MySQL-Front) y ejecuté la siguiente consulta SQL:


SELECT `post_content`
FROM `wp_posts`
WHERE `post_content` LIKE '%<div class="ingles">%';

Esta consulta devuelve los contenidos de los artículos que contienen la etiqueta <div class=”ingles”>.

Después, con una consulta de actualización, sustituimos todas las etiquetas <div class=”ingles”> por <div xml:lang=”en” class=”ingles”>.


UPDATE `wp_posts`
SET `post_content`=REPLACE( `post_content` , '<div class="ingles">', '<div xml:lang="en" class="ingles">' )
WHERE `post_content` LIKE '%<div class="ingles">%'

La función REPLACE sustituye el texto definido por el segundo parámetro con el texto del tercer parámetro en el campo definido por el primer parámetro, es decir sustituye todas las etiquetas <div class=”ingles”> por <div xml:lang=”en” class=”ingles”> en el campo post_content de la tabla wp_posts.

Espero que os resulte útil.

Color Wheel Pro: Colores Armoniosos en tu Web

13.09.2006

Color Wheel ProColor Wheel Pro es un programa que ayuda a crear esquemas de color armoniosos (ver ejemplo) basados en la teoría del color.

Las características que lo hacen recomendable son:

  1. Permite previsualizar distintos esquemas de color sobre ejemplos reales.
  2. Ofrece un conjunto de esquemas de color predefinidos.
  3. Permite la exportación de la paleta seleccionada a Adobe Photoshop, Adobe ImageReady, Macromedia Fireworks, Macromedia Flash, Corel Draw, etc.
  4. Incorpora en la ayuda del programa una estupenda explicación sobre la teoría del color, significado de los colores y las ventajas e inconvenientes de los esquemas de color clásicos.
Aqua Sunny Energy Contrast Eggplant

Otros artículos publicados en BdW:

Script para insertar un reloj en nuestra web

12.09.2006

clocklinkClocklink es una Web especializada en el diseño de relojes que podemos incorporar en nuestra página o blog. El funcionamiento es muy fácil, solamente tendremos que seleccionar el modelo de la gallería que más nos guste, indicarle la franja horaria que queremos mostrar y copiar el código que nos genera.

La Web está bien estructurada, la navegación es fácil y los diseños están muy conseguidos. También nos da algunas más posibilidades como bajarnos fondos de escritorio con relojes (aunque también tenemos la opción de utilizar gadjets de Google Desktop) o utilizar paneles de “Cuenta atrás”

La única pega es que cuando nos ponemos encima de uno del reloj, nos sale una publicidad, y si se hace clic, nos iremos a su página. Creo que es un justo precio que hay que pagar por la utilidad que nos presentan.

Web Creme: Selección de Webs con Diseño

27.05.2006

Web CremeHace tiempo que editoriales como The Pepin Press, Feierabend o Taschen publican cada año una selección mundial de diseños web. Realmente útil para mantenerse actualizado conociendo las últimas tendencias en el diseño web.

Ahora en Web Creme podemos encontrar algo parecido, pero con el dinamísmo que proporciona una publicación diaria. Web Creme es una bitácora donde publican diseños de web que destacan por su aspecto visual.

Os la recomiendo.

Generador de Paletas de Color

07.04.2006

DeGraeve nos ofrece este Generador de Paletas de Color online que nos permite obtener los códigos hexadecimales de los colores que forman parte de una imagen que le proporcionamos por medio de una URL.

Generador de Paletas de Color

Muy útil para empezar a diseñar una web a partir del logo o una imagen concreta.

Previsualizar miniaturas de photoshop CS1

18.02.2006

Desde que salió el photoshop CS1 deshabilitaron una funcion bastante útil, que consistía en ver las miniaturas de los archivos psd en el explorador de windows. Investigando encontré esta librería que nos permite habilitar esa función que se quedó en Photoshop versión 7.

Lo podéis descargar de: http://www.dlldump.com/download-dll-files.php/dllfiles/P/psicon.dll/download.html

Simplemente basta con colocar este fichero en “C:\Archivos de programa\Archivos comunes\Adobe\Shell” y funcionarán de nuevo las miniaturas :D

Compatibilizar IE y MOZILLA

27.01.2006

Hace mucho tiempo que Mozilla Firefox es mi navegador habitual (mi amigo eMe es el responsable de este hecho). Tiene todas las características para ser el lider de los browsers. Una de las que más me convence es que cumple los estándares redactados por la W3C. Pero podéis descubrir muchas más ventajas en el artículo Ventajas de Firefox frente a Internet Explorer.

Por otro lado tenemos al MicroSoft Internet Explorer. Microsoft impuso sus estándares sobre los universalmente establecidos del W3C incumpliendo con las especificaciones de HTML a distintos niveles. Pero no debemos olvidar que todavía el browser de Bill Gates reina (68% de los visitantes a BdW lo usan).

El caso, es que esta falta de unificación de criterios hace muchas veces difícil la maquetación de nuestras webs. Lo que queda bien para Mozilla, queda descolocado en el IE… y viceversa. Es un problema. Sobre todo cuando proyectamos layouts con muchos bloques o capas.

Os propongo una solución:

  1. Creamos tres hojas de estilo:
    • estilo.css: Declaración de todos los estilos de la web.
    • layoutIE.css: Declaración del layout para una visualización óptima en el Internet Explorer.
    • layoutW3C.css: Declaración del layout para una visualización óptima en los browser que siguen los estándares definidos por World Wide Web Consortium.
  2. En la sección HEAD de la página web añadir el siguiente código:
  3. <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
    <link rel=”stylesheet” type=”text/css” href=”layoutW3C.css”>
    <!–[if IE]>
    <link rel=”stylesheet” type=”text/css” href=”layoutIE.css”>
    <![endif]–>

    Sólo se aplicará la hoja de estilos layoutIE.css si el visitante está usando el Microsoft Internet Explorer como navegador.

Plantillas CSS y XHTML

18.01.2006

Hay tareas en el proceso de diseño de una página web que se repiten con bastante asiduidad: Crear un documento nuevo para el código html, definir el tipo de codificación, enlazar la hoja de estilos, etc. Lo normal sería que uno, que ya se conoce de varios años, almacenase un documento con unas pocas líneas maestras que le permitiesen comenzar con mayor celeridad el trabajo, y le ahorrasen quizás, tener que recordar algunas de dichas líneas, selectores, etc.

Pero uno es una persona poco práctica, y hasta ahora no había conseguido guardar una plantilla que me facilitase las cosas, (o la guardé en un lugar dónde luego no recordaba…) por eso me han venido tan bien estas plantillas de CSS y XHTML para comenzar a diseñar rápidamente cuando lo necesito.

Vienen muy bien explicadas (en inglés) y a lo largo del tiempo parece que han sido perfeccionadas gracias a los comentarios de gente que ha querido colaborar. Muy útiles.

Todos estos enlaces, para no perderlos los voy añadiendo a Tacs, como ya comenté el otro dia.

Listas de recursos para el Webmaster

17.01.2006

Hoy escribo sobre dos páginas que no deberían faltar en los favoritos de alguien relacionado con el diseño y administración de sitios web: Web Developer’s Handbook y Resources For Web Design.

La primera puede que ya la conozcáis puesto que es una página desarrollada y mantenida por Vitali Friedman al que ya hicimos referencia hace unos dias por su recopilación de las mejores fuentes de licencia gratuíta de 2005. Además, el prolífico Skeku lo enlaza también esta semana, aunque él lo conocía desde hace tiempo y no nos lo quiso contar;).

La segunda la he descubierto hoy por casualidad, para mi gusto es más concisa, y quizás más útil que la del señor Friedman, aunque el hecho de que el diseño sea más básico da sensación de una mayor desorganización.

Entre ambas creo que no dejan fuera ninguno de los recursos que podamos necesitar a la hora de diseñar, programar, validar y mantener una página web: Información de los distintos buscadores y navegadores, tutoriales de CSS, HTML, JS, etc., validadores de código, artículos sobre autoría web, analizadores de tráfico… Todo!

Lo dicho, la referencia completa de un webmaster en dos páginas.

Actualización (19-1-06): En Criterión, Skeku nos muestra un nuevo enlace similar a los comentados anteriormente, (nos lo había prometido en los comentarios) se trata de CSS & XHTML Bookmarks. Echadle un ojo.

Las mejores fuentes de licencia gratuíta del 2005

13.01.2006

Vitaly Friedman es un diseñador web alemán que se ha dedicado a recopilar las mejores fuentes de licencia gratuíta que se hicieron el pasado año 2005. Todas son realmente dignas de descargar y utilizar, y tal es así que de entre las seleccionadas encontramos algunas tan reconocidas ya como la Blue Highway.

Además la selección esta dividida según el tipo: 25 Best License-Free Quality Fonts y 15 Best License-Free Pixel Fonts, tenéis que echarles un ojo.

Por añadidura, el señor Friedman, a reunido las 25 webs que no te deberias haber perdido en el 2005, para que aunque ya se te haya escapado el año, no se te escape también lo bueno que en él se hizo.

Creación de Web con Flash

26.12.2005

Nuestro amigo extremeño Daniel de la Cruz de Granatta me ha dado a conocer dos de sus últimos proyectos.

Se trata de dos libros de la editorial Anaya con muy buena pinta:

  1. Diseño de sitios web con Flash
  2. Flash PHP y MySQL. Contenidos dinámicos.

Link Popularity Check

12.12.2005

Link Popularity Check es una aplicación gratuita que facilita el seguimiento de la popularidad de diversas webs.
Interfaz de Link Popularity Check
Una herramienta muy útil para conocer como le va a la competencia.

Enlace en el Encabezado

23.11.2005

Con frecuencia nos podemos encontrar con páginas web con un encabezado que muestra una imagen por medio de la propiedad background de CSS asociado a un elemento del layout.

Si deseamos que la imagen de fondo sea un enlace a la página inicio de la web debemos añadir el siguiente código en la etiqueta del encabezado de la plantilla inicio:

<div id=”header” onClick=’window.location.href=”http://www.dominio.com”‘>

y en la hoja de estilo debemos añadir la siguientes reglas en la declaración del estilo header:

cursor: pointer;
cursor: hand;

Otra propuesta más accesible de Leo:

<h1 id="encabezado"><a href="/">Nombre del sitio</a></h1>

Y en el CSS:

h1#encabezado {
background: url(’img/logo.jpg’) no-repeat;
text-indent: -9999px;
}

h1#encabezado a {
display: block;
width: 100px;
height: 100px;
}

Stan nos recomienda que leamos un artículo suyo titulado Personaliza el titulo de tu sitio con javascript en el que se recogieron muchas recomendaciones.

Layout 3 Columnas, Encabezado y Pie

12.11.2005

Fruto de un encargo, he diseñado con CSS este simple layout con tres columnas, encabezado y pie, con la columna central líquida.

El color y la anchura de las columnas derecha e izquierda lo he aplicado cambiando el color y anchura de los bordes del contenedor caja:

#caja {

border-left: 150px solid #B8C4CC ; /* ancho, estilo y color de la columna izquierda */
border-right: 150px solid #B8C4CC; /* ancho, estilo y color de la columna derecha */

}


Layout 3 Columnas, Encabezado y Pie

Espero que os pueda resultar útil.

Nota: ¿Quieres colaborar con BdW? Envíanos tu layout y lo publicaremos haciéndonos eco de su autoría.

Lorem Ipsum: Texto de Prueba

10.11.2005

Cuando estamos diseñando el layout de una página web o cualquier otro diseño que contenga texto nos puede venir bien este recurso. Se trata de un generador de texto de prueba del tipo:

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu tortor vel neque congue congue. Mauris quis erat. Vestibulum dictum ligula vel purus. Vivamus eget purus. Quisque nulla. Proin nonummy elit nec erat. Suspendisse molestie, orci sed molestie congue, erat pede consectetuer tellus, non ultricies turpis purus eget lorem. Fusce ut libero. Donec gravida euismod elit. Sed rhoncus. Vivamus nibh magna, scelerisque id, tempus in, auctor non, ipsum. Vivamus vitae metus id elit consectetuer vestibulum. Etiam augue. Ut velit urna, porta a, commodo vitae, blandit vitae, odio. Ut mi arcu, placerat eu, imperdiet non, molestie quis, elit. Phasellus ligula ipsum, venenatis sit amet, feugiat eget, blandit aliquam, risus. Donec mollis.”

En contra de lo que podríamos pensar este texto, que seguro que hemos visto en repetidas ocasiones, no es fruto de un algoritmo aleatorio. Tiene su raiz en el libro “Finibus Bonorum et Malorum” (Los extremos de Dios y el Demonio) de Marcus Tullius Cicero (Cicerón), escrito el año 45 antes de Cristo. Se trata de un tratado sobre Ética y fue muy popular entre los grandes hombres del Renacimiento.

Usabilidad: Los 10 Errores de las Bitácoras

02.11.2005

Según Jakob Nielsen estos son los 10 errores más frecuentes cometidos por los responsables de bitácoras:

  1. No mostrar una reseña biográfica del autor.
  2. No mostrar una fotografía del autor.
  3. Títulos de los artículos no descriptivos.
  4. Textos de los enlaces poco descriptivos.
  5. Difícil acceso a contenidos archivados.
  6. El calendario es el único sistema de navegación.
  7. Frecuencia irregular de publicación.
  8. No especializarse en un tema.
  9. No ser formal, riguroso y detallista con los contenidos publicados.
  10. No disponer de un propio dominio y un propio Sistema Gestor de Contenidos (CMS).

Estructura de un Presupuesto Web

01.11.2005

Cuando emprendemos la importante tarea de elaborar un presupuesto de un sitio web debemos emplearnos a fondo para obtener un documento técnico que sea completo, claro y conciso.

La estructura de dicho documento es la siguiente:

  1. Portada.
  2. Tabla de Contenidos.
  3. Descripción General del Proyecto.
  4. Justificación.
  5. Análisis de Proyectos Existentes.
  6. Propuesta Detallada del Proyecto.
  7. Metodología de Trabajo.
  8. Cronograma del Proyecto (tiempos de ejecución).
  9. Mantenimiento y Actualización.
  10. Promoción.
  11. Presupuesto Detallado.
  12. Formas de Pago.
  13. Garantías.

Más información en:

Nota: Es una satisfacción comunicaros que con este artículo ya son 200 los publicados por este miembro de BdW. Gracias por estar ahí.