Y que cosas encontré entre las cuales puedo listar:

• Que se han unido WordPress y WordPress MU. Con unas simples configuraciones e instrucciones podemos hacer eso
• Se están enfocando a hacerlo más usable
• Recuerden que solo con un tag podemos hacer que WordPress tenga thumbnails nativos.
• Eliges tu usuario, pues ya no es el “admin” por default (¡me encanta eso!)

Pero las características que más me llamaron la atención están

• Nueva forma de instalar temas, mucha más usable
• Nuevo tema de default. Se llama Twenty Ten en su versión 0.7
• Podríamos utilizarlo como framework, Ia Stewart nos explica como en su post de temas hijos.
• Los thumbnails los tiene por defecto y pueden cambiar la cabecera del tema
• Tiene 2 sidebards diferentes y 4 sidebars en el footer
• Código limpio y semántico
• Opciones de fondo (interesantes)
• Opciones de imagen de header
• ¡Podremos crear menús! Una de las opciones que más me gusto (aún está en desarrollo pero estará genial)

Sección de menús

Sección de temas wp 3.0

• Ver noticia (inglés)
• Descargar WP 3.0 beta 1
• Ver tema Twenty Ten

Porque un café querría tener un sitio web, la gente no va a entrar a un sitio web para ver café es mejor ir a ver que hay, además no van a comprar un café en línea — no es literal pero esa es la idea.

¿Porque alguien se interesaría en un sitio web?

Dependiendo del sector empresarial me dirán muchos, si, pero al final es uno el objetivo; obtener más ingresos por la inversión. Con ello, no quiero decir que el sitio me va a vender como medio directo, sino que más que vender me va a crear la necesidad en el caso más básico.

Es por eso que hay que recibir/brindar una buena asesoría, mostrándo soluciones a procesos no tan eficientes en la comunicación cliente – empresa y desarrollar ideas para facilitar el medio; de modo que se podría mejorar notablemente las ventas.

La gente dice: quien no tiene sitio web en estos días es como que no existiera. Si existe, sino como hay tanta empresa. Yo digo: quien no tiene una presencia web estratégica, está perdiendo una gran oportunidad de incrementar sus ganancias.

No solo es de tener un sitio web para cumplir con lo que dicen, es tener presencia en línea para facilitar la compra o adquisición de un algo.

Entre los beneficios que podemos encontrar al tener una buena presencia web están:

• Mayor alcance, pues la web no se limita a fronteras o idiomas
• Brindar un medio más efectivo entre el cliente-empresa
• Conocer más al consumidor, para poder brindarle un producto/servicio que realmente necesita
• Vender desde el sitio
• Informar y motivar a la compra, facilitando información para convencer a nuestro visitante que será una buena inversión
• Como medio de publicidad

Usando el ejemplo del café

Ahora yo digo, ok… antes de ver el menú, ¿Sabes que venden además de cafés? No del todo, un área que podemos trabajar. Podemos brindar una sección del menú para que los visitantes conozcan la variedad de platillos que brinda un “café”, porqué al ver el menú y unos mantelitos que nos dieron, venden desayunos, almuerzo y helados de sabores que no en todos los lugares hay.

Además de crear la ansiedad de conocer y saborear la comida de dicho café vendiendo el sabor por medio de información fácil de digerir y fotografías que nos hagan imaginar el sabor. Además por ser una empresa con varias sucursales, yo no sabía que allí había una ellas, pues estaba en la Roosevelt e iba a ir a Oakland mall cuando me dí cuenta que en galerías Primma había uno (no voy a decir el nombre), podría también colocar las ubicaciones o brindar una búsqueda para encontrar la sucursal más cerca.

Además poder registrar miembros y brindarles ofertas especiales, al mismo tiempo que promociono mis nuevos platillos. Además se me ocurre que podemos crear encuestas (polls) para saber que platillo (nuevo) podría dar mayor impacto.

Como dije, un medio de dos vías, es muy bueno tener feedback, así podría saber que piensa la gente de mi empresa y si los restaurantes (alías, cafés) están atendiendo a mis clientes. Y si ofrezco servicio de fiestas privadas (implementarlo) para poder reservar lugares en fecha especiales.

En fín ese plus que el cliente necesita y haría decidirse por nosotros (como empresa). Así que, créanme; es una buena inversión tener un sitio web, hay tantas opciones para mejorar su negocio en la red, como clientes esperando ser convencidos de comprar.

Las versiones anteriores

Tal vez se preguntarán en donde están las demás versiones de mi blog. Les contaré un poco de ese asunto. Empecé mi blog este año, sin embargo lo tenía pensado para estas fecha, compré el dominio y lo coloqué en mi hosting (en ese tiempo Hostgator).

