Categoría: e-learning

19 frameworks y 16 Page Builders para WordPress
Cuando vas a iniciar tu proyecto web probablemente te decantes por utilizar el CMS más popular: WordPress.
Esta decisión que toman 1 de cada 4 proyectos web ya de por sí va a implicar ciertas limitaciones aunque no seré yo quien diga que con WordPress no puedes construir cualquier web. Las limitaciones impuestas por la tecnología pueden casi siempre ser salvadas por los conocimientos y profesionalidad del que la usa. Puedes hacer grandes fotografías con tu móvil, trabajar con ratón o con tableta gráfica, con Mac, Linux o Windows, etc.
WordPress es en sí un framework
Elegir WordPress frente a programación ad hoc u otro CMS es una elección que dependiendo de tus conocimientos limitará tu web. WordPress es en sí un framework, una colección de código que te facilita el desarrollo, gestión y administración de un sitio web. Está basado en PHP, MySQL y cada vez más JavaScript, conocer a fondo estos lenguajes te permitirán ampliar este framework, igual que conocer CSS a fondo te permite usar sin limitaciones Bootstrap.
Si por ejemplo necesitas una funcionalidad que no encuentras en ningún plugin de WordPress, aunque difícil es posible, y no sabes crearlo tú mismo pensarás que WordPress no es tu solución.
Con el diseño ocurre lo mismo, si no tienes conocimientos de diseño de temas para WordPress, PHP, CSS, HTML, JavaScript y puedes crear uno tú mismo tendrás que elegir uno de los miles que existen. Puedes optar por un tema gratuito o uno de pago y esa elección será de nuevo una limitación. Si eres capaz de crear un tema hijo (lo explico al final del artículo) y hacer las modificaciones que necesitas genial, si no estarás limitado a las posibilidades de personalización que ofrezca.
Para diseñar y personalizar un tema de WordPress tienes varias opciones, el enfoque también puede variar según sea un tema para tu proyecto, para un cliente o para compartirlo o comercializarlo:
1. Elegir uno gratuito o premium
2. Elegir un framework como base de tu tema
3. Empezar a desarrollar un tema desde cero con un starter theme
4. Empezar a desarrollar un tema desde cero picando código
Una vez que has tomado esta decisión y tienes el tema puedes seguir personalizando su diseño de tres formas:
1. crearle un tema hijo para personalizar algún aspecto y no perder las posibles actualizaciones del tema que has elegido,
2. desde la versión 3.4 puedes configurar las opciones de personalización que ofrezca el tema en el panel de administración de WP desde el customizer, si has decidido crearlo no creo que emplees tiempo en añadir opciones al customizer a no ser que pretendas compartirlo,
3. instalar plugins como los Page Builders u otros plugins que añadan capas de diseño.
En este artículo vamos a centrarnos en dos aspectos, los frameworks y los Page Builders.
Diferencias entre Frameworks y Page Builders para WordPress
Crear un tema para WordPress con multitud de opciones de personalización, con multitud de módulos, con un sistema WYSIWYG, de soltar y arrastrar, con buena documentación y soporte hará que sea utilizado por multitud de usuarios de WordPress. Incluso profesionales del diseño web y de WordPress utilizarán estos temas como base para crear los proyectos de sus clientes.
Es lo que conoce como framework, un esqueleto, un armazón que tiene funciones ya definidas para ahorrarte un trabajo de programación. Elegir un framework nos va a facilitar el uso y el mantenimiento de una tecnología pero también puede limitarla (de nuevo) Si pensamos en CSS por ejemplo podríamos usar Bootstrap, tenemos ya un diseño base de botones, tipografía, grid, etc. Dependerá de nuestros conocimientos de CSS para personalizar o añadir lo que nos falte.
La primera limitación de un framework es que debemos aprender a utilizarlo, la curva de aprendizaje puede ser mayor o menor, ayudará que exista buena documentación. Cuando se utilizan frameworks por usuarios no avanzados el resultado puede ser óptimo pero limitado a lo que ofrece. Su uso implicará una dependencia más, confiamos en que el desarrollo de WordPress continúe por mucho tiempo pero cómo asegurarnos que ocurrirá lo mismo con el framework que hemos elegido.
Mi consejo es que te documentes antes de decantarte por uno u otro framework:
- quién lo desarrolla,
- el tamaño de su comunidad,
- la documentación que existe,
- su flexibilidad,
- su rendimiento,
- el impacto en WPO, etc.
Podemos hacer dos grupos de herramientas que nos sirven para diseñar un tema de WordPress, los que integras o vienen ya integrado en un tema, los frameworks, y los que funcionan como plugins, los llamados Page Builders que permiten diseñar páginas y posts. Sus principales diferencias son:
- Normalmente los frameworks se utilizan para desarrollar un nuevo tema, normalmente como tema hijo del tema framework mientras que los Page Builders son plugins que puedes utilizar en un proyecto en marcha en el tema que ya tengas activo para por ejemplo diseñar una página nueva o añadir contenido a algún post.
- Otra diferencia es el usuario final, normalmente los plugins son utilizados por usuarios sin conocimientos avanzados de programación mientras que los frameworks son utilizados por diseñadores y desarrolladores web, profesionales y estudios de diseño para mejorar la productividad de sus encargos.
Muchos Page Builders son compatibles con frameworks e incluso puedes utilizar más de un Page Builder, consulta la documentación y asegúrate de que no hay conflicto.
19 Frameworks para WordPress
Hacemos una relación de los frameworks más populares, los que tienen multitud de opciones de configuración. En 2009 publiqué un listado que actualizaré en breve de otro tipo de frameworks, sin apenas opciones de configuración, desnudos de estilos, son conocidos como starter themes.
Los starter themes como Undesrcore, a diferencia de los frameworks que listamos aquí no tienen opciones de configuración simplemente incluyen los archivos y estilos más básicos para empezar a desarrollar tu tema desde cero.
Características comunes a los frameworks de WordPress:
- los temas framework se instalan como cualquier tema, funcionan como temas padre.
- Muchas veces se descargan ya con un tema hijo y si no lo creas tú.
- Requieren conocimientos de programación y una curva de aprendizaje mucho mayor que los Page Builders,
- Suelen utilizarlos por diseñadores y desarrolladores web que quieren mejorar la productividad.
1. Avada – 59$
El tema de WordPress más vendido en la popular tienda Themeforest, creado por ThemeFusion, lo han comprado más de 182,896 veces, unos beneficios de más de 8 millones de dólares con un solo tema. Su éxito es que lleva incluido Fusion Builder
2. Tema Divi para WordPress – 69$
Es parte de una suscripción a Elegant Themes (desde 69$), con dicha suscripción puedes descargar todos sus temas. Este y otros temas de Elegant Themes vienen con el plugin Divi Page Builder para WordPress. Es el tercer tema más popular entre los usuarios de WordPress.
3. Genesis – 59,95$
Quizás el framework más popular para WordPress, puedes adquirirlo como Frameork o junto con un tema hijo.
4. Canvas – 99$ – 119$
Uno de los temas más populares, el puesto nº 12 según wpsniffer. con multitud de opciones de personalización.
5. Hybrid Core WordPress theme framework – Gratuito
Totalmente gratuito, lo instalas y haces una llamada desde el archivo functions.php de tu tema.
6. Themify Flow – Drag & Drop WordPress Theme Builder – Gratuito
Gratuito, puedes leer más en el artículo Themify Flow: crea temas WordPress desde el front-end
7. WordPress Site Builder | Layers – Gratuito y Pro
Gratuito aunque puedes ampliar sus funciones con Layers Pro – Extended Customization for Layers por 29$. Puedes leer la reseña en Layers y Upfront ¿Es este el futuro de WordPress?
8. Upfront (Demo) – 24,5$/mes
Este framework es el que utilizan los temas Premium de WPMU DEV, no puedes adquirirlo por separado, tienes que comprar una suscripción desde 24,5$ al mes. Puedes leer la reseña en Layers y Upfront ¿Es este el futuro de WordPress?
9. TemplateToaster – 49$
TemplateMonster es un software de escritorio con el que generas plantillas para WordPress, Joomla, Magento, Drupal, HTML Website, PrestaShop, VirtueMart y WooCommerce.
Puedes empezar de cero o descargar algún tema, hacer las modificaciones, exportar el tema e instalarlo en tu WordPress, el tema incluirá el framework de TemplateToaster
10. Headway Themes – Drag and Drop WordPress Theme Builder – desde 89$
Este framework es de los más veteranos, desde 2009, entre las opciones está la de guardar un historial, una captura (snapshot) con el que poder volver a un estado anterior de tu diseño.
11. iThemes Builder | WordPress Theme Framework – 80$
En esta tienda tiene su propio Builder integrado en los temas, el pack de 80$ incluye 6 starter themes y el plugin.
12. Beans WordPress theme framework
Gratuito, de código abierto y ligero.
13. Gantry – Next Generation Theme Framework – Gratuito
Quizás de las opciones gratuitas y de código abierto la más completa, actualizado recientemente en su versión 5.2.7. Detrás del proyecto está la tienda Rockettheme que lo liberó creando una gran comunidad con mucha documentación. Basado en Bootstrap es un framework tanto para WordPress como para Joomla!
14. Codestar Framework – Gratuito
Gratuito, de código abierto y ligero. Actualizado recientemente.
15. Options Framework Theme | WP Theming – gratuito
Este framework lo que hace es integrar en tu tema el panel de opciones del plugin gratuito Options Framework
16. Unyson Framework | Theme Fuse – Gratuito
Otro framework, utilizado también como plugin, liberado por una tienda, en este caso ThemeFuse. En la web oficial puedes descargar un starter theme para este framework.
17. Awesome Studio Framework for WordPress – Gratuito
Un reciente framework que está compuesto de dos partes Awesome Dev Platform y Awesome Studio. Basado en shortcodes. Ahora mismo en beta privada aunque han subido un plugin para descargarte los módulos mediante shortcodes y utilizarlo como builder.

