Ir al Flickr de Pablo Angeletti
Sígueme en Twitter: twitter.com/angeletti
Mis favoritos en delicious.com/angelettiMi perfil en FacebookVideos y favoritos en YoutubeContactos Profesionales y currículum en linkedinSubscríbete al blog por RSS

Congreso internet 3.0 el 23 y 24 de noviembre en Alicante

Por suerte no paran de salir charlas y congresos interesantes en Alicante. A pesar de este año no se celebró en Congreso Internet del Mediterráneo, el Congreso Internet 3.0 ha entrado con fuerza con ponenentes de primer nivel en que se toca todo el abanico temas relacionados con del Marketing Online y Redes sociales: Estrategias en redes sociales, Analítica web, SEO, reputación online, etc…

El congreso tendrá lugar en el Aula Cultural de la CAM de Alicante el viernes 23 y sábado 24 de Noviembre: www.internet30.es

Internet 3.0 es un congreso que tiene como objetivo, enseñar, formar y orientar a todos los asistentes al mismo en temas de Marketing Online, internet y Redes Sociales. Entre otros temas también se hablará sobre negocios online, estrategias en Redes Sociales, conversiones y objetivos, mediciones y analítica web, estrategias online, gestión de proyectos, seguridad y otros muchos temas más.

En la web de congreso podréis ver el programa y el listado de ponentes de congreso 3.0:

  • Chema Alonso Chema Alonso, conocido como el Maligno, es quizá uno de los referentes de seguridad informática y hacking a nivel mundial.
  • Javier Megias es consultor artesano en estrategias innovadoras para empresas y startups, especializado en modelos de negocio.
  • Miguel López es el director de MOV (Marketing Online Valencia), proyecto continuación de Consultores Valencia e Internet Mediterranea, que desde 1997 (antes de que naciera Google) trabaja en el sector de la consultoría en marketing online a empresas de la zona.
  • Oscar Del Santo, profesor, consultor creador y divulgador 2.0 Es uno de los profesionales 2.0 bilingües de internet y las redes sociales más conocidos e influyentes.
  • Daniel Peris Fundador, SEO y Traffic Manager en iPadizate. Daniel es consultor de marketing online y mobile marketing en Miss Conversion, su propia agencia de marketing online, y experto en negocios online, tanto web como mobile.
  • Javier Gosende. Se desempeño como consultor y formador en temas de Marketing en Internet especializándose en posicionamiento en buscadores, conversión web y analítica web.
  • Francisco Páez. Socio Director de CMI Gestión desde 2007, es Ingeniero Técnico en Electrónica Industrial por la UPV y Máster Executive en Administración y Dirección de Empresas por Fundesem Business School.
  • Susana Lluna es periodista con una dilatada carrera en medios audiovisuales.
  • Pablo Sánchez es consultor de marketing online y comercio electrónico, fundador de la agencia Pasape en Alicante y co-fundador de la tienda online PlanetaHuerto.es.
  • Luis M. Villanueva Responsable de que el congreso internet 3.0 sea posible, organiza y gestiona. Diseñador y Consultor Web, especializado en posicionamiento web en buscadores y Estrategias en Social Media.
  • Joaquín Sandoval Director TIC de Germaine de Capuccini S.A. y Germipil S.A.
  • Beatriz Navarro. Licenciada en Ciencias de la Información por la Universidad Complutense de Madrid, Máster en Dirección Comercial y Marketing por el Instituto de Empresa y PDD del IESE.
  • Francisco Lopez. Ha gestionado grandes proyectos, ha dirigido un equipo humano, ha trabajado con algunas de las mejores empresas de nuestro país.
  • Julia Alonso. Al frente de Secretariado&protocolo empresa dedicada al secretariado externo y on-line desde hace 8 años. Experta en protocolo y ceremonial y formadora en atención al cliente y organización de eventos del urban commerce trabajando de forma freelance y para consultoras especializadas.
  • Fabián López Coloma es Ingeniero de Telecomunicaciones por la Universidad Politécnica de Valencia, acabando su formación con el PFC realizado en la University of Sheffield. Es en la UPV, con 20 años, donde empezó su proyecto de venta online de turrones y mazapanes artesanos: www.turronesydulces.com.
  • Julio Vicedo. Trader Freelance Internacional desde 2001, es Licenciado en ADE, Finanzas y Bolsa, Máster En Business Administration, Finance, Trading and skill communications for business por la University of Westmister, Máster en International Business por la EOI y Máster en Asesoría Fiscal y Fiscalidad Global por Fundesem Business School.
