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

1. Aplicar una template css en concreto “CoolWater theme”. descarga y colocarla en la carpeta web/themeCoolWater.
2. Preparar la aplicación para que muestre la css introducida e incluya las vistas.
3. Para ello modificaremos apps/front/config/dm/config.yml. Lo dejaremos como a continuación:

# apps/front/config/dm/config.yml
all:
 
theming:                 # the theming component
themes:                  # list of themes
coolwater:               # theme key
name:      Cool Water    # theme name; defaults to the theme key
dir:       themeCoolWater# the directory in the web dir that holds the theme files
enabled:   true      # whether the theme is enabled for use with the dmThemeManager
 
html:
doctype:
name:      html  # Doctype name ( 'html', 'xhtml' )
version:  5      # Doctype xhtml version ( '1.0', '1.1' ) or html version ( '4', '5' )
compliance: transitional# Doctype xhtml compliance ( 'strict', 'transitional' )

4-. Modificaremos apps/front/config/view.yml como sigue:

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

5-. Modificaremos la parte vista (apps/front/modules/dmFront/templates/pageSuccess.php) – Problema. A mi no me salía correctamente y symfony me lanzaba un error así que como de lo que se trata es de eliminar una columna simplemente la eliminé del archivo original sin copiar todo el código del tutorial.

Cambiamos esto:

<!-- apps/front/modules/dmFront/templates/pageSuccess.php -->
 
<div id="dm_page">
&gt;  
 
<div class="dm_layout">
    renderArea('layout.top', '.clearfix') ?&gt;  
 
<div class="dm_layout_center clearfix">
      renderArea('layout.left') ?&gt;
      renderArea('page.content') ?&gt;
      renderArea('layout.right') ?&gt;</div>
 
 
    renderArea('layout.bottom', '.clearfix') ?&gt;</div>
</div>

Por esto:

<!-- apps/front/modules/dmFront/templates/pageSuccess.php -->
 
<div id="dm_page">
&gt;  
 
<div class="dm_layout">
    renderArea('layout.top', '.clearfix') ?&gt;  
 
<div class="dm_layout_center clearfix">
      renderArea('page.content') ?&gt;
      renderArea('layout.right') ?&gt;</div>
 
 
    renderArea('layout.bottom', '.clearfix') ?&gt;</div>
</div>

Ahora podemos ver desde el frontend una especie de administración visual y jugando con el header y el footer podremos crear la estructura de la home. Los únicos archivos que vamos a modificar van a ser: apps/front/modules/main/templates/_header.php y apps/font/modules/main/templates/_footer.php:

Header:

echo _tag('h1.t_site', _link('@homepage')->text('diem ipsum'));
echo _tag('p.t_baseline', __('meet Diem step by step'));

En este punto es interesante ver como la primera línea de código introducido lanza:

<h1 class="t_site"><a class="link" href="/">diem ipsum</a></h1>

Eso quiere decir que en realidad cuando incluimos h1.t_site le estamos dando la clase t_site de nuestro css. Así que los maquetadores web ya saben que hacer y dónde buscar los cambios.

Footer:

  diem ipsum
| Diem Project |
 website template
by <a href="http://www.styleshout.com/">styleshout</a>

Y este es el resultado:

Realmente es muy sencillo solo hay que seguir estos pasos.

En poco más de media hora entre que se buscan los archivos y se sustituyen se puede tener ya la primera vista personalizada. A ver qué tal van los siguientes avances…

Segundo día >>

Diem Project Día 1 (Primer Proyecto con Diem) is a post from: Uy perdon

1. Tener instalado el xampp.
2. Descargar el paquete de instalación de Diem.
3. Descomprimir el paquete en c:/xampp/htdocs (si es la configuración standar).
4. Instalar el paquete – 1er problema

Resulta que el paquete se ha de instalar mediante la línea de comandos (ventana + R). La línea a ejecutar es:

php c:/xampp/htdocs/diem (o el directorio en el que se ha descomprimido)

Para que la línea funcione es necesario que el php se encuentre en el path de nuestro sistema operativo. Para windows hay que ir a Panel de Control / Sistema / Variables de entorno e incluir la siguiente línea en el PATH:

;C:\xampp\php\

El ; es importante puesto que separa la ruta.

Tras esta modificación ya podemos ejecutar la línea php “c:/xampp/htdocs/diem”. Como ejecuta directamente la instalación recomiendo que nos encontremos en un directorio nuevo por ejemplo c:/xampp/htdocs/proyecto. Podremos utilizar el paquete del directorio c:/xampp/htdocs/diem para realizar las instalaciones de varios entornos en directorios diferentes.

Tras esto solo hay que seguir las intrucciones de la pantalla de comandos y, aunque tarda un poco todo se instala y funciona correctamente.

Tras la instalación accedemos mediante un navegador a localhost/nombredeproyecto/admin_dev.php y ya podremos entrar en el panel de administración.

Vamos a preparar entonces la parte vista >>

Instalando Diem Project is a post from: Uy perdon

1. El servidor es un LAMPP (Linux, Apache, Mysql y PHP)
2. Hay que tener en cuenta la estructura del framework. Todo el paquete symfony ha de ser subido a la carpeta de datos del Servidor. En mi caso en el servidor poseía dos carpetas datos y logs.  La carpeta datos se divide a su vez en varias carpetas, la que me interesa es aquella que muestra la información pública, en mi caso se llama web (también podría llamarse www).
3. Incorporamos los archivos de symfony dentro de la carpeta datos, antes de la carpeta web en una carpeta que se llama symfony.
4. Una vez subido todo el paquete hemos de incorporar la carpeta de proyecto creado dentro de la carpeta web.
5. Hemos de modificar la localización en todos los archivos de la raíz del proyecto. La línea a modificar es la siguiente:

Esto:
require_once(dirname(__FILE__).'../symfony/config/ProjectConfiguration.class.php');
 
Por esto:
require_once(dirname(__FILE__).'/../../symfony/config/ProjectConfiguration.class.php');

Dependiendo de la carpeta en la que hayamos colocado la información del framework deberemos bajar o subir niveles de profundidad. Recordad que la estructura de symfony se encuentra en la carpeta /datos/symfony y el proyecto en /datos/web/proyecto, por tanto he de subir dos niveles para entrar en la carpeta symfony. Para subir un nivel usamos /../ pero es posible que la configuración del servidor nos remita a \..\.

Una vez realizada la operación podremos acceder a nuestro proyecto. Por supuesto que faltan algunos ajustes como el routing por ejemplo pero todavía estamos en ello. Y como queda mucho por hacer posiblemente las recomendaciones de cabeza de ratón, que ya ha tenido una experiencia similar,  sirvan de ayuda.

Subir proyecto de Symfony a Hosting Dedicado is a post from: Uy perdon

Sin embargo y y en la versió 1.2.9 y sabiendo que el ID de Netbeans 6.8 permite programar directamente con Symfony, me he propuesto empezar de nuevo, con instalación y todo así que empecemos.

El entorno de desarrollo será XAMPP y Symfony en su versión 1.2.9. La instalación de Xampp es sencilla y no necesita explicación alguna pues se realiza todo automáticamente.

Instalación Symfony

Aunque en muchos tutoriales nos dicen que primero hay que instalar PEAR, este ya viene instalado en XAMPP.

1. Abrimos el prompt de MS-DOS: “inicio / ejecutar / cmd”.
2. Escribimos:

   pear channel-discover pear.symfony-project

3. Tardará un poco pero cuando volvamos a tener el prompt escribimos:

   pear install symfony/symfony

4. Ahora se descargará e instalará symfony. Cuando termine vamos a la carpeta “C:\xampp\php”, buscamos los archivos “symfony.bat” y pear.bat y los copiamos en “C:\WINDOWS\system32″.
5. Como todavía no podemos ejecutar symfoy desde la línea de comandos ya que nos da error Editamos el archivo symfony.bat cambiando la línea 25 y la 32 por las rutas de ejecución correctas. El archivo debe quedar así:

   @echo off
    
   rem *************************************************************
   rem ** symfony CLI for Windows based systems (based on phing.bat)
   rem *************************************************************
    
   rem This script will do the following:
   rem - check for PHP_COMMAND env, if found, use it.
   rem   - if not found detect php, if found use it, otherwise err and terminate
    
   if "%OS%"=="Windows_NT" @setlocal
    
   rem %~dp0 is expanded pathname of the current script under NT
   set SCRIPT_DIR=%~dp0
    
   goto init
    
   :init
    
   if "%PHP_COMMAND%" == "" goto no_phpcommand
    
   IF EXIST ".\symfony" (
   %PHP_COMMAND% -d html_errors=off -d open_basedir= -q ".\symfony" %1 %2 %3 %4 %5
   %6 %7 %8 %9
   ) ELSE (
   %PHP_COMMAND% -d html_errors=off -d open_basedr= -q "C:\xampp\php\symfony" %1 %2
   %3 %4 %5 %6 %7 %8 %9
   )
   goto cleanup
    
   :no_phpcommand
   rem echo ------------------------------------------------------------------------
   rem echo WARNING: Set environment var PHP_COMMAND to the location of your php.exe
   rem echo          executable (e.g. C:\PHP\php.exe).  (assuming php.exe on PATH)
   rem echo ------------------------------------------------------------------------
   set PHP_COMMAND=C:\xampp\php\php.exe
   goto init
    
   :cleanup
   if "%OS%"=="Windows_NT" @endlocal
   rem pause

Ahora volvemos a MS-Dos y escribimos “symfony” deben de aparecer todos los comandos que se usan en el CLI de symfony.

Nota: si queréis tener PEAR siempre actualizado solo hay que teclear en el prompt:

pear upgrade-all

Ahora solo me queda revisar este video tras instalar Netbeans y continuar con el Tutorial de Jobeet desde Netbeans.

Instalando Symfony is a post from: Uy perdon