Luego de eso, la primera versión de mi sitio era un poco café, y recuerdo que para ese tiempo tenía aproximadamente 50 mensuales (20 mías, 20 de mis amigos y las otras 10 eran de milagro). No pasó más de un mes para que cambiara a la siguiente versión, pues veía muchos inconvenientes en cuanto a estar haciendo hojas de estilo para IE y estar componiendo los errores, todo porque estaba empezando con el CSS y las sombras (sin png’s por IE 6).

Mi segunda versión ya no tenía sombras o texturas en el fondo (por eso del IE 6) y la verdad estaba muy dinámico, pero no llenaba mis expectativas. Necesitaba un espacio para expresarme y colocar mis proyectos de manera eficiente (en esas fechas no tenías clientes).

Escribí mi tutorial de 960 gs, el cual subió mis visitas a 50 diarias, ¡para mi era un logro!

Versión 3

Así es como nació la 3era versión de mi sitio (la gris, que todos conocen). Integré mis conocimientos, ya más maduros y también las habilidades. Para crear ese blog, me sentía (aún lo hago) de que mi blog, con nos más de 4 meses en la web, estuviera en CSS Manía.

¡Era impresionante! Ya tenía 150 visitas diarias, generadas por los artículos que había escrito y con ellos también clientes y cotizaciones. Para mi era increíble que sin tener una gran portafolio podía tener clientes y poder empezar a vivir de las comisiones ganadas en cada uno de los proyectos que tenía.

La demás historia en está en npixels estudio, mi estudio web.

Versión 4 y lo nuevo

Para esta versión, hice una transición de lo dinámico a lo minimalista, pues la objetivo de mi sitio es transmitir mis ideas, comentarios y mostrar mis proyectos. Deseo que los artículos que lean tengan un objeto, ayudar.

No tengo años de experiencia, ni miles de proyectos. Pero a lo largo de mis dos años en la web, puedo decir que he aprendido muchísimo. Conocimiento que en verdad deseo compartir.

Espero que les guste el nuevo diseño, debo decir que aún está en versión beta, tengo que agregar unas imágenes y ver si tiene más de algún bug (que en estos días estaré corrigiendo).

¡Gracias por visitarme y cualquier cosa aquí estoy! Por el momento aún no configuro mi formulario de contacto, puedes mandarme un correo a jepsersk8[at]gmail[dot]com.

¡Éxitos!

¿De qué trata?

En este tutorial vamos  a aprender a utilizar el hover, posición absoluta y el z-index. Jugaremos con estos elementos para crear un efecto de cortina con puro CSS. Para que te des una idea, es muy parecido al efecto que tengo en mi portada, el de las entradas. Al igual que como hacer un ribbon.

Empezando

Voy a utilizar una imagen de 500px * 250px en este ejemplo y para maquetar 960gs. Pues nos facilitaremos algunas cosas con el framework. Crearemos el markup, para poder contener la imagen y el texto a mostrar.
<div class="contenedor">
<img src="images/ejemplo1.jpg" alt="foto guatemala" width="500" height="250" />
<div class="texto">
<h4>Esto aparece cuando me coloco encima</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu nunc sem.
Nullam sed lorem et nibh bibendum faucibus. Suspendisse facilisis mauris eget.
Nulla facilisis dictum quam at interdum. Etiam id nisi diam.</div>
<div class="textoh">
<a href="#">Ver proyecto</a></div>
</div>
Una vez tenemos el esqueleto, nos vamos a crear el css:
.contenedor{
position:relative;
width:500px;
height:250px;
border:#FF6600 5px solid;
}
.contenedor img{
position:absolute;
top:0;
left:0;
z-index:2;
}
.contenedor será donde estará todo, y estamos dandole posición absoluta a la imagen que estará de fondo, en nuestro caso para ilustrar el proyecto si fuera para un portafolio.
.contenedor .texto{
position:absolute;
top:0;
left:0;
z-index:2;
padding:50px 0 10px;
}
.contenedor .texto h4{
background:#FF6600;
color:#FFFFFF;
display:inline;
padding:5px;
}
.contenedor .texto p{
background:#FF6600;
color:#FFFFFF;
margin:20px 0;
padding:5px;
width:90%;
}

Le damos estilos a el texto naranja, para que se muestre encima de la imagen. EL h4 tiene display in line, para darle el estilo pegado, ya que por default es tratado como un bloque, al igual que el párrafo.
.contenedor .textoh{
position:absolute;
left:0;
top:0;
z-index:-1;
width:100%;
height:100%;
text-align:center;
background:#333333;
color:#FFFFFF;
opacity:.9;
}
.contenedor .textoh a{
margin-top:115px;
display:block;
color:#FFFFFF;
text-decoration:none;
font-size:16px;
}

Hemos creado ahora el div que será colocado encima cuando hagamos hover en el div.contenedor. Este div ahora está atrás de la imagen debido al z-index: -1, nota que he puesto una opacidad que solo será vista en los buenos exploradores.