Allí estaremos y si algún lector va al congreso, que me salude :D
Web del congreso internet 3.0: www.internet30.es

 

Dónde localizar la dirección de correo asociada a tu dispositivo Kindle de Amazon

Este post nace por la cantidad de dudas que surgen en el post “Cómo convertir PDFs para leerlos en el Kindle. Soluciones para OS X y Windows” que hice en el 2009 sobre la conversión ficheros y edocs para disfrutarlos en tu Kindle de Amazon. Algo que debería ser bastante sencillo (encontrar la dirección asociada a tu dispositivo), me sorprende que Amazon lo tenga tan escondido en dos submenús. Y eso que la empresa  es famosa por optimizar todos los procesos de compra para facilitar el uso y que no se escape nadie :) Hasta podéis leer sobre ello en el libro:  “Un Click. Jeff Bezos y el auge de amazon.com”

Al tema.

Para enviar ficheros al kindle disponemos de dos vías:

  • Inalámbricamente (por wifi o 3g, según el dispositivo). Enviando los ficheros a una dirección asociada con el dispositivo que amazon te asigna y como arte de birli-birloque, aparece en tu dispositivo. Pagando un euro (0.90€) por mega de transferencia, claro. por mega de transferencia en el caso de la conexión 3g o Whispernet. La descarga por wifi es grauita. (Gracias por la anotación @Artzaik).
  • Alambricamente. Osea, por USB :) Conectas el dispositivo, copias el ebook y ya puedes disfrutar de el. Esta vez, gratis.

Pero.. ¿cómo puedo saber que dirección tengo asignada a mi dispositivo Kindle?. Lo puedes en la web de Amazon, pero está un poco escondido.

Aquí una explicación gráfica:

Haz click para ver la explicación en detalle

Aquí la explicación paso a paso sin grafiquitos ni flechitas:

  • Te identificas con tu cuenta de Amazon.
  • Vas a “tu cuenta” o “your Account”
  • En la parte de abajo hay un cuadro con el nombre “Digital Content” o algo parecido en castellano.Entras a la sección “Manage your kindle”
  • En la página verás un menú lateral. Tienes que ir a la opción “Personal Document Settings” En la página verás una dirección asociada a tu dispositivo.

 

 

Pues esa es la dirección a la que tienes que enviar por email tus ficheros para acceder a ellos desde tu Kindle.

Si los ficheros están en un formato distinto de .mobi, .prc o el formato nativo del Kindle .azw tienes que poner en el asunto del mensaje  “convert” para que Amazon lo convierta automáticamente.

Si quieres ahorrarte unos centimillos, puedes enviar el mensaje a la misma cuenta pero añadiendo el subdominio “free” a la dirección de correo. La dirección quedaría así: si amazon te ha asociado “pericodelospalotes@kindle.com”, si le envías un fichero a la dirección “pericodelospalotes@free.kindle.com”, Amazon te devolverá un enlace para descargar el fichero convertido directamente en tu ordenador, sin pasar por su red ya sea por wifi o 3g. 

Fácil pero sinceramente, un poco escondido. Amazon preferirá que pases por caja pagando un precio más elevado por los libros del kindle que por lo de papel ( la bio de Steve Jobs, por ejemplo)  en lugar de “convertirlos” de otras fuentes.

35 ebooks gratis sobre diseño y desarrollo web

