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

Enlace

Menu interactivo estilo flash pero hecho con xhtml, css y javascript is a post from: Uy perdon

Para Hotmail solo debemos añadir:

<style type=”text/css”>
<!--
    img {display:block;}
-->
</style>

En Gmail añadir en cada imagen:

style="display:block;"

Espacios entre imagenes Mailings / Newsletters is a post from: Uy perdon

Tras tener toda la estructura grafica preparada nos damos cuenta de que necesitamos que el logotipo sea un link a la pagina de inicio. ?Como se nos ha podido pasar algo tan logico? Reproches, estirones de orejas y rabietas aparte podemos solucionarlo con una simple div, una declaracion de link y su posterior posicionamiento y tamaño en nuestra css. El codigo de la div contenedora del link podria ser algo asi:

<div class="nombre">
<a href="direccion"></a>
</div>

Y este seria el codigo en nuestra css;

.nombre { margin:0x; padding:0; width:125px; height:125px; }
.nombre a { display: block; height: 100%; width: 100%; }

Por supuesto los valores de tamaño y posicion los variaremos para que encaje perfectamente en la parte que queremos sea clicable.

Div clicable is a post from: Uy perdon

La mejor solución es realizar la escritura de nuestra CSS inline. Actualmente ésta es una práctica en desuso. Sin embargo existen soluciones que nos pueden facilitar el trabajo.  Convert CSS Styles to Inline for Emails puede realizar esa operación por nosotros. Es una buena utilidad para los que programan Newsletters o emailings. Espero que os sirva

Conversiones Css para Mailings is a post from: Uy perdon

La importancia radica en que parece qe Google haya iniciado una cuenta atrás para todos aquellos navegadores que no se basan en los estándares y basados en webkits.

El cambio cometado solo puede verse con los navegadores comentados, ni IE, ni Firefox, ni Opera muestran cambio alguno en los botones. Las dos características que están siendo utilizados para los botones son “sexy-webkit-border-radius-” y “webkit-gradient”. Ambos fueron ejecutados por los desarrolladores de WebKit como nuevas características CSS hace ya más de un año.

Con este hecho el gigante Google envía un aviso a los que creen en las nuevas características estándar y que su propio navegador ejecuta y apoya. No es la primera vez que Google hace esto. Google Gears se inició mucho antes de que Chrome como vía de aplicación de las normas HTML5.

Comparativamente, el  juicio antimonopolio contra Microsoft se centraba en la combinación escritorio, navegador y S.O. Google está utilizando su posición dominante para obligar a aplicar un tema estancado durante demasiado tiempo con una diferencia, que están usando su posición para un bien mayor (al menos eso espero). Microsoft podía haber dicho “este sitio web sólo es compatible con Internet Explorer”, mientras que Google, por el momento, no ha dicho:”Esta página web es mucho mejor, y tiene botones sexy, si utiliza Chrome”.

Google fuerza a usar las normas is a post from: Uy perdon

A la hora de desarrollar es importante tener en cuenta el siguiente decálogo de errores en Net.tus.

Pero si aún así nada de esto os satisface o tenemos poco tiempo o simplemente es que somos vagos siempre se puede echar mano del listado de css’s libres.

Hojas de referencia css is a post from: Uy perdon

El uso incorrecto de las clases sería definirlas para un único elemento. En cambio definir una id por cada elemento individual para estilos comunes sería incorrecto.

A la hora de definirlos los distinguimos mediante la colocación de un punto para las clases y una # para las id:

#header {} - id
.header {} - clase

Un posible uso incorrecto sería el siguiente:

#corporativo { color: red; font-size: 1.5em; text-decoration: none; }
#historia  { color: red; font-size: 1.5em; text-decoration: none; }
#contenido  { color: red; font-size: 1.5em; text-decoration: none; }
#destacado  { color: red; font-size: 1em; text-decoration: none; }

Como varios de nuestros elementos se repiten podemos aunar los elementos comunes:

.textocolor  { color: red; font-size: 1.5em; text-decoration: none; }
#destacado { font-size: 1em; }

Aunque el resultado de ambos es el mismo el segundo código es más ligero e inteligible en caso de aplicar algún cambio.

CSS: Id vs. class is a post from: Uy perdon

Examen css is a post from: Uy perdon