Crear un hexágono o un octógono con CSS

Se está poniendo de moda el usar formas geométricas en las maquetaciones así que ¿cómo podemos crear un hexágono para nuestra web? ¿o un octógono? En el último año de hecho los hexágonos han estado bastante de moda (parece un chiste, pero no, pensad en múltiples diseños que habéis visto)

Entonces ¿cómo creo un hexágono con CSS? Pues aquí va un ejemplo de código, basándose en un la idea de que, a fin de cuentas, un hexágono se hace con un cuadrado con un triángulo encima y otro debajo:

#hexagono { 
  width: 150px; 
  height: 90px; 
  background: #666; 
  position: relative; 
}

#hexagono:before { 
  content: ""; 
  position: absolute; 
  top: -50px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-left: 75px solid transparent; 
  border-right: 75px solid transparent; 
  border-bottom: 50px solid #666; 
} 
#hexagono:after { 
  content: ""; 
  position: absolute; 
  bottom: -50px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-left: 75px solid transparent; 
  border-right: 75px solid transparent; 
  border-top: 50px solid #666;  
}

Ya véis la idea: usando :after y :before metemos dos triángulitos sobre un cuadrado y ya tenemos hexágono.

El octógono ya es más jodón, que tiene más lados, pero tampoco entraña mucha más complejidad. Eso sí, vas a necesitar jugar con más colores, ya que las formas se hacen a base de bordes, como en el ejemplo anterior:

#octogono { 
  width: 150px; 
  height: 150px; 
  background: #999; 
  position: relative; 
} 
#octogono:before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  border-bottom: 44px solid #999; 
  border-left: 44px solid #fff;/*Para el ejemplo he elegido blanco, poned vosotros el color de fondo de vuestra web. No uséis transparent porque entonces se verá el color de fondo del cuadrado*/ 
  border-right: 44px solid #fff; 
  width: 63px; height: 0; 
} 

#octogono:after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-top: 44px solid #999; 
  border-left: 44px solid #fff; 
  border-right: 44px solid #fff; 
  width: 63px; 
  height: 0; }

Detectar si un usuario usa Adblock Plus

El tema de la publicidad en internet está candente últimamente. Por un lado algunas páginas se pasan de publicidad intrusiva (y no hablo sólo de sitios donde ver retransmisiones deportivas on-line, basta con entrar en la web de cualquier periódico español «grande» para ver anuncios que a veces hasta dificultan la lectura), pero por otra parte también están muchas webs gratuitas cuya única fuente de ingresos es la publicidad, y al bloquearla les dejamos sin un dinero necesario para pagar los gastos ocasionados. Algunas web optan por bloquear a los usuarios que llegan con el adblock puesto, yo no comparto estas medidas draconianas ya que soy el primero que ve eso y lo siguiente que hace es salir de la página y buscar otra que me ofrezca lo mismo sin esta publicidad. Creo que la mejor solución sería el «buenrollismo«, vamos, que si se detecta en AdBlock se le saca al usuario un aviso tipo «tío, que alojamiento y dominio son 50 pavos anuales, que no es mucho pero me los sacaba con estos anuncillos de google, no me jodas y saca el bloqueador, man». La mayoría no te harán ni caso, pero bloqueándoles no te creas que lograrías mejores resultados, al menos así puede que lo compartan en redes sociales y logres ingresos de otros usuarios que lo miren.

Vamos pues con la chicha ¿cómo se detecta AdBlock? Bueno, yo lo he hecho mediante el método del señuelo, que de momento va furrulando. La cuestión es que AdBlock tiene una lista negra de palabras y bloquea según qué javascript si detecta alguna de ellas. El truco es meter un javascript con un nombre que haga saltar Adblock, comprobar que dicho javascript no está furrulando y, en ese caso, lanzar un aviso al usuario.

Empezamos creando un archivo de javascript con el título advertisement.js, un nombre que hará saltar a Adblock para evitar su carga, con un contenido más o menos como el siguiente:

document.write('<div id="le_truquito">Publicidad malvada y terrible!!</div>');

La idea es hacer el document.write de un div con un id concreto, lo del texto ya es chorrada mía. Por si entra un usuario sin Adblock lo mejor es que ocultemos ese div que se creará con CSS, para que no le aparezca por medio.

#le_truquito{
    display:none;
}

Ok, lista la trampa lo siguiente es añadir otro código de javascript que comprobará si se ha bloqueado el primero (cerciorándose de si existe el div que debería crear) y, en caso de que no lo haya hecho sacará un mensaje en pantalla.

