Blog google para latinoamerica

Con un primer post fechado a 15 de septiembre del presente año google estrena blog para los hispano hablantes ;), el blog esta orientado a informar sobre todas aquellas herramientas que google proporciona a los webmaster, por el momento va demasiado lento en comparacion a su similar en ingles sin embargo esperemos que muy pronto de mas de que hablar, pero en el mientras aqui la entrevista con que abrieron el blog, echa a uno de los ingenieros de moda :) de google.

Al blog de google
Al blog de matt cutts

Esas mentadas tablas en los blogs ahhh!!!

Bueno el fin de este post no es explicarles como hacer una tabla ya que hay muchas pagina que lo explican,el fin de este post nacio con el anterior cuando quise insertar una tabla en una entrada (nunca antes habia ocupado insertar una) y cual va siendo mi sorpresa que me dejaba un enorme espacio en blanco en la parte superior de la tabla y hasta al final del post mi tabla $#&%#""%/%#%& <- Intraducible :P, esto por supuesto es muy incomodo y de ninguna manera podia quedar asi (Como pueden ver en el post anterior mi tabla esta ahi sin espacio extra alguno :P ) y me puse a investigar un poquito, despues de pasar varios blogs con debates sobre que por eso es mejor usar tags divs y estilos css que tablas, etc, etc me encotre en en un blog la solucion y luego confirme y complemente la informacion del primero con otros mas, el caso entonces pintado de manera general es el siguiente:

Pues el mecanismo de blogger hace que se lean cada uno de los saltos de linea que hacemos, pero al estar estos saltos de linea dentro de una etiqueta table no se pueden poner ahi entonces blogger suma todos esos saltos de linea que conforman el cuerpo de la tabla y nos los pone en la parte superior de la tabla.

Pues bien ese es el problema y el por que blogger se comporta de esa manera con las tablas, ahora bien la solucion logicamente es quitar todos esos saltos de linea para que toda nuestra sentencia quede en una sola, es decir en ves de tener:

<table border=1>
<td>Columna 1</td>
<td>Columna 2</td>
<td>Columa 3</td>
</table>

Debemos de juntar todo en una sola linea asi:
<table border=1><td>Columna 1</td><td>Columna 2</td><td>Columa 3</td></table>

Y de esta manera podremos ya no tendremos el problema de los espacios al momento de poner una tabla en nuestro blog. Ahora bien esto de quitar los saltos de linea resulto facil por que era una tabla pequeña, pero que pasa cuando la tabla que deseamos colocar es demasiado grande? pues sinceramente este es un trabajo agotador, es decir estar quitando todos los saltos de linea para dejar toda nuestra tabla en una sola linea es un trabajo sumamente laborioso y tardado, pues bien aqui les va el truco 2: Existe un exelente programa (la vdd dudo que alguien no lo tenga :P) que se llama Notepad ++ y que nos puede ayudar en esta tarea.

como???

Pues muy facil, simplemente habrimos un nuevo documento en el notepad, pegamos el codigo de nuestra tabla.

Despues nos vamos en nuestro menu a donde dice TextFX -> TextFX Edit -> Unwrap Text

Y de esta manera nuestro codigo completo, quedara unido de tal forma que solo sea una linea de codigo.

Lo que sigue esta claro no?, copias este nuevo codigo y lo pones en el editor del blog en donde quieras que aparezca la tabla.

El truco es pequeño pero nos ahorra mucho tiempo si es que no la union de codigo la haciamos manual, en fin espero que sea de utilidad.

Referencia de eventos en JS

Ya se que existen muchas tablitas parecidas a esta, peroyo tambien quiero tener la mia asi que ahi va:

Evento	Tiene efecto sobre	Sucede cuando	Manejador
Abort	imágenes	El usuario cancela la carga de una imagen	onAbort
DblClick	Enlaces,Botones	El usuario hace doble click sobre el objeto	onDblClick
DragDrop	Ventanas	El usuario suelta un objeto sobre la ventana del navegador	onDragDrop
Blur	ventanas y elementos de formularios	El usuario abandona la ventana o elemento (pierde el foco)	onBlur
Change	text fields, textareas, select lists	El usuario cambia el valor de un elemento	onChange
Click	buttons, radio buttons, checkboxes, submit buttons, reset buttons, links	El usuario pulsa sobre el elemento o el enlace	onClick
Error	images, windows	La carga de la ventana o la imagen causa un error	onError
Focus	windows and all form elements	El usuario pasa el control (foco) a un elemento determinado	onFocus
KeyDown	documents, images, links, text areas	El usuario pulsa una tecla	onKeyDown
KeyPress	documents, images, links, text areas	El usuario da una pulsación con una tecla o la mantiene pulsada	onKeyPress
KeyUp	documents, images, links, text areas	El usuario deja de pulsar una tecla	onKeyUp
Load	document, body	El usuario carga una página en el navegador	onLoad
MouseDown	documents, buttons, links	El usuario pulsa una tecla del ratón	onMouseDown
MouseMove		El usuario mueve el ratón	onMouseMove
MouseOut	areas, links	El usuario mueve el cursor fuera del elemento	onMouseOut
MouseOver	links	El usuario mueve el cursor dentro del elemento	onMouseOver
MouseUp	documents, buttons, links	El usuario deja de pulsar una tecla del ratón	onMouseUp
Move	windows	El usuario (o algún script) mueve una ventana	onMove
Reset	forms	El usuario pulsa el botón de reset	onReset
Resize	windows	El usuario (o algún script) redimensiona la ventana del navegador	onResize
Select	text fields, textareas	El usuario selecciona el contenido de los elementos del formulario	onSelect
Submit	forms	El usuario pulsa el botón para enviar un formulario	onSubmit
Unload	document body	El usuario sale de la página (carga otra página o cierra esa ventana del navegador)	onUnload

Incremento de fechas con js y php

Ya se que eh hablado mucho sobre manejo de fechas en js pero este post es a peticion de un amigo y nos plantea un problema muy especifico y que a su ves es muy comun en cierto tipo de desarrollos.