La magia


.contenedor:hover .textoh{
z-index:3;
}


Y listo, lo único que hacemos es que cuando, estes encima del div.contenedor, .texth salga hacia el frente. Simple pero poderoso, este efecto lo podrás usar para darle información extra a tu visitante, o algo que desees mostrar cuando estén encima de un objeto. NOTA: Este selector solo funciona con IE>7 y todos los demás exploradores. Realmente no me interesa hacer cosas que funcionen en IE6 y podrás estar encontra, pero la gente que lo utiliza creo que ya está acostumbrada a ver los sitios mal.

¿Cómo hacer un ribbon?

Otra cosa que me han preguntado es la forma que se crean los ribbons (las pestañitas que salen del layout). Eso también es gracias a la posición absoluta. Que te parece si creamos uno para que lo puedas utilizar en una caja de suscripción, para que tal, feedburner.

Escribiendo el markup, html:
<div id="suscribete">
<div id="title">
suscribete<span class="ribbon"></span>
</div>
<div class="texto">
a nuestro RSS, tan f&aacute;cil como<br />escribir tu correo eletr&oacute;nico.
</div>
<form id="suscribeform">
<div>
<input name="" type="text" class="text" value="yo@midireccion.com" />
<div id="suscribe-enviar">
<input name="" type="button" class="button" value="suscribirme" />
<span class="ribbon"></span>                        </div>
</div>
<div class="clear"></div>
</form>
</div>
</div><!--suscribete-->

Esto dará como resultado algo sinflón y sin gracia :) Vamos al protagonista de esta historia, el css.

1. Estilos al titulo

Crearemos el título celeste ahora, y le vamos a dar posición para poder colocarlo donde queremos, dando el efecto que sale de atras.
#suscribete{
position:relative;
background:#00c0ff;
width:500px;
height:150px;
}
#title{
position:absolute;
top:10px;
left:-27px;
background:url(images/ribbon-back.gif) bottom repeat-x #074e64;
color:#FFFFFF;
font-style:italic;
font-size:30px;
padding:2px 15px 2px 40px;
}
#title .ribbon{
position:absolute;
background:url(images/ribbon-tail.gif) no-repeat;
width:27px;
height:27px;
left:0;
bottom:-27px;
}

Le colocamos la posición, una imagen para dar un efecto de degradado y el ribbon. Es una imagen que es posicionada sus dimensiones en negativo. como quiero que se salga para abajo, le doy un bottom:-27px… Para que quede exactamente su tamaño hacia abajo. También al propio titulo, lo muevo a la izquierda 27px. Recuerda que el contenedor de cualquier objeto con posición absoluta tiene que tener esa posición o una relativa; para resetear las posiciones como lo explican en W3C School.

2. Aplicando estilos al formulario

#suscribeform{
position:relative;
margin-top:20px;
padding:0 20px 0;
}

Colocamos el formulario en una posición relativa para manipular los objetos en posiciones absolutas. Luego lo posicionamos bien.


#suscribeform .text{
border:5px solid #06465a;
font-size:20px;
color:#999999;
position:relative;
top:20px;
float:left;
padding:5px 10px;
}
#suscribeform .button{
border:none;
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-size:20px;
background:none;
}

Le damos estilos al campo de texto y también al botón. Como puedes ver, el botón tiene un div que lo contiene. Este div será el que le dará el efecto de ribbon al botón.

#suscribe-enviar{
position:relative;
bottom:-10px;
float:right;
background:url(images/suscribe-back.gif) repeat-x bottom #fd7e03;
padding:20px 10px 30px;
*padding:20px 10px 25px; /*tonto IE7*/
}
#suscribe-enviar .ribbon{
position:absolute;
bottom:0;
left:-10px;
background:url(images/suscribe-tail.gif) no-repeat;
height:10px;
width:10px;
}

Por último le damos el margen al formulario y colocamos al texto donde debe estar.

#suscribete .texto{
margin-left:190px;
padding:15px 0 0;
}

Listo, ahora le hemos dado una posición al div, donde lo bajamos 10px para que la colita que hemos colocado (la imagen que le da el efecto en la clase .ribbon). Como podrán ver, hay que colocarle un hack para que se mire bien en IE7. Esto desvalida el código por lo que lo ideal sería que colocaran esta y otras propiedades dentro de un CSS condicional para IE. Esto se logra con el siguiente código luego de los estilos de CSS.

<!–[if lt IE 7]><link href=”miestiloIE.css” rel=”stylesheet” type=”text/css” /><![endif]–>

Puedes encontrar más información, sobre diferentes condicionales en Quircks Mode.

• Ver demo
• Obtener código