<script type="text/javascript">
if (document.getElementById("le_truquito") == undefined)
{
    window.alert("tío, que alojamiento y dominio son 50 pavos anuales, que no es mucho pero me los sacaba con estos anuncillos de google, no me jodas y saca el bloqueador, man");
}
</script>

En el ejemplo puse un window.alert, pero también podéis crear un div con un texto en la página… en fin, lo que veáis más práctico.

De momento el sistema funciona, y tiene pinta de que al menos durante una temporada lo hará. En todo caso podéis buscar el nombre de un archivo de javascript de publicidad de Google, o de otra compañía, que sepáis positivamente que se está bloqueando por AdBlock y llamarle así en lugar de advertisement.js (aunque de momento con ese nombre furrula).

Meta etiquetas de Apple para hacer que una web parezca un app para iPhone o iPad

Aunque ya sabéis que le tengo alergia a los iCacharros, y sobre todo a sus fanáticos seguidores, hay que reconocer que Apple de vez en cuando saca cosillas interesantes. Una de ellas es la meta etiqueta viewport de la que ya hablamos en el pasado, pero no es la única meta equita que se sacó de la manga Apple para el diseño web móvil. Y es que dando uso a sus etiquetas podemos hacer que una web aparezca en pantalla como si fuera un app nativa, que se le pueda hacer un acceso directo desde el menú de aplicacione con un icono… todo esto mediante una serie de etiquetas.

Para conseguir que al abrir la web esta se vea sin ningún marco del navegador en pantalla hay que usar la siguiente etiqueta en la cabecera de la web, gracias a la cual lograremos ese aspecto app-like:

<meta name="apple-mobile-web-app-capable" content="yes" />

Sigamos ¿cómo escogemos un icono? Bueno, realmente necesitamos dos iconos, uno para la versión normal y otro para la versión con pantalla de alta densidad (o como reza su nombre comercial «retina display«). El primero ha de ser de 57*57px y la siguiente de 114*114px, la propiedad href apuntará a donde tengáis guardada la imagen:

<link rel="apple-touch-icon" href="img/icons/icono5757.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icono114114.png">

Es posible que al abrir la web/app os salga durante unos segundos una imagen en blanco mientras esta carga (muy posible), algo que queda «feo» pero que tiene también solución: podéis definir una imagen que se muestre durante esta carga, una startup-image:

<link rel="apple-touch-startup-image" href="img/loading.png">

Y finalmente, existe una posibilidad de modificar mínimamente la barra de estado de Apple en la parte superior. No es que tengáis mucho con lo que jugar, no es que haya mucha opción, pero algo se puede ir apañando, pudiendo elegir entre el color por defecto, el negro o un efecto traslúcido.

<!--Por defecto-->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!--negro-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--traslúcido-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Y con estas opciones podréis hacer que vuestra web parezca un app para dispositivos Apple. La he probado en el curro (web PHP+Javascript) en un proyecto y el resultado fue satisfactorio. La pena es que no haya algo así para Windows Phone y Android.

Uso de los pseudoelementos :before y :after de CSS3

¿Cuántas veces has tenido que poner una coletilla al lado de varios elementos en una web? Por ejemplo, poner la palabra «Error» antes de un mensaje de error. ¿No te encantaría que eso pudiera automatizarse?.

Pues con CSS3 puedes hacerlo. Con los pseudoelementos :before y :after. Estos te permiten añadir un contenido html antes (:before) o después (:after) de un elemento desde vuestra hoja de estilos. Para ello utilizaremos la propiedad «content». Vamos con un ejemplo, en el que añadiremos la palabra «Error» antes de un mensaje de error (vamos primero con lo más simple)

.error:before{
  content:"Error: ";
}

Furrula hasta en IE8 (7 no, no pidáis milagros), así que podéis ir trasteando con esto. Hay más posibilidades, claro, porque si sólo pudiéramos meter un textillo la cosa quedaría sosa. Lo primero, podemos dar estilos al contenido generado por estos elementos, como con cualquier otro elemento textual de la web:

.error:before{
  content:"Error: ";
  color:#FF0000;
  font-weight: bold;
}

O podemos incluir una imagen en lugar de un texto:

.error:before{
  content:url("carpetaimagen/imagenejemplo.png");
}

O crear un contenedor:

.error:before{
  content:"";
  display:block;
  background-color:#666;
  width:32px;
  height:32px;
  border:2px solid #ff0000;
}