Supongamos que en un sitio debemos manejar dos fechas para un proceso x, la fecha de inicio y la fecha final o limite, la situacion es que una vez establecida la fecha de inicio, automaticamente aparesca la fecha limite que es igua a fecha de inicio + 10 dias habiles, es decir los sabados y domingos no cuentan, bueno pues esto es muy facil de resolver, apoyandonos de la libreria DateJS (si no sabes nada de esta libreria presiona aqui)aunque tambien lo podriamos hacer sin ningun problema con el JS tradicional, esta libreria nos hara mas facil el trabajo. Pues bien lo unico que hay que hacer es insertar la libreria DateJS y crear una funcion como la siguiente:

function aumento_fecha(){

//incremento de diez dias en la fecha

var vjafecha=document.formulario.fecha.value;//obtenemos la fecha de inicio que es regularmente la fecha actual.

var dias=10;// # Dias que se deben incrementar

var nvafecha=Date.parse(vjafecha);//pasando la fecha de inicio leida a un objeto tipo date

var sabDom=0;//numero de sabados y domingos que hay en el rango


for (n=1;n<=dias;n++){//hacemos un ciclo para aumentar los 10 dias

if(nvafecha.is().saturday()|nvafecha.is().sunday()) sabDom=sabDom+1;//preguntamos si el dia es sabado o domingo

nvafecha.addDays(1);//nos pasamos al dia siguiente

}

nvafecha.addDays(sabDom);//aumentamos el # de sabados y domingos encontrados

document.nuevo_ja.f_limite.value=nvafecha.toString('yyyy-MM-dd');//imprimiendo fecha final con el formato año-mes-dia en el textbox f_limite del documento
}

Una vez creada la funcion la mandamos llamar ya sea en la carga del body onload="aumento_fecha" o cuando la caja de texto de fecha inicial pierda el foco o cuando la de fechalimite obtenga el foco etc.

Claro??? espero que si, secillo??? sin duda alguna pero eso si muy eficaz ;)

Pero no nos detengamos aqui, supongamos ahora y como es natural que los dias feriados tambien son tomados como dias inhabiles y por lo tanto deben ser ignorados en el incremento de los 10 dias, una forma sencilla de hacer esto es almacenando esos dias en una base de datos, para la siguiente solucion se tomo en cuenta que en una base existe un campo para cada mes del año en el cual se encuentran los dias inhabiles separados con comas, de la siguiente manera:
enero -> 1,5,12
febrero-> 10, 23, 28
etc.

Tomando en cuenta estas consideraciones, una de las soluciones que podemos poner en pratica es la siguiente:

Exelente calendario

Unobtrusive Date-Picker Widget Update, es el nombre de uno de los mejores, mas completos y adaptables caledarios que eh encontrado, esta basado en la union de javaScript con estilos css lo que nos da en conjunto un poderoso calendario cargado con un batallon de utiles funciones y con un diseño sobrio que a su vez es facilmente modificable (bueno para todos aquellos que sepan un poquito de css), la insercion de este calendario a nuestras paginas es facil, solo hay que agregar el script y las direcciones de las hojas de estilo:

Agregando el script

<script type="text/javascript" src="./Scripts/datepicker.js">alert ("Error en la carga del calendario datapicker.js");</script>

Agregando los estilos del calendario

<link href="./hojas_css/demo.css" rel="stylesheet" type="text/css" />

<link href="./hojas_css/datepicker.css" rel="stylesheet" type="text/css" />

Una vez cargados estos archivos (como siempre generalmente el codigo anterior va en la cabecera, por nada personal si no como una buena practica de programacion) lo unico que hay que hacer es agregar una clase css a nuestro elemento en cuestion (regularmente un textbox) con los parametros del tipo de calendario que deseamos generar.

<input name="fecha" type="text" class="format-y-m-d highlight-days-67 range-low-today" id="f_limite" size="10"/>

Bueno esto es solo un ejemplo de lo rapido que pueden integrar este calendario a sus paginas web, para mas informacion presionen aqui iran directamente a la pagina oficial y ahi encontraran tutoriales, descargas y muchos ejemplos.

Para ver mas ejemplos de este calendario presiona aqui

Para Descargar el script presiona aqui

nota de desarrollo: Al momento de integrar el calendario data piker a nuestra pagina, si ponemos el css demo observaremos que obviamente nos altera nuestro propio css y si lo quitamos, el calendario sale demasiado grande, lo que hace limitar el tamaño del calendario, es el tamaño de la letra declarado en body de la css demo, por lo consiguiente si unicamente ponemos font-size:12px; en el body de nuestro css, el calendario tomara un tamaño pequeño sin tener que agregar el estilo demo.css que nos afectaria a nuestro propio estilo. :)

Para ver

Una animacion no se si buena o mala pero sin lugar a dudas un tanto extraña, es algo que realmente hay que ver :)

al final me agrado ;)

Insertar codigo HTML en un blog

Muchas veces queremos insertar codigo html en nuestros blogs con fines demostrativos, sin embargo en la mayoria de los blogs (creo que la unica exepcion es myspace para variar) el codigo html es interpretado, esto nos pone a pensar un rato y comenzamos a probar soluciones extrañas, por ejemplo es comun intentar poner el codigo dentro de etiquetas pre o no??? :) pero poco despues decepcionados descubrimos que nuevamente esta siendo interpretado, que podemos hacer entonces???, pues bien existen paginas que se ocupan de convertir nuestro codigo en otro igual pero con la diferencia de que este no es interpretado por el navegador, hasta ahora yo usaba una pagina que se llama simplecode, sin embargo hoy que entre a ella descubri que ya no existia, inmediantamente me puse a buscar un remplazo y no pude encontrar una pagina similar, que hacer entonces???, la solucion me vino de golpe y resulto tan sencilla y obvia que hirio un poco mi orgullo de ingeniero :P, los blogs regularmente interpretan todo lo que este encerrado en <> entonces la solucion es cambiar esos simbolos y ponerlos como caracter es especiales donde:

< = & lt;
> = & gt;

Sabiendo esto ya muchos habran dado con la solucion, usando cualquier editor de texto capaz de soportar la funcion de buscar y remplazar, introducimos el codigo y luego remplazamos todas las < por & lt; y las > por & gt; despues copian ese nuevo codigo a su editor de entradas de su blog y si publican o hacen una vista previa veran que el codigo aparece justo como queremos.

Insertar un video o un swf a nuestro blog

PARA INSERTAR VIDEOS