18. Redux Framework – Gratuito
Este framework añadía un panel de opciones pero lo han integrado en el customizer. WordPress.org no permite en su repositorio oficial de temas ningún tema con panel de personalización propio.
Una captura de su impresionante demo
19.UpThemes Framework – UpThemes – Gratuito
Un panel del opciones que funciona con el customizer, gratuito y de código abierto aunque parece que no se actualiza desde hace un tiempo.
16 Plugins Page Builders Drag & Drop
Las características más comunes de los Page Builders son:
- Generalmente son independientes del tema que utilices,
- no necesitan de conocimientos de programación,
- funcionan con módulos que se arrastran y sueltan (drag & drop) en el editor de páginas o posts,
- pueden ser compatibles con algún framework de los anteriormente vistos,
- aunque no es lo habitual es posible que puedas utilizar o necesitar más de 1 plugin Page Builder y no tengas problemas de conflicto,
- los módulos o elementos de contenido suelen ser widgets, sliders, carrousel, testimonios, mapas, vídeos, imágenes, HTML personalizado, efecto parallax, etc.
- la mayoría ofrece opciones de configuración de dichos módulos,
- muchos permiten organizar los módulos en un nuevo layout en columnas responsive.
- muchos tienen la posibilidad de hacer esta edición en vivo en el front-end
- algunos permiten guardar plantillas para reutilizarlas,
- el resultado en código al utilizar un Page Builder puede ser mediante shortcodes o código, en cualquier caso si desinstalas el plugin no te va a funcionar pero si cambias de tema se mantendrá el trabajo que hayas hecho.
1. Visual Composer: Page Builder para WordPress – 34$
Más de 100.000 ventas en CodeCanyon hacen de este Builder el más popular. El sexto plugin más utilizado en sitios creados con WordPress según el servicio wpsniffer. Permite la edición desde el front-end y desde el backend. Puedes ampliar sus más de 45 módulos con más de 150 extensiones creados por su comunidad.
2. Beaver Builder – gratuito y PRO desde 99$
Uno de los más interesantes, con muy buenas plantillas de layouts y edición desde el front-end.
Puedes probar la versión gratuita Beaver Builder – WordPress Page Builder o adquirir la PRO por sólo en la web oficial desde 99$
3. Page Builder Plugin – SiteOrigin – gratuito
Gratuito y con más de 700.000 descargas, puedes añadir cualquier widget en post o páginas y decidir su layout por columnas arrastrando y soltando. Viene con algunos widgets propios aunque puedes añadir los que quieras.
4. Page Builder by WooRockets.com – Gratuito
Anteriormente conocido como IG Page Builder cambió su nombre al comprarlo WooRockets.com
Soporta widgets en posts y páginas y multitud de shortcodes.
5. Themify Builder – 39$
El plugin de Themify viene incluido en los temas de la tienda pero también lo venden por separado para utilizarlo en cualquier tema.
Edición en el backend y front-end, módulos, arrastrar y soltar y algo que se agradece, puedes importar y exportar el diseño y configuración de la página que hayas creado.
6. VelocityPage – desde 97$
Uno de los más exitosos, puedes ver cómo funciona en esta Demo
7. Aqua Page Builder – Gratuito
Gratuito e intuitivo aunque más básico que el resto.
8. Plugin Divi Page Builder para WordPress – 89$
Es parte de una suscripción a Elegant Themes con acceso a sus populares temas y plugins.
9. MotoPress Content Editor – gratuito y pro desde 29$
Versión gratuita y de pago. Edición desde el Front-end y backend. Puedes ampliarlo con tus propios shortocodes y es compatible con custom post types, WPML y frameworks y temas de Studiopress, PageLines, Headway Themes, WooThemes, Template Monster, Theme Hybrid, etc.
10. Forge –Front-End Page Builder de CPOThemes – desde 59$
Este reciente plugin del conocido Manuel Vicedo, creador de la tienda CPOThemes. El plugin tiene versión gratuita y una PRO. Más de 40 módulos diseñados con muy buen gusto que puedes añadir desde el mismo front-end.
11. WP Massive Visual Builder Plugin – desde 24$
Funciona con cualquier tema, tanto en páginas como en posts. Más de 50 elementos, antes a la venta en Codecanyon y ahora sólo en su web donde puedes probarlo antes de comprarlo.
12. MiniMax – Page Layout Builder – Gratuito y PRO 35$
Además del page builder con layouts incluye sliders, galerías, progress bar, testimonios…
Tiene versión lite gratuita en el repositorio, la versión de pago incluye más funciones a la edición front-end y 30 módulos más.
13. Live Composer Page Builder – Gratuito
Puedes añadir sus más de 30 módulos desde el fornt-end. Interesante que además de poder editar el contenido de posts y páginas puedes editar el header y el footer, es decir, con este builder y un tema en blanco puedes crear todo el sitio.
Aunque es gratuito dispone de addons, algunos gratuitos y otros de pago. Puedes ver cómo funciona en esta demo.
14. Awesome Builder – 28$
Permite generar shortcodes, integrar módulos desarrollados en Bootstrap y también cualquier widget. Interesante la posibilidad de configurar animaciones para los widgets.
15. PT Builder | WP Drag & Drop Page Builder – 20$
Este builder puede serte útil si eres desarrollador y quieres ampliarlo creando tus propios módulos.
Actualización 15/07/16
16. Elementor ★ Page Builder for WordPress – Gratuito
Plugin gratuito y de código abierto. Según me cuenta Ben Pines, su CMO, les ha llevado más de un año desarrollarlo. Como verás en las capturas y en el vídeo su uso es muy sencillo. Tienes un panel a la izquierda con los elementos que quieras añadir, sólo tienes que arrastrar y soltar para editar en vivo.

