Este nombre tan enrevesado es el nombre que le he dado a mi primer plugin. Básicamente lo que hace este plugin es introducir un enlace en los comentarios para dar la posibilidad de responderlos al estilo twitter, es decir @nombre: . Un plugin sencillo pero útil.
Descargar
Instalación
Simplemente descargamos el archivo, lo descomprimimos y lo subimos a la carpeta /wp-content/plugins/. Posteriormente solo lo activamos y automáticamente aparecerá el enlace para responder comentarios. Continuar leyendo →
Las ventajas de un diseño elástico son muchas una de ellas, la más importante, es que gracias a este tipo de diseños se consigue aprovechar en mayor medida el espacio disponible en pantalla independientemente de la resolución que tenga el usuario.
El mayor problema es que muchas veces no sabemos como hacerlo, o mejor, no sabemos como hacerlo de manera correcta. Por esto Matthew James Taylor a desarrollado varios layouts (esquemas) totalmente líquidos. Estos no usan ni JavaScript ni Hacks CSS y son compatibles con la mayoría de los navegadores además de con los iPhones/iPod Touch.
En la página que ha preparado Matthew para mostrar sus diseños podemos ver en acción hasta 7 esquemas distintos con sus correspondientes explicaciones para que podamos aplicarla a nuestros sitios.
Algo muy importante para un diseñador web es conocer que fuentes puede utilizar en sus proyectos de forma que todos, o la mayoría de los usuarios puedan ver la web correctamente. Para ello en Font Tester han publicado un lista muy completa con todas las fuentes que podemos utilizar y que se verán correctamente en los sistemas operativos más populares.
Lista de fuentes compatibles con la mayoría de sistemas operativos:
font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Vía: List of Web Safe Fonts (Font tester)
4 June del 2008 (11:28 pm) Diseño.
Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.
Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:
Código PHP (Copiar):
-
<script type="text/javascript" src="jquery.js"></script> <!-- Libreria jQuery -->
-
<script type="text/javascript">
-
$(document).ready(function(){
-
-
$(".btn-slide").click(function(){
-
$("#panel").slideToggle("slow");
-
$(this).toggleClass("active"); return false;
-
});
-
-
-
});
-
</script>
El código html quedaría de la siguiente forma:
Código HTML (Copiar):
-
-
-
<li><a href="#">Inicio
</a></li>
-
<li><a href="#">Contacto
</a></li>
-
<li><a href="#">Portafolio
</a></li>
-
<li><a href="#">Sobre...
</a></li>
-
<li><a href="#">Ayuda
</a></li>
-
<li class="buscar"><input value="Buscar" /></li>
-
</ul>
-
<div class="clear"></div>
-
</div>
-
-
<p class="slide"><a href="#" class="btn-slide">Men
ú</a></p>
Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:
Código CSS (Copiar):
-
#panel {
-
background: #CCC093;
-
height: 50px;
-
display: none;
-
}
-
.slide {
-
margin: 0;
-
padding: 0 0 0 5px;
-
border-top: solid 4px #825948;
-
height: 40px;
-
}
-
.btn-slide {
-
float: left;
-
background: #825948 url(white-arrow.gif) no-repeat right -50px;
-
text-align: center;
-
width: 144px;
-
height: 31px;
-
padding: 10px 10px 0 0;
-
margin: 0 auto;
-
display: block;
-
font: bold 120%/100% Arial, Helvetica, sans-serif;
-
color: #fff;
-
text-decoration: none;
-
}
-
.active {
-
background-position: right 12px;
-
}
-
-
ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
-
ul.list li {float: left; width: auto;}
-
ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
-
ul.list a:hover {text-decoration: none; background: #825948;}
-
-
ul.list li.buscar {float: right; margin-right: 5px;}
-
ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}
Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.
El titulo no se si es lo suficientemente descriptivo como para entender el contenido de esta entrada, pero, básicamente, lo que vamos a hacer es que mientras que los vídeos de nuestra web cargan se muestre una imagen indicando que el vídeo esta cargando.
Todo ello usando solamente CSS. La técnica es sencilla, consiste en darle estilo al div del vídeo para que muestre una imagen de fondo, una vez que el vídeo cargue, la imagen quedará en el fondo y conseguiremos ese efecto de imagen de carga que buscamos. El código CSS quedaría de la siguiente forma:
Código CSS (Copiar):
-
.video {
-
border: 20px solid #825948;
-
background: url(video-bg.gif) center no-repeat;
-
margin: auto;
-
background-color: #825948;
-
height: 355px;
-
width: 425px;
-
}
Por supuesto el código anterior es personalizable, yo además a añadido un borde y lo he alineado al centro, pero cada uno lo puede personalizar a su gusto.
El código Html sería algo así:
Código CODE (Copiar):
-
<div class=
"video"><object classid=
"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width=
"425" height=
"355" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name=
"wmode" value=
"transparent" /><param name=
"src" value=
"http://www.youtube.com/v/KA2B5X0LhMY&hl=en" /><embed type=
"application/x-shockwave-flash" width=
"425" height=
"355" src=
"http://www.youtube.com/v/KA2B5X0LhMY&hl=en" wmode=
"transparent"></embed></object></div>
Podeís ver un ejemplo de como queda el código o descargar la imagen que he usado en el ejemplo.
Primero que nada: ¿Que es y para que sirve? PHP Speedy Wordpress Plugin es un plugin para Wordpress que acelera la carga del blog, uniendo y comprimiendo los archivos Javascript y las Hojas de Estilo (CSS). La página cargará más rápido y si usamos varias librerías JavaScript notaremos bastante la diferencia.
A continuación hablaremos de:
- Instalación
- Configuración
- Prueba de la configuración
- Activación
- ¿Realmente mejora el tiempo de Carga?
Instalación
La instalación no es diferente a el resto de plugins, simplemente lo descargamos y subimos la carpeta php_speedy_wp al directorio wp-content/plugins de Wordpress.
Antes de activarlo tenéis que aseguraos de que los directorios /wp-content/plugins/php_speedy_wp/libs/php_speedy/config.php y /wp-content/plugins/php_speedy_wp/cache tengan permisos CHMOD 777. Luego lo activamos y vamos a Opciones » PHP Speedy. Continuar leyendo →
Lo ideal sería que todos los navegadores tengan los mismos estilos por defecto para que no halla diferencia entre ellos a la hora de mostrar las páginas, pero, por desgracia, esto no es así, pero, gracias al CSS podemos minimizar estas diferencias entre los navegadores para que nuestra página se vea correctamente en todos los navegadores.
Este artículo en ingles nos ofrece una larga lista de hojas de estilo que nos permitirán hacer esto que decimos. Todas ellas se encuentran descritas y cada cual debe de elegir aquella que más le guste. A continuación os dejo una de ellas de las que más me han gustado:
Código CSS (Copiar):
-
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
-
fieldset, input, textarea, p, blockquote, th, td {
-
padding: 0;
-
margin: 0;
-
}
-
table {
-
border-collapse: collapse;
-
border-spacing: 0;
-
}
-
fieldset,img {
-
border: 0;
-
}
-
address,caption,cite,code,dfn,em,strong,th,var {
-
font-weight: normal;
-
font-style: normal;
-
}
-
ol,ul {
-
list-style: none;
-
}
-
caption,th {
-
text-align: left;
-
}
-
h1,h2,h3,h4,h5,h6 {
-
font-weight: normal;
-
font-size: 100%;
-
}
-
q:before,q:after {
-
content:'';
-
}
-
abbr,acronym { border: 0;
-
}
PSD2CSS Online es un web que nos permite pasar nuestros diseños hechos en Photoshop a CSS y Html de forma automática y Online. Simplemente tendremos que subir nuestro archivo en formato PSD y automáticamente nos mostrará el resultado, un archivo Html con el CSS incrustado en él.
Además nos permite indicar varios tipos de capas en Photoshop incluyendo un guión y una pequeña palabra al final de su nombre para que la web las trate de una forma o de otra:
- Con
_text podremos definir aquellas capas que son tipo texto.
_form, _inputtext, y _submit nos permitirán autogenerar formularios._jpg conseguiremos que esa capa se guarde como una imagen en formato jpg.- Con
_link indicaremos que se trata de un enlace. Y con _linkover conseguiremos hacer enlaces con Roll Overs. (Enlaces que cambian al situarnos encima)
- Con
_center centraremos la capa marcada.
_bkgnd nos permite que la capa sea un fondo de un div.
Yo lo he probado con un diseño que tenía guardado desde hace algún tiempo y el resultado no ha sido perfecto, he de admitir que el PSD probablemente no estaba bien construido, ni si quiera use ninguna de las propiedades que se indican arriba, fue solo una prueba rápida, pero aún así repito que aunque no fue perfecto el resultado fue bastante bueno y con solo unos retoques podría dejarlo tal y como quiero.
Hoy os presento esta nueva sección del blog, en ella incluiré una lista con enlaces interesantes que me halla encontrado durante la semana y que por su tema, complejidad o simplicidad no halla publicado en el blog. Es una forma de semanalmente ir publicando todos esos enlaces que guardo para publicar pero que nunca acabo publicando.
En principio tendrá una periodicidad semanal, todos los sábados. Espero no fallar ninguna semana. Aquí os dejo la primera lista:
Hoy en día con CSS se pueden hacer muchísimas cosas, y si no os lo creéis aquí tenéis una lista de 50 cosas que podéis hacer con CSS, además algunas tienen sus respectivos ejemplos de muestra y una explicación para su uso.
22 April del 2008 (11:28 pm) Asides.