Y ese no era el problema, el problema era que WordPress guarda las direcciones de forma absoluta, entonces eso me perjudicaba a la hora de mover el sitio de www.misiteantiguo.com a www.minuevositio.com. Ahora vas a ver como puedes mover tu sitio de un lado a otro sin tantas vueltas.

Ante de todo

Recuerda que tienes que tener tu nuevo dominio preparado y con 36 horas de anticipación para que los DNS se propaguen, así te ahorrarás de futuros dolores de cabeza.

1. Backup de tu base de datos

Lo primero y más importante, obtener los datos que tienes en tu wordpress, para poder replicarlos. Una vez ingresamos a nuestro hosting, vamos phpMyAdmin (normalmente se encuentra bajo la sección de Bases de Datos, si utilizas Cpanel está bajo DataBases). Una vez estamos en el phpMyAdmin elegimos la base de datos donde está nuestro sitio. Le damos clic a la pestaña de exportar.

Una vez en la opciones tenemos que exportarlo como SQL, no se te olvide, luego:

• Structure (darle clic a las siguientes opciones)
  • Add DROP TABLE/ VIEW/ PROCEDURE/ FUCTION
  • Add AUTO_INCREMENT value
  • Enclose table and field names with backquotes
• Data( chequear simplemente a este y nada más)

Le damos chequeamos Save as file y le damos la compresión que queramos. Ya tenemos nuestra información.

2. Backup de WordPress

Nada del otro mundo, abres tu cliente FTP y bajas todos los archivos de wordpress a una carpeta. Esto servirá para que los subas de nuevo a tu nuevo dominio.

Actualización: Cuando bajes el wordpress, abre el archivo wp-config.php (está ubicado no más abres la carpeta), por si la base de datos a donde migras no tiene el mismo nombre, cambiando lo siguiente a los nuevos valores que has configurado en tu nuevo dominio:

define(‘DB_NAME’, ‘aqui el nombre de la db’);

/** MySQL database username */

define(‘DB_USER’, ‘aqui va el user’);

/** MySQL database password */

define(‘DB_PASSWORD’, ‘aqui va el password’);

3. Prepara tu nuevo dominio

Como te dije antes, debes de ya tener tu nuevo domino configurado con su hosting con 36 horas de anticipación, si no lo has hecho, ve, tómate un café o durme un poco y regresa cuando se haya cumplido ese tiempo.

Tienes que crear tu base de datos en tu servidor. Una vez la tienes funcionando vas a subir los archivos al FTP (los que bajaste en el paso 2) a tu nueva dirección. Tendremos que esperar un poco.

4. Importar archivos

Una vez se subieron todos los archivos de tu WordPress, vas a importar todos los datos de los cuales hiciste backup en el paso 1. Para ellos ingresamos otra vez a phpMyAdmin (por supuesto en nuestro nuevo dominio verdad), elegimos la base de datos que ya creamos (la del paso 3) y en las pestañas hay una que dice Importar.

Seleccionas el archivo y listo, le damos seguir. Ahora ya casi estas, solo falta un detalle, el que comente al principio. Para que WordPress sea completamente independiente debes cambiar algunos parámetros en la base, ya que WordPress guardar las direcciones (como páginas y links internos) de forma absoluta, lo que se dificulta, pero esto es solucionado en 3 pequeños pasos más.

5. La magia

Si te das cuenta, en las opciones donde importaste y exportaste hay una solapa con SQL, elegis esa.

Y ahora colocas este código:

UPDATE wp_options SET option_value = replace(option_value, ‘http://www.mi-viejo-domiinio.com’, ‘http://www.mi-nuevo dominio.com’) WHERE option_name = ‘home’ OR option_name = ‘siteurl’;

Lo que hacemos aquí es remplazar el url del sitio donde estaba alojado al nuevo.

Ahora:

UPDATE wp_posts SET guid = replace(guid, ‘http://www.mi-viejo-domiinio.com’, ‘http://www.mi-nuevo dominio.com’);

Con este querie vamos a reemplezar todos los url’s en los posts y las páginas, de manera que se vuelvan a tu nuevo dominio y por último:

UPDATE wp_posts SET post_content = replace(post_content, ‘http://www.mi-viejo-domiinio.com’, ‘http://www.mi-nuevo dominio.com’);

Por último remplazamos todos los links que tenga el contenido, para no tener errores 404. ¿Fácil no?

6. Ahora sí, lo último

Ingresa al administrador y cambia el nombre del sitio o los correos configurados, date cuenta de que los plugins funcionen a la perfección.

Espero que te sea de utilidad, ya que pase unas cuantas horitas viendo información sencilla y en español, pero no, la encontre mezclando varios sitio y en inglés; y no tengo problema con ello, pero es mucho más fácil de comprender las cosas en el idioma materno (o paterno). ¡Éxitos y pilas!