Cada vez hay que tener en cuenta más disciplinas a la hora de desarrollar una web (lenguajes, frameworks, css3, html5, responsible design, desarrollo móvil…), pero también disponemos de mucho más material gratuito para aprender y poder avanzar en cualquier disciplina por nuestra cuenta.

En tripwiremagazine han recopilado 35 ebooks gratis sobre diseño y desarrollo web  y que abarcan desde  creatividad, uso de tipografías hasta el gestión con CMS:

35 Useful and Free E-books for Web Designers

Otra web imprescindible es OpenLibra, sección de ebooks libres de EtnasSoft en la que también van recopilando todo el material libre sobre desarrollo y programación web: OpenLibra de EtnasSoft

TweeTablet. Jugando con media queries en una webapp para ipad

Tenía ganas de aplicar media queries en algún proyecto, pero como la montaña no venía a mahoma, mahoma va a la montaña. Osea, que necesitaba algún ejemplo en que practicar y se me ocurrió hacer un lector de tweets (que original!) para el iPad a modo de web app.

También quería practicar un poco de jQuery ya que aparte de tocarlo para modificar galerías, sliders e interacciones sencillas, no había tenido la oportunidad de encontrarme con problemas que solucionar, que es como se aprenden las cosas: a base de golpes.

¿Para que sirve tweeTablet?  Ahora mismo, para poco salvo para haber practicado con media queries, css3, diseño de interfaz para el ipad y aprender un poco de jQuery.

Podéis jugar con en ejemplo en: www.tweetablet.com (desde iPad)

El funcionamiento es sencillo:

  • Entras a tweeTablet.com desde el iPad (Desde el firefox peta por todos lados. En chrome un poco menos)
  • Buscas una palabra, hashtag o por cercanía mediante geolocalización.
  • Arrastras los usuarios que quieres seguir más de cerca a la pestaña lateral
  • Y ya está, por que no hace nada más :)

Técnicas aplicadas en el ejemplo:

Media queries.

No son más que unas condiciones que se aplican a los css para que use unos css u otros en base al tamaño del viewport, orientación, etc… En el caso de la barra de herramienta,  cambia de orientación a  horizontal al usar la app en vertical o a vertical al usarla en apaisado. Buscaba la mayor superficie útil en la aplicación, ya que entre barra de direcciones, pestaña y barra de herramienta, se comía mucho espacio. Ahora sólo encaja bien en iPad, pero al principio también lo hacía en el BqVerne de 7″ y 800*600, pero por unos errors y simplificar el código, lo quité. Total, tampoco funcionaba el Drag&Drop

jQuery

En otros proyectos como la guía móvil para las Fallas de Valencia o guía móvil para las Hogueras de Alicante, había usado jqueryMobile como framework, pero las líneas gráficas no me encajaban con el diseño que quería para el iPad, así que no lo usé esta vez. En lugar de eso fuí añadiendo distintos plugins a jQuery para conseguir lo que necesitaba y de paso intentaba comprender como usar jQuery de verdad. Lo mejor en este caso sería usar un framework que ya ofrezca toda empaquetado (y compatible!) como SensaTouch o buscar otro framework más adecuado, pero quería hacerlo por la vía puzzle :). También quería aprender como se trataban los datos por json, formatearlos, guardar cookies, utilizar drag and drop, scrolls táctiles, etc… La forma de obtener los tweets es la más básica, sin autentificación ni nada. Por eso no puedes reponder ni seguir ni hacer las tipicas operaciones de un cliente de twitter.

Diseño UI para el iPad

El iPad es mucho más goloso que los móviles a la hora de diseñar: más pantalla, interfaz táctil, etc…  El diseño en parrilla o galería me sirve para poder seguir hashtags en eventos, cotillear lo que va diciendo de una palabra, etc… A veces es complicado seguir algunos hashtags por la cantidad de tweets y no quería estar haciendo scroll continuamente, así que de esta forma le puedes echar un ojo. Salvo los logos e iconos, los demás efectos los he aplicado con css3, que permite liberar a photoshop de la mayoría de trabajo: sombras, bordes redondeados, degradados, etc…