Como siempre existen diferentes metodos para un mismo resultado, para insertar videos lo mas logico es ver la forma en que lo hace youtube :

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/qgUL3ut4gyQ&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/qgUL3ut4gyQ&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

Ahora bien aqui podemos observar claramente el uso de 2 etiquetas conocidas <object> y <embed> ambas sirven para lo mismo, es decir indican la ruta del video.

<object> a traves del parametro value="aqui va la direccion del video en cuestion" y <embed> a traves del parametro src="aqui va la direccion del video en cuestion", asi que si queremos insertar un video en nuestro blog lo unico es utilizar esta misma sentencia poniendo en los parametros value y src la direccion del video que nosotros queremos mostrar(aunque no sea de youtube o google esto funciona para cualquier video del que conoscan su direccion).

La pregunta ahora es para que usar object y embed si sirven para lo mismo???

La respuesta esta en la eterna rivalidad entre navegadores, si quitamos el embed el video no sera vidualizado en firefox (prueben esto y veran que no miento), por otro lado si quitamos el object el video no podra ser visualizado en IE, dicho sea de paso que el elemento embed no existe en las especificaciones de la W3.

Bueno pues resulta que navegando me encontre en el blog de vagabundia una manera de simplificar este codigo en una sola etiqueta, eh aqui lo que dice:

La solución para simplificar nuestro codigo es utilizar OBJECT pero especificando un atributo fundamental:

type="application/x-shockwave-flash".

El código válido quedaría de esta forma:
<object width="425" height="350"
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/PsRkU7FV4aw">
<param name="movie" value="http://www.youtube.com/v/PsRkU7FV4aw" />
<param name="wmode" value="transparent" />
</object>
De esta manera, el tag EMBED, desaparece de una vez por todas y pasa al salón de los recuerdos.

Los Resultados son:

Con el primer tipo de insercion:


Con la version resumida:



Como podran observar los resultados son identicos y si no es asi entonces usen la opcion que visualice correctamente el video en su computador ;)

PARA INSERTAR SWF (FLASH)

Pues al igual que los video encontre 2 formas de hacer esto:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="665" align="absmiddle" height="500">
<param name="movie" value="http://fotos.trucoteca.com/games/animaciones/001062-327JR171.swf">
<param name="quality" value="high"><param name="BGCOLOR" value="#000000"> <embed src="http://fotos.trucoteca.com/games/animaciones/001062-327JR171.swf" class="FlashGame" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#435E76" width="665" align="absmiddle" height="500"></embed>

</object>

El caso es identico al anterior por lo que solo dire que la direccion de nuestro archivo swf debe de ir los parametros value y src, el resultado es el siguiente:




La otra forma es la siguiente:

<div style="text-align: center;">
<object id="movie" type="application/x-shockwave-flash" data="URLarchivo.swf" width="ancho" height="alto" > <param name="movie" value="URLarchivo"> <param name="wmode" value="transparent"> </object> </div>

Y el resultado es el siguiente:

Para finalizar ...
Existen muchos sitios gratuitos para subir nuestros archivos swf, pero la mayoria requiere crear una cuenta o bajar algun programita por lo que yo recomiendo http://www.theimagehosting.com sitio que no pide registro ni que descargues nada, la limitante es que solo acepta archivos de maximo un mega, si lo se!!! muy limitado, pero si lo que quieren es hacer alguna prueba rapida o su archivo no pesa mas de 1M (que ah de ser el caso de muchos) este sitio seguro es para ustedes, sino googleen un rato seguro que encontraran el espacio que necesitan para su swf.

MANEJO DE FECHAS EN JAVA SCRIPT parte 2

- ¿Por fin vas a continuar enseñandome sobre el manejo de fechas en JS?

si, si ya se que me tarde un poco pero seguro que esto te gustara

-¿Pues haber porque la verdad ya me acostumbre a manejar las fechas como me habias enseñado?

me alegra mucho eso quiere decir que si le entendiste a la primera parte pero ahora esto que te voy a enseñar es mucho mas facil de manejar, sin embargo en

situaciones que no requieras hacer demasiadas operaciones con tus fechas recomiendo que uses la forma que ya te enseñe, ya que lo que vamos a ver ahora es

una libreria que se llama DateJS y como tal tiene muchas funciones que puede que jamas lleguemos a usar por lo que solamente agregarias peso muerto a tu

sistema, sin embargo es deciciontuya al fin de cuentas.

- ok, ok ya te entendi pero no has echo mas que acrecentar mi curisidad haber dime de una vez ¿que es datejs?

Tranquilo ya te lo habia dicho DateJS es una libreria que permite manipular fechas en Java Script de una manera muy sencilla

- Ahhhh ¿ Y como se usa?

Bueno en realidad es muy facil de utilizar no tiene la gran ciencia, primero debes de bajar el archivo js que se encuentra en la siguiente direccion:
http://code.google.com/p/datejs/downloads/list

- ¿Oye ya me conecte pero ahí hay dos archivos cual descargo?

Ah si mira si eres un poco observador uno es el archivo con extension js y otro tiene la extencion zip, pues bien el primero es la libreria DateJS esta

libreria es tal cual la programaron y se puede utilizar sin ningun problema, sin embargo para acceder a sus metodos se hara en ingles p.e

Date.today().next().friday() esto desde luego no es un gran problema de ninguna manera sin embargo desarrolladores del mundo al ver la gran potencia y

sencillez de esta libreria acomodaron unos archivos complementarios para que fuera posible llamar a los metodos desde nuestro propio lenguaje, todos esos

archivos de idiomas se encuentran en la version full de la libreria es decir el archivo .zip de esta manera se hace posible definiendo primero el idioma a

utilizar, que con esta libreria podamos hacer algo como: Date.hoy().siguiente().viernes(), pero para esto deberas ver especificamente la traduccion de los

metodos a tu idioma, sin embargo yo te recomiendo usar la libreria en su lengua original, es decir el ingles y no creo que encuentras ningun problema al

implementarla.

-Ahhhh oye eso esta interesante pero apesar de tus recomendaciones como que si tengo ganas de probar el paquete de idiomas

jajajaja, claro esa es la actitud no te limites por loque te digan y si tienes tiempo y ganas echale un vistaso.

- claro que lo hare pero sigueme contando ¿como utilizo esta libreria?

ok, sigo entonces, bueno ahora que ya tienes conocimiento del paquete de idiomas y como te veo con ganas de probarlo te mostrare como hacerle:

* primero buscas en los archivos el nombre valga la redundancia del archivo que corresponda a tu idioma.
* despues de localizarlo debes de hacer algo como las siguientes declaraciones:
en-US [English (United States)]


en-US [English (United States)]


de-DE [German (Germany)]


fr-FR [French (France)]


- Ahhhh creo que si te entiendo, oye pero en caso de que quiera dejarlo con el idioma por defecto ¿ como le hago?
Ahhh oki pues eso es mucho mas facil, simplemente quita la linea de idioma y deja la linea donde agregas el script de JS, el nombre del script claro esta es

el nombre del script por defecto que descargaste, para que me entiendas lo unico que debes de hacer es agregar la siguiente linea:



y simplemente con esto ya podras comenzar a utilizar los metodos de esta libreria, aunque es obvio no esta de mas comentar que es preferible que esta linea

se declare en la cabecera del documento html, php, etc y dicha declaracion debera de ir en cada una de las paginas donde requieras utilizar esta libreria.


- oki, hasta aqui todo claro como el agua del mar muerto, pero sigue por favor que esto cada vez se pone mas interesante

Bene, bene si estas tan ansioso por seguir aprendiendo entonces entremos a la parte medular del asunto.
Aqui unos ejemplos de como usar las sentencias:

// La fecha de hoy
Date.today();

// Agregarle 5 dias a la fecha actual
Date.today().add(5).days();

// Establecer el viernes de esta semana
Date.friday();

// Poner en marzo de este año
Date.march();

// Hoy es viernes?
Date.today().is().friday(); // regresa true|false

// Que dia es hoy?
Date.today().getDayName();

// ¿Qué fecha es el próximo jueves?
Date.today().next().thursday();

// Añadir 3 días a la fecha de hoy
Date.today().add(3).days();

// Hace tres días
(3).days().ago();

// Dentro de 6 meses
var n = 6;
n.months().fromNow();

// Ponerlo a las 8:30 AM del día 15 de este mes
Date.today().set({ day: 15, hour: 8, mintue: 30 });

// Convertir un texto a una fecha
Date.parse(‘today’);
Date.parse(‘t + 5 d’); // hoy + 5 días
Date.parse(‘next thursday’);
Date.parse(‘February 20th 1973);
Date.parse(‘Thu, 1 July 2004 22:30:00);



- Ah orale esto esta interesante, creo que vamos por buen camino esta muy facil asi que no te detengas y enseñame mas

Calma, calma dame un respirito jejejeje, Ahhhhhhh
Bien continuemos, aqui mas ejemplos de lo que podemos hacer con esta libreria, ya que los acoples a lo que necesitas dependera de ti :)
Poner la fecha del primer lunes del año
Date.january().first().monday()


Poner la fecha del ultimo viernes del año
Date.dec().final().friday()

Pon atencion por que el siguiente ejemplo es un poco complicado:
- Ok listo dispara!!!!
jejeje ya voy :)

Poner en el objeto como fecha el 15 del presente mes con una hora de 4:30, posteriormente sumarle 90 dias y asegurarnos que el dia sea un fin de semana, si

no movernos al siguiente fin de semana.

var d1 = Date.today() // creando variable tipo date
.set({ day: 15, hour: 16, minute: 30 }) //estableciendo fecha y hora
.add({ days: 90 })// aumentar 90 dias a la fecha actual
if (!d1.isWeekday()) {
d1.next().monday();
}


- Ahhh que interesante esta heramienta si es buena

Si y toda via falta un poco mas, ya que tambien podemos pasar cadenas de texto como parametro y la libreria interpretara la cadena

-mmmm no te entiendo muy bien
ok, mejor mira estos ejemplos y seguramente entenderas a lo que me refiero



Date.parse(‘today’);


Date.parse(‘tomorrow’);


