Archivos de la categoría Diseño

Premios Code en PalmaActiva [actualización]

—-

Actualización:

Desde PalmaActiva nos confirman que se amplia el plazo para el envío de proyectos hasta el 27 de Febrero, este Viernes. Facilitando el envío de proyectos via email y no necesariamente presencial.
Si te gusta WordPress y quieres aprender a hacer tu propio producto con un Tema no dudes en inscribirte!

—-

La comunidad de WordPress en Mallorca anima a todos nuestros seguidores y usuarios de WordPress de la isla a participar en los Premios CODE organizados por PalmaActiva. Es una buena oportunidad para desarrollar un proyecto o producto digital y ponerlo a vender.

WPMallorca colabora con PalmaActiva en la categoría de Web, donde ayudaremos a los participantes en la formación y valoración de los proyectos presentados. Es una oportunidad única para un equipo con ganas de hacer un Tema Premium para WordPress donde no solo es la programación, también es importante el diseño, la documentación y los editables, en este curso para los Premios Code podrás aprender todo lo necesario para hacer un Tema Premium.

Aquí un extracto de su convocatoria:

PalmaActiva convoca los premios CODE
INSCRIPCIONES HASTA EL 20 FEBRERO

Premios por valor de 5.500 euros repartidos en 3 categorías: WEB, APP y VIDEOJUEGO

 

Desde PalmaActiva quieren promover el fomento y el uso sostenible de las Nuevas Tecnologías de la información y la comunicación entre la ciudadanía, con la formación teórica-práctica, ya que las nuevas tecnologías están presentes en todos los campos laborales. Estos premios son muy interesantes para todos aquellos que quieren dedicarse a trabajar en el sector de las nuevas tecnologías o quieren llevar adelante un proyecto empresarial relacionado con las TIC. Además de la experiencia que les aporten y la formación relacionada que recibirán, tienen una dotación económica de 2.000 euros en vales regalo por compra de materiales y / o equipos informáticos para cada categoría de premio.

Objetivos
Divulgar las bases del lenguaje de programación, diseño web, videojuegos y realización de Apps y / u otras herramientas o recursos tecnológicos.
Formar sobre el aprendizaje de lenguaje en código para programar aplicaciones en dispositivos móviles (smartphones, tabletas, …), ordenadores, consolas y similares.
Fomentar el emprendimiento y potenciar las capacidades emprendedoras de los participantes.

¿Qué son los Premios CODE?
Un concurso para EQUIPOS de programación y diseño en tres categorías: WEB, APPS y VIDEOJUEGOS. Los equipos estarán formados por un mínimo de 2 y un máximo de 4 personas. Preferentemente, al menos 1 de los miembros tendrá conocimientos mínimos de programación y otro de diseño gráfico (o 1 tendrá ambos conocimientos).

El producto final a presentar será una DEMO a la categoría donde se participe.

Qué ofreceremos?
3 premios de 2.000 euros cada uno por compra de material y / o equipamiento informático.
Una formación obligatoria relacionada con la emprendeduría por todos los miembros del equipo que les permitirá ver las necesidades de conocer las necesidades de los clientes y la posterior comercialización del producto elaborado.
Una formación específica por categoría de premio donde 1 o 2 integrantes de cada grupo podrán formarse e ir elaborando su proyecto de cara al concurso.
Una tutorización durante el proceso de elaboración de cara al concurso.
Participar en equipo y reproducir todo el proceso de un proyecto real tal como se haría en un entorno de trabajo.

¿Quién puede participar?
Empadronados en Palma en edad laboral, tanto en activo como en situación de desempleo que no dispongan de formación o experiencia consolidada en cualquiera de las tres categorías del presente concurso. Es decir, con menos de 5 años de experiencia profesional o docente.

Los solicitantes que si dispongan de formación y / o experiencia consolidada en una categoría, podrán participar en las restantes que no dispongan.

La participación será por EQUIPOS, no obstante, se podrán presentar solicitudes a título individual que deberán integrarse en algún grupo después de la fase de formación general.

Descarga y rellena los FORMULARIOS DE INSCRIPCIÓN

Consulta el calendario de la FASE FORMATIVA

Cómo será la formación previa a la elaboración de la DEMO?
Habrá dos fases: una de formación general OBLIGATORIA (Por emprendedores) y otra de formación específica OPTATIVA. Después de la primera fase se constituirán los equipos definitivos.

En la formación específica, que es optativa, podrán participar un máximo de 2 integrantes por equipo y será la siguiente:

Categoría WEB
Formación ofrecida: WordPress, LESS / SASS responsive, controladores de versiones GIT-SVN e instalación, maquetación, programación y desarrollo de plugins WP.
Se recomienda tener conocimientos de HTML, CSS, PHP y JS.

Categoría APPS
Formación ofrecida: PhoneGap / cordova, Jquery mobile, Nodo JS y Javascript.
Se recomienda tener conocimientos de HTML5, CSS3, JavaScript y JQuery.

Categoría VIDEOJUEGOS
Formación ofrecida: Unity3D, C #, JavaScript, Juegos Multijugador y Marketing, publicación en tienda y monetización de aplicaciones.
Se recomienda tener conocimientos de Java, JavaScript y / o C #. Para el diseño 3D conocimientosos de Photoshop y Blender o similares.

 

 

Mas info: Catalá Castellano

Sprite, todas tus imágenes en una

¿Que es un Sprite?

No, no es la bebida secundaria de esa empresa de la botella curvilinea de color negro con rojo 😉

Es una técnica que se usa en el diseño web para agrupar todas las imágenes, íconos sobre todo, necesarias para el montaje del diseño.

Agrupar imágenes e íconos en un solo archivo facilita al navegador la carga de la web, ya que solo tiene que traer una imagen y con esa imagen se compone todo. El secreto está en la localización de esta imagen y el uso del atributo de css background-position para mostrar un ícono u otro. Pero mejor un par de ejemplos:

Facebook Sprites Images:

facebook-sprite2-image-2014-12 facebook-sprite-image-2014-12

 

 

 

 

 

 

 

 
Por lo general la composición de estas imágenes se hace usando algún programa de edición gráfica como puede ser Photoshop, pero esto implica que si tienes tu diseño listo debas extraer los íconos y elementos que quieras usar en tu sprite para colocarlos dentro de un solo archivo de imagen. Pero para que hacer algo a mano si ahora contamos con servicios web que nos pueden ayudar en esa tarea:

 

Spritepad de wearkiss.com

 

Sprite Cow - Generate CSS for sprite sheets
Sprite Cow

 

Dos mil quince o Twenty Fifteen

Siguiente la linea de nombres para los themes que permite añadir un nuevo theme por defecto con cada año llega Twenty Fifteen.Este tema es full responsive, y por fín ofrece un soporte interesante para la internacionalización de WordPress, como es incorporar la tipografía Google Noto Serif y Sans la cual es atractiva en la mayoría de idiomas.Como el tema estará disponible con la salida del nuevo WordPress 4.1 que llegará este 15 de Diciembre solo podemos ver unas capturas sobre su funcionamient o bien testearlo instalando el plugin de WordPress Beta Tester.

El pase de diapositivas requiere JavaScript.

Novedades WordPress 4.1

Este Lunes 15 de Diciembre llega la nueva versión de WordPress con mejoras importantes para bloggers y escritores ya que cada vez el equipo de WordPress va mejorando la experiencia en la escritura.

Aquí os dejo una lista de las mejoras que están por llegar.

  • Mejoras en el editor de entradas para que, por ejemplo, en el modo pantalla completa se pueda acceder a alguna caja meta, además de cambios de distribución de botones y estéticos.
WordPress 4.1 new distraction free
En la versión anterior había que cerrar el visor sin distracciones si queríamos editar el slug o editar algún metabox extra, esta nueva versión facilita la concentración y gestión del contenido.
  • Mejoras en los menús desplegables de usuario y entradas, posiblemente mediante el uso de Select2, un script jQuery totalmente compatible con todos los navegadores y muy solvente.
  • Permitir la desconexión en las sesiones existentes desde la pantalla de perfil de usuario, para lo que ya está en marcha un plugin.
webdesignerdepot.com
  • Nueva interfaz para la instalación de temas y plugins.
  • Ahora el fondo e imagen de cabecera porfín se mueven al customizer

Firefox

  • Mejoras en la gestión de archivos multimedia desde dispositivos móviles, sobre todo solucionar problemas actuales con el scroll en la pantalla de la Librería multimedia.
  • Cambio del idioma después de la instalación.

Firefox

Para desarrolladores hay unas mejoras muy interesantes en las queries WP_Meta_Query, WP_Tax_Query, and WP_Date_Query.

Así como mejor control sobre el title de un site.

 

Importante no olvidar hacer una copia de seguridad o backup de tu instalación WP antes de actualizar.

Esperamos vuestros comentarios con la nuevas opciones.

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.

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