Escrito por J.F. el Sábado, 7 de Junio del 2008 a las 13:21
Un slideshow es una ventana en la cual van rotando imágenes. Hay muchos ejemplos realizados gracias a Javascript, pero nunca está de más disponer de una alternativa en otro formato, como puede ser el cada vez más popular y usado Flash. Las características de JW Image Rotator son las siguientes:
- Efectos entre Transiciones
- Soporte listas RSS, XSPF o ASX.
- Archivos JPG, PNG y GIF
- Flashvars
- Javascript API
- Necesita de Flash 8 o superior (99% de las computadoras conectadas a Internet lo tienen)
- Licencia Creative Commons (para uso no comercial)
Enlace: | JW Image Rotator
Vía: | Frogx.three
Categoria: Flash, Recursos
Escrito por J.F. el Jueves, 17 de Abril del 2008 a las 21:12
Hace mucho que no hablo de ningún theme de Wordpress, sobre todo porque no había salido ninguno que aportara algo diferente, pero en ésta ocasión y a través de múltiples sitios he conocido Charred, un bonito theme para nuestro blog.
Trae ya incorporado un bonito efecto de tooltips, a la vez que nos permite agregar imágenes a nuestras entradas. También dispone en la parte superior derecha de un espacio para colocar pequeños espacios publicitarios o nuestra galería de flickr.
Enlaces: | Charred | Demo
Categoria: Recursos, Wordpress
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 Lunes, 25 de Febrero del 2008 a las 14:48
Interesantes tutoriales que me encuentro para realizar menús CSS al estilo 2.0, de algunos conocidos servicios de la web:
Categoria: Recursos, Manuales, CSS, Javascript
Escrito por J.F. el Lunes, 4 de Febrero del 2008 a las 16:48
Eso es lo que nos ofrecen en Nuviotemplates, plantillas sobre las que poder diseñar nuestro sitio web, con XHTML válido sin el uso de tablas, compatibles con distintos navegadores, cuidando el aspecto de la accesibilidad y con comentarios para poder guiar a todo aquel que desee introducir modificaciones.
Enlace: | Plantillas gratis
Vía: | Adictos
Categoria: Recursos, General