Otras opciones
Hay muchas más opciones:
- plugins de shortcodes, una opción simple para añadir multitud de cosas a tus posts o páginas aunque puede ser un quebradero de cabeza si algún día decides dejar de utilizarlo y tienes que eliminar todos los shortcodes de tu WP,
- el megaplugin Jetpack, uno de sus módulos te permite añadir otro CSS
- y cualquier plugin para funciones concretas como sliders, caja de autor, redes sociales, widgets, etc.
1. ThemeMask
Una opción curiosa y distinta que nació en 2013 sin demasiado éxito. No es realmente un Builder, es un sistema de máscaras, de skins, para temas específicos de ElegantThemes, StudioPress, WPZOOM y WooThemes, busca si tu tema es compatible y descarga la máscara que añadirá una capa que cambiará el aspecto de tu tema mediante CSS y jQuery.
La gran ventaja es que tu tema queda intacto y su instalación y desinstalación es cuestión de segundos. Sólo necesitas un plugin y descargar tu máscara. Algo parecido a las Skins de DIYthemes.
2. PageLines – Platform 5
Está a punto de lanzarse este builder construido enteramente en Javascript. Actualizaremos el post cuando eso ocurra, mientras puedes leer este artículo: The Benefits of Going 100% Javascript – PageLines
3. Shortcodes Ultimate
Con este plugin añades más de 50 shortcodes además de poder añadir los tuyos propios.
4. CSS Hero – 29$
Puedes editar el CSS desde el front-end, totalmente compatible con frameworks como Genesis
5. WordPress Site Designer for Dreamweaver | DW Extensions | ExtendStudio – 79$
Extensión para crear temas de WordPress directamente desde Dreamweaver, más de 140 módulos a incluir fácilmente pinchando y arrastrando en la vista Diseño. Puedes empezar con uno de los 13 temas que incluye. Crea secciones de autor, portafolios, testimonios, etc. Compatible con CS4 hasta CC 2015.
Bonus: Cómo crear un tema hijo
Ya sea porque te has decidido por un tema framework o porque necesitas hacer algún cambio a tu tema y no quieres perder sus posibles actualizaciones te dejo una breve guía de cómo crear un tema hijo o child theme de tu tema framework o tema padre:
1. Instala el tema framework o padre como cualquier tema
2. Crea una carpeta en wp-content/themes, por ejemplo: mitemaframework-hijo
3. En esa carpeta crea el archivo style.css añade los metadatos de tu tema al inicio del archivo en los comentarios y muy importante añade la etiqueta Template con el nombre de la carpeta de tu tema padre:
```
/*
 Theme Name:   Mi temapadre hijo
 Theme URI:    http://miweb.com/mitemapadre-hijo/
 Description:  Mi temapadre Child Theme
 Author:       Tu nombre
 Author URI:   http://miweb.com
 Template:     mitemapadre
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  mitemapadre-child
*/
```
Una vez hecho esto activa tu tema hijo en Apariencia -> Temas.
De esta forma ya tienes un tema hijo con todo lo del tema padre pero sin los estilos CSS. Si quieres mantener los estilos del tema padre crea un archivo functions.php y añade este código
```
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'estilos-tema-padre', get_template_directory_uri() . '/style.css' );

}
```
En este mismo archivo, el archivo functions.php es donde tendrás muchas veces que incluir una función que hará la llamada al framework.
Conclusiones
La pretensión de este artículo no es la de recomendar uno u otro framework o Page Builder, ni siquiera su uso. He intentado recoger todas, o casi todas, las opciones, de pago y gratuitas. Seguro que hay algún framework o Page Builder que se me ha pasado, es cuestión de acceder a los enlaces, a las demos, probar en una instalación local y decidir cuál es el quieres usar.
Recuerda que al igual que sistemas como Wix te facilitará el trabajo intenta no depender demasiado de trabajos de terceros y aprende cómo diseñar y crear tú mismo el tema y funciones que necesita tu WordPress.
11 de enero de 2016
Cómo instalar WordPress en local paso a paso
Para crear un entorno de desarrollo local de WordPress lo primero que necesitamos hacer de nuestra máquina un servidor local, para ello utilizaremos un software *AMP
- A – Apache
- M – MySQL
- P – PHP
* Le precede la letra del SO: WAMP, MAMP, LAMP
Entre las opciones existentes destacamos cuatro: MAMP, XAMPP, Instant WordPress y AMPPS. Comentamos sus ventajas y desventajas y explicamos porqué AMPPS me parece la mejor de ellas.
Al final vemos cómo instalar manualmente WordPress en local paso a paso.
1. MAMP & MAMP PRO
MAMP es muy popular entre usuarios de Mac OS X, también está disponible para Windows. Además de PHP podrás desarrollar proyectos con Python y Perl.
A pesar de tener una demo gratuita sólo con la versión de pago, la versión PRO de 39€ obtendrás todo su potencial como el uso de virtual hosts, dynDNS, email, múltiples versiones de PHP.
2. XAMPP (servicio Bitnami)
XAMPP es la aplicación más popular desde hace tiempo entre usuarios de Windows aunque también está disponible para Linux y Mac OS X. Tendrás MariaDB, PHP y Perl.
Puedes utilizar los paquetes del servicio Bitnami para instalar con un asistente WordPress o cualquiera de los más de 130 aplicaciones de este servicio. Bitnami también puede ser usado de forma independiente sin necesidad de instalar XAMPP primero.
3. Instant WordPress (portable)
Instant WordPres no es la solución óptima para un entorno de desarrollo pero tiene una particularidad de la que puedes sacarle provecho en alguna situación. Es una aplicación portable por tanto puedes llevarte tu instalación local de WordPress en un lápiz USB o en un disco duro.
4. Softaculous AMPPS (la mejor opción)
De entre todas las opciones gratuitas encuentro AMPPS la más completa. Contiene Apache, MySQL, MongoDB, PHP, Perl & Python.
El Panel de control es muy, muy completo, accesos directos a phpMyAdmin, gestión y creación de dominios, FTP, etc. y en el panel izquierdo más de 300 aplicaciones (la primera es WordPress) con información muy completa y asistente de instalación.
Instalar WordPress en local con Softaculous AMPPS
Pero su mayor ventaja es que puedes crear tus propios dominios virtuales y trabajar más cómodamente que con localhost/carpeta y al igual que con Bitnami puedes instalar WordPress y cientos de aplicaciones con un asistente al margen de que lo hagas de forma manual. La ventaja sobre Bitnami es que ese asistente tiene bastantes más opciones como:
- la de elegir algún dominio que hayas creado, deja en blanco el campo directorio para que se instale en la raíz.
- instalar un Multisitio,
- elegir el idioma,
- instalar algún tema, etc.
En un par de minutos tendrás instalado de forma limpia y transparente tu WordPress.
Todas tus instalaciones quedan registradas y puedes hacer backups, clonarlas, actualizarlas o simplemente eliminarlas con un clic.
Cómo instalar WordPress manualmente en local paso a paso
Una vez expuestas las opciones cuando tengas instalada tu elegida deberás iniciar los servicios de Apache y MySQL. (Ver más abajo si no puedes iniciar el servicio de Apache).
Con Bitnami, Instant WordPress o AMPPS puedes saltarte estos pasos y hacer una instalación automatizada pero si prefieres hacerlo de forma manual sigue estos pasos.
1. Crea una nueva carpeta dentro del directorio de instalación del software AMP que hayas elegido, por ejemplo «miwordpress»
  - En XAMPP sería una carpeta que crees en htdocs
  - en AMPPS sería dentro del directorio www
  - si has creado un dominio virtual con AMPPS la carpeta con el nombre del dominio ya habrá sido creada dentro de www y no necesitas crear una nueva
