Archivo de la etiqueta: bootstrap

Presentaciones : WPmallorca Meetup en Palma Activa

El día de ayer celebramos una meetup fantástica, lleno absoluto, gracias a todos por asistir 🙂
Y como lo prometido es deuda, aquí tenéis las presentaciones de las charlas de ayer.

De la nube a la Tierra. por @lonchbox

Gráfica. De la nube a la tierra
Ilustración que representa un proceso para la creación de un proyecto web

 

 

Responsive Design. por lonchbox.com y monok.es

Sobre los frameworks para desarrollo responsive:
http://twitter.github.io/bootstrap/
http://foundation.zurb.com/

 

 

WordPress SEO. por @coterillo

 

 

WooCommerce. por @Kamalyon

 

Déjanos un comentario o sugerencia para la próxima meetup, cualquier idea o propuesta es bien recibida.
También queremos agradecer a @PalmaActiva por el apoyo.

 

Hasta la próxima!

WordPress Mallorca Meetup en Palma Activa

Hace tiempo que queríamos hacer una Meetup con charlas y gracias a PalmaActiva hemos encontrado el mejor momento y lugar. Las charlas estarán enfocadas a los usuarios WordPress en general, si no sabes programar no importa aprenderás un poquito mas :).

¿Cuando?

El Martes 18 de Junio de 04:00pm a 08:00pm

Además esta Meetup tendrá un momento especial al que llamamos “Happines bar”, ¿Como funciona?, muy simple traer tu portail, claves de tu WP, acceso a tu FTP y buscaremos la forma de ayudarte orientando tu proyecto con plugins que te puedan servir, modificaciones o recomendaciones.

Aquí una descripción del evento y las charlas:

Desde PalmaActiva, queremos contribuir a impulsar el encuentro Mallorca WordPress Meetup concienciando e impulsando  las Nuevas Tecnologías como una parte fundamental de la empresa. Para ello se realizarán las siguientes charlas para el próximo martes 18 de junio, donde usuarios, desarrolladores  y empresas, podréis aprender qué cosas se pueden hacer que pensábamos que no eran posibles y qué cosas hemos podido hacer que pensábamos que eran imposibles.

De la nube a la tierra : 16h

Descripción:La vida de un proyecto web. Cómo afrontarlo sin perder dinero. En qué  y cuando se debe invertir.
Expone: Pancho Pérez
Empresa: lonchbox.com

Responsive design, el tamaño importa: 17h

Descripción :Como utilizar frameworks como Foundation Zurb o Bootstrap, diferencias entre ellos. Breve introducción a Less y Sass metalenguajes de CSS. Casos reales y ejemplos prácticos & some gems.
Exponen: Pancho & Gabriel Pérez
Empresa: lonchbox.com & monok.es

Como montar una tienda online con WordPress: 18h

Descripción: Como potenciar tu proyecto web con wordpress usando el plugin woocommerce para crear tu propia tienda online. Explicación sobre el funcionamiento del plugin,  preparar una plantilla, crear tus primeros productos y como funciona su pasarela de pago.
Exponen: Alberto Collazo & Sylvia Ordinas
Empresa: Kamalyon.com

SEO para WP: 19h

Descripción: Elementos SEO indispensables. Plugins recomendados  para SEO.  Como hacer una estrategia básica SEO. Seguimiento y fin de una campaña SEO.
Expone: Gonzalo Coterillo
Empresa: Bogo.ai

Happines Bar, Consultoría WP para todos:  20h

Descripción:Trae tu portail, accesos FTP, wp-admin, dudas o preguntas; los miembros de wpmallorca.com te ayudarán a resolverlo.
Networking
Consultores: Todos.

 Para asistir apúntate a través de Amiando

 

Lugar:

C/ Socorrs 2207002 PalmaEspaña

 

Contacto y mas información:

Tel. gratuït / Tel. gratuito: 900 139 138
Mail: info@palmaactiva.com

Aspectos a tener en cuenta en un proyecto web responsive

Vamos a analizar en que pensar cuando queremos hacer una web responsive como dios manda.

Por supuesto en el Diseño. A la hora de pensar en el diseño debemos tener en cuenta que debe poder adaptarse a los diferentes dipositivos como móviles, tablets, etc.. en algunos casos encontramos frameworks en los que primero se diseña la versión móvil, luego se va a la versión tablet y es al final cuando diseñamos la versión desktop.

