Tabla comparativa de Frameworks de contenido para WordPress

Los frameworks son entornos de trabajo que te ofrecen todo lo necesario para realizar tu proyecto. En el mundo WordPress hay infinidad de frameworks de contenido para desarrolladores de Temas que facilitan la creación de Custom Post Types, Custom Taxonomies, Metaboxes. Por esta razón en mi búsqueda pedí ayuda a la gente de @podsframework que a travéz twitter

Y al preguntar por su chat me pasaron esta pods.io/compare con una tabla, no actualizada pero si reciente, con la mayoría de frameworks y/o plugins que se usan para desarrollar un Tema a medida o mejorar un Tema Premium. De esta tabla he hecho una copia con una pequeña selección, con los mas usados y mas conocidos, valorando algunos aspectos básicos que un framework/plugin de este tipo debe tener.

Si ves que falta algun plugin o framework en est tabla compártelo en un comentario a este post.

Fotos Gratis!

Fotos de alta resolución gratis!

He pensado que siempre es de utilidad aumentar la ‘cantera’ de imágenes que podemos utilizar para nuestros clientes que sean de libre uso y licencia. A veces es más sencillo escoger de aquí que ofrecer al cliente que elija de un low-cost image stock como istockphoto o alguna otra del palo.

Publican 10 fotos nuevas cada día, algunas de ellas excelentes. Os adjunto una muestra de lo que se puede encontrar.

Ver más en unsplash.com/

Concepto > Contenido > Diseño > Tema

El desarrollo de un Tema puede empezar por varias partes, muchas veces comienza por un diseño el cual plasma una idea general de como queremos hacer nuestro theme, pero es el proceso correcto?. Ya hace tiempo que los Temas Premium son una opción fácil a la hora de poner en marcha un proyecto para un cliente, para escojer este Tema nos guiamos por el diseño, las valoraciones y compras que ha tenido ese Tema en concreto, ojeamos un poco el html usando firebug y si vemos necesario hacemos una consulta al desarrollador sobre la compatibilidad de este Tema con otros plugins que nos interesa usar.
Lo malo es que casi siempre el Tema no hace bien todo lo que ofrece, tiene miles de opciones para hacer un Tema Multipropuse, osea que sirve pa todo, cosa que es un gran error ya que terminas usando menos de la mitad de las funcionalidades del mismo.
Esto ya lo discutimos un poco en un Post sobre Themeforest y GPL, os recomiendo leerlo.

¿Pero que pasa si queremos hacer nuestro Tema desde cero, creando todo el código, plugins, css, personalizaciones de plugins o integraciones?, pues que no deberíamos empezar por el diseño.

A continuación os explicaré como creo que deben plantearse la creación de un Tema propio o para un cliente sin necesidad de personalizar un Tema Premium.

 

  1. El Concepto:
    Es el motivo, la razón escensial del porque hacer un diseño web a medida. Para desarrollar un concepto hace falta hacer sesiones con el cliente donde se elavora los objetivos que debe cumplir la web, que apartados se usarán y de que forma se va a administrar el canal web/online.
    Con este proceso crearemos primero un wireframe, son como planos esquemáticos para identificar todos los elementos que necesita la web, definir bien si son videos, fotos, texto, enlaces, es el contenido dinámico, estático o viene desde otras plataformas como el caso de los timelines de twitter o facebook.Este wireframe debe considerar que contenido es visible para mobil, para tablet y para desktop, sabiendo así como gestionar la visibilidad, calidad y carga de ese contenido. Es muy importante tener claro el wireframe y quien o quienes serán los responsables de mantener la web para que el contenido sea coherente con la capacidad de gestión de la información web dentro de la empresa.
  2. El Contenido:
    No solo son los textos, son fotos, videos, comentarios, formularios, respuestas, emails de contacto, galerías, material de descarga, PDFs, enlaces, todo aquellos que la web necesita para poder funcionar correctamente. Si el wireframe está bien hecho siguiendo los objetivos la web tendrá un concepto definido y eso ayudará a entender como se generará ese contenido, se puede calcular tiempos de producción, traducción, edición y revisión.
    Conociendo todo el contenido que vamos a usar es buena idea profundizar si algo de ese contenido se gestionará o generará con plugins, así facilitaremos el paso 3 y 4,  haciendo mas fácil, al diseñador y programador, la creación del código, pero sobre todo los parámetros de gestión que tendrá ese Tema. ¿Es importante tener todo el contenido desde el incio? no necesariamente, pero si tener claro que tipo de contenido es. Cuando falta contenido para realizar el diseño se puede utilizar contenido Dummy o mas conocido como LoremLipsum.
  3. El Diseño:
    Una vez tengamos claro el wireframe y el contenido podemos empezar a diseñar, lo haremos siguiendo y respetando los pasos anteriores haciendo los mínimos cambios posibles, esto ayudará a tener una producción organizada y sin desvíos de tiempo de ejecución.
    Al entrar en el terreno del diseño lo mas importante es saber que estilo se quiere usar, si se parte de un logo seguir las líneas de la marca, escojer una paleta de colores para cada elemento ayuda a la hora de programar, definir que color tienen los enlaces, los rollovers, los menus, el texto general, los titulares.Durante el diseño entramos en el terreno de las Fuentes o Tipografías, actualmente podemos usar Google Fonts de forma gratuita o servicios como Typekit para fuentes con licencia. Hay que tener claro el comportamiento de la fuente en los diferentes navegadores sobre todo para las dimensiones y tamaños de menus, titulares o textos grandes donde el tamaño si que importa, sobre todo para idiomas con palabras largas como el Alemán.
  4. El Tema:
    Como consejo siempre usar un wireframe primero para mobil, subir a tablet y terminar en desktop, es mas fácil añadir que quitar, además que la mayoría de frameworks para wireframing  responsive (foundation zurb) están hechos para programar primero para mobil, small y terminar en desktop, large.La programación del tema empieza por definir los templates a usar, saber si usaremos index.php o front-page.php para nuestra home, cuantas plantillas personalizadas para categorías o custom taxonomies, si hay custom post types necesitaremos los single-CPT.php.
    Lo bueno de seguir estos pasos es que se pueden organizar las tareas de producción por templates y partials (get_template_part()), de esta manera el seguimiento de la producción es mas fácil. El programador del tema debe trabajar conjuntamente con los editores y gestores de la web para coordinar las funcionalidades que debe el Tema ofrecer, como las opciones del Tema, Paneles, Widgets, Configuración de Plugins y sobre todo dejar claro como se carga el contenido.¿Se puede desarrollar mientras se carga el contenido? Si, aunque hay que saber manejar tareas en paralelo de dos equipos, editorial y programación.¿Se puede desarrollar sin tener todo el diseño hecho? Si, pero no es recomendable, ya que al no tener los diseños de todas las secciones y elementos puede hacer que el desarrollo se retrase por cambios sobre cambios.A la hora de programar las funcionalidades de un Tema o su compatibilidad con plugins hay que tener claro el tipo de editor que tendrá la web, ya que dependiendo de sus conocimiento de WordPress este podrá utilizar funcionalidades complejas o en su defecto se debe simplificar al máximo para no retrasar ni entorpecer la carga del contenido.Hay que reconocer que todo el trabajo termina en la programación del Tema, pero el éxito del Tema no solo está en la programación ya que si los pasos previos se hicieron a conciencia el proceso de creación del Tema será mucho mas organizado y seguro.

 

Si te ha gustado este post te invitamos a participar del SEMINARIO: CREACIÓN Y DISEÑO DE TEMAS CON WORDPRESS que nuestro compañero @lonchbox dará en @PalmaActiva, estará enfocado a desarrolladores WordPress con un nivel Medio ya que se toparán aspectos de programación php, js y css. Y si eres un diseñador que quiere aprender a diseñar para WordPress o programar tu propio tema también te puede ayudar este seminario. Anímate y forma parte de la gran comunidad de desarrolladores WordPress que hay en el mundo :)
Apúntate ya! que las plazas son limitadas.