2. Descarga el paquete del core de WordPress desde WordPress.org
3. Descomprime y extrae el contenido de la carpeta wordpress en el directorio que creaste en el paso nº 1. Ej: «miwordpress»
4. Una vez hecho esto si te diriges en tu navegador a la dirección localhost/miwordpress o en el caso de que hayas creado un dominio accedes a ese dominio. WordPress te informará que necesitas una base de datos, su usuario y contraseña.
5. Vamos a crear la Base de Datos. Desde tu navegador ve a localhost/phpmyadmin y en el panel izquierdo eliges «Nueva». Le pones un nombre a tu Base de Datos y como cotejamiento utf8mb4_general_ci.
6. Volvemos a WordPress en el navegador localhost/miwordpress (o el dominio virtual) y seguimos con el asistente. Introducimos el nombre de la Base de Datos, en usuario ponemos root y por defecto la contraseña en XAMPP la dejas vacía y en AMPPS pones mysql
7. Si lo hemos hecho correctamente podremos ejecutar la instalación, sólo nos queda rellenar nuestro datos de administración para nuestro nuevo sitio local.
¡Listo!
Si la instalación la vas a llevar en un servidor real que hayas contratado el proceso sería muy similar salvo que lo normal es que el core de WordPress lo subirías por FTP a tu carpeta raíz del dominio, normalmente «public_html» y que el usuario y contraseña de la Base de Datos los crearás tú mismo bien desde phpMyAdmin o desde el panel de control de tu hosting (Ej: cPanel o Plesk) con algún asistente de creación de Bases de Datos.
Solución si da error al iniciar Apache
Si te salta un error porque por ejemplo el puerto 80 ya está en uso comprueba qué servicio es el que crea conflicto.
Por ejemplo en Windows si pones en la línea de comandos encontrarás el PID de ese servicio
```
C:\> netstat -aon | findstr 0.0:80
```
En XAMPP te lo dice el propio panel de control.
En el administrador de tareas puedes buscar con el PID qué servicio es. Además de Skype suele crear conflictos el «Servicio de Publicación World Wide Web» con el PID 4. Lo mejor es que vayas a Servicios de Windows, lo detengas y lo configures para que se inicie de forma manual.
21 de diciembre de 2015
Aprende fotografía con cursos online gratuitos e interactivos
Para aprender y conocer la teoría y los conceptos básicos de la fotografía hay multitud de recursos en la red: cursos, vídeos, artículos…
Hace unos días di con Camera Instructor, un sitio que sabe hacer uso del e-learning ofreciendo píldoras informativas con vídeos y test interactivos. Es completamente gratuito, si quieres puedes registrarte para ver tu progreso pero no es obligatorio.
Su creador Cody Meyer, fotógrafo y programador, piensa mantener con enlaces afiliados a productos de fotografía en Amazon. No es para nada una publicidad intrusiva y no puede ser más contextual así que espero que tenga buenos resultados y continúe compartiendo lecciones de fotografía. De momento sólo hay 1 curso con 8 lecciones, cada una con su vídeo, sus tests y comentarios para las dudas. Tiene programados 3 cursos más: retratos, paisajes y bodas.
5 de junio de 2015
Soluciones a dos problemas de Scout al trabajar con Sass
Scout es una gran aplicación gratuita y multiplataforma para trabajar con Sass y Compass sin necesidad de tocar la línea de comandos. Un entorno muy sencillo de configurar para que sólo te centres en diseñar con Sass.
Junto con Brackets es el entorno que recomiendo a mis alumnos, un entorno sencillo y gratuito para aprender y trabajar con el preprocesador Sass.
En video2brain tenemos un par de cursos muy completos a los que puedes acceder gratis durante 7 días.
1. Desarrollo web con Sass, CoffeeScript y Emmet. Aprende a desarrollar sitios web con herramientas rápidas y productivas
2. CSS con LESS y Sass. Maquetación CSS profesional con preprocesadores
Soluciones a dos problemas de Scout
Desgraciadamente la última versión de Scout, la 0.71, tiene 3 años y hay un par de problemas que no han sido resueltos y que puedes encontrarte al utilizar Scout.
1. Error en Adobe Air
Cuando al iniciar un proyecto Adobe Air te devuelve el error:
ArgumentError: Error #3214
Esto es debido a que Scout no encuentra la ruta de la versión de Java que tienes instalada, tienes que editar el archivo process_interaction.js en la carpeta app de tu instalación de Scout:
```
C:\Program Files (x86)\Scout\javascripts\app
```
En el final del archivo process_interaction.js deberás poner la ruta de tu instalación de Java en tu equipo:
```
function javaDir() {
 if(air.Capabilities.os.match(/Windows/)) {
 path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre1.8.0_45\\bin\\java.exe");
 if(!path.exists){
 path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre1.8.0_45\\bin\\java.exe");
 if(!path.exists){
 path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre1.8.0_45\\bin\\java.exe");
 }
 }
```
2. Los puntos decimales
Scout tiene un problema al renderizar los CSS que contienen decimales por ejemplo cuando asignamos una opacidad:
background-color: rgba(0,0,0, .5);
No siempre falla, si sólo tienes un estilo con opacidad y el último archivo scss que guardas es ese puede que el CSS lo haga bien Scout. Para curarte en salud hay una solución sencilla, poner los decimales fraccionados, de forma que en vez de poner 0.5 pones 5/10.
26 de mayo de 2015
Completa referencia CSS de Codrops y Chuleta CSS3 de Manz
Si hay un sitio de referencia para los que trabajamos con CSS ese es Codrops. Sus artículos y tutoriales van siempre acompañados de demostraciones y la descarga de los archivos. No sólo aprendes CSS sino diferentes aproximaciones a soluciones de diseño, originales y de gran calidad.
Sara Soueidan acaba de publicar una nueva sección que ya estás tardando en guardar en tus favoritos: CSS Reference | Codrops. Un trabajo de 8 meses realmente plausible.
La única pega puede ser que está en inglés (ver Bonus abajo) pero si esto no es un obstáculo para ti vas a encontrar un sitio donde consultar, aprender y resolver todas tus dudas sobre CSS, con ejemplos de código y demos.
Hay 6 secciones completamente actualizadas, muy interesante es la de conceptos donde se explican con detalle Flexbox y los Counters.
Lo dicho, agrega ya a tus marcadores CSS Reference | Codrops.
Bonus: Añade también a tus favoritos el gran trabajo de Manz: Lenguaje CSS (Hojas de estilo), una completa CheatSheet de CSS3 en PDF gratuita en español y una sección de documentación con un sinfín de herramientas y sitios útiles sobre CSS.
11 de febrero de 2015
Solución para enviar emails desde Moodle
Estoy trabajando con un Moodle para un cliente y he tenido problemas para que se pudieran emails. Os comparto la solución por si os encontráis en el mismo caso.
1. Configurar el SMTP
Esto no debe ser mayor problema. En Administración del Sitio > Extensiones > Mensajes de Salida > Email rellenáis los campos con los datos que tendréis de vuestro proveedor. Recuerda poner el puerto en el servidor SMTP y si requiere o no conexión segura.
2. Modificar Base de Datos
Aunque con lo anterior debiera bastar puede ser que el correo que has especificado no sea el mismo que existe en la BBDD como supportemail que pusiste al crear el sitio. Si pruebas a enviar un email y no te funciona ve a phpMyAdmin y en la tabla mdl_config mira el valor del campo supportemail, en mi caso la fila tenía el ID 433. Si no es el mismo que has configurado en el paso anterior cámbialo.
3. Vacía la caché
Por último ve a Administración del Sitio > Desarrollo > Purgar todas las cachés y comprueba que ahora sí tu Moodle envía emails.
1 de octubre de 2014
Cómo personalizar los posts relacionados de Jetpack en WordPress
El mega plugin de WordPress Jetpack tiene un módulo para mostrar posts o entradas relacionadas. En los ajustes de lectura tienes sólo 2 opciones de configuración:
1. Mostrar o no el texto «Relacionado» para separar más claramente la sección de las entradas
2. Usar o no un diseño grande y visualmente atractivo, con imágenes.
El resultado de aceptar ambas opciones es algo similar a esto al final de tus artículos:
Pero hay muchas opciones más que puedes configurar:
- cambiar el nº de posts,
- situarlo al principio o con un shortcode,
- cambiar el texto “Relacionado”,
- excluir posts y/o categorías,
- incluir páginas,
- mostrar posts sólo de la misma categoría,
- especificar un rango de fechas de posts a mostrar
Puedes crear un plugin o simplemente añadir estos snippets de código a tu archivo functions.php
Voy a comenzar con uno de cosecha propia
Cómo especificar un rango de fechas
Si quieres mostrar como posts relacionados sólo los publicados el último mes, la última semana o los últimos 2 años esta es la función que necesitas
```
function jetpackme_posts_relacionados_rango_fechas( $date_range ) {
    $date_range = array(
        'from' => strtotime( '-2 years' ),
        'to' => time(),
    );
    return $date_range;
}
add_filter( 'jetpack_relatedposts_filter_date_range', 'jetpackme_posts_relacionados_rango_fechas');
```
En el ejemplo se mostrarán los posts de los últimos 2 años (‘-2 years’), puedes especificar cualquier otro rango gracias a la función PHP strotime.
```
strtotime("10 September 2000")
strtotime("-1 day")
strtotime("-1 week")
strtotime("-1 week 2 days 4 hours 2 seconds")
strtotime("last Thursday")
```
Cómo mostrar posts relacionados sólo de la misma categoría
Digamos que tienes la categoría “WordPress” y sólo quieres que en sus posts se muestren entradas relacionadas de la misma categoría. Sólo necesitas obtener el ID de tu categoría y cambiarlo por el del ejemplo: 721
```
function jetpackme_filter_exclude_category( $filters ) {
if(in_category('721')) {
  $args = 'exclude=721';
    $categories = get_categories( $args );
    foreach($categories as $category) {
        $filters[] = array( 'not' => array( 'term' => array( 'category.slug' => $category->slug ) ) );
     }
}
    return $filters;
}
add_filter( 'jetpack_relatedposts_filter_filters', 'jetpackme_filter_exclude_category' );
```
Vía @Mercy Tapscott
El resto son traducidos del sitio oficial de Jetpack
Cambiar el nº de posts relacionados a mostrar
Como máximo se van a mostrar 3 pero puedes cambiar ese número por ejemplo a 5
function jetpackme_numero_posts_relacionados( $options ) {
$options['size'] = 5;
return $options;}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_numero_posts_relacionados‘ );
Mostrar los posts relacionados en otra posición
Por defecto los posts relacionados van a aparecer al final de tu entrada, pero puedes hacer que aparezcan:
1. al principio de tu entrada,
2. en cualquier posición de tu artículo con un shortcode
3. o en cualquier otra parte añadiéndolo a tu tema.
1.- Con esta función harás que aparezcan al principio
function jetpackme_posts_relacionados_principio( $options ) {
$options['show_above_content'] = true;
return $options;}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_posts_relacionados_principio');
2.- También puedes usar este shortcode para añadirlos manualmente [jetpack-related-posts], si lo usas no se mostrarán al final de tu artículo. Aquí un ejemplo
[jetpack-related-posts]
3.- Para que aparezcan donde tú quieras primero tienes que desactivarlos con esta función
function jetpackme_remove_rp() {
$jprp = Jetpack_RelatedPosts::init();
$callback = array( $jprp, 'filter_add_target_to_dom' );
remove_filter( 'the_content', $callback, 40 );}
add_filter( 'wp', 'jetpackme_remove_rp', 20 );
Y luego insertas en tu tema de WordPress esta llamada
<?php echo do_shortcode( '[jetpack-related-posts]'); ?>
Cambiar el título por defecto: “Relacionado”
En este ejemplo en vez de “Relacionado” aparecerá “Entradas similares”
function jetpackme_posts_relacionados_titulo( $headline ) {
$headline = sprintf(
'<h3 class="jp-relatedposts-headline"><em>%s</em></h3>',
esc_html( 'Entradas similares' ));
return $headline;}
add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_posts_relacionados_titulo');
Mostrar siempre un post como post relacionado
Simplemente tienes que añadir el ID de ese post que quieres mostrar siempre, en este caso es el 155
function jetpackme_anexar_post_relacionado( $hits, $post_id ) {
array_unshift( $hits, array( 'id' => 155 ) );
return $hits;}
add_filter( 'jetpack_relatedposts_filter_hits', 'jetpackme_anexar_post_relacionado');
Excluir posts y/o categorías
Para excluir uno o varios posts para que no aparezcan nunca como posts relacionados utiliza esta función, en este caso los posts con ID 1037 y 1038 nunca se mostrarán
function jetpackme_excluir_posts_relacionados( $exclude_post_ids, $post_id ) {
$exclude_post_ids[] = 1037; // Excluye post_id 1037
$exclude_post_ids[] = 1038; // Excluye también post_id 1038
return $exclude_post_ids;}
add_filter( 'jetpack_relatedposts_filter_exclude_post_ids', 'jetpackme_excluir_posts_relacionados');
Para excluir una categoría, por ejemplo “concursos”
function jetpackme_filter_excluir_categoria( $filters ) {
$filters[] = array( 'not' => array( 'term' => array( 'category.slug' => 'concursos' ) ) );
return $filters;}
add_filter( 'jetpack_relatedposts_filter_filters', 'jetpackme_filter_excluir_categoria' );
No mostrar posts relacionados en ciertos posts
Usamos el tag condicional “is_single” para indicar los ID de los posts donde no queremos que aparezcan posts relacionados, en este caso, 17,18 y 125
function jetpackme_no_posts_relacionados( $options ) {
if ( is_single( array( 17, 18, 125 ) ) ) {
$options['enabled'] = false;}
return $options;}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_no_posts_relacionados' );
Añadir páginas a posts relacionados
Para que se muestren páginas además de posts relacionados añade esta función a tu archivo functions.php
function jetpackme_paginas_como_posts_relacionados( $post_type, $post_id ) {
if ( is_array( $post_type ) ) {
$search_types = $post_type;
} else {
$search_types = array( $post_type );}
$search_types[] = 'page'
return $search_types;}
add_filter( 'jetpack_relatedposts_filter_post_type', 'jetpackme_paginas_como_posts_relacionados');
Si necesitas cualquier otra personalización tienes a tu disposición el código fuente de este módulo de Jetpack, entradas relacionadas
28 de julio de 2014
Nuevo Máster en Diseño Gráfico, Web (WordPress) y Creatividad en Sevilla
La Escuela de Negocios de la Cámara de Comercio de Sevilla ha ampliado su oferta de programas Máster con el Máster Técnico en Diseño Gráfico, Web y Creatividad. Os cuento esto porque seré uno de los docentes y encargado del módulo II sobre Diseño Web, enfocado a conocer a fondo WordPress.
- Becas 50% y 30%
- 4 meses de prácticas en empresas
- Entrega gratuita iPad
- Metodología basada en Formación mLearning
Completo tiene una duración de 500 horas de formación, aunque puedes elegir cursar sólo uno de los dos módulos en el que está dividido:
1. Experto en Diseño Gráfico y Creatividad
2. Experto en Diseño Web y Creatividad
Estaré acompañado por varios cracks:
- Abel Sutilo y Juan Muñoz Herrero serán también docentes sobre diseño web y WordPress
- Y como invitados especiales tendremos nada menos que a David Meca, Fernando Tellado, Luis Rull y Rafa Poveda
La primera edición de este Máster dará comienzo el próximo noviembre, aún hay plazas, si tienes alguna duda consulta los enlaces o contacta conmigo:
- Descarga programa completo (PDF)
- Solicitar información
17 de julio de 2014