UTDC Blog » html http://www.untrocitodecielo.com/blog Sun, 21 Jun 2009 11:29:41 +0000 en hourly 1 http://wordpress.org/?v=3.0 Separando nuestros posts http://www.untrocitodecielo.com/blog/separando-nuestros-posts http://www.untrocitodecielo.com/blog/separando-nuestros-posts#comments Sun, 07 Jun 2009 12:05:11 +0000 Tijeran http://www.untrocitodecielo.com/blog/?p=177 Continuamos añadiendo elementos de diseño a nuestro blog, en este caso una sencilla separación entre las entradas que puede resultar vistosa si se hace adecuadamente.

El proceso y el código en este caso es muy fácil, solo debemos añadir la imagen que queremos en la carpeta “images”(o la que querais) de nuestro tema, buscar el css y modificar la clase “post” añadiendo esto:

?Ver código HTML
1
2
3
4

 
.post{
     background: transparent url(images/tuImagen.gif) no-repeat bottom;
}


Si al igual que yo, teneis otro texto debajo de la entrada en sí, en mi caso las categorías y tags, podeis añadirle un “margin o padding” para que no se superpongan:

?Ver código HTML
1
2
3
4
5
6

 
.post{
     background: transparent url(images/tuImagen.gif) no-repeat bottom;
     padding-bottom:20px;
     margin-bottom:10px;
}

Por internet hay montones de barras separadoras gratis, pero os aconsejo ser creativos y hacer la vuestra, para darle al blog un toque más personal.

]]> http://www.untrocitodecielo.com/blog/separando-nuestros-posts/feed 1 Estilo de las entradas en wordpress http://www.untrocitodecielo.com/blog/estilo-entradas-worpress http://www.untrocitodecielo.com/blog/estilo-entradas-worpress#comments Thu, 04 Jun 2009 15:59:08 +0000 Tijeran http://www.untrocitodecielo.com/blog/?p=127 Hoy vamos a aprender cómo añadir una sección de mini-posts a un blog wordpress. En realidad con lo que vamos a aprender se puede hacer muchas más cosas, el tema de las mini entradas es solo para ejemplificarlo.

Si tienes la última versión de wp habrás notado que mientras escribes, debajo de cada entrada hay una sección llamada campos personalizados. Pues bien, esto no es otra cosa que la posibilidad de añadir meta datos a nuestras entradas. La forma en la que lo usaremos ahora, es para hacer distinción entre unos posts y otros, es decir poder identificarlos y así darles forma a nuestro gusto en el css.

Para el ejemplo voy a añadir la siguiente sección a mi css, que consiste en una nueva clase para cambiar el aspecto de los mini-posts. Después en mi footer usaré un bucle que llame a la función de wp encargada de reproducir los posts, pero haciendo uso de los metadatos podré cambiar la clase para que se muestre de distinto modo.

En el css:

?Ver código CSS
1
2
3
4

.mini{
  color:white;
  background: black;
}

Estas dos modificaciones simplemente cambian el color de fondo a negro y el color de las letras a blanco, lo único importante es darse cuenta de que usamos una clase, y no un atributo, es decir usamos un punto delante del nombre y no una almohadilla.

En el html:

?Ver código HTML
1
2
3
4
5
6
7
8

 
<div class="<?php echo get_post_meta($post->ID,'mini', true) ?>" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="marcadores" title="Enlace permanente a<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
     <p><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></p>
 
	<?php the_content('Seguir leyendo &raquo;'); ?>
 
</div>

Lo único que nos interesa de aquí es el “get_post_meta()” y esta sección irá en el bucle principal dónde mostremos nuestras entradas. Lo que hacemos es pedirle a wordpress los metadatos de la entrada que tienen el nombre “mini” y puesto que está dentro de un echo lo intrepretará como si fuera el nombre de la clase.

Solo queda meter los metadatos en las entradas con la sección de campos personalizados, para no liarnos lo más sencillo es meter en los dos campos lo mismo, asi no tenemos que pensar si es el nombre del metadato o el contenido a la hora de llamar a la función. Quedaría asi:

campos personalizados

