Recursos

La presente página tiene como objetivo recopilar todos los recursos y materiales necesarios para que los alumnos y alumnas de este curso puedan realizar las tareas y actividades propuestas por el profesor. No incluimos aquí, sin embargo, los recursos directamente relacionados con el nuevo editor de WordPress, ya que estos se incluirán en los apartados correspondientes de las distintas sesiones del curso.

1. Imágenes para insertar en sitios web

A menudo puede resultar difícil encontrar imágenes libres de derechos que nos sirvan para ilustrar un sitio web, y aún más complicada suele ser la tarea de incluir el reconocimiento de su licencia, autoría, etc. Para simplificar la búsqueda e inserción de imágenes, proponemos dos repositorios que permiten buscar, descargar, manipular e incluir imágenes sin necesidad de citar su procedencia, autoría y licencia, incluso para fines comerciales:

• Unsplash.
• Pixabay.

También conviene tener muy en cuenta a Lorem Picsum, un sitio web basado en las fotografías de Unsplash, que permite descargar imágenes del tamaño deseado en cada caso. Para ello solo hace falta llamar a una URL convenientemente formateada. Por ejemplo:

• https://picsum.photos/1600/1000: proporciona una imagen de 1600×1000 píxels.
• https://picsum.photos/1600/1000/?random: el efecto es igual que el de la URL anterior, pero cada vez que se llame a esa URL se generará una imagen aleatoria distinta.
• https://picsum.photos/g/1600/1000/?random: imagen aleatoria de 1600×1000 píxels, pero esta vez en escala de grises.

Y hay todavía más posibilidades, que se pueden combinar entre sí.

2. Generadores de textos de prueba

El propósito de estas herramientas online es generar textos de prueba sin sentido, que solo sirven para llenar rápidamente y sin esfuerzo el espacio de edición. Hay muchos, entre los cuales se pueden citar los siguientes:

• Lorem Ipsum: es, probablemente, la herramienta más conocida de entre todas las que permiten generar textos para pruebas. Dispone de versiones para más de cuarenta idiomas diferentes.
• Blind Text Generator: una herramienta muy potente, aunque algo difícil de utilizar, que permite generar varios tipos de textos, con distintas estructuras y formatos. Dispone de versiones para siete idiomas distintos, el español incluido. Debo su conocimiento a Patricia Martiartu, alumna de este curso, a quien agradezco su colaboración.
• Generador de Lorem Ipsum de WebsitePlanet: un generador gratuito, multilingüe (soporta 27 idiomas) y muy completo, fácil de utilizar y sin publicidad.
• Chiquito Ipsum: no tan potente como el anterior, pero mucho más divertida, es esta herramienta, basada en las creaciones lingüísticas del inmortal Chiquito de la Calzada.
• Bacon Ipsum: un generador que incorpora términos gastronómicos, con una clara preferencia «carnívora». También existe una versión vegetariana: VeggieIpsum.

2.1. Generadores de textos de prueba para trabajar con Gutenberg

También existen diversas herramientas específicas para generar contenido de prueba editable mediante el nuevo editor de WordPress. A continuación indicamos un par de plugins que hemos utilizado en los sitios de práctica donde los alumnos de este curso realizan sus tareas y actividades:

• Block Unit Test for Gutenberg. Este plugin permite generar una página con contenido de prueba, organizado en un amplio conjunto de bloques nativos de WordPress. Gracias a esta página se puede comprobar fácilmente cómo se visualizan los bloques en los temas y se pueden realizar todo tipo de experimentos y pruebas con los bloques.
• WP Lorem Ipsum. Aunque este plugin está pensado para el anterior editor de WordPress, y por tanto no genera contenido organizado en bloques, resulta muy útil para crear tantos artículos de contenido de prueba como resulten necesarios, con la ventaja añadida de que permite añadir imágenes destacadas (tomadas de Unsplash). También lo hemos utilizado en los blogs de práctica.
• Dummynator. Otro plugin para generar contenido de prueba, esta vez directamente desde el editor de WordPress. A diferencia de los dos anteriores, este no lo hemos probado.

Además de los tres plugins antedichos, existen varios sitios web desde los cuales se puede copiar el código necesario para generar bloques en el nuevo editor de WordPress. A continuación proponemos unos cuantos ejemplos:

• Dummy Content for Gutenberg.
• Gutenberg Dummy Content for WordPress 5.0.
• Sample Content Post for Testing Gutenberg.

3. Tutoriales sobre el personalizador de temas de WordPress

Tal como hemos explicado en el artículo sobre las propiedades avanzadas de los bloques, la edición del código CSS requiere saber manejar, aunque sea de forma muy elemental, el personalizador de temas de WordPress. y, en concreto, la opción CSS adicional. Como siempre ocurre tratándose de WordPress, hay muchos tutoriales sobre esta funcionalidad; no obstante, para no abrumar a los alumnos de este curso con múltiples referencias y aprovechar al mismo tiempo el trabajo ya realizado, remitimos al artículo que sobre este particular publicamos el año pasado, Personalización del tema mediante CSS, en el cual aparecen más ejemplos de estilos CSS y enlaces a recursos complementarios.

