Lo que nos encontramos con el entorno anterior es una estuctura de blog para comentarios en diferentes categoría. Como queremos escapar de la estructura básica de un blog y darle una estructura web no vamos a utilizar las entradas y trabajaremos mediante páginas.

Pasaremos a montar la estructura de páginas a través de la opción Páginas / Añadir Página. Al crear una página escoged la opción One column, no sidebar para que no tengamos menú lateral. Podemos montar una estructura básica de Home, Nosotros, Noticias (con dos páginas anidadas de Tecnología y Gadgets) y Contacto. Es una estructura de ejemplo y podéis usar las secciones y subsecciones que necesitéis pero siempre TRABAJANDO CON PÁGINAS. No es necesario introducir el contenido de las páginas, simplemente con que las tengáis publicadas y con los cambios que os diré a continuación veréis el cambio en la estructura.

Iremos a ajustes y haremos los siguientes cambios:
Ajustes de lectura – Seleccionamos Una página estática (la página de la estructura anterior que será la home)
Página de entradas -Seleccionaremos la de Noticias… ya que usamos wordpress utilicemos su funcionalidad de escritura de artículos
Ajustes de comentarios – Desactivamos – Permitir notificaciones de enlace desde otros sitios (pingbacks y trackbacks) y Permitir comentarios en las nuevas entradas
Ajustes de los enlaces permanentes – Estructura personalizada ponemos “/%postname%/”

Con estos simples pasos tenemos toda la estructura y podemos ver ya el sitio para ver los cambios. Ups, resulta que nos queda el contenido demasiado “estrecho”. Al escoger la opción One Colum al crear las páginas hemos eliminado una columna. Para arreglar esto vamos al archivo style.css del tema y cambiamos el ancho para las líneas:

.one-column #content {
width: 900px; -- inicialmete a 640px
}

Ya tenemos el ancho. Por supuesto obviad el diseño. Estas modificaciones pueden hacerse sobre cualquier template. Lo interesante del theme que propongo es que es casi blanco por completo y luego podréis realizar los cambios que queráis a través de la css.

Ya tenemos la estructura básica.

Instalación de plugins
Llegado a este punto vamos a instalar una serie plugins. En primer lugar, y ya que trabajamos con páginas vamos a organizarlas de una manera cómoda. Si os fijáis wordpress ordenará por defecto por orden alfabético. Podemos organizar nuestras páginas y subpáginas con el plugin My Page Order simplemente arrastrando.

Otro plugin interesante para que un usuario que nos visite pueda interactuar es incluir conexiones Social Media. Para ello podemos utilizar WP Socializer, que posee una gran cantidad de conexiones a redes sociales como facebook, twitter, Google+, digg…

Por supuesto no olvidéis googlesitemapxml que posicionará la página que estamos realizando.

Como tenemos una sección de noticias he considerado que podemos instalar un sistema de votación sencillo mediante estrellas que nos permitirá conocer si nuestras noticias son o no interesantes. Instalaremos GD Star Rating. En la configuración podéis determinar si queréis que salgan en las páginas o solo en los artículos.

Ya tenemos mínima interacción y funcionalidades extra. Por supuesto hay multitud de plugins que podríais instalar: inclusión de videos, ultimos tweets… pero eso lo dejo a vuestra elección.

Especial Widget:
Vamos a darle un toque distintivo a la Home. Introduciremos un poco de código que nos permita incluir los widgets que nos interesen a través del BackOffice. Normalmente los widgets solo se inluyen el cabecera, lateral o footer. Nuestras páginas de una columna no permite su integración pero vamos a hacer unas modificaciones para poder escogerlos y mostrarlos en la home.

Abrimos el archivo function.php de la carpeta /wp-includes y vamos a la línea 374 aproximadamente y añadimos:

// Area Home, Home. Vacía por defecto.
register_sidebar( array(
'name' => __( 'Home Widget Area', 'twentyten' ),
'id' => 'home-widget-area',
'description' => __( 'Widget para la Home', 'twentyten' ),
'before_widget' => '

• ',
'after_widget' => '

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
) );

Como veís antes teníamos 6 posiciones de widget. Lo que hacemos es crea una más, o cuantas sean necesarias para aprovechar esta funcionalidad.

Crearemos un nuevo archivo dentro del theme que se llame WidgetPage.php con el siguiente código:

/* Template Name: Widget Page
*/ ?>

Yo he incluido el contenido de nuestra página de la home. Por supuesto se trata de un código simple que podéis modificar para crear hasta 3 posiciones diferentes de inclusión de widget. Nuestro ejemplo solo incluye una posición y al final del contenido que tenemos en nuestra Home.