CrashTestDummy-2-8544b

Dummy Content

¿Tenemos el contenido?

Es la gran pregunta que todo diseñador o desarrollador web se hace cuando empezamos un proyecto, lamentablemente la mayoría de las veces la respuestas suelen ser “todavía no” o “algunas fotos pero no los textos” o “solo el de un idioma”.

Para ello podemos usar servicios web que nos ayudan con la creación de texto Lorem Lipsum, que son textos aleatorios, en este caso en latín, la herramienta que personalmente mas uso es Loripsum.net, la razón, que permite indicar el tamaño del contenido, si este debe tener enlaces, h1, listas, quotes y mas, con un grande y lindo botón que copia todo incluido los html tags.

Loripsum.net - The 'lorem ipsum' generator that doesn't suck.

Y que pasa con las imágenes?, pues también hay un servicio parecido al anteriormente indicado para hacer textos demo, Dummy Image Generator, este servicio nos permite escojer el tamaño, formato, formato, cantidad y tipo de imágenes. No son las mejores fotos pero si útiles para hacer nuestro Tema o Diseño, también ofrece la posibilidad de escojer el tipo de imágenes en base a algunos temas como animales, trabajo, comida, objetos, deporte. [eng]. La opción que mas me gusta es que se pueden descargar todas las imágenes en un .zip para así subirlas todas al repositorio de imágenes de nuestro WordPress y trabajar con ellas durante el proceso de programación ya que si usamos la Imagen Destacada de los posts, pages o posts types necesitamos una imagen para visualizar los diferentes tamaños que usaremos en neustro Tema.

Dummy Image Generator | fine placeholder images for web designers

Y como siempre Hay un Plugin para casi cualquier cosa he encontrado estos dos plugins:

WP Example Content

WP Lipsum

No los he usado pero seguro os pueden ayudar, si lo prueban no olviden compartir la experiencia con un comentario en este post :)

Imagen destacada de planiskpedia.wikia.com

Roban números de tarjeta a la pasarela de pago que usa WooThemes

Desde ayudawp.com:

Si eres usuario de WooThemes, si has comprado alguna vez algún tema y has utilizado su pasarela de pago con tarjetas de crédito lee atentamente.

Hace unos días varios usuarios reclamaron a WooThemes a través del canal de soporte que les había desaparecido dinero de sus cuentas bancarias mediante uso fraudulento de la información de sus tarjetas de crédito. [...]
WooThemes revisó su seguridad y descubrió que había 3 archivos modificados en su servidor como resultado de un ataque, pero aún siguen investigando toda posible vulnerabilidad.

Entretanto han inhabilitado de su pasarela de pago todos los sistemas posibles excepto Paypal y revisado sus certificados SSL, y recuerdan que ellos no guardan información de tarjetas de crédito, aunque, claro, eso no significa nada si ya estaban infectados y algún script recopilaba información de su pasarela de pago.

Esperemos que lo solucionen pronto y que aprendan (y tomemos nota todos) de que no hay que ser transigentes con la seguridad, que más vale pasarse de precavido y asegurar WordPress que comprometer tu web y, en algunos casos, incluso tu medio de vida.

Me gustaría aclarar una cosa para la tranquilidad de quienes usan WooCommerce o WordPress como base para crear tiendas online.
El ataque fué a los servidores de WooThemes y los datos los sacaron de su pasarela de pago y no de los datos que guarda el plugin de WooCommerce, aclaro esto porque este plugin no guarda ningún dato de las tarjetas, es mas, el pago se hace usando una pasarela que por lo general es del banco o de un servicio de terceros, tipo paypal.
No está de más reforzar la seguridad de nuestro servidor, protocolos, puertos y software.