Crear tu propia plantilla para Joomla, 4ª parte

En esta última parte vemos la instalación de nuestra plantilla en joomla y la relación de módulos con sus posiciones. Estructura carpetas Hemos hecho todo el proceso respetando la estructura de carpetas:

Crear tu propia plantilla para Joomla, 3ª parte

Seguimos creando nuestra plantilla para Joomla, recordemos que ya teníamos organizadas las carpetas, la maquetación HTML5 + CSS y creado el archivo templateDetails.xml. Sólo nos queda crear index.php

Crear tu propia plantilla para Joomla 2ª parte

Seguimos con la tarea de crear tu propia plantilla para joomla. recordemos que lo último que hemos hechos es organizar nuestras carpetas, empezamos la maquetación con HTML5 y CSS3 , y creamos templateDetails.xml para que joomla sepa su posición.

Crear tu propia plantilla para Joomla, 1a parte

Cómo desarrollar tu propia plantilla para Joomla. Parte 1

Herramientas Velocidad de Carga

Google Page Speed

Una de las cosas que nos preocupa a cualquier propietario de web es la velocidad de carga de nuestra página, en otro artículo veremos como mejorarla pero lo primero es medir esa velocidad. Para ello tenemos multitud de herramientas que aportan mucha información y pueden ayudarnos. Te presento mi selección, claro que puedes consultar tantas como quieras pero en éstas puedes identificar todos los problemas que se te plantean. 

Reducir la velocidad de carga

Optimizar o reducir la velocidad de carga de web se ha convertido en la obsesión de cualquier propietario de tienda online o web por la implicación que tiene en su posicionamiento SEO, sin embargo, es un aspecto más que trabajar entre muchos, que exige constancia y trabajo continuo. Por ello, en este artículo vamos a ver algunas pautas para mejorar nuestra velocidad de carga.

FanPage en nuestra web

Para incrustar en nuestra web nuestros posts de facebook, así como los amigos, un botón de Me Gusta y la cabecera de nuestra Fan Page tenemos la posibilidad de instalar algún módulo o plugin según nuestro gestor o de ir a la página de desarrolladores de Facebook y generar el código para nuestra web.

Bordes redondeados en CSS3

Muchas son las novedades de CSS3 muy interesantes para facilitar la maquetación de una web. Esta propiedad redondea las esquinas de nuestra caja, es:

border-radius: 5px;

De este modo redondeamos todas las esquinas por igual, pero también podemos hacerlas una a una a distintos tamaños consiguiendo distintos efectos:

Navegadores Móviles: Meta viewport

Tradicionalmente, hemos visto las webs bien construidas en nuestros móviles igual que si fuera en una pantalla de PC, pero más pequeño todo, obligándonos a hacer zoom en las zonas que queríamos leer. Actualmente podemos modificar este comportamiento por defecto de los navegadores móviles, para facilitar la lectura en una pantalla móvil. Para ello, introducimosSigue leyendo “Navegadores Móviles: Meta viewport”

Media Queries: screen

Los media queries son sentencias que escribimos en los CSS dónde indicamos que ciertos estilos se apliquen si se cumple unos requisitos determinados. En las CSS los usamos principalmente para aplicar unos estilos según la resolución de la pantalla:

Aplicar sólo en resoluciones de pantalla menores que X píxeles de ancho:

@media screen and (max-width:Xpx) { /*estilos */ }

Media Queries: Incompatibilidad con IE

Los media queries son bastante útiles a la hora de conseguir ajustar diseños según la resolución de pantalla, sin embargo puede suponer un problema en Internet Explorer.

Para ello los desarrolladores nos han creado una librería js para contrarestar ese comportamiento.
Sólamente hay que descargarla: css3-mediaqueries-js, pinchamos en el enlace que nos dan en la web, nos dará error, vamos a la dirección del navegador y quitamos el *:
URL en barra de navegación

Media Queries: print

Un uso muy útil de media queries es el uso para aplicar una serie de estilos si se va a imprimir en lugar de ver en pantalla, por ejemplo para eliminar imágenes que no contengan información. Pondríamos en las etiquetas <head> : <link rel=”stylesheet” media=”print” href=”archivo.css” /> De este modo, cuando se vaya a imprimirSigue leyendo “Media Queries: print”