Ahora solo tendremos que ir a Apariencia / Widgets, desplegar el nuevo menu que nos aparece a la derecha con nuestro título Home Widget Area y arrastrar lo que queramos.

Espero que os sirva

Crear una web con wordpress is a post from: Uy perdon

Sin embargo no todo ha sido fracaso. Sigo utilizando Recordatorios y Evernote. Esa decisión si ha sido buena y sigo encajando las aplicaciones que mejor se adapten a mi quehacer diario.

Salut!

GTD Apps II (tras el fracaso) is a post from: Uy perdon

• Things
• Omnifocus
• Taska
• Get It Done
• Recordatorios
• Evernote
• MyScript Memo

Things y Omnifocus todavía tienen que demostrarme que poseen el suficiente valor añadido para lo que cuestan (7,99€ y 19,99$).

Recordatorios es la que viene instalada por defecto en el iPhone y el iPad con la versión 5.0.1 del iOs. Su uso es bastante limitado y personalmente separo mi área personal con ella y así mis listas no son tan grandes.

Aunque no he acabado de probar Taska su interface es muy parecida a la de Things y no me aportaba nada especial.

Mi selección ha sido: Recordatorios para área personal, Evernote y Memo para toma rápida de notas (así luego tengo la obligación de procesar mis listas dentro de mi Get It Done). La diferencia entre ambos es que Memo permite tomar notas a mano alzada sin necesidad del teclado y posteriormente digitalización la información. Get It Done para mis listas ya que me permite sincronizarlas entre el iPad y el iPhone independientemente del dispositivo en el que las integre. No os voy a engañar es bastante básico y hecho en falta las tareas programadas de Things pero es gratuita y solo necesita de un pequeño registro de 3 datos: Mail, password y nombre.

La primera tarea ha sido realmente engorrosa porque ha consistido en pasar todas las listas de Things a Get It Done pero ha permitido familiarizarme con la interface de la App.

Estoy contento con mi elección. A ver qué pasa en los próximos días con el uso de las estas Apps.