Date.parse(‘July 8');


Date.parse(‘July 8th, 2007');


Date.parse(‘July 8th, 2007, 10:30 PM’);

Si es un dia diferente al lunes irnos al ultimo lunes
var d1 = Date.parse(‘8-Jul-2007');
if (!d1.is().monday()) {
d1.last().monday();
}
alert(d1.toString(‘dddd, MMMM d, yyyy’));

- Oye que padre creo que ahora si estoy listo para utilizar esta libreria
Me alegro mucho y ya no queda mas que te pongas a trabajar para que le agarres el truco, antes de irme aqui te dejo un poco mas de informacion que te puede ser util:

// avanzar 3 dias apartir de hoy
(3).days().fromNow();

// retorceder 6 meses
(6).months().ago();

// 12 semanas apartir de hoy
var n = 12;
n.weeks().fromNow();

// Avanzar 30 dias apartir de una fecha dada
var d1 = Date.parse(‘07.15.2007');
var d2 = (30).days().after(d1);

mas ejemplos:

Date.today() // Returns today's date, with time set to 00:00 (start of day).

Date.today().next().friday() // Returns the date of the next Friday.
Date.today().last().monday() // Returns the date of the previous Monday.

new Date().next().march() // Returns the date of the next March.
new Date().last().week() // Returns the date one week ago.

Date.today().is().friday() // Returns true|false if the day-of-week matches.
Date.today().is().fri() // Abbreviated day names.

Date.today().is().november() // Month names.
Date.today().is().nov() // Abbreviated month names.

Date.today().is().weekday() // Is today a weekday?

Date.today().addDays(1) // Add one day (+1).
Date.today().addMonths(-3) // Subtract three months (-3).

Date.today().add(1).day() // Add one (+1) day. Supports all date parts (year, month, day, hour, minute, second, millisecond, and weeks)
Date.today().add(-3).months() // Subtract three (-3) months.

(1).day().fromNow() // One (1) day from now.
(3).months().ago() // Three (3) months ago.

var n = 6;
n.months().fromNow() // Six (6) months from now.

Date.monday() // Returns Monday of the current week.
Date.mon() // Abbreviated version of Date.monday()

Date.march() // Returns March 1st of this year.
Date.mar() // Abbreviated version of Date.march()

Date.today().first().thursday() // Returns the first Thursday of the current month.
Date.today().second().thursday()// Returns the second Thursday of the current month.

Date.march().third().thursday() // Returns the third Thursday in March of the current year.
Date.october().fourth().sunday()// Returns the fourth Sunday in October.

Date.today().fifth().sunday() // Returns the fifth Sunday in the current month, or throws a RangeError exception if there are not 5 Sundays in the current

month.
Date.october().final().sunday() // Returns the final Sunday in October.

Date.january().first().monday() // Returns the first Monday of the current year.
Date.december().final().friday()// Returns the last Friday of the current year.

Date.today().at("6:15pm"); // Returns todays date at 6:15pm.

var time = {hour:18, minute:15};
Date.today().at(time); // Set time with a config object.

var birthDayParty = {month: 1, day: 20, hour: 20, minute: 30};
Date.today().set(birthDayParty);// Set date and time with a config object.

CADENAS QUE PUEDEN SER INTERPRETADAS COMO FECHAS

Date.parse('t') // Returns today's date.
Date.parse('today') // Returns today's date.
Date.parse('tomorrow') // Returns tomorrow's date.
Date.parse('yesterday') // Returns yesterday's date.

Date.parse('next friday') // Returns the date of the next Friday.
Date.parse('last monday') // Returns the date of the previous Monday.

Date.parse('July 8th, 2004') // Thu Jul 08 2004
Date.parse('15-Jan-2004') // Thu Jan 15 2004

Date.parse('7/1/2004') // Thu Jul 01 2004
Date.parse('7.1.2004') // Thu Jul 01 2004
Date.parse('07.15.04') // Thu Jul 15 2004

Date.parse('July 23rd 2004') // Fri Jul 23 2004
Date.parse('Sat July 3, 2004') // Sat Jul 03 2004

Date.parse('10:30 PM EST') // Wed Oct 31 2007 20:30:00
Date.parse('10PM') // Wed Oct 31 2007 22:00:00

Date.parse('t + 5d') // Adds 5 days to today.
Date.parse('today - 1 month') // Subtracts 1 month from today.

Date.parse('+') // Add 1 day to today = tomorrow.
Date.parse('- 3months') // Subtract 3 months.

Date.parse('+1year') // Add a year to today.
Date.parse('-12 months') // Subtract 12 months (1 year) from today.

Date.parse('July 4th') // July 4th of this year.
Date.parse('15') // 15th day of current month/year.

Date.parse('July 8th, 2004, 10:30 PM') // Thu Jul 08 2004 22:30:00
Date.parse('2004-07-15T06:45:00') // Thu Jul 15 2004 06:45:00
Date.parse('Thu, 1 July 2004 22:30:00 GMT') // Thu Jul 01 2004 16:30:00

Date.parse('1997-07-16T19:20:15') // ISO 8601 Formats
Date.parse('1997-07-16T19:20:30+01:00') // ISO 8601 with Timezone offset
Date.parse('1985-04-12T23:20:50Z') // RFC 3339 Formats

METODOS DE CAMBIO DE INFORMACION

Date.today().add({ months: 1, days: 5 }).is().fri() // Add 1 month and 5 days, then check if that date is a Friday.

Date.parse('10-July-2004').next().friday().add(-1).month() // Take in a date, then move to the next Friday and subtract a month.

METODOS DE COMPARACION

Date.today().equals( Date.parse('today')) // true|false
Date.parse('last Tues').equals(Date.today()) // true|false

Date.equals(Date.today(), Date.parse('today')) // true|false
Date.compare(Date.today(), Date.parse('today')) // 1 = greater, -1 = less than,

Date.today().compareTo(Date.parse('yesterday')) // 1 = greater, -1 = less than, 0 = equal
Date.today().between(startDate, endDate) // true|false

FORMATO EN FECHAS

new Date().toString() // "Wed Oct 31 2007 16:18:10 GMT-0700 (Pacfic Daylight Time)"
new Date().toString('M/d/yyyy') // "10/31/2007"

Date.today().toString('d-MMM-yyyy') // "31-Oct-2007"
new Date().toString('HH:mm') // "16:18"

Date.today().toString('MMMM dS, yyyy') // "April 12th, 2008"

Date.today().toShortDateString() // "10/31/2007". Culture specific as per Date.CultureInfo.shortDatePattern.
Date.today().toLongDateString() // "Wednesday, October 31, 2007". Culture specific as per Date.CultureInfo.longDatePattern.

new Date().toShortTimeString() // "4:18 PM". Culture specific as per Date.CultureInfo.shortTimePattern.
new Date().toLongTimeString() // "4:18:34 PM". Culture specific as per Date.CultureInfo.longTimePattern.

OTROS METODOS

Date.today().set({ day: 15 }) // Sets the day to the 15th of the current month and year. Other object values include

year|month|day|hour|minute|second.

Date.today().set({ year: 2007, month: 1, day: 20 })


Date.today().add({ days: 2 }) // Adds 2 days to the Date. Other object values include year|month|day|hour|minute|second.

Date.today().add({ years: -1, months: 6, hours: 3 })


Date.today().addYears(1) // Add 1 year.
Date.today().addMonths(-2) // Subtract 2 months.
Date.today().addWeeks(1) // Add 1 week
Date.today().addHours(6) // Add 6 hours.
Date.today().addMinutes(-30) // Subtract 30 minutes
Date.today().addSeconds(15) // Add 15 seconds.
Date.today().addMilliseconds(200) // Add 200 milliseconds.

Date.today().moveToFirstDayOfMonth() // Returns the first day of the current month.
Date.today().moveToLastDayOfMonth() // Returns the last day of the current month.

new Date().clearTime() // Sets the time to 00:00 (start of the day).
Date.today().setTimeToNow() // Resets the time to the current time (now). The functional opposite of .clearTime()
Date.getMonthNumberFromName('March') // 2 - CultureInfo specific.
Date.getDayNumberFromName('sat') // 6 - CultureInfo specific.

Date.isLeapYear(2008) // true|false.
Date.getDaysInMonth(2007, 9) // 31

Date.today().getWeek() // Returns week of year. Returns 1 to (52 | 53) depending on the year
Date.today().setWeek(1) // Sets the week of the year to the Monday of the week set.

var test = new Date(); // Do something... like run a test...
test.getElapsed() // Returns millisecond difference from now.

Date.today().isDaylightSavingTime() // true|false. Is within the Daylight Saving Time.
Date.today().hasDaylightSavingTime() // true|false. Is Daylight Saving Time observed.

fuentes:
http://code.google.com/p/datejs/
http://www.datejs.com/2007/11/27/getting-started-with-datejs/

Sale pues ahora si me voy espero que te sirva de algo todo esto
-seguro que si
Oras cuidate y hasta la proxima

Pokemon

jajaja pues aqui con unas fotos de como serian los pokemon en la vida real, muy buenas

Este mas que un pokemon me parece el hermano pequeño de naruto,pero en fin ;)

jajajaja que rifados no

Que que con este pikachu


Chale con la ranita gay

Gracias al taringero Damas_Gratis del que me piratee las imagenes ojalano se enoje :)

Atardecer de Michael Poliza

Okas pues ahora aqui con algo sencillo unas imagenes del nuevazelandes poliza, me recuerdan al museo nomada que vino a la ciudad de mexico :P

en esta el atardecer no me gusto mucho, esta bastante apagado :P pero la imagen del mono esta genial.


Exelente foto, como diria pompin iglesias, que bonita familia, que bonita familia!!!


Magistral panoramica


no se por que me recuerda al libro de la selva, mowlliiiiiiiiiii


Enfrentamiento de poder






Genial

You Tube proyecto Reportaje

Reportaje es una iniciativa a nivel internacional con el que Youtube en colaboración con Pulitzer Center on Crisis Reporting y la participación de Sony e Intel pretende promocionar la creación de vídeos de corta duración apostando por el periodismo ciudadano y el reportaje.

El concurso se divide en varias fases, en un primer momento serán elegidos los 10 mejores trabajos por el Pulitzer Center presentados antes del 6 de Octubre que versen sobre sobre noticias de relevancia relacionadas con un personaje de su comunidad.

Tras esta selección cada uno de los autores clasificados presentara a la comunidad Youtube un nuevo trabajo sobre una historia secundaria que tenga lugar en su comunidad.

Por último los cinco finalistas deberán presentar una historia de su comunidad que haya quedado relegada a un segundo plano utilizando una técnica de reportaje especial y eligiéndose entre estas el ganador final del concurso.

El autor del trabajo ganador recibirá más de 7.000 euros para viajar al extranjero, así como la oportunidad de trabajar con el Pulitzer Center. Los finalistas serán premiados con equipos de edición de vídeo de Sony de gama alta y aparecerán en la página principal de YouTube.

El plazo de presentación ya inicio y finaliza el día seis de octubre.
Para suscribirse quedan unicamente 2 dias mas, no dejen pasar esta oportunidad, quien quite y pega no :)

mas informacion aqui

Frameworks

Saluditos, saluditos, pues ahi tienen que recientemente se realizo un evento online al que le pusieron de titulo seminario de php, supe de este evento a traves del sitio Desarrollo Web (Muy buen sitio por cierto), bueno el caso es que aunque prometieron mucha informacion desde mi punto de vista fue poco sustancial y me dejaron con ganas de informacion, sobre todo de como usar el dreamweber para ahorrarte el 80% del desarrollo de un sitio :P, pero en fin esa es otra historia, el caso es de que apesar de que no fue lo que esperaba en cuestion de informacion si fue un seminario bastante motivador que supero en creces mis espectativas en dicho sentido y es que se tomaron temas muy interesantes, (yo creo que en si el seminario no fue de ninguna manera malo, sino la publicidad te daba una idea equivocada de lo que hiba a ser, sin embargo estoy muy contento de haberlo seguido)que aunque solo se fuse por encimita ciertos puntos como el de Dreambevear :P y el del trabajo del freelance fueron por mucho muy interesantes y motivadores (perdonen que lo repita bastante pero creo que ese fue el punto clave de este seminario, la motivacion para hacer las cosas, de echo termine de escucharlo y luego luego me diron ganas de programar ;), por lo cual mis mas sinceras felicitaciones al grupo organizador de este seminario y espero que no se detengan y nos regalen muchos seminarios mas y que por favor me expliquen lo del Dreamweber jejejeje por lo mientras yo ya lo voy investigando :), bueno ya dicho mi punto de vista sobre esto regreso a lo que va a ser este post (es que empece a escribir y en elcamino me perdi)... :( ... :P

Bueno la cosa esta asi, dentro de la variadad de cosas que se mencionaron en el seminario dijeron algo lo del uso de herramientas de desarrollo rapido, las cuales sirven para reducir la codificacion de las paginas considerablemente y de esta manera terminar proyectos mas facilmente y con codigo ya mas que probado, dicho sea de paso esto tuvo la facultad de acelerarme el pulso :P y es que aunque ya sabia de estas herramientas nunca me habia dado tiempo para utilizarlas ni conocer mas de ellas, asi que llegado a este punto pues me puse a investigar algunos frameworks de desarrollo rapido y encontre dos muy buenos y gratuitos:

nota: aun no los exploro totalmente pero conforme los vaya uzando mas ya estare muy pronto hablando de ellos :)

