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.

Listas con imágenes en jQueryMobile

Vamos con una entrada sobre jQueryMobile, que hace que no le damos a la Mobile Web (sigo a la espera de que empiece el curso de Audacity, al que me apunté ya en agosto…). Ya hablamos de cómo hacer listas, desde luego, pero ¿cómo hacer listas con un pequeño thumbnail a la izquierda? Es muy simple, de hecho.

Como siempre empiezas descargando jQuery y jQueryMobile y añadiéndolos a tu código. Luego en el código metes una lista aplicándole un par de clases… pero eso mejor lo vemos con ejemplos de código. En este primer ejemplo veremos una lista donde cada elemento es un enlace, con una foto en la izquierda y un texto grande:

<ul data-role="listview">/*A la lista le aplicamos el data-role listview*/
  <li><a href="#1"><img src="img/foto1.png" width="100" height="100"/><h3>Elemento1</h3></a></li> /*En cada elemento metemos un enlace, una imagen (tamaño 100+100) y un título h3*/
  <li><a href="#2"><img src="img/foto2.png" width="100" height="100"/><h3>Elemento2</h3></a></li>
  <li><a href="#3"><img src="img/foto3.png" width="100" height="100"/><h3>Elemento3</h3></a></li>
</ul>

Esto es muy básico, vamos con algo más chulo: el mismo ejemplo, pero con un texto más pequeño debajo del título y con divisores:

<ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true">/*A la lista le aplicamos el data-role listview y el resto de configuración*/
  <li><a href="#1"><img src="img/foto1.png" width="100" height="100"/><h3>Elemento1</h3>
<p>Este es el primer elemento</p></a></li> /*En cada elemento metemos un enlace, una imagen (tamaño 100+100) y un título h3, y además una pequeña descripción*/
  <li><a href="#2"><img src="img/foto2.png" width="100" height="100"/><h3>Elemento2</h3>
<p>Este es el segundo elemento</p></a></li>
  <li><a href="#3"><img src="img/foto3.png" width="100" height="100"/><h3>Elemento3</h3>
<p>Este es el tercer elemento</p></a></li>
  <li><a href="#3"><img src="img/foto3.png" width="100" height="100"/><h3>Forma1</h3>
<p>Este es un elemento con otra letra para que se vea el divider</p></a></li> /**Y este último... para que se vea el divisor*/
</ul>

Y con este simple ejemplo puedes darle vida a tus listas.

Grave fallo de seguridad en Explorer

Desde OSI informan hoy que se ha encontrado una grave vulnerabilidad en Internet Explorer, que compromete al equipo en caso de visitar webs infectadas con malware, desde la versión 7 hasta la 10 (ambas inclusive) en los sistemas operativos Windows XP y Windows 7 (de Vista no dicen nada).

De momento Microsoft no ha sacado actualización ni parche, pero se espera que próximamente aparezca una actualización de seguridad. De momento recomiendan tener actualizado Microsoft EMET.

Yo personalmente lo que recomiendo es pasarse a Linux, pero allá cada cual.

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.

Eliminar un directorio y su contenido en PHP

Estos días en uno de los proyectos del curro (váis a disculpar que esta semana sólo haya publicado citas, pero ha sido una semana dura en lo laboral y peor en lo personal) he tenido que hacer una función que vacíe un directorio completamente y lo borre en PHP. Alguna dirá rmdir y al carajo… pero cualquier usuario de linux/sistemas unix sabe que a ese rmdir le tienes que poner un -r para que borre los archivos que contiene, como no hay -r en PHP lo vamos a crear nosotros:

<?php
    function rmDir_rf($carpeta)
    {
      foreach(glob($carpeta . "/*") as $archivos_carpeta){             
        if (is_dir($archivos_carpeta)){
          rmDir_rf($archivos_carpeta);
        } else {
        unlink($archivos_carpeta);
        }
      }
      rmdir($carpeta);
     }

Explicación: Usamos glob para accedera todo lo que hay en la carpeta y lo recorremos (foreach). Si encontramos un directorio (is_dir nos lo confirma) entonces tiramos de recursivdad y ejecutamos la propia función dentro de si misma. Si no es un directorio, pues se borra el archivo. Al acabar de patear se borra la carpeta, que ahora que está vacía sí puede ser eliminada por rmdir.

Esta funcionalidad irá incluída en mi librería de seguridad DonnieSecure (próximamente en GitHub)