| |

Incluir CSS a tu RSS

ByLuis

Algo sencillo y que queda muy bien a la hora de mostrar nuestras hojas de estilo, claro, que si usamos una aplicación que las muestra según sus propios estilos, no conseguimos nada.

Se trata de añadir una línea indicando el xml-stylesheet en las RSS:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://dominio.com/rss.css" ?>
...

Y luego definir los estilos, en el ejemplo del autor, a parte de formatear la salida, oculta aquellas partes del RSS que no quiere que aparezcan:

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* Elementos ocultos */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

Ejemplo

Adding a CSS StyleSheet to your RSS Feed

Vía / dzone

Similar Posts

|

Crear nuestros propios checkboxes y radio buttons mediante CSS

ByLuis

A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.

fuglychecks.pngEsto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.

Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).

Tenemos estos elementos HTML:

<input type="checkbox" id="opc1"/><label for="opc1">Opcion 1</label>

Los estilos iniciales para el input y para el label son los siguientes:

input[type="checkbox"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
label {
padding-left: 20px;
height: 16px;
}

Y por último, los estilos para los distintos estados del input son los siguientes:

input[type="checkbox"] + label{
background: url("imagen.png") 0 0 no-repeat;
}
input[type="checkbox"]:focus + label{
background-position: 0 -16px;
}
input[type="checkbox"]:checked + label{
background-position: 0 -32px;
}
input[type="checkbox"]:checked:focus + label{
background-position: 0 -48px;
}

Styling Checkbox and Radio Graphics With Only CSS

Vía / Digg

CSS Sprits: generador de sprites para CSS

ByLuis

Un sprit en CSS es usar una imagen que contenga a varias imágenes para usar parte de ellas como si fueran independientes y así no tener que estar cargando distintas imágenes. Técnica que se usaba en el ejemplo de personalización de checkboxes y radio buttons que ya contamos hace bastante tiempo.
fuglychecks.pngCrear este tipo de imágenes puede ser algo complicado para algunas personas que no están acostumbradas al uso de programas de dibujo, ya que en algunas circunstancias puede haber imágenes de distintos tamaños.
Para cuando queramos crear el sprit, y no sepamos cómo, o tengamos prisa, podemos usar la aplicación que ofrece CSS Sprites Generator, la cual nos solicita las imágenes y nos devuelve la imagen ya tratada, más sencillo imposible.
CSS Sprites Generator
Vía / PHPDeveloper.org

| |

Jakarta Tapestry paso a paso

ByLuis

Jakarta TapestryJakarta Tapestry es un framework de código abierto de Apache que está pensado para realizar aplicaciones web en Java que sean dinámicas, robustas y altamente escalables, que funciona en todo contenedor de servlets o servidor de aplicaciones. La filosofía de Tapestry se basa en lo siguiente:

  • Simplicidad en la creación de aplicaciones web.
  • Consistencia a la hora de que distintos desarrolladores pueden encontrar soluciones similares a problemas similares.
  • Eficiencia, las aplicaciones deben ser escalables.
  • Reacción ante los errores, aportando modos de diagnósticos.

Aquellos que estéis interesados podéis ver esta guía paso a paso que nos ofrece sitepoint.

Jakarta Tapestry

Guía

Sitemap mediante CSS

ByLuis

Los sitemaps no son algo que al desarrollador le suela preocupar, no se suele pensar en la importancia de ellos, tanto para el usuario como para los motores de búsqueda.

Para aquellos que quieran incluir el sitemap con un buen diseño puede usar este truco que hemos encontrado.

csssitemap.png

Podemos darle un estilo parecido si añadimos CSS al siguiente sitemap:

<div id="sitemap">
<ul>
<li>Web Root
<ul>
<li>stuff
<ul>
<li>nested-deep
<ul>
<li>nested-deeper
<ul>
<li>nested-deepest</li>
</ul>
</li>
</ul>
</li>
<li>nested deep</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Sin estilos sería así:

  • Web Root
    • stuff
      • nested-deep
        • nested-deeper
          • nested-deepest
      • nested deep

Y para que quede como la imagen anterior debería tener los siguientes estilos:

#sitemap {
font:normal 16px Arial,sans-serif;
overflow:hidden;
}
#sitemap ul {
list-style:none;
margin:0;
padding:0;
}
#sitemap li {
background-color:#eee;
margin:0 0 -0.1em;
min-height:1em;
padding:.2em .4em;
position:relative;
width:9em;
}
#sitemap ul ul {
font-size:90%;
margin-top:-1.4em;
}
#sitemap ul ul li {
background:#ddd;
border-top:0.5em solid #fff !important;
border-left:0.5em solid #66c;
left:10.4em;
}
#sitemap ul ul ul li {
background:#ccc;
border-color:#9c3;
}
#sitemap ul ul ul ul li {
background:#bbb;
border-color:#c93;
}
#sitemap ul ul ul ul ul li {
background:#999;
border-color:#c33;
color:#fff;
}

CSS SiteMap

Vía / Posh CSS

Gráficas mediante CSS

ByLuis

Una buena colección de herramientas para generar gráficas (de barras, progreso, de tarta, …):

10 Free CSS Graph Resources

Vía / Intenta

|

Instala cualquier cosa en Ubuntu

ByLuis

ubuntu.pngPara los que no somos usuarios habituales de Linux, en este caso de Ubuntu, la siguiente guía nos puede ser de mucha utilidad para saber cómo instalar aplicaciones en esta distribución.
Parece más enfocada a aquellos que van a pasar de Windows a Ubuntu, por lo que gracias a sus pantallazos y animaciones (¡dios mio, son GIFs animados) nos explica paso a paso lo necesario para realizar estas acciones y no perdernos.
Empieza a explicarnos el package manager y sobre todo las diferencias con Windows, lo cual es algo muy importante si nuestro caso es el de pasarnos de un sistema a otro. Después se centra en la instalación mediante Synaptic, después mediante el terminal y por último manualmente.
How to install ANYTHING in Ubuntu
Vía / Digg