Y todos a movernos al ritmo de la... KUMBIA

Kumbia es un web framework libre escrito en PHP5. Basado en las mejores prácticas de desarrollo web, usado en software comercial y educativo, Kumbia fomenta la velocidad y eficiencia en la creación y mantenimiento de aplicaciones web, reemplazando tareas de codificación repetitivas por poder, control y placer.

Sus principales características son:

* Sistema de Plantillas sencillo
* Administración de Cache
* Scaffolding Avanzado
* Modelo de Objetos y Separación MVC
* Soporte para AJAX
* Generación de Formularios
* Componentes Gráficos
* Seguridad

y muchas cosas más.

Adicional a esto Kumbia integra lo mejor de la Web en un solo framework para producir las aplicaciones Web del mañana (prototypejs, phpMailer, Smarty, FPDF, Script.aculo.us)

Enlace a Kumbia

CakePHP, un ambiente de desarrollo rápido para PHP

Este sentido programa que nos anuncia que programar en PHP es un como pedazo de pastel.

El proyecto tiene liberado su tercer candidato de liberación y pinta bien, requiere que se tenga instalado tanto el lenguaje de programación como Apache y el administrador de bases de datos, preferentemente MySQL, bastando sólo con descompactarlo y algunas configuraciones para tenerlo operando.