PD: He estado revisando el site tras pasar todas mis listas y al parecer, aunque se trata de una App gratuita online hablan de una trial de 15 días. A ver qué pasa cuando pasen los días ;(

GTD Apps is a post from: Uy perdon

Empecé despacio. Marcando solo 4 o 5 tareas importantes. El 22/12/11 batí el récord: 30 acciones / tareas finalizadas a lo largo de un productivo día. Eso sin contar todas aquellas tareas / acciones delegadas de la que deberé llevar el control cuando sea oportuno.

Os animo a probarlo… no os defraudará… eso sí, os pido una sola cosa… constancia y lo conseguireis.

GTD funciona is a post from: Uy perdon

De esta manena generaremos toda una estructura básica. Si habéis incluido php en la ruta local de vuestro ordenador podréis ejecutar el comando desde cualquier lugar sin necesitar ir a la carpeta de Yii.

Ahora en un navegador solo hemos de ir a la dirección que hemos creado en nuestro caso sería http://localhost/testdrive y se habrá generado toda la estuctura básica del Site.

Si queréis más información podéis encontrarla siguiendo el tour de la propia página del framweork.

Yii 1: Generando una web sin Programación is a post from: Uy perdon

Tras su uso lo recomiendo para aquellas veces en que hemos de imprimir un número importante de documentos. El uso es sencillo. Abrimos el programa, ponemos los documentos en cola seleccionandolos e imprimimos sin necesidad de abrirlos. Rápido y sencillo. Espero que os sirva.

Imprimir sin abrir los documentos is a post from: Uy perdon

El documento que llegó a mis manos intenta de una manera practica y ordenada mejorar la productividad en todas las facetas de nuestra vida. Gdt para dummies es una versión resumida y amena de Get things done. Una serie de pautas de trabajo que se asemejan a lo que hacía anteriormente sin método.

Yo llegaba al trabajo, revisaba lo que quedaba pendiente del día anterior, listaba lo que faltaba y programaba mi día. Mi problema -que veo ahora tras leer Gdt para dummies – es que tenía control a corto plazo pero nada más. Las cosas tendían a acumularse sin un control a medio / largo plazo.

Pues bien, en mejora de mi rudo método, empecé adoptando la que me pareció una premisa importante: todo aquello que no está en nuestra mente puede llegar a olvidarse y ni ser controlado .

1-. Apuntarlo todo
¿Qué quiere decir esto? Sencillo. Durante todo el día recibimos inputs de una cantidad inmensa de cosas. El truco es simplemente apuntarlas. Una sola excepción si lo que hay que hacer tardaremos menos de dos minutos en hacerlo hagamoslo, esto no es necesario apuntarlo.

Con esto solo no bastará pero es el principio de un camino que he empezado a seguir. Espero que la constancia me lleve a mejorar en varios aspectos.

2-. Procesar lo apuntado
Todo lo que vayamos apuntando debe ir a lo que se llama las bandejas de entrada es decir un lugar en el que sepamos que siempre vamos a mirar y en el que luego podremos acabar de planificar cuándo y cómo lo vamos a hacer.

En realidad partimos de la base que todo lo que hacemos no son más que acciones y estas son las que deberemos abordar tarde o temprano.

En realidad he resumido muchísimo las bases de lo que me parece un fantástico método que desde de hace ya dos semanas me hace sentirme menos agobiado, estresado y con una sensación de control que no había tenido hasta ahora. Con la lectura de Gtd para dummies y la ayuda de Jero Sánchez a tras de el gachupas espero poder transmitir los avances que realice en Gtd de David Allen y poder, si es posible acercarlo a toda le gente que me sea posible.

Mi inmersión en la mejora de la productividad a través de Gtd is a post from: Uy perdon

Tras seguir los pasos para crear una pagina “Contacto”. Declaramos una nueva vista css en apps/front/config/view.yml. Si no recordáis como hacer una página nueva podéis revisar los entregables anteriores. También hemos de añadir el widget que hemos incluido de contacto en el tutorial anterior. Y por último declaramos la nueva vista para la página creada:

stylesheets:
- layout
- typography
- navigation
- markdown
- form

Y declaramos la css guardándola en web/themeCoolWater/css/form.css:

/* all forms */
label {
display:block;
font-weight:bold;
margin: 7px 0;
}
input {
padding:3px;
border: 1px solid #E5F0FB;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width:400px;
padding:3px;
font: normal 1em Verdana, sans-serif;
border: 1px solid #E5F0FB;
height:100px;
display:block;
color:#777;
}
input.submit {
font: bold 12px Arial, Sans-serif;
height: 28px;
margin: 0;
padding: 2px 3px;
color: #fff;
background: #306bc1 url(../images/button-bg.jpg) repeat-x 0 0;
border: 1px solid #306bc1;
cursor: pointer;
}
 
/* content forms */
#dm_content form {
padding: 10px;
border: 1px solid #E5F0FB;
background: #F4F8FD;
}
 
#dm_content form .submit_wrap {
margin-top: 15px;
}
 
#dm_content .error_list,
#dm_content .error_list li {
display: inline;
color: red;
padding: 0;
}
 
#dm_content .has_error {
border-color: red;
}
 
#dm_content .form_valid {
margin: 10px 50px;
padding: 10px 0 10px 45px;
font: bold 1.3em/1.5em "Trebuchet MS", Tahoma, arial, Sans-serif;
color: #2361BA;
border: 1px solid #E5F0FB;
background: #F4F8FD url(../images/quote.jpg) no-repeat 8px 6px;
}

Tendremos la página de contacto hecha y podremos ver en la parte de administración los mensajes enviados desde Contenido/Contacto:

Creación de Sistema Blog

Hasta aquí hemos aprendido bastante y llega una de las partes que más me entretiene. Si hemos de crear un contenido administrable muchas veces se ha de programar manualmente todo el mantenimiento (Alta / Modificación / Eliminación). Vamos a implementar un sistema de Blog que nos generará todo el mantenimiento de nuestros artículos.

En primer lugar modificaremos el archivo config/doctrine/schema.yml para declarar nuestro modelo:

Article:
actAs:
DmSortable:
I18n:
fields:         [ title, extract, body, is_active ]
actAs:
Timestampable:
DmVersionable:
columns:
title:            { type: string(120), notnull: true }
extract:          { type: string(2000), notnull: true }
body:             { type: clob, extra: markdown }
image:            { type: integer }
author:           { type: integer, notnull: true }
is_active:        { type: boolean, notnull: true, default: false }
relations:
Image:
class:          DmMedia
local:          image
foreignAlias:   Articles
Author:
class: DmUser
local: author
foreignAlias:   Articles

Podéis encontrar la explicación a lo que implementamos aquí. Como hemos modificado el modelo de datos (los datos de la BBDD) deberemos volver a ejecutar la comparación y creación de tablas:

php symfony doctrine:generate-migrations-diff
php symfony doctrine:migrate
php symfony dm:setup

Ejecutando los 3 comandos anteriores hemos creado el modelo en lib/model/doctrine/Article.class.php, el formulario en lib/form/doctrine/ArticleForm.class.php y tabla artículos en la BBDD.

Modificaremos el archivo config/dm/modules.yml para el modelo:

Content:
 
Global:
 
main:
components:
header:
footer:
 
Blog:
 
article:

Y generaremos la interficie administrativa:

php symfony dm:setup

Si vamos a apps/admin/modules/article podremos ver que se ha generado un nuevo módulo de administración, apps/admin/modules/article. Ahora ya podemos editar nuestros artículos desde Contenido/Blog/ Artículos

En breve prepararemos la parte vista de nuestros artículos.

Diem Project Día 2.2 (Formulario de Contacto) is a post from: Uy perdon

1. Instalación de Plugins (widget)
2. Instalación de Tweets externos
3. Creación de Página de contacto

Instalación de Plugins (widget)

El problema más grande ha sido el de descargar el widget del tutorial que resulta se el WidgetForm y no el de twitter. Tras descargar el formato tar resulta que también es incorrecto. Por último decidí descargar el formato zip y entonces no hubo errores. Ahora que tengo el plugin… ¿qué hago?

Modifico las líneas de config/ProjectConfiguration.class.php:

    $this->enablePlugins(array(
      // add plugins you want to enable here
	  'dmWidgetTwitterPlugin' ,
    ));

¿Y ahora? solo se habla de la instalación mediante git. Así que recordando temas de symfony se copia la carpeta resultante de la descompresión del zip (cambiandole el nombre a “dmWidgetTwitterPlugin”) dentro de la carpeta plugin de nuestro proyecto y ejecutamos las siguientes líneas en la línea de comando:

c:\ symfony plugin:publish-assets
c:\ php symfony cc


Instalación de Tweets externos

Ahora ya podemos acceder mediante el símbolo más de la parte inferior al widget de twitter. Mencionar que para que funcione tenemos que tener la extensión curl activada si no se tiene lanza un error: “[dmWidgetTwitter/search] : Curl PHP support must be enabled in order to use the TwitterApiServer class. Check the curl php manual there: http://us.php.net/curl” y tendremos que ir al archivo php.ini y descomentar la ínea que aparece como ;extension=php_curl.dll (quitarle el .

Creación de Página de contacto

Tras la odisea de instalación de plugin anterior el segundo ha sido mucho más sencillo. Para evitar sorpresas he descargado automáticamente el zip. Cambiamos el nombre por “dmContactPlugin” y realizamos los mismos pasos anteriores.Sin embargo, a diferencia del plugin tweeter el de contacto posee inserciones en BBDD así que ejecutamos:

php symfony doctrine:generate-migrations-diff
php symfony doctrine:migrate
php symfony dm:setup
php symfony cc

De esta forma generamos automáticamente models, forms y filters. Mañana, aunque forma parte del mismo tutorial, crearemos y daremos forma al formulario.

Diem Project Día 3 (Widgets) is a post from: Uy perdon

En el segundo día vamos a:

1. Crear una nueva página llamada test
2. Crear un Menú de Navegación
3. Empezar a usar los widgets mediante la inserción de texto

Crear una nueva página llamada test

Esta tárea es demasiado sencilla. Solo hay que darle a Add page y rellenar los campos correspondientes:

Para poder ver las páginas creadas o movernos entre ellas desplegamos el menú de la parte izquierda “pages” y haciendo doble click podremos acceder a las páginas.

Crear un Menú de Navegación

Para ello en primer lugar insertamos el menú haciendo click sobre el símbolo + de la barra inferior y arrastramos el widget menú debajo de la cabecera. Posteriormente volvemos a desplegar el menú “Pages” y arrastramos home y test.

Cómo vereís no hay ningún tipo de estilos. Para dárselo, modificaremos el archivo apps/front/config/view.yml con el siguiente código:

# apps/front/config/view.yml
default:
 
http_metas:
content-type: text/html
 
stylesheets:
- layout
- typography
- navigation
 
javascripts:     # we don't need any JS right now
 
has_layout:      true
layout:          layout

Como podéis observar lo único que hemos hecho ha sido añadir una hoja de estilo más,navigation.css.

Navigation css:

div.main_menu ul {
 
font: bold 16px/40px "trebuchet MS", Arial, Tahoma, Sans-serif;
 
list-style: none;
 
margin:0;
 
padding: 0 0 0 20px;
 
height: 40px;
 
background: #81C524 url(../images/menu.jpg) no-repeat;
 
}
 
div.main_menu ul li {
 
display: inline;
 
}
 
div.main_menu ul li .link {
 
display: block;
 
float: left;
 
padding: 0 12px;
 
color: #fff;
 
text-decoration: none;
 
background: url(../images/sep.jpg) no-repeat 100% 100%;
 
}
 
div.main_menu ul li a:hover {
 
color: #3b5e0b;
 
}
 
div.main_menu ul li.dm_current .link {
 
color: #3b5e0b;
 
}
 
.navigation_bread_crumb li, .pager li {
 
display: inline;
 
margin: 0 0.5em;
 
}
 
.pager {
 
text-align: center;
 
font-weight: bold;
 
}
 
.pager li.current .link {
 
font-size: 120%;
 
color: #666;
 
}

El archivo ha de ir alojado dentro de la carpeta del theme, dentro de css (www/themCoolWater/css/).

Ahora ya tenemos nuestro menú superior:

Usar Inserción de texto

Igual que en punto anterior vamos a darle al icono + de la parte inferior. Añadimos el widget de texto a la parte central de la página y automáticamente se nos arbirá la siguiente pantalla

Volvemos a modificar el archivo view.yml anterior incluyendo una nueva css:

# apps/front/config/view.yml
default:
 
http_metas:
content-type: text/html
 
stylesheets:
- layout
- typography
- navigation
- markdown
 
javascripts:     # we don't need any JS right now
 
has_layout:      true
layout:          layout

Y creamos el archivo markdown.css en la carpeta www/themeCoolWater/css.

markdown.css:

.markdown h2,
.text_title {
font-size: 170%;
color: #88ac0b;
font-weight: normal;
}
 
.markdown h3 {
color:#666666;
font-size:155%;
}
 
.markdown h4 {
color:#666666;
font-size:125%;
}
 
.markdown li {
list-style-image: url(../images/bullet.gif);
list-style-position: inside;
}
 
.markdown ul, .markdown ol {
margin: 5px 15px;
padding: 0 25px;
}
 
.text_image {
float: left;
margin: 0 1em 0.5em 0;
background: #fff;
border: 1px solid #E5E5E5;
padding: 7px;
}
 
/* roundbox text styles */
.roundbox .dm_text {
background: #fff;
border: 10px solid #A2E256;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding: 15px;
}
.roundbox .text_title {
font-size: 190%;
text-align: center;
text-transform: uppercase;
color: #88AC0B;
margin: 0 0 15px 0;
}
.roundbox .text_image {
float: right;
margin: 0;
padding: 0;
border: none;
}
.roundbox .text_image img {
border: 1px solid #88AC0B;
}
.roundbox .markdown h3 {
color: #88AC0B;
border-bottom: 1px solid #88AC0B;
}

Esta modificación no es para incluir mejoras en la parte vista. Se trata de una especie de motor que automáticamente genera links externos, listas… podéis ver su uso aquí.

Volvemos a abrir el widget de texto (para abrir el widget solo debeís clicar sobre wl texto widget de la zona) e introducimos el siguiente texto:

###Morbi fringilla
Proin nec risus ac nisi interdum faucibus. **Maecenas fringilla**.  
 
#### luctus diam
Suspendisse pellentesque luctus diam. [Diem](http://diem.iliaz.com "Diem") fusce sem lorem, convallis ut, dictum at, blandit eu, erat; Etiam et **nulla convallis** risus adipiscing consectetur. *Morbi velit massa*, dapibus at, pharetra at, auctor ornare, risus.  
 
### Donec lorem mi  
 
Commodo ipsum **suspendisse volutpat** congue massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec lorem mi fermentum at :  
 
* Ut semsddper elisat sed nullateli
* Us ac nisi interdum fau
* Erdum fau utilotieu
* Betagor chaligonatu  
 
#### enim nisl
Nunc lobortis, nulla et auctor ultricies, enim nisl *venenatis turpis*, quis pharetra lectus sapien fermentum mauris. Aliquam erat volutpat. Quisque laoreet nibh et magna. Praesent eros. Proin nec risus ac nisi interdum faucibus. **Maecenas fringilla**.

El resultado es un texto formateado

Así acaba este segundo día. Espero que os sirva igual que el primero. Para ampliar la información seguid el enlace o continuad con los widgets.

Diem Project Día 2 (Páginas y Navegación) is a post from: Uy perdon