4. Recursos sobre CSS

A continuación incluimos algunos generadores online de estilos CSS, mediante los cuales se pueden crear clases CSS de manera visual y muy intuitiva, sin necesidad de saber cómo se programan este tipo de estilos. También incluimos algunas herramientas para la creación y gestión de paletas de colores.

4.1. Generadores online de código CSS

• CSS3 Generator: un estupendo generador de CSS3, que organiza los diferentes efectos CSS en bloques muy fáciles de manipular.
• Enjoy CSS: generador de código y editor visual, todo en uno. 
• Flexy Boxes: generador de cajas de acuerdo con el modelo de diseño flexible FlexBox.
• The Ultimate CSS Generator: otro generador de código CSS muy útil y completo, con muchísimas opciones.
• Ultimate CSS Gradient Generator: un generador de gradientes o degradados muy fácil de utilizar, con multitud de ejemplos.
• WAIT! Animate: magníficos ejemplos de animaciones realizadas mediante CSS.

4.2. Creación y gestión de paletas de colores

• Colormind: permite acceder a muchas paletas, Una de sus funcionalidades más interesantes es la de creación de paletas a partir de las imágenes del sitio web.
• Coolors.co: permite generar paletas, así como ver y descargar cientos de paletas ya creadas.
• Paletton: generador de paletas y esquemas de colores que, entre otras cosas, permite simular los resultados obtenidos en un sitio web.

5. Recursos para inserción de contenido

A continuación incluimos una serie de elementos que permitirán a los alumnos y alumnas del curso realizar las prácticas de inserción de contenido y de copiado y pegado que están previstas en la cuarta sesión de este curso.

5.1. Contenido externo

5.1.1. Mapa de Google Maps

<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2385.7905247016415!2d-1.636709071251742!3d42.805159050634956!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x400a5c7f4640417a!2sCAP+de+Pamplona!5e1!3m2!1ses!2ses!4v1518182232656" width="640" height="450" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>

5.1.2 Presentación de Slideshare

<iframe src="//www.slideshare.net/slideshow/embed_code/key/5WnaJ1hIeLMFcG" width="100%" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen="">
</iframe>
<div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/Pumamaqui/borges-1085104" title="Borges" target="_blank" rel="noopener noreferrer">Borges</a> </strong>, de <strong><a href="//www.slideshare.net/Pumamaqui" target="_blank" rel="noopener noreferrer">Nicolás Svistoonoff</a></strong>
</div>

5.1.3. Documento de Calaméo

<div style="text-align:center;">
	<div style="margin:8px 0px 4px;"><a href="https://www.calameo.com/books/001195754d5b7dd3ff8f6" target="_blank">Literatura española (siglos XIX-XX)</a>
	</div>
	<iframe src="//v.calameo.com/?bkcode=001195754d5b7dd3ff8f6" width="300" height="194" frameborder="0" scrolling="no" allowtransparency allowfullscreen style="margin:0 auto;">
	</iframe>
	<div style="margin:4px 0px 8px;"><a href="http://www.calameo.com/">Publish at Calameo</a>
	</div>
</div>

5.1.4. Presentación de Genial.ly

<div style="width: 100%;">
	<div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;">
	<iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/5739e5ea32d08c39f09a1f04" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all">
	</iframe>
	</div>
</div>

5.1.5. Tabla en HTML

<table class="wp-block-table alignwide is-style-stripes">
	<tbody>
		<tr>
			<td><strong>Mamíferos</strong></td>
			<td><strong>Aves</strong></td>
			<td><strong>Reptiles</strong></td>
			<td><strong>Peces</strong></td>
		</tr>
		<tr>
			<td>Perro</td>
			<td>Casuario</td>
			<td>Lagarto</td>
			<td>Piraña</td>
		</tr>
		<tr>
			<td>Gato</td>
			<td>Oropéndola</td>
			<td>Cocodrilo</td>
			<td>Esturión</td>
		</tr>
		<tr>
			<td>Gorila</td>
			<td>Ruiseñor</td>
			<td>Mamba</td>
			<td>Salmón</td>
		</tr>
		<tr>
			<td>Hiena</td>
			<td>Gorrión</td>
			<td>Dragón de Komodo</td>
			<td>Perca</td>
		</tr>
	</tbody>
</table>

5.2. Prácticas de copiado y pegado

A continuación incluimos un enlace a un documento compartido de Google Drive, cuyo contenido se puede copiar y pegar en una página o entrada, a fin de verificar las capacidades del nuevo editor de WordPress en tareas como el reconocimiento del contenido, la creación de bloques adecuados adecuados, y la limpieza del código. Como podrá comprobarse, WordPress hace muy buen trabajo, aunque no es, ni mucho menos, infalible.