Algunas caracterísitcas es que soporta PHP 4 y 5 (se recomienda el primero), genera código limpio de acuerdo a las mejores prácticas para el manejo de passwords y sesiones, puede manejar código orientado a objetos, es sencillo de utilizar y se libera bajo la licencia MIT.
descargas: página del proyecto.

Personaliza tu blog - parte 2

HACIENDO UNA NUEVA CABECERA PARA TU BLOG

En mi muy humide opinion uno de los cambios mas simples y mas significativos que podemos hacer es personalizar nuestra cabecera, no es mi intencion decirles como hacer una cabecera eso depende de la creatividad y la experiencia en uso de programas como fireworks o photoshop que tenga cada uno, al fin de cuentas una cabecera es simplemente una imagen, el proposito de este post es darles las especificaciones que debe de llevar dicha imagen.

El tamaño en si de la cabecera dependera directamente de sus intenciones de diseño VS compatibilidad, si no me explico muy bien por favor leer el post anterior de esta serie donde hablo de las dimenciones y podras acceder haciendo click aqui, pues bien para resumir les voy a dar las caracteristicas estandar de una cabecera, sin mas que decir comencemos!!!

Regularmente las cabeceras tiene un ancho de 660px con un alto variable (de 100 a 200 px regularmente), si te gusta el tamaño de tu cabecera actual simplemente hay que saber que medidas tiene, para conocer las dimenciones habra que hacer:

1)presionar sobre personalizar en tu blog

2)estando en la pestaña de diseño ir a edicion html

Ya en el post anterior lo habia mencionado pero lo vuelvo a recalcar, antes de cualquier cambio presiona descargar plantilla completa para tener un respaldo de tu estilo actual.

3)bueno estando en el codigo html buscar el siguiente bloque:

#header-wrapper {

width: 761px;

padding-bottom: 0px;
}

Como pues presiona ctrl+f y escribes #header-wrapper y asi llegaras facilmente, como se puede ver ahi tenemos el ancho de nuestra cabecera, pues bien teniendo las medidas ahora si podemos comenzar nuestro diseño con dicha dimencion o bien en base a esta cambiarla a nuestro antojo.

Una vez creada nuestra cabecera el paso siguiente es subirla a nuestro blog, esto es muy facil, solamente hay que ir nuevamente a personalizar, elegir la pestaña diseño y dentro de esta presionar en elementos de pagina, una vez que nos colocamos en el lugar apropiado basta con presionar en el enlace Edit del elemento cabecera.

Una vez precionado el enlace nos aparecera una pequeña ventana, damos examinar y seleccionamos el la imagen de nuestra nueva cabecera.

nota: en internecio tambien hay varios sitios que proveen de cabeceras, por si no te quieres romper la cabeza :P, diseñando una puedes darle una visita a:

http://flamingtext.com/
http://bannerbreak.com/

o usar algin bi¿uscador para encontrar heads gratuitas ;)

ESTABLECIENDO UN FONDO A NUESTRO BLOG

Otra manera muy sencilla y practica de hacer unico nuestro blog es cambiando el fondo, sea bien por otro color o por alguna imagen, regularmente a mi me gusta usar una imagen pequeña como fondo no se de 200px por 200px por mencionar algo y partiendo de esta podemos reproducirla indefinidamento como mosaico o bien desbanecerla a un color fijo de tal manera que pareciera que todo nuestro fondo es una imagen unica (sino se imaginan esto chequen este muy buen sitio Webintenta para que se den las 3 :D), esto le da elegancia y bastante atractivo visual a nuestro blog sin nececidad de que el mismo se haga demasiado pesado, que quiero decir con esto, que si quieres usar una imagen de fondo de 800x600 px el tiempo que tardara el navegador en cargar dicha imagen sera mayor a que si tienes una pequeña de 200x200px y un color fijo de fondo.

Pues bien ya escribi mucha paja :P pero ahora vamos a lo importante:

Para crear un fondo primero debemos diseñarlo o buscar alguno que nos guste en internet.

Luego hay que subir ese fondo, para esto hay dos maneras muy sencillas la primera es subiendo la imagen en un hosting de imagenes como http://hosting.deimagenes.com/ seguimos los pasos que ahi nos indican y guardamos la ruta que nos regrese.

Otra manera muy sencilla de subir una imagen es haciendo un pequeño truco con nuestro blog, creamos una nueva entrada, subimos la imagen como si fuera parte de nuestro post y lo guardamos como borrador, entramos en vista previa del post, guardamos la direccion de la imagen (clic derecho guardar direccion de imagen o copiar ruta de la imagen) y si queremos podemos borrar el post ya que la imagen seguira en el servidor por si alguien hubiese echo referencia a la misma.

Ahora bien el siguiente paso es indicarle nuestra imagen de fondo o establecer un color de fondo a nuestro estilo css.

bueno para empezar otra vez nos vamos a:
PERSONALIZAR -> DISEÑO -> EDICION DE HTML

estando ya pocisionados buscamos el bloque css e la sentencia body (ctrl + f y ponemos body { )

el bloque obtenido es algo como:

body {

background-color: #000000;

margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

Aqui hay de dos, la etiqueta background puede estar como background:$bgcolor . . . o como background-color: #000000; si tu caso es el primero simplemente agrega la sentencia url (direccion de tu imagen):

background:$bgcolor url(http://hosting.deimagenes.com/imagenes/f123904a18917790551ef41cd4ca3ea8.png);

si tu bloque es como la segunda opcion abra que agregar la etiqueta backgrond-image y ahi definir la direccion:

background-image:url(http://hosting.deimagenes.com/imagenes/f123904a18917790551ef41cd4ca3ea8.png);

por lo que al final tendremos nuestro bloque asi:

body {

background-image:url(http://hosting.deimagenes.com/imagenes/f123904a18917790551ef41cd4ca3ea8.png);

background-color: #000000;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

Echo esto podemos ver ya nuestra imagen como fondo y en forma de mosaico la cual es la propiedad por default que adopta la etiqueta.

Visualicemos nuestro blog presionando en vista previa si nos agrada guardamos la plantilla, si no podemos resetear los cambios echos presionando borrar cambios.

Si no queremos que nuestra imagen aparezca muchas veces simplemente debemos hacer las siguientes modificaciones dependiendo de lo que cada quien requiera, en caso de que la linea no se encuentre en el bloque de codigo, simplemente debemos agregarla y listo ;)


1) Que la imagen solo aparezca una vez:
background-repeat: no-repeat;


2)Que la imagen se repita a lo ancho:
background-repeat: repeat-x;

3)Que la imagen se repita a lo alto:
background-repeat: repeat-y;

4)Que el fondo se pocicione al centro:
background-position: center;

5)Que el fondo se pocicione a la derecha:
background-position: right;

