Archive for month: February, 2009

17Feb 2009 36 Comments

Star Rating jquery plugin

Categories: AJAX - Tags: , ,

Anteriormente postee un star rating sin base de datos para sistemas pequeños, pero para sistemas más grandes reocmiendo usar este plugin jquery.
Basado en el simple star rating plugin jquery lo he modificado para agregarle algunas características que le hacian falta como son: que el rating reciba la respuesta usando ajax y que además se pueda enviar como parámetro un id, esto es util para guardar el voto en una base de datos e identificar por que item estoy votando.

El código es muy simple de implementar, en el html pones:

1
<div id="star1" class="rating">&nbsp;</div>

Y para el código javascript:

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
    $('#star1').rating('votar.php', {maxvalue: 5, curvalue:1, id:20});
});
</script>

¿Qué significan esos parámetros?

  • votar.php es el nombre del script que va a capturar el voto usando POST
  • maxvalue: es la cantidad de estrellas
  • curvalue: es el valor actual (opcional)
  • id: es el identificador (opcional)

¿Cómo funciona?

El valor seleccionado y el id (si es que lo hemos definido) son enviados al script votar.php (o al que elijamos), en ese script podemos guardar el voto en una base de datos, los parametros son recibidos como $_POST['rating'] y $_POST['id']
Si te pareció util este script, por favor dale una revisada a los googleads

///////// Actualizacion ////////
Este plugin no funcionaba en jquery 1.4.2 debido a la desaparición de la función .lt que ha sido substituida por .slice, eso ya esta corregido en el archivo zip

16Feb 2009 1 Comment

Tutorial ilustración estilo vintage

Categories: Diseño - Tags: ,

Ultimamente esta de moda hacer ilustración con estilo retro, vintage y además usando formas para crear algo con un toque psicodélico tipo disco.
Si están nostalgicos pueden darle una ojeada a este tutorial usando photoshop, una foto y algunas formas.
Aquí el resultado de este tutorial a punta de photoshop.
vintage

16Feb 2009 0 Comments

Maquetacion Resetear CSS

Categories: CSS, Diseño - Tags: ,

¿Por qué resetear el CSS?

Los navegadores por defecto tienen algunos estilos predefinidos, como márgenes, padding, tamaño de linea, etc lo que puede resultar en un dolor de cabeza cuando las páginas lucen distintas entre uno y otro browser, por eso suele ser una buena primero resetear el css.

Resetear CSS forma completa

Personalmente no uso esta forma porque es un tanto extensa y normalmente no se requiere resetear tantas cosas pero si vas a usar un CSS framework o quieres estar bien seguro que todos los estilos están en cero, pues puedes revisar esta pagina, a continuación copio lo más importante

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

La forma reducida de resetear

Normalmente con resetear los margenes y padding suele ser suficiente, no olvides que si pones tablas con align=”center” no funcionarán a menos que además les pongas margin:auto

1
2
3
4
* {
  padding:0px;
  margin:0px;
}
14Feb 2009 9 Comments

Centrar elementos con css

Categories: CSS, Diseño - Tags: ,

Se supone que todo debería centrarse usando align:center pero no es así cada elemento tiene formas distintas de centrarse, así que veamos:

Centrar un DIV

Tanto para centrar un div (capa) dentro de otro como para centrarlo en el body no se requiere usar align(es más no existe esa propiedad), basta que le asignes un margen automático

1
2
3
#micapa {
  margin:auto;
}

Centrar un texto

Para centrar un texto dentro de una etiqueta p, table, div,etc si funciona el text-align

1
2
3
4
5
6
p {
   text-align:center;  
}
#midiv {
   text-align:center;  
}

Centrar una imagen

Para centrar una imagen también se puede utilizar el text align o la etiqueta center pero sobre el objeto que la contenga, si a una imagen le pones text align center no se centrará pero si esta dentro de un div a este debes ponerle la alineación

1
2
3
#midivcontenedor {
  text-align:center;
}

La otra opción es:

1
2
3
<center>
  <img src="miimagen.jpg">
</center>

Centrar una tabla

No puedes centrar una tabla usando CSS, si usas text-align center con una tabla se centrará el texto contenido pero no la tabla, debes usar align=”center” sobre la tabla, además si reseteaste el CSS con margin:0px tampoco funcionará, deberás darle un margen automático

1
2
3
4
5
<table align="center" width="500" border="1" style="margin:auto;">
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>

Es margin auto solo hace falta si reseteaste los margenes para todos los elementos (eso se acostumbra por compatibilidad entre browsers, ya postearé algo sobre la utilidad de eso)
Si deseas centrar texto dentro de la tabla, es posible aplicarlo sólo a ciertos TD como titulos o resultados numericos usando text-align:center

Centrar una película flash

Para esto puedes usar la etiqueta center, otra opción es colocarla dentro de un div pero no respetará ningún estilo al menos que la película tenga asignada la propiedad wmode=”transparent” igualmente no respetará la propiedad z-index y se superpondrá a todo objeto a menos que este con wmode=”transparent”.

12Feb 2009 0 Comments

Maquetación css a tres columnas

Categories: CSS, Diseño - Tags: ,

Si se puede maquetar a dos columnas, también se puede a tres o más columnas con algunos cambios.

Código html de la maquetación

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="wrapper">
    <div id="header">    
    </div>
    <div id="main">
        <div id="column1">
        </div>
        <div id="column2">
        </div>
        <div id="column3">
        </div>
    </div>
    <div id="footer">
    </div>
</div>

La misma estructura del código anterior pero esta vez le agrego una columna, es posible agregar más columnas si quisieras hacer por ejemplo una lista de opciones o para galerias de imágenes.

Hoja de estilos para la maquetación

La hoja de estilos no ha variado mucho respecto a la del anterior tutorial

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#wrapper {
    width:800px;
    height:auto;
    margin:auto;
}
#header {
    height:120px;
    background-color:#FFCC33;
}
#main {
    width:800px;
    overflow:hidden;
    height:auto;
}
#column1 {
    width:200px;
    background-color:#5B7444;
    height:300px;
    float:left;
}
#column2 {
    width:400px;
    background-color:#47697E;
    height:300px;
    float:left;
}
#column3 {
    width:200px;
    background-color:#A3C586;
    height:300px;
    float:left;
}
#footer {
    height:100px;
    background-color:#FCF1D1;
}

La novedad es que las columnas 1,2,3 les he dado un float:left para que estén alineadas a la misma altura

Otros post sobre maquetación CSS

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi