Multiples bordes con CSS

Este es un truco interesante que me encontré AQUI , como sabemos usando la propiedad border se puede crear un borde simple pero si queremos más de un borde hasta donde sabía era imposible, salvo colocando un div dentro de otro pero ahora me doy cuenta que no hace falta.

El código HTML

Vamos a probar con un sólo DIV, el código sería:

Hasta ahí nada de raro, ahora veamos el código CSS

La hoja de estilos

El truco está en el uso de las pseudo-clases : before y after, al darles formato podemos aplicar un borde adicional, de hecho podríamos ponerle lo que deseemos para lograr un efecto más elaborado.

El demo pueden verlo AQUI

Plantillas versus diseños propios

Esta es una duda frecuente, es mejor descargarse paquetes de plantillas o hacemos un diseño desde 0 para nuestros clientes, yo creo que eso depende de varios factores , por ejemplo si eres un programador y el diseño no es lo tuyo, no hay duda que lo mejor es usar plantillas, incluso hay sitios que te las dan en PSD listas para retocar.

Otro factor que me parece a considerar es el cliente, si estamos haciendo algo pequeño y barato no es como para gastar mucho tiempo, así que con una plantilla salimos rápidamente del apuro.

Ventajas de usar plantillas

• Son muy útiles si lo tuyo no es el diseño también si el cliente no tiene una imagen corporativa y claro no te paga por hacerla tu
• Son más rápidas de trabajar y te ahorra maquetar
• Si incluyen el PSD puedes editar colores, logos y detalles y darle tu toque personal
• Son más económicas que contratar a un diseñador

Desventajas de usar plantillas

• Al ser una plantilla es muy probable que otros también la usen y se note que es una copia
• A veces hacer cambios resulta problemático, ya que muchas no están bien maquetadas
• Las plantillas no sirven como portafolio de trabajo
• No siempre se complace al cliente con una plantilla usualmente se requiere un traabajo más elaborado

WordPress y HTML5

Aunque HTML5 aún esta un poco verde para ser estándard, no esta demás ya ir probando las ventajas de este además que las etiquetas básicas son soportadas por casi cualquier navegador (incluso IE).

Les paso un link a una plantilla para Worpress integramente diseñada en HTML5, seguro se preguntan que ventaja puede tener, pues HTML5 está más orientado al orden y el SEO(optimización para buscadores), por ejemplo tenemos una nueva etiqueta header para el encabezado, las etiqueta nav, article, section, aside, footer dan mucho más orden y hacen nuestro código semánticamente correcto.

Esta plantilla muy liviana sirve perfectamente como esqueleto para futuras plantillas basadas en HTML5
Pueden bajarla AQUI

AWStats sin usar el cpanel

A veces requerimos que varias personas puedan ver las estadísticas de visitas para nuestra página web, pero no queremos que tengan acceso a las opciones de nuestro cpanel debido al riesgo que esto implica, algunos podrían decir pero para eso esta google analytics sin embargo no todo tiene una cuenta en google ni desean crearla, así que veamos como funciona esta alternativa.

Paso1

Lo primero es descargar AWStats de su sitio oficial http://awstats.sourceforge.net/

Paso2

Subimos a la carpeta /public_html/cgi-bin de nuestro servidor únicamente el contenido de la carpeta wwwroot\cgi-bin en el archivo zip, una vez subido cambiamos los permisos de los archivos awredir.pl and awstats.pl a 755

Paso3

Luego subimos la carpeta icon de nuestro archivo a la carpeta /public_html/ de nuestro servidor

Paso4

Ahora debemos descargar el archivo de configuracion de AWstats que debe estar en la carpeta /tmp/awstats y allí debemos encontrar un archivo con un nombre como awstats.midominio.com.conf luego modificamos en este archivo la línea DirIcons=”/icon/” con la ruta que estemos usando para la carpeta de iconos.

Paso 5

Finalmente subimos el archivo awstats.midominio.com.conf a la carpeta /public_html/cgi-bin

Si todo está bien escribiendo la ruta http://www.midominio.com/cgi-bin/awstats.pl?config=midominio.com deberiamos poder ver nuestra estadísticas

Posibles problemas

Tal vez aparezca un mensaje “Internal Server Error”, si esto se produce debemos hablar con nuestro soporte técnico para que habiliten el uso del PERL pra nuestra cuenta.

Otro posible error es que de un error indicando que la configuración no ha sido encontrada, en ese caso hay que verificar la ruta que estamos usando y ver que hayamos subido el archivo de configuración al sitio correcto.

Finalmente es posible que se vean las estadísticas pero los esquemas sin colores, sólo líneas, en ese caso en la configuración debemos verificar la ruta de DirIcons=”/icon/”

CSS3: transformations rotar, escalar, trasladar

En este post vamos a ver las CSS transformations que por si solas no hacen mucho, excepto tal vez la de rotar pueda ser interesante sin embargo su verdadera utilidad se ve en las CSS animations de las que hablaré en un próximo post, aunque desde ya les digo que esas sólo funcionan en Webkit y aún más interesantes son las 3D CSS animations que hacen cosas que sólo he visto en flash pero lamentablemente únicamente soportadas por un webkit night build (es decir una versión tan pero tan reciente que nisiquiera es alpha y sujeta a mil errores).

Vamos al grano, no sin antes advertir que sólo funcionan estos ejemplos en navegadores modernos

Trasladar con CSS3

Para mover el div de su ubicación actual usamos la siguiente propiedad para desplazarlo a la derecha(el segundo valor desplaza hacia abajo):
-moz-transform: translate(3em, 0pt);
-webkit-transform: translate(3em,0);

Rotar usando CSS3

Este ejemplo rotará nuestro div 30 grados
-moz-transform:rotate(30deg);
-webkit-transform: rotate(30deg);

Escalar usando CSS3

Veamos este ejemplo para agrandar un div al doble de su tamaño original
-moz-transform:scale(2);
-webkit-transform: scale(2);

Espero les sean útiles estas propiedades aunque por ahora sean sólo para experimentar