6)si queremos que este arriva, al centro o hasta abajo hablando de pocicion vertical hay que agregar dicha posision despues de la horizontal p.e:
background-position: left bottom;

donde:
bottom -> para ponerlo al final de la pagina
center -> al centro
top -> al inicio

y con la combinacion de estas sentencias creo que facilmente posicionaremos nuestro fondo en donde deseemos.

Pero si aun con estas sentencias no quedamos conformes con la pocicion de nuestro fondo, podemos ser un poco mas especificos poniendo algo como:
background-position: 33px 12px;

Donde el primer valor es la posicion horizontal y el segundo es la posicion vertical con respecto a la esquina superior izquierda, con esto mas especificos no pueden ser :P sin embargo siempre que puedan evitar esta sentencia con las anteriores haganlo.

PERSONALIZANDO LA ZONA PRINCIPAL

Muy bien hasta aqui vamos avanzando, pero puede que se sientan desesperados por que tal vez su fondo no se aprecia por completo, esto es por que la zona principal, es decir donde va el texto, la cabecera, la etiquetas etc, esta cubriendolo pues bien no se preocupen aqui veremos como posicionar este elemento, por otra parte puede que su posicion para ustedes no sea el problema, sino que tal vez no combina con lo demas entonces tampoco se preocupen aqui veremos como cambiar color o ponerle fondo, aunque esto no es muy recomendable ya que harian mas pesado su blog y tardaria mas tiempo en cargarse.

Bueno para empezar hay que localizar los bloques css que nos controlan esta zona principal, estosbloques son varios el primero corrsponde al contorno de la zona principal y lo identificaremos buscando la palabra #wrap2 en nuestro codigo y ahi podemos cambiar el color o anexar una imagen como lo hicimos con nuestro fondo, esto sera valido para cada uno de los bloques que se mencionen, como les decia anteriormente no recomiendo imagenes para estas zonas por lo que yo no agregare ninguna aunque queda a sabiendas de todos que esto es totalmente posible y valido tan solo agregando la sentencia backgroung-image como lo vimos anteriormente:

bloque de contorno de zona principal identificado por wrap2:

#wrap2 {
position:relative;
top:-4px;
$startSide:-4px;

background:#2C0000;

padding:10px;
border: 1px solid #fff;
}

bloque de zona principal identificado por #main-wrapper:

#main-wrapper {

background: #2F5927;

width:810px;
float:$startSide;
color:$mainTextColor;
font-size: 85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

bloque de fondo de cabecera identificado por #header-wrapper:

#header-wrapper {

background: ##2C0000;

padding-bottom: 4px;
}


bloque donde esta nuestro perfil, etiquetas y gadgets que hemos agregado:

#sidebar-wrapper {

background:#ffffff;

width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Y con esto terminamos con la zona principal, recuerden experimentar con estas etiquetas para que lleguen a manejarlas bien y recuerden que la mejor manera de aprender a hacer algo es haciendolo!!!

Ahora bien otra cosa que podemos querer es modificar el ancho de cada una de estas partes, esto es muy sencillo basta con modificar la proiedad width de cada uno de estos elementos:

Para el ancho del bloque principal, es decir al ancho que ocupara el texto y las imagenes que posteamos, modificar:

#main-wrapper {
background: #343E56;

width:730px;

float:$startSide;
color:$mainTextColor;
font-size: 85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

recomiendo que no sea mayor a 800 por el tema de las resoluciones.


para modificar el ancho de toda la zona en general (cabecera, principal, sidebar), modificar:

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background-color: #999;

width:990px;

margin:10px auto;
text-align:$startSide;
font: $bodyFont;
}

De preferencia si puede ser de 800 o menos (aunque menos ya es una exageracion) mucho mejor.

para modificar el ancho de la sidebar (la barra que esta a un costado y contiene gadgets), modificar:

#sidebar-wrapper {
background:#00538A;

width:220px;

float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

PARA MODIFICAR MARGENES

En estos momentos creo yo ya tienen mas que bien identificados cada uno de los bloques que hemos estado utilizando, por lo que ya no voy a ponerme muy especifico en esto de los margenes, solamente les voy a mostrar las centencias tradicionales si es que queremos agregar o modificar margenes:

1. margin-top: 1px;
2. margin-right: 2%;
3. margin-bottom: 3px;
4. margin-left: 4px;

Como en cualquier etiqueta div el valor puede darse en porcentajes, pixeles,milimetros, centimetro, pulgadas etc y lo unico que hay que hacer es agregar la linea correspondiente al margen que deseemos establecer en nuestro bloque de codigo, por ejemplo quiero que mi zona principal tenga un margen superior del 10% de tamaño actual del navegador, entonces mi bloque quedaria asi:

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background-color: #999;
width:990px;
margin:auto;

margin-top:10%;

text-align:$startSide;
font: $bodyFont;
}

Observemos la linea margin:auto; quiere decir que nos pone todos los margenes con los valores por default, sin embargo si queremos especificar alguno de nuestros margenes basta con poner la sentencia y el valor deseado en nuestro bloque margin-top:10%; y de esta manera tendremos nuestros margenes del tamaño que queramos.

PARA MODIFICAR EL RELLENO

El relleno o padding es el espacio que se deja entre el borde del cuadro y el texto, se podria comparar con una sangria, se modifica de la misma manera que los margenes, con la excepcion que las sentencias que utiliza son:

1. padding-top: 22px;
2. padding-right: 9px;
3. padding-bottom: 22px;
4. padding-left: 22px;

Pues bien por el momento me despido, espero que este post les haya sido entendible, cualquier duda, sugerencia, comentario, experiencia, dolencia, etc, no duden en expresarlo, nos estamos viendo, por el momento ya estoy preparando la tercera parte de esta serie de post "personaliza tu blog", en el cual veremos como insertar botones, banners y algunos detalles mas de personalizacion de la sidebar, bueno nuevamente adios y suerte con el diseño de sus blogs y paginas.