Jugando con el css y los metadatos podemos hacer casi cualquier cosa con nuestras entradas, en mi caso he añadido al pie de página una sección de mini-posts con freebies que iré actualizando.
Fuente: codex.wordpress

]]> http://www.untrocitodecielo.com/blog/estilo-entradas-worpress/feed 1 Introducción al html/css http://www.untrocitodecielo.com/blog/introduccion-al-htmlcss http://www.untrocitodecielo.com/blog/introduccion-al-htmlcss#comments Wed, 27 May 2009 01:37:08 +0000 Tijeran http://www.untrocitodecielo.com/blog/?p=36 Esta entrada está pensada para aquellos que tengais curiosidad por saber cómo funciona una página web y cuales son los elementos implicados en ello.
Una página web no es más que un conjunto de archivos, alojados en un ordenador remoto que llamamos “servidor”.
Cada vez que alguien se conecta a internet y accede a esa web, el servidor envia la información a nuestro ordenador que la recibe e interpreta mostrándonos como resultado la página tal y cómo estamos acostumbrados. Para leerla y entender esa información codificada, seutilizan los navegadores (firefox, ie, safari, etc)…
La mayoria de las webs están escritas en un lenguaje muy básico llamado html. Este lenguaje se incluye entre los conocidos como “de marcas”, debido a que toda la información se agrupa en partes delimitadas por etiquetas o marcas.

Aunque el html puede contener tanto los datos como el estilo de las páginas, actualmente se suelen separar dejando el contenido y la estructura estrictamente al html y el aspecto o diseño al css, del cual hablaremos a continuación.

Los css o hojas de estilo en cascada, son el complemento perfecto para dar forma a los html. Debido a que todo el html se estructura por partes definidas según las distintas marcas, es muy sencillo dar un estilo y decir como debe comportarse cada parte usando el css.
Por ejemplo, supongamos una página web que se compone de cabecera, contenido y pie de página. En html la estructuraríamos asi:

?Ver código HTML
1
2
3
4
5
6
7
8

<head>
</head>
 
<body>
	<div id="cabecera">Esto es la cabecera.</div>
	<div id="contenido">Esto es el contenido.</div>
	<div id="pie">Esto es el pie de página.</div>
</body>

Son marcas o etiquetas las palabras contenidas dentro de los símbolos mayor y menor <...>. Como habréis notado las que llevan solo una palabra son las de comienzo de sección y las que tienen una barra al principio
indican que se trata de una etiqueta de cierre de sección.

?Ver código HTML
1

<ComienzoSeccion>...</CierreSeccion>

También os habréis dado cuenta de que hay dos etiquetas escritas en inglés, estas dos son invariables y todo documento html debe tenerlas; dentro del se situará la información de la página y dentro del el contenido que se mostrará, es decir, la página propiamente dicha.

Las secciones que nosotros hemos creado tienen esta estructura:

?Ver código HTML
1

<div id="nombre"></div>.

No son más que divisiones(div) con un identificador(id) que será el atributo que usaremos en el css.

Una hoja de estilo para el html anterior tendría el siguiente aspecto:

?Ver código CSS
1
2
3

#cabecera{top:0; width:100%; height:100px;}
#contenido{width:80%; height:500px;}
#pie{bottom:0; width:100%; height:200px;}

Como dijimos, los atributos que hemos usado eran: cabecera, contenido y pie, que nos los hemos inventado nosotros mismos, y para cambiar sus propiedades en css usaremos esta pauta:

?Ver código CSS
1

#nombre{propiedad1; propiedad2; ...}

En css hay propiedades para hacer casi cualquier cosa, las que he cambiado en el ejemplo de antes afectan a la posición y el tamaño(ancho y alto) de cada sección.

Sin duda su simplicidad es abrumadora, pero los diseñadores web se encuentran a menudo con un problema grave. La última palabrar la tienen los navegadores, pues son ellos los que deciden como interpretar la información que les llega, y dado el extenso mercado, tuvieron que crearse estándares, para que el mismo código sirviera tanto en firefox como en internet explorer, etc. Sin embargo, no todos los navegadores cumplen los estándares, este es el caso de el ie6 y el ie7, que muestran las cosas de diferente manera a como deberían, pero de eso hablaremos otro día.

Aunque la dualidad html/css es sencilla y eficiente, es fácil darse cuenta de que supone un problema a la hora de generar los contenidos, y esto es porque son lenguajes estáticos, que solo pueden modificar sus contenidos de manera directa, es decir, a mano, por un programador, y han de ser actualizados en el servidor cada vez que se realice dicho cambio.

Debido a esta importante limitación, han ido surgiendo otros lenguajes que los complementan y modifican para crear contenidos dinámicos y en tiempo real. Algunos de los más importantes son el .php, el Ruby , el Perl, el Scheme, etc.

Además, dada la necesidad de guardar los increíblemente extensos contenidos de algunas webs de forma organizada, también se han creado las conocidas bases de datos, por poner un ejemplo que está muy de moda, las bases MySql.

Dentro de poco veremos más a fondo casos puntuales de problemas con css en ie6/ie7 y cómo solucionarlos, y profundizaremos en el uso del css con diversos “trucos” y “hacks”.

]]> http://www.untrocitodecielo.com/blog/introduccion-al-htmlcss/feed 0