Como se ve en el video, no se puede llamar ni beta ni alfa, es.. mega-hiper-super alpha :D

Unas pantallas de ejemplo:

Posicion vertical y barra de herrmientas arriba

Si la orientación es apaisada, la barra se mueve a la izquierda para ganar espacio

Pestaña para arrastar a los usuarios que quieres seguir de cerca

Sombras y degradados con css3

Pantalla general en apaisado con la pestaña desplegada

 

Problemas.

  • Al avanzar me di cuenta de que había un gran error. Por querer que las capas “fluyeran” y la pestaña empujara a la galería pasando de filas de 3 items a filas de 2, se cargó el sistema que parecía tan funcional de Pinchar y arrastrar. Al arrastrar no pasa por encima de la pestaña, lo hace por debajo. Glups!
  • El scroll no tiene aceleración. Esto es por que chocan el pichar y arrastrar con el scroll. El sistema no sabe que quiero hacer. He intentado anular el scroll cuando intento arrastar, pero no me sale bien. Todo deja de funcionar..el drag y el scroll. Necesito practicar más :)
  • La pestaña no funciona si lo usas como una App móvil de facebook. Al fina del video se ve lo que pasa. Se queda un poco pillado. Puedes probarlo buscando “tweetablet” desde la app de facebook para ipad.
  • Si giras el dispositivo con la pestaña abierta, se va todo al traste. Otra cosa a mejorar.
  • No funciona en Android. Bueno, he conseguido que vea bien en mi bq Verne de 7″, pero el drag no va. quizás en otro dispositivo funciona, pero no lo he podido probar. Tengo que ir al Corte Ingles y probarlo en su zona de betatesters :)
  • Al principio guardaba los preferidos con cookies, pero lo anulé. Lo tengo que volver a aplicar.

Sin la necesidad de scroll el sistema funcionaría mejor. El sistema de arrastar y soltar sobra la zona de “preferidos” lo podéis aplicar en muchas entornos: eligiendo ropa, zapatos, gadgets, seleccionando fotos, etc… y el iPad es un dispositivo que se presta a ello, el gesto de arrastar es natural en él.

Recursos

El ejemplo que me sirvió de referencia fue este tutorial: A jQuery Twitter Ticker Usé la forma que obtener tweets y lo adapté para el sistema que quería montar. Con eso, un poco de media queries, otro poco de css3, unas librerías jquery y listos. En un par de tardecitas está hecho. Lo que más tarda, como siempre, son los ajustes visuales.

Un buen punto de partida para entender las media queries es el artículo de A list Apart: Responsive Design

Ahora, a seguir practicando jQuery.

PressWork. Framework HTML5 para WordPress con funciones wysiwyg

framework html5plesswork PressWork. Framework HTML5 para WordPress con funciones wysiwyg

Pressswork es framework html5 para wordpress que nos va facilitar la modificación de themes de forma visual desde el mismo entorno de edición.

Me parece una opción más intersante a la hora de crear themes que soluciones como Artisteer, que primera vista te facilitan el trabajo (si no sabes nada de wordpress), pero con las que no aprendes nada sobre la creación o modificación de themes para wordpress.

Normalmente prefiero hacer las cosas a mano, pero si cumple todo lo que promete, algún diseño sencillo se puede montar con su editor wysiwyg:

http://presswork.me/feature-video/

Enlace: PressWork

WebApp movil para las Hogueras de San Juan de Alicante

Hogueras San Juan Alicante 2011

Hace unos meses publiqué un pequeño post sobre la webapp para fallas que desarrollamos para el Portal de Turismo de la Comunitat Valenciana. Ahora le toca el turno a su proyecto gemelo: la Guía Móvil para las Hogueras de Alicante (hogueras.comunitatvalenciana.com)

Para las Fallas de valencia estaba previsto una versión de la guía adaptada para Facebook que al final, por tiempos, tuvimos que recortar en el proyecto final. Aprovechando que ya teníamos mucho trabajo hecho para las fallas, hemos podido meter una pequeña aplicación para facebook de la guía.

Como las dos guías (la de hogueras y la de fallas) comparten muchas características, esto es lo que publiqué en el anterior post:

¿que información le resultará útil a alguien en la calle, en las Hogueras de Alicante y con un smartphone en la mano?

  • Información sobre las Hogueras de Alicante (información general, consejos, etc…).
  • Listar las Hogueras con su localización usando mapas (Google Maps en este caso).
  • Agenda de eventos geolocalizada.
  • Poder verse de forma optimizada desde un iPhone/Android/Smartphone.

La información debía ser útil tanto a turistas como a la gente de Alicante. Un detalle importante a tener cuenta es que las fotos no iba a estar disponibles hasta “La Plantà”

Y la parte técnica:

Con los elementos sobre la mesa (requisitos técnicos, elementos a incluir, interfaz, etc..) podemos tomar decisiones sobre las herramientas y tecnología a utilizar:

  • WordPress como CMS por la agilidad a la hora de gestionar contenidos y el amplio ecosistema de utilidades y plugins para el uso con móviles.
  • jQuery Mobile como framework javascript para la adaptación del interfaz para móviles.
  • Google maps para la geolocalización de las hogueras y eventos.

Usar WordPress nos da  acceso a una inmensa cantidad de plugins con los que poder dar salida a cada necesidad de la webapp. De todos lo que utilizamos, estos son los más importantes:

  • Mobile packWPtap Mobile Detector. para asignar el theme movil cuando se acceda desde móvil
  • GeoMashup. Para la implementación de Google Maps a las fichas
  • Magic Fields. Para la personalización de campos en las fichas de las hogueras y agenda
  • qTranslate. Para gestionar los idiomas (castellano e inglés) qTranslate no me gusta usarlo en proyectos en el que importe el seo, pero en este proyecto era algo secundario.
  • Theme Test Drive. Para mostrar de forma pública un theme y en el simulador una versión móvil adaptada para escritorio o facebook.

Hogueras San Juan Alicante 2011

Hogueras San Juan Alicante 2011

Hogueras San Juan Alicante 2011

Con todo esto tenemos la versión optimizada para móviles, pero ¿y la versión de Facebook?.
Para crear la app que actualmente está funcionando como pestaña en la web de la Comunitat Valenciana, los pasos serían los siguientes:

  • Crear una app nueva en Facebook
  • Diseñar un theme nuevo para WordPress ya que va funcionar con la misma configuración a nivel permalinks, nombre de las páginas, etc…
  • Usar el selector de theme “theme test drive” para utilizar uno u otro en base al diseño a mostrar: facebook, escritorio, movil, etc…
  • Optimizar el diseño para que los contenidos se muestren correctamente en un ancho de 520px y siguiendo las pautas de diseño para pestañas en Facebook
Hogueras San Juan Alicante 2011

App en Facebook funcionando en la pestaña de la Comunitat Valenciana

Hogueras San Juan Alicante 2011

Ejemplo de ficha de Hoguera en Facebook

En otro post explicaré más a fondo los pasos para crear la app y usar los contenidos de WordPress.

Las fotos de que hay publicadas son las del día de la plantà y muchas de ellas no estaban terminadas o se ven gruas y camiones. En la versión que hicimos para las fallas sólo se mostraba una foto pero para la versión de hogueras tuvimos que hacer cambios para mostrar más fotos por ficha.

Podéis ver las fotos de las hogueras de categoría especial que hemos hecho para la web app de hogueras en mi cuenta de flickr. Las hice en 3 horas contrareloj para que tenerlas disponibles al día siguiente de la plantà.

Set en Flickr de las fotos para la web app

Set en Flickr Hogueras Alicante 2011

Podéis acceder a la web y los distintos enlaces (QR, página en Facebook, etc..) en el subdominio hogueras.comunitatvalenciana.com

Powered by Wordpress | +Pablo Angeletti
Optimization WordPress Plugins & Solutions by W3 EDGE