Pero claro, luego están los diferentes formatos de pantalla a tener en cuenta, con lo que que debemos saber que podríamos mostrar vídeos o fotografías de mayor tamaño a mayor tamaño de pantalla, o ajustar un diseño específico para laptops.

Y que pasa con los SO?
Podemos mostrar contenido sólo para iOS o sólo para android o Windows Phone  sabiendo que los “selects” funcionan de manera diferente en cada caso y teniendo en cuenta que algunos efectos que van bien en desktop como los “mouseover”,”rollovers” o “dropdowns” en “mobile” no van bien.

Y los iconos o gráficos?
Pues éstos se tienen que hacer para cada dispositivo, porque un icon para iphone 3G no tiene el mismo tamaño y resolución que un icon para “iphone retina” o “ipad retina”, incluso ahora que hay macbook retina hay que hacer el ícono adaptado a su tamaño. Además todos los íconos deben estar en un sprite para que la web cargue una sola imagen con todos los elementos. Este sprite se va mejorando y editando mientras se maqueta.

Por otro lado, es una buena opción es usar fonticons, lo que permite controlar los íconos como si fuesen fuentes tipográficas, controlando así su tamaño, color o permitiendo algún efecto CSS3 o de animación de forma mas fácil. Aunque esto no remplaza el usar íconos de imágenes para casos donde no exista una fonticon aplicable. Algo que por ejemplo se debería preparar para diferentes resoluciones de pantalla sería el logotipo de tu página o algún simbolo especialmente diseñado.

OJO: Esto no se aplicaría a las fotos que se suban al sistema, es decir al repositorio de Media del mismo WP, sólo a las fotos que se carguen desde el CSS y no desde el CMS.

Debemos también saber que hay dos tipos de slider, fluidos y responsive.

  • En el fluido el alto del slider se ajusta según el ancho de la imagen que varía según el ancho de la pantalla del dispositivo. Ej: Orbit de foundation.
  • En el responsive el alto no varía y se ve mas o menos imagen según el ancho de la pantalla. Ej: Ver spacebox.

 

Importante la tipografía. Aquí entramos en un aspecto complejo ya que no sólo hay que controlar el tamaño de las fuentes, sino decidir el tamaño adecuado según el tamaño de monitor. Teniendo en cuenta que la distancia que tiene la pantalla de un portátil a los ojos del usuario no es la misma que la distancia que hay con la pantalla de un móvil, una tablet o de un monitor en sus diferentes tamaños, sin hablar ya de una SmartTV.

Por otro lado y como una buena opción podemos usar webfonts, las cuales se pueden cargar desde servicios de terceros o desde el mismo CSS como archivos de fuentes usando @font-face.  

Elegir un Framework con el que te sientas cómodo Debemos intentar encontrar un framework que nos aporte un entorno agradable a fin de usarlo también en futuros proyectos los que nos facilitará bastante la vida. Una vez que nos hemos familiarizado con uno en concreto podemos evolucionar con él y usarlo de la forma mas efectiva.

Yo cada vez me decanto mas por foundation, para íconos Font-Awasome, jQuery, Less, Sass y algún que otro minified (reductores de peso de archivos).

Usar foundation no nos limita a fijar el ancho de la web a 960px ni a sólo 12 columnas con un espaciado de 30px cada una, podemos definir nuestro grid y crearlo. Ej: 18 col, 10px gutter, fluid + fix.

Foundation Icons Fonts - ZURB Playground - ZURB.com

Nunca olvidemos el Contenido & SEO Esencialmente todo el contenido será gestionable, TODO, aunque luego al cliente le demos acceso a unas partes y otras no. Podemos crear todo tipo de campos y funcionalidades, pero hay que definir bien que creamos y como funcionará.

El análisis SEO del contenido se debe aplicar en el Theme, y es necesario que el diseño indique que tipo de tag usa, H1, H2, a, ul, ol, etc. Necesitaríamos el informe de análisis SEO para aplicar las keywords también en el código si así lo indica el analista.

Sin olvidar los PSDs Un psd bien organizado ahorra mucho tiempo.

Enlaces: