Escrito por J.F. el Lunes, 31 de Marzo del 2008 a las 17:42
Interesante forma de incorporar a nuestra página web una barra de progreso, simplemente mediante CSS y un gif animado. El código es muy sencillo, simplemente hemos de tener presente que el ancho máximo serían 200px, por tanto si queremos un 50%, tendríamos que darle al elemento un ancho de 100px en el atributo style. Con un ejemplo se ve claramente:
HTML:
-
-
-
<em style="left: 100px">50%
</em>
-
</span>
-
</p>
Se puede conseguir el mismo ejemplo utilizando algún tipo de lista, como ésta que propone el autor:
HTML:
-
-
-
<em style="left: 100px">50%
</em>
-
</span>
-
</dd>
El código CSS incluido por el autor en el ejemplo que se puede descargar desde su página es la siguiente:
CSS:
-
dl, dt, dd{margin:0;padding:0;}
-
-
dd{
-
width:216px;
-
height:41px;
-
background:url(bg_bar.gif) no-repeat 0 0;
-
position:relative;
-
}
-
dd span{
-
position:absolute;
-
display:block;
-
width:200px;
-
height:25px;
-
background:url(bar.gif) no-repeat 0 0;
-
top:8px;
-
left:8px;
-
overflow:hidden;
-
text-indent:-8000px;
-
}
-
dd em{
-
position:absolute;
-
display:block;
-
width:200px;
-
height:25px;
-
background:url(bg_cover.gif) repeat-x;
-
top:0;
-
}
-
-
/* SINGLE PROGRESS BAR */
-
-
.progressBar{
-
width:216px;
-
height:41px;
-
background:url(bg_bar.gif) no-repeat 0 0;
-
position:relative;
-
}
-
.progressBar span{
-
position:absolute;
-
display:block;
-
width:200px;
-
height:25px;
-
background:url(bar.gif) no-repeat 0 0;
-
top:8px;
-
left:8px;
-
overflow:hidden;
-
text-indent:-8000px;
-
}
-
.progressBar em{
-
position:absolute;
-
display:block;
-
width:200px;
-
height:25px;
-
background:url(bg_cover.gif) repeat-x 0 0;
-
top:0;
-
}
Para más información, y ver más claro su uso no dudes en ver la demo o descargarte el archivo de ejemplo.
Categoria: Recursos, CSS
Escrito por J.F. el Lunes, 24 de Marzo del 2008 a las 16:59
Ya hemos hablado en alguna ocasión sobre las resoluciones en las páginas web, asi que si has leído el artículo comprenderás las ventajas y desventajas de diseñar para diferentes resoluciones de pantalla.
Te decidas por el tamaño que te decidas, nunca vienen mal disponer de unos layouts sobre los cuales poder apoyarte a la hora de crear una plantilla para tu diseño. Pensando en elaborar diseños de medidas fijas, puedes optar por utilizar o layouts de 750px, o layouts de 950px. En ambos links encontrarás multitud de diseños muy variados, con diferente número y composición de columnas, para que escojas el diseño que más te guste.
Enlaces: | Layouts 750px | Layouts de 950px
Categoria: Recursos, CSS
Escrito por J.F. el Jueves, 20 de Marzo del 2008 a las 13:49
En un nuevo post patrocinado po Zync, voy a hablaros de CyberNETicos, una empresa española que ofrece alojamiento web. Ofrece diferentes tipos de planes, todos ellos con un panel de control desde el que poder utilizar diferentes funciones, como un instalador de programas y scripts automático, módulos Perl, copias de seguridad, estadísticas, ftp, phpMyAdmin, y muchas más. Todo está en castellano, por lo que supone una ventaja para los que hablamos éste idioma.
Dispone de diferentes planes, que se adaptan a tus necesidades:
- Plan básico: 100MB de espacio, 5GB de transferencia.
- Plan personal: 500MB de espacio, 10GB de transferencia.
- Plan medio: 1GB de espacio, 20GB de transferencia.
- Plan avanzado: 2GB de espacio, 50GB de transferencia.
- Plan profesional: 5GB de espacio, 100GB de transferencia.
- Una vez necesites mayores requerimientos, puedes poner a tu disposición de servidores privados virtuales, para webs con alta carga de tráfico.
Todos éstos planes llevan incluido 1 dominio gratis, que te renuevan gratis cada año si sigues utilizando CyberNETicos.
Aparte de los planes de hosting para páginas web, también me ha llamado la atención de que te ofrecen una forma de montar tu emisora de radio a través de Internet, un servicio que no había visto ofrecer antes.
En resumen, CyberNETicos es una empresa que ofrece alojamiento web española, por lo que en caso de tener algún problema podrás ponerte en contacto con ellos, y no sufrirás la barrera del lenguaje, como ocurriría si tu hosting estuviese en el extranjero.
Los planes de hosting en España se encuentran más caros que en otros sitios como Estados Unidos, debido en gran parte a la debilidad por el dólar, pero creo que la pequeña diferencia de precio puede merecer la pena y optar por un hosting en España.
Categoria: General
Escrito por J.F. el Miércoles, 19 de Marzo del 2008 a las 11:22
Hoy veremos un código bastante útil, que nos permitirá mostrar contenido solo a aquellos visitantes que provengan de una búsqueda realizada en un buscador. ¿Por qué querríamos hacer ésto? La respuesta es sencilla, y el ámbito en el que más se aplica es en la publicidad.
Los visitantes asiduos a nuestra web, rara vez pincharán en la publicidad del sitio, sin embargo, los usuarios que más clicks realizan en anuncios son aquellos que acceden a nuestro sitio web a través de los buscadores.
Por ello es una buena idea, mostrar publicidad solo a los visitantes que provengan de buscadores, de esa manera evitaríamos molestar a nuestros lectores habituales. También podríamos utilizar un anuncio más llamativo, u ofrecer una forma más clara de suscribirse a nuestros contenidos. Son solo un par de ideas, luego cada uno que lo adapte a sus necesidades. El código PHP que usaríamos sería el siguiente:
PHP:
-
<?php
-
if (preg_match('/q=|search/',
$_SERVER['HTTP_REFERER']) ) {
-
-
}
-
//Dentro del print, meteremos el código que queramos, como puede ser
-
//un bloque de anuncios Adsense
-
?>
Un experimento con la publicidad estoy realizando en mi otro blog, pueden leer más información por si les interesa probar a aumentar sus ganancias en Adsense.
Categoria: PHP, General
Escrito por J.F. el Lunes, 10 de Marzo del 2008 a las 12:23
Si quieres personalizar y dejar tu Wordpress hasta el más mínimo detalle como te gusta, seguro que alguno de los 63 enlaces publicados en Speckyboy te resultan de utilidad. Aquí te dejo 5 como ejemplo:
Enlace: | 63 trucos para Wordpress
Categoria: Wordpress
