Aunque como usuario me gusta WordPress (aunque cada vez un poquito menos), como desarrollador no me gusta demasiado (por no decir casi nada), pero no quita que su puesto se lo tiene bien ganado y que a veces es imposible no tener que usarlo.
Si además de las funcionalidades de WP, necesitas algo más que te puede aportar un CMS genérico, te puede venir bien este tutorial que explica en pocos pasos cómo convertir WordPress en un CMS.
Para ello el autor mueve el blog a la carpeta /blog y en la home de la página crea una página principal en la que se mostrará un portfolio y los resúmenes de sus diferentes trabajos (teniendo cada trabajo una página individual).
Los cambios incluyen la creación de archivos nuevos para el theme, que recoge los resúmenes de cada apartado del portfolio, los cuales son páginas estáticas que cuelgan de la página principal del portfolio.
Seguro que existe algun plugin que te lo permite hacer, pero la explicación es muy buena y la idea la podemos aprovechar para otras necesidades. WordPress as CMS tutorial
Vía / dzone
Esta parte es solo frontend, aún no está configurado para que interactúe con el servidor.
Lo más destacado de este ejemplo es el uso de vue-router, paquete que permite la realización de SPA de forma sencilla. Como la aplicación será gestionada por un único fichero (index.html), es necesario configurar el servidor de webpack para que gestione las URLs que acceden a otras partes de la aplicación para que no devuelva un error 404.
Esto es fácil, tan solo hay que añadir historyApiFallback y ponerlo a true en la configuración del servidor.
Lógicamente habrá que instalar el paquete vue-router.
Vale, ya está todo instalado, ahora solo hace falta configurar vue-router para que acepte distintas URLs y que muestre distintos controladores según sea el caso.
Para ello creamos un fichero router.js que posteriormente añadiremos a nuestra instancia de Vue:
Es fácil de entender, importamos los distintos controladores y configuramos las rutas (‘/‘ y ‘/login‘), a las que les asignaremos el controlador correspondiente.
Para indicar a Vue que vamos a usar vue-router, debemos importarlo en la instancia de la aplicación:
import App from './components/App.vue';
import router from './router';
Vue.use( VueRouter );
new Vue( {
el: '#app',
router,
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
El siguiente paso es modificar el controlador principal de la aplicación (App.vue) para que muestre la cabecera (que tendrá su propio controlador) y la vista principal de vue-router (<router-view>):
Como no soy diseñador, pues usaré Buefy (basado en Bulma) y Material Design icons (no sé por qué le tengo algo de manía a FontAwesome).
Existe un paquete especial para usar Material Design en vue (vue-material-design-icons), que para funcionar con Buefy necesitará usar la fuente de letras de Material Design (@mdi/fonts). Instalamos todo y ya estará todo listo para empezar a diseñar nuestra página.
La cabecera (<v-header>) mostrará el logo, el menú principal y otro secundario para loguearse. No explicaré ni las clases Bulma (que yo casi ni conozco) y cómo se muestra el menú al clickar en el burger icon, ya que estos tutoriales son para llevar yo un diario de cómo desarrollar una app web con Hapi.js y Vue.js.
FlickrTrans es una extensión para Firefox que nos permite subir imágenes que visitamos directamente a Flickr.
El autor nos explica todo el proceso que ha realizado para desarrollar la extensión, para lo cual se ha basado en Uploadr for Flickr 1.0 y luego ha realizado sus modificaciones. FlickrTrans
Vía / digitta
Una interesante lista de utilidades Javascript, agrupadas por acciones sobre enlaces (buscar enlaces, ocultar visitados, eliminar redirecciones, …), interactuación con formularios (transformar POST en URLs, mostrar ocultos, …), uso de texto y datos (resaltar, ordenar tablas, …), reemplazar objetos (mostrar el texto alternativo de las imágenes en lugar de estas, quitar plugins, …), desarrollo web (shell, modificar estilos, …), validaciones (urls de imágenes incorrectas, validacion de HTML, …) y por último un grupo de utilidades varias (traducir la página, editarla, …). Bookmarklets
VÃa / aNieto2K