Ayuda WordPress

Ahora hay que aplicar estilo a estos contenedores principales con un método de colocación. Para que sea mas fácil ver como interactúan los contenedores, a cada uno de ellos se le dará un color de fondo y altura distintos - y puestos en cajas de colores. Es importante, particularmente cuando estás tratando con una plantilla nueva, que realices un paso y a continuación lo compruebes en los navegadores afectados antes de seguir adelante. Esto evitará que tengas que volver sobre tus pasos si ocurre un problema.

El comportamiento de los contenedores puede cambiar hasta cierto grado cuando el contenido real se coloque en ellos. Sin embargo, este método de colores te permite tratar primero con posiciones básicas para luego enfrentarte al contenido una vez estén establecidos los contenedores.

• Colocando el contenedor
  
• Colocando la cabecera (header)
  
• Colocando el mainnav
• Colocando el menu
• Colocando los contenidos
  
• Colocando el pié de página (footer)
• Resultados en Browser Cam (tienes que crear un proyecto antes)

Los métidos de colocación pueden necesitar ajustes si hubiese problemas. No obstante, es fácil experimentar con un rango de métodos antes de que haya contenido.

Esta técnica (colorear, colocar y probar) puede utilizarse a través de todo el proceso de la plantilla para colocar los elementos dentro de la página.

Pasé muchisimo tiempo siendo usuario de foros, ¡y me han vuelto loco! es un sistema que no cambió en nada en los últimos 10 años.

Estas son palabras de Matt Mullenweg, creador de Wordpress, cuyo nuevo desafío es creado un sistema de foros revolucionario, basado en su actual sistema BBpress, y apunta a ser pequeño, liviano, pero con un sistema de enriquecimiento de acuerdo a las necesidases del usuario (cómo hizo con Wordpress, en definitiva)

Talkpress es el nombre, seguramente va a dar que hablar.

Via | BloggingPRO

El plugin Dean’s Permalinks Migration es una fantástica herramienta para evitar que tu blog quede desposicionado de Google si decidieras cambiar los permalinks. Ahora bien, se ha descubierto una vulnerabilidad en el plugin que permitiría a un usuario instalar código malicioso en tu blog.

Si quieres evitar este problema tienes que hacer lo siguiente:

1. Desactiva el plugin
2. Descarga la versión que corrige el fallo
3. Súbela a tu carpeta wp-content/plugins y sustituye la versión anterior por esta
4. Activa el plugin

Vía | JaypeeOnline

Wordpress! ¿se imaginaban otro?

Entre los 100 weblogs más populares en Technorati, aquellos Powered by Wordpress son mayoría con un 34%, seguido por Movable Type con un decoroso 16%, la otra mitad, por su parte, son versiones que debido a varios aspectos, entre ellos un gran desarrollo del código estándar, son consideradas Custom.

Drupal sólo tiene 5 blogs entre los top 100, y Blogger… brilla por su ausencia.

Enlace | CMSWire.

Observa tu diseño y decide como posicionar cada uno de los contenedores.

• ¿La plantilla será liquida (liquid), de ancho fijo (fixed-width), con em (em-driven) o una combinación de las anteriores?
• ¿La plantilla estará centrada (centered) en la página?
• ¿Que contenedores necesitan ser flotantes (floated)?
• ¿Que contenedores estarán en un flujo normal (normal flow)?
• ¿Necesitas utilizar colocación absoluta (absolute)?

Este es probablemente el paso mas difícil, ya que la experiencia tiene mucho que ver. Para este ejemplo los métodos de colocación serán:

• container - en línea (inline), centrado en la página
• header - en línea (inline)
• mainnav - en línea (inline)
• menu - flotante: a la derecha (float: right)
• contents - en línea (inline) con margen derecho para dar sensación de columnas
• footer - en línea (inline), con “clear: both” para aligerar los elementos flotantes superiores

Crea algunos elementos <div> vacíos para mostrar estos contenedores. Por ejemplo:

<div id=”container”>
<div id=”header”></div>
<div id=”mainnav”></div>
<div id=”menu”></div>
<div id=”contents”></div>
<div id=”footer”></div>
</div>

Una nota sobre los tipos de documento

Asegurate de que eres consciente de los tipos de documento (doctype) que estás utilizando, pues esto afectará al modo en que los navegadores mostrarán la plantilla. No tienes porque usar el modo de ajuste a los estándares pero deberías ser consciente de lo que es y de como tendrá efecto en la plantilla.

Estos contenedores se convertirán en los elementos principale del <div> que soportarán tu contenido, así que dales nombres que tengan un significado semántico en vez de nombres que describan su apariencia. Para este ejemplo los contenedores principales se llamarán:

• container
• header
• mainnav
• menu
• contents
• footer

Si los contenedores son únicos para una página, utiliza IDs en vez de clases. Esto puede ser importarnte cuando tienes que asignar estilos a otros elementos de la página. Si ocurre un conflicto, las reglas que utilizan los IDs tendrán prioridad a las que usan las clases.

• Prototipo de ejemplo con contenedores con nombre

Para colocar los elementos en la página, es necesario establecer la totalidad de los contenedores. Mira nuestro diseño (el cual podría ser un prototipo digital, un boceto en papel o incluso una plantilla/web existente) y resuelve los contenedores principales de la página.

• Prototipo de ejemplo con contenedores

Antes de empezar a construir tu plantilla basada en CSS debes decidir que navegadores soportará y hasta que nivel pretendes que los soporte. Para ayudar a decidirte habla con clientes, usuarios tipo y examina ficheros log existentes si estuvieran disponibles.

Hay tres niveles básicos de navegadores que soportan CSS:

1. Navegadores antiguos

Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, etc

2. Navegadores recientes

Win/InternetExplore 5, Win/InternetExplore 5.5, Win/Netscape 6, Win/Mozilla1.x, Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, Mac/Opera5 etc

3. Navegadores modernos

Win/InternetExplore 6, Win/ Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7, Mac/InternetExplore5.2, Mac/Safari1, Mac/ Netscape7, Mac/Mozilla1.5, Mac/Opera6 etc

Niveles de soporte

Soporte CSS completo - el navegador sirve todas las reglas CSS y debería mostrar la plantilla de un modo razonablemente preciso. Si tratas de ofrecer soporte completo en navegadores antiguos puede que necesites utilizar un CSS muy básico y evitar colocacioness CSS complejas.

Soporte CSS parcial - ciertas reglas CSS están ocultas en algún navegador concreto. Esto significa normalmente que puede que no muestre la plantilla con precisión, pero mostrará de algún modo la presentación completa. Por ejemplo, este podría significar que las fuentes y colores se muestren correctamente pero no ciertos aspectos de colocación.

Contenido sin estilo - significa que ocultas todos los estilos de un navegador concreto.

Para este ejemplo usaremos la opción 2.

Como prometí, me dispongo a traducir el fantástico tutorial Colored Boxes, en el que se explica como construir una plantilla CSS paso a paso.

Partiendo de una serie de cajas de colores que vamos colocando, y probando en varios navegadores, se verá el proceso completo de creación de una plantilla CSS en 11 pasos.

Leer el resto de esta entrada »