Eso sí, hay una cosa que debemos tener en cuenta: a la hora de accesibilidad y del uso de lectores de pantalla, por ejemplo, estos textos/imágenes están generados por CSS, no son parte del DOM, no forman parte del contenido en si de la web, por lo que no serán interpretados por estos. Es decir, mejor no crear contenido relevante con esto, tanto por la accesibilidad como por el hecho de que los buscadores no lo indizarán.

La propiedad css background-size y como hacerla funcionar en IE8

Si usas una imagen de fondo en alguna ocasión te habrás visto en la necesidad de usar una que se adapte al tamaño del elemento contenedor. La propiedad CSS3 background-size permite definir el tamaño de esta imagen, ya sea en píxeles o con un porcentaje relativo al tamaño del contenedor. Se definen dos parámetros para el tamaño: el primero es el alto y el segundo el ancho.

/*Este daría un alto de 250px y un ancho de 50*/
background-size:250px 50px; 
/*Este cubriría todo el contenedor*/
background-size:100% 100%;

Como os podéis imaginar, si andáis modificando tamaños la imagen se deformará al romperse la proporción de las medidas.

Existen además de estas medidas dos propiedades que podéis aplicar: cover y contain.

  • Contain: Esta propiedad escala la imagen de forma que mantenga las proporciones y ocupa o el alto o el ancho (dependiendo de la proporción)
  • Cover:Esta propiedad escala la imagen al mínimo tamaño, manteniendo también las proporciones, para que ocupe todo el contenedor. Es posible que esto provoque que parte de la imagen no se vea.
background-size:contain; 
background-size:cover;

Y ahora vamos con el problema (con el que me vi esta tarde): hemos acabado de maquetar, probamos en todos los navegadores y funciona. Entonces en Explorer empezamos con los modos de compatibilidad, y sin problemas en Explorer 10 y 9 pero, al llegar al 8, todo a tomar por culo… tras maldecir a Bill Gates, a Windows, al Explorer y compartir mis cuitas con los compañeros de curro toca buscar una solución… y aparece en StackOverflow, como no.

Con lo que basándome en eso, dejo el css como está, con su background-size que está furrulando en todos los navegadores (menos en Explorer 8 y previos) y en el marcado html modifico el div con el siguiente código, para que así la imagen ocupe todo el contenido:

<div style='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale');-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale')";'></div>

En fin, hasta que no queden eliminados todos los IE8 habrá que recurrir a este truquito para hacer funcionar esto. Conste que no soy partidario de usar imágenes de fondo, la verdad.

Etiquetas META

A la hora de elaborar una web y posicionarla en buscadores las etiquetas META (Metatags) son fundamentales, ya que nos permiten añadir cierta información que será invisible para el usuario de la web pero visible en las búsquedas. Vamos a verlas

  • Title: Empezamos por esta etiqueta dado que es fundamental en el posicionamiento y además tiene un comportamiento distinto al resto. Distinto porque será visible para el usuario, ya que será el título en la cabecera del navegador/pestaña. Según las especificaciones de la W3C es obligatoria y cada página de tu web debe tener una title distinta, dado que el contenido repetido será sancionado por Google (en cuanto a Bing y Yahoo ya no se, pero no os vendrá mal). Se suelen recomendar sobre 70-80 caracteres de longitud, más o menos.
  • Keywords: Hace años era fundamental para el SEO pero actualmente el abuso de esta etiqueta, en la que se listaban palabras clave, ha provocado que los navegadores las ignoren, al menos según dice Google (algunos sostienen que siguen funcionando), que afirman que tienen una cierta relevancia a la hora de definir el contenido de la página, pero no a la hora de posicionar. No metas muchas, no más de 15 palabras.
  • Description: Fundamental en los últimos años, la etiqueta description nos permite añadir una descripción de la página que será usada por el navegador para posicionar la web, además de ofrecer al usuario una explicación del sitio. Cuando compongáis el texto descriptivo intentad meter una gran densidad de palabras clave (sin excesos que provoquen que el texto sea un galimatías) y con una longitud de entre 250 y 300 caracteres, haciendo una pequeña sinopsis del contenido de la web.
  • Robots: La etiqueta robots es una alternativa al robots.txt, aceptando los pares de valores Index/NoIndex y Follow/NoFollow. Como ya te imaginas te permite configurar las opciones de rastreo e indexación.
  • Otras: Existen, además, otras etiquetas menos usadas como Author, Subject, Language… que han caído en desuso ya que no eran usadas por los buscadores, o incluso eran contraproducentes para la web.

Estas etiquetas no son la panacea en cuanto a SEO, su uso no te garantiza un buen posicionamiento en los buscadores, pero el descuidarlas o tenerlas mal en cambio sí ue puede perjudicaros profundamente.

Un ejemplo de cómo se usarían en una cabecera

<head>
	<title>Macariowar | Tienda | Sacacorchos</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="description" content="Sección de sacacorchos de la tienda Online de Macariowar, nombre absurdo inspirado por Manowar."/>
	<meta name="keywords" content="Aragón, Macariowar, tienda, hostelería, sacacorchos, sacachapas" />
<!-- Aquí los enlaces a css y javascript-->
</head>

Pie de página siempre al final de la web

Seguro que alguna vez os ha pasado que os trabajáis una maquetación que se ve de puta madre en vuestra pantalla de 15 pulgadas, pero al verla en una 22… ale, el pie al medio de la página. No hay contenido suficiente para llenar toda esa pantalla. Una opción es usar un posicionamiento absoluto, pero claro, si es una web con varias páginas igual en otra sí tienes suficiente contenido y entonces te queda un pie fijo en la parte de abajo del monitor aunque tengas que scrollear para ver toda la info.

Pero hay una solución, básicametne consiste en envolver todo el contenido superior al footer en un div contenedor, darle un alto mínimo del 100% de la pantalla, meterle debajo un margen negativo y allí insertar el pie. Ok, dicho así suena muy árido. Vamos con un ejemplo progresivo. Imaginemos que el que sigue es nuestro código:

<div id="header">Aquí la cabecera</div>
    <div id="nav">
       <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Primera</a></li>
          <li><a href="#">Segunda</a></li>
       </ul>
     </div>
<div id="content">Contenido interesante y original que te hará ganar posicionamiento en google.</div>

<div id="footer">Y aquí ese pie que no se nos queda abajo.</div>

Bueno, pues lo primero es el marcado (luego ya nos ponemos con el CSS). La idea es, como he dicho, encerrar todo el contenido en un div que será un contenedor general, y por si acaso al final de este metemos un div vacío con la misión de evitar problemas si hay elementos flotados encima.

<div id="container"> <!--El container-->
  <div id="header">Aquí la cabecera</div>
    <div id="nav">
       <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Primera</a></li>
          <li><a href="#">Segunda</a></li>
       </ul>
     </div>
  <div id="content">Contenido interesante y original que te hará ganar posicionamiento en google.</div>
  <div class="clear"></div><!--El citado div para evitar problemas con "flotaciones"-->
</div><!--cerramos el container-->
<div id="footer">Y aquí ese pie que no se nos queda abajo.</div>

Bueno, eso está listo. Ahora toca ceeseesear (CSS) todo. Como ya he dicho, la idea es dar a todo el contenedor un tamaño mínimo del 100% de la altura, meterle un margen negativo por abajo y allí insertar el pie. Vamos a meter un pie de 50px de alto en el ejemplo.

/*Lo primero, todo el cuerpo que ocupe el 100%*/
html, body {    
   height: 100%; 
}

/*Lo segundo, el container, con algura mínima del 100% y un margen inferior negativo igual al alto que queramos darle al pie*/
#container {
   min-height: 100%;
   margin-bottom: -50px;
   position: relative;
}

/*Lo tercero, el pie con la altura deseada (igual al margen negativo de antes)*/
#footer {
   height: 50px;
   position: relative;
}

/*Y terminamos con el clear, que ha de ser tan alto como el pie y "limpiar" todos los floats*/
.clear{
   height: 50px;
   clear: both;
}

Y con esto ya está, en todos los navegadores superiores a IE6 (y como IE6 está descontinuado por Microsoft ni me voy a molestar en buscar solución, aunque creo que basta con cambiar el min-height del container por height).

Artículo dedicado con cariño a Gaius Baltar, que se lo había prometido en el feisbuck… jojojo

Crear un archivo robots.txt

Como sabréis, los motores de búsqueda se sirven de «robots», programas que indexan las páginas web alojadas en un servidor, para que estas puedan ser localizadas por el buscador (Google, yahoo…). Por defecto todos los robots tendrán el acceso permitido y podrán ver todo lo que tengamos alojado en la raíz de nuestro servidor, y en muchos casos eso no nos interesa.

¿Cómo arreglamos esto? Con el robots.txt, archivo que generalmente guardaremos en la raíz de nuestro servidor. En él podemos incluir qué directorios queremos desactivar y para qué bots. Un ejemplo simple: este robots.txt bloquería todo el directorio raíz (con todos sus subdirectorios) para todos los bots:

User-agent: *
Disallow: /
#y si quieres poner comentarios, que no serán interpretados por los bots/crawler basta con comenzar la línea con este carater#

Las utilidades del robots.txt pueden ser más de las que a priori imaginas. Obviamente evita que se indexe contenido que quieras mantener oculto o protegido, pero también te permite evitar que se indexe contenido duplicado (recuerda, el contenido duplicado rebaja tu page-rank), impedir la idexación de bots no deseados (no todos los bots son de buscadores legítimos) y si tienes un site con mucho tráfico evitará una carga de trabajo extra sobre el servidor.

Vamos a ir por partes, explicando algunas peculiaridades.

La primera es que puedes incluir varios Disallow bajo un mismo user agent, pero no varios user agent encima de un disallow.

#así sí
User-agent: bingbot
Disallow: /wp-content/
Disallow: /js/

User-agent: Googlebot
Disallow: /wp-content/
Disallow: /js/

#así NOOOOOOO
User-agent: bingbot
User-agent: Googlebot
Disallow: /wp-content/
Disallow: /js/

En cuanto al uso de comodines y expresiones regulares… puedes usarlos específicamente para
Googlebot y Slurp (el bot de Yahoo). Por lo que he leído el resto no las aceptan, así que no lo intentes usar de forma general ya que muchos crawlers no lo entenderán y sí indizarán esa página.

#esto bloquería todos los archivos .js para Slurp
User-agent: Slurp
Disallow: /*.js?

#esto lo bloquería para Slurp y Googlebot, pero el resto no lo entenderían e indizarían
User-agent: *
Disallow: /*.js?

Si tienes un sitemap en el servidor puedes incluirlo en el robots.txt con una simple línea:

Sitemap: http://miservidor/sitemap.xml

Y, como te decía arriba, también puedes reducir la frecuencia de rastreo para que los bots no estén entrando todo el día. Si tienes una web con muchas visitas pero pocas actualizaciones basta con especificarlo con Crawl-delay. Eso sí, no todos los bots lo soportan:

#así le dirías al robot de Bing que sólo entre cada 45 días
User-agent: bingbot
Crawl-delay:45

También se puede usar la palabra Allow en lugar de Disallow… pero por defecto todos los directorios y archivos están permitidos y, además, no todos los bots lo van a entender. Así que mejor Disallow para restringir zonas que Allow para habilitarlas.

Recursos gratuitos para programación web y móvil

Vamos con una minientrada con algunas páginas con recursos totalmente de gratis para vuestros desarrollos (La entrada es de 2013, pero a octubre de 2019 la he recordado y he decidido actualizarla quitando algunos enlaces que ya no funcionan y añadiendo alguna más):

  • HTML5 UP!: Una web, del creador de la anterior, que nos ofrece una, de momento, pequeña colección de plantillas responsivas en HTML5 y CSS3. Como la anterior, totalmente gratis.
  • Web Resources Depot: En este caso se trata de un blog que recoge a diario diversos recursos gratuitos publicados en distitnas páginas.
  • Webappers:Similar a Web Resources Depot, una web que publica a diario recursos publicados en otras páginas.
  • Google Fonts: Si andas buscando tipografías que además no te den problemas de compatibilidad entre navegadores, este servicio de Google (de momento gratuito) te puede solucionar la papeleta. Dispone de momento de más de 200 tipografías para tu uso y disfrute.
  • Font Squirrel: Por no dar todo el poder a Google, otra alternativa puede ser Font Squirrel, otra página de tipografías gratuitas para tu web.
  • Easel.ly: Esta página nos permite crear infografías on-line de manera sencilla y exportarlas a .jpg, con multitud de plantillas.
  • Online OCR: Hay clientes muy zotes, todos los sabemos. Algunos te envían los textos escaneados en un pdf del que no puedes copiar ni pegar (¿lo imprimieron y escaneron?). Esta web te soluciona la papeleta devolviéndote el resultado en múltiples formatos. Tiene limitaciones en su plan gratuito, pero permite trabajar bastante.
  • Bounce: ¿Quieres hacer una captura de una página completa y añadirle notas por encima de manera fácil? Esta herramienta te lo permite. Seleccionas una url, la carga… y listo.
  • Pexels: Sitio web con fotografías gratuitas del que hablamos en un artículo previo.
  • Unsplash: Sitio web con fotografías gratuitas del que ya hablamos en un artículo previo.
  • Freebiesbug: Plantillas, iconos y otros recursos web.

Una serie de utilidades para dar un toque más elegante y funcional a tus webs.

PHPExcel: Exportar e importar archivos ods, xls y xlsx

En PHP tenemos una clase que nos da utilidades para trabajar con hojas de cálculo, PHPExcel. Ya habíamos hablado antes sobre cómo trabajar con PHP y archivos CSV, pero con esta librería podemos trabajar directamente con archivos de hoja de cálculo. Nos permite generar documentos xls, xlsx, ods, pdf… formatear las celdas, aplicar fórmulas, validar datos… e importar hojas de cálculo.

Si descargáis el proyecto desde GitHub os econtraréis con un montón de ejemplos sobre cómo llevar a cabo distintas acciones, aquí vamos a recoger sólo uno, el más básico de creación de un archivo, traduciendo al castellano los comentarios:

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
date_default_timezone_set('Europe/London');

define('EOL',(PHP_SAPI == 'cli') ? PHP_EOL : '<br />');

/** Cargamos la librería PHPExcel */
require_once '../Build/PHPExcel.phar';


// Creamos un objeto PHPExcel
echo date('H:i:s') , " Create new PHPExcel object" , EOL;
$objPHPExcel = new PHPExcel();

// Definimos las propiedades del documento
echo date('H:i:s') , " Set document properties" , EOL;
$objPHPExcel->getProperties()->setCreator("Creador")
->setLastModifiedBy("Creador")
->setTitle("PHPExcel Test Document")
->setSubject("PHPExcel Test Document")
->setDescription("Documento de Excel creado por clases PHP.")
->setKeywords("office PHPExcel php")
->setCategory("Resultado de la prueba");


// Añadimos datos
echo date('H:i:s') , " Add some data" , EOL;
$objPHPExcel->setActiveSheetIndex(0)
->setCellValue('A1', 'Hello')
->setCellValue('B2', 'world!')
->setCellValue('C1', 'Hello')
->setCellValue('D2', 'world!');

// Comprobamos que la codificación UTF-8 vaya bien
$objPHPExcel->setActiveSheetIndex(0)
->setCellValue('A4', 'Miscellaneous glyphs')
->setCellValue('A5', 'éàèùâêîôûëïüÿäöüç');

// Renombrar la hoja de trabajo
echo date('H:i:s') , " Rename worksheet" , EOL;
$objPHPExcel->getActiveSheet()->setTitle('Simple');


// Definimos la hoja de cálculo activa
$objPHPExcel->setActiveSheetIndex(0);


// Escribimos el resultado en una hoja de Excel 2007 (xlsx)
echo date('H:i:s') , " Write to Excel2007 format" , EOL;
$callStartTime = microtime(true);

$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
$objWriter->save(str_replace('.php', '.xlsx', __FILE__));
$callEndTime = microtime(true);
$callTime = $callEndTime - $callStartTime;

echo date('H:i:s') , " File written to " , str_replace('.php', '.xlsx', pathinfo(__FILE__, PATHINFO_BASENAME)) , EOL;
echo 'Call time to write Workbook was ' , sprintf('%.4f',$callTime) , " seconds" , EOL;

// Ahora salvamos los datos en Excel clásico
echo date('H:i:s') , " Write to Excel5 format" , EOL;
$callStartTime = microtime(true);

$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
$objWriter->save(str_replace('.php', '.xls', __FILE__));
$callEndTime = microtime(true);
$callTime = $callEndTime - $callStartTime;

echo date('H:i:s') , " File written to " , str_replace('.php', '.xls', pathinfo(__FILE__, PATHINFO_BASENAME)) , EOL;
echo 'Call time to write Workbook was ' , sprintf('%.4f',$callTime) , " seconds" , EOL;

// Imprimimos en pantalla que se ha finalizado el trabajo.
echo date('H:i:s') , " Done writing files" , EOL;
echo 'Files have been created in ' , getcwd() , EOL;

Como ya he dicho antes, la documentación incluye un montón de ejemplos, casi 40, así que podréis sacar de ahí mucha ayuda. Con esta librería podrás complacer a los clientes que exigen sacar los resultados de las consultas directamente a hojas de cálculo, por ejemplo.