Estas en: Home > CSS

Entradas etiquetadas con CSS

Optimización de WordPress

Mejorando el redimiento, el tiempo de carga y la puntuación de Page Speed de tu WordPress

0

Ya tienes tu WordPress instalado, configurado y con un estupendo tema. Le has instalado entre media y una docena de plugins, ya sean para añadir nuevas características a la administración, o para el frontend. Le has añadido un montón de contenidos para que, en cuanto lo subas a producción, los usuarios se queden maravillados de lo bien que escribes, de los productos que vendes, de los trabajos que realizas, etc. Has contratado al mejor analista SEO de todo el mundo para conseguir estar en los primeros puestos y comerte a la competencia. Tienes una campaña de marketing para radio, televisión, prensa e internet, que ni los de Nike.

Y lo subes a producción.

Y aunque tendrás visitas, venderás tus productos, y los usuarios te conocerán gracias a la campaña de marketing, el negocio no termina de despegar. Empiezas a preguntarte qué sucede. Pides informes, análisis, reuniones, cambios, mejoras. Pero nada lo soluciona.

Continue reading “Mejorando el redimiento, el tiempo de carga y la puntuación de Page Speed de tu WordPress” »

Symfony: La vista (III), configuración de la vista

0

La vista en Symfony está dividida en dos partas:

  • Las plantillas (fragmentos de código): donde se recoge el resultado de la acción.
  • El resto: etiquetas meta, título de la página, archivos js y css, acciones que necesitan un layout personalizado (ventanas emergentes, publi) y las acciones que no necesitan layout alguno como las acciones para ajax.

Para modificar todo lo del segundo punto, que en general, podríamos considerar las cabeceras de la página, Symfony utiliza dos formas: a través del archivo de configuración view.yml o a través del objeto sfResponse para poder modificar las cabeceras de forma dinámica desde las acciones.

Si un mismo parámetro de configuración se establece mediante el objeto sfResponse y mediante el archivo view.yml, tiene preferencia el valor establecido mediante el objeto sfResponse.

EL ARCHIVO view.yml

editSuccess:
metas:
title: Edita tu perfil

editError:
metas:
title: Error en la edición del perfil

all:
stylesheets: [mi_estilo]
metas:
title: Mi sitio web

Esto anterior es la configuración de la vista de un módulo. Por defecto el archivo no existe y tendrías que crearlo y guardarlo dentro de la carpeta del módulo así: mimodulo/config/view.yml. Como puedes ver hay tres apartados:

  • editSuccess: Esta configuración se utilizará cuando la acción edit devuelva una respuesta igual a sfView::SUCCESS (o no devuelve nada, ya que es el valor devuelto por defecto).
  • editError: Esta configuración se utilizará cuando la acción edit devulva una respuesta igual a sfView::ERROR.
  • all: Esta es la configuración por defecto del módulo.

Para que veas la configuración en cascada de una aplicación en Symfony mira esto:

  • En apps/miaplicacion/modules/mimodulo/config/view.yml, las definiciones de cada vista solo se aplican a una vista y además sus valores tienen preferencia sobre las opciones generales del módulo.
  • En apps/miaplicacion/modules/mimodulo/config/view.yml, las definiciones bajo all: se aplican a todas las acciones del módulo y tienen preferencia sobre las definiciones de la aplicación.
  • En apps/miaplicacion/config/view.yml, las definiciones bajo default: se aplican a todos los módulos y todas las acciones de la aplicación.

Supongo que te estarás preguntando dónde se definen las cabeceras de la página, pues bien, estás se defienen en el archivo view.yml de la aplicación.

default:
http_metas:
content-type: text/html
metas:
title: symfony project
robots: index, follow
description: symfony project
keywords: symfony, project
language: en
stylesheets: [main]
javascripts: [ ]

has_layout: on
layout: layout

Más adelante explico las distintas opciones de la configuración de la vista. Antes veamos la segunda forma de configurar la vista.

EL OBJETO sfResponse

Aunque el objeto sfResponse pertenece a la vista, se puede acceder a él a través de la acción mediante el método getResponse. Algunos métodos que se utilizan habitualmente:

class mimoduloActions extends sfActions
{
public function executeIndex()
{
$respuesta = $this->getResponse();

// Cabeceras HTTP
$respuesta->setContentType(‘text/xml’);
$respuesta->setHttpHeader(‘Content-Language’, ‘en’);
$respuesta->setStatusCode(403);
$respuesta->addVaryHttpHeader(‘Accept-Language’);
$respuesta->addCacheControlHttpHeader(‘no-cache’);

// Cookies
$respuesta->setCookie($nombre, $contenido, $expiracion, $ruta, $dominio);

// Atributos Meta y cabecera de la página
$respuesta->addMeta(‘robots’, ‘NONE’);
$respuesta->addMeta(‘keywords’, ‘palabra1 palabra2’);
$respuesta->setTitle(‘Mi Página de Ejemplo’);
$respuesta->addStyleSheet(‘mi_archivo_css’);
$respuesta->addJavaScript(‘mi_archivo_javascript’); } }

Los métodos setter mostrados anteriormente que permiten dar un valor a la propiedad, también disponen de un método getter que devuelven el valor de la propiedad.

OPCIONES DE CONFIGURACIÓN DE LA VISTA

Copypasteo la introducción de esta sección del libro de Symfony:

Puede que hayas observador que existen 2 tipos diferentes de opciones para la configuración de la vista:

  • Las opciones que tienen un único valor (el valor es una cadena de texto en el archivo view.yml y el objeto respuesta utiliza un método set para ellas)
  • Las opciones que tienen múltiples valores (el archivo view.yml utiliza arrays para almacenar los valores y el objeto respuesta utiliza métodos de tipo add)

Hay que tener en cuenta por tanto que la configuración en cascada va sobrescribiendo los valores de las opciones de un solo valor y va añadiendo valores a las opciones que permiten valores múltiples. Este comportamiento se entiende mejor a medida que se avanza en este capítulo.

ETIQUETAS META

Las etiquetas <meta> se pueden definir dentro de las claves http_metas: y metas: en el archivo view.yml, o utilizando los métodos addHttpMeta() y addMeta() del objeto sfResponse dentro de la acción:

http_metas:
cache-control: public
metas:
description: Página sobre economía en Francia
keywords: economía, Francia

$this->getResponse()->addHttpMeta(‘cache-control’, ‘public’);
$this->getResponse()->addMeta(‘description’, ‘Página sobre economía en Francia’);
$this->getResponse()->addMeta(‘keywords’, ‘economía, Francia’);

Para las etiquetas <meta>, se puede añadir al método addHttpMeta() (y también a setHttpHeader()) un tercer parámetro con un valor de false para que añadan el valor indicado al valor que ya existía y así no lo reemplacen.

$this->getResponse()->addHttpMeta(‘accept-language’, ‘en’);
$this->getResponse()->addHttpMeta(‘accept-language’, ‘fr’, false);
echo $this->getResponse()->getHttpHeader(‘accept-language’);
=> ‘en, fr’

Para añadir las etiquetas <meta> en la página que se envía al usuario, se deben utilizar los helpers include_http_metas() e include_metas() dentro de la sección <head>.

EL TÍTULO DE LA PÁGINA

indexSuccess:
metas:
title: Los tres cerditos

$this->getResponse()->setTitle(sprintf(‘Los %d cerditos’, $numero));

El título de la página se puede incluir en el layout a través del método include_metas(), a través de include_title() o ambos, ya que es totalmente válido tener una etiqueta <meta name=”title”> o una etiqueta <title>.

INCLUIR ARCHIVOS

indexSuccess:
stylesheets: [miestilo1, miestilo2]
javascripts: [miscript]

$this->getResponse()->addStylesheet(‘miestilo1’);
$this->getResponse()->addStylesheet(‘miestilo2’);
$this->getResponse()->addJavascript(‘miscript’);

La extensión de los archivos no es necesario ponerla, a no ser que tengan una extensión diferente a la habitual (.css para archivos de estilos, .js para archivos javascript).

La inclusión de los archivos en la cabecera de la página es automática, no se necesita ningún método para añadirlos.

Recuerda que se sigue aplicando la configuración en cascada, por tanto los archivos que añadas a view.yml de la aplicación se mostrarán en todas las páginas de la aplicación.

view.yml de la aplicación:

default:
stylesheets: [principal]

view.yml del módulo:

indexSuccess:
stylesheets: [especial]

all:
stylesheets: [otra]

Si no se quiere incluir un archivo definido en alguno de los niveles de configuración superiores, se puede añadir un signo – delante del nombre del archivo en la configuración de más bajo nivel.

Ejemplo de archivo view.yml en el módulo y que evita incluir algunos de los archivos incluidos desde el nivel de configuración de la aplicación:

indexSuccess:
stylesheets: [-principal, especial]

all:
stylesheets: [otra]

Para eliminar todas las hojas de estilos o todos los archivos de JavaScript, se puede utilizar la siguiente sintaxis:

indexSuccess:
stylesheets: [-*]
javascripts: [-*]

Se puede ser todavía más preciso al incluir los archivos, ya que se puede utilizar un parámetro adicional para indicar la posición en la que se debe incluir el archivo (sólo se puede indicar la posición primera o la última):

# En el archivo view.yml
indexSuccess:
stylesheets: [especial: { position: first }]

// En la acción
$this->getResponse()->addStylesheet(‘especial’, ‘first’);

Para modificar el atributo media de la hoja de estilos incluida, se pueden modificar las opciones por defecto de Symfony:

indexSuccess:
stylesheets: [principal, impresora: { media: print }]

$this->getResponse()->addStylesheet(‘impresora’, ”, array(‘media’ => ‘print’));

Html devuelto por Symfony:

$this->getResponse()->addStylesheet(‘impresora’, ”, array(‘media’ => ‘print’));

CONFIGURACIÓN DEL LAYOUT

Normalmente Symfony, por defecto, utilizará la plantilla guardada en la carpeta /templates de la aplicación llamada layout.php, pero podemos indicarle cualquier otro layout:

indexSuccess:
layout: mi_layout

$this->setLayout(‘mi_layout’);

Si no se necesita ningún layout, se puede eliminar:

indexSuccess:
has_layout: false

$this->setLayout(false);

Imprimir con saltos de página en javascript

1

Todos los que nos dedicamos a la programación web sabemos que para imprimir una página web, es necesario usar la función  print() de javascript, pero si deseamos imprimir documentos (como nóminas, albaranes, facturas, documentación oficial, etc), habitualmente necesitaremos imprimir esos documentos por triplicado o en hojas diferentes, y la manera más óptima de realizarlo sería crear un pdf que el usuario podría o bien descargar o visualizar para su impresión.

Pero gracias a CSS podemos imprimir varias páginas sin necesidad de usar pdf (a no ser que también quisieramos tener una copia en este formato 😉 )

CSS tiene varias propiedades para impresión:

page-break-after: Sirve para forzar un salto de linea después del elemento al que se le ha aplicado.
page-break-before: Sirve para forzar un salto de linea antes del elemento al que se le ha aplicado.

Ejemplo:

  1. #salto_pagina_despues{
  2.  
  3. page-break-after:always;
  4.  
  5. }
  6.  
  7. #salto_pagina_anterior{
  8.  
  9. page-break-before:always;
  10.  
  11. }

Forma de utilización:

  1. <div id="salto_pagina_despues">Este elemento se imprimirá en la primera página.</div>
  2. <div>Este elemento se imprimirá en la segunda página.</div>
  3. <div id="salto_pagina_anterior">Este elemento se imprimirá en la tercera página.</div>

Explicación:

La primera capa se imprimirá en la primera página, por que le hemos indicado que después del elemento con el id “salto_pagina_despues” se genere un salto de página. El segundo “div” se imprimirá en la segunda página porque le hemos indicado a la capa con el id “salto_pagina_anterior” que antés de procesar el contenido de la capa con ese id, genere un salto de linea.

Es algo muy útil he intuitivo. Espero que os sirva. XD

Ocho cheat sheets para webmasters

0

Listas de funciones, palabras clave, clases, atributos, etiquetas, etc. más usadas en programación web: HTML, entidades HTML, CSS, JavaScript, JQuery, PHP, Mysql y uno muy especial para el módulo modrewrite para reescritura de URL en Apache:

http://yensdesign.com/2008/12/cheat-sheets-pack-for-webmasters/
http://www.emezeta.com/articulos/emezeta-card-modrewrite-cheat-sheet

Y un “bonus”, también de emezeta.com, otro cheat sheet de PHP: http://www.emezeta.com/articulos/emezeta-card-php-cheat-sheet

A disfrutarlo XD

Mootools y position:absolute;

0

Estoy creando un menú desplegable para una web con el framework mootools, el problema surje cuando quería colocar el submenú en una posición absoluta.

La solución es bien sencilla, se crea una capa por encima del código del submenú, y es esa capa la que tendrá la posición como absoluta y a través de las propiedades top y left de esa capa podremos colocar el submenú donde queramos.

Espero haberos ahorrado un par de horas 🙂

Ir arriba