Web X.1

A día de hoy existen diversas formas de pago en Internet ya sea mediante PayPal, Tarjeta de Crédito, transferencia bancaria o contrarrembolso.

Pero además de todas estas maneras, existe la que normalmente más nos gusta a todos, y es la posibilidad de descarga de información de manera totalmente gratuita. Para estos casos el usuario, en agradecimiento al recurso proporcionado, puede hacer uso de las redes sociales para promoverlo compartiendo el enlace, la esencia del internet de hoy en día.

Pero hoy vamos a hablar de un sistema por el que el usuario no tendrá que desembolsar dinero a cambio de un tutorial premium, recurso gratuito, etc…

Paga con un tweet es el primer sistema de pago social, basado en el pago por tweet por el que un usuario podrá descargarse un recurso gratuito o cualquier otro producto a cambio de mandar un tweet con el enlace.

En el caso de por ejemplo ofrecer un código o un recursos en tu web totalmente gratuito, puedes ofrecer lo mismo pero con la condición de que el usuario publique un tweet con el enlace. El botón funcionará de intermediario entre el enlace donde se ofrece el recurso y el archivo a descargar, obligando al usuario a enviar un tweet para que empiece la descarga.

¿Cómo conseguir el botón Pay with a Tweet?

Para conseguir el botón “Pay with a Tweet” lo único que se ha de realizar es acceder a la dirección http://www.paywithatweet.com/sell.php donde tendremos que informar:

Con esta información obtendremos el botón que ya podremos colocar en nuestra web donde ofrezcamos cualquier recurso, tutorial, etc … para que antes de que el usuario lo descargue, tenga que enviar el tweet.

Los botones que nos proporcionan son de distintos tamaños, incluso nos genera un QR-code para usarlo en nuestras aplicaciones o sitios web.

En el presente post, os queremos presentar a  WooThemes (uno de los principales creadores de temas premium) el cual nos ha presentado su último plugin Woocommerce, diseñado para convertir WordPress en una tienda, incluso con temas específicos para ello.

Este plugin Incluye todo lo que ha de tener una tienda: gestión de stock, de medios de pago (incluyendo Paypal, transferencia bancaria y cheque en la versión que estoy probando), gestión de envíos con calculador del coste, carrito de compra, cupones descuento, ofertas especiales, informes y ajustes por país entre otras muchas cosas.

La información que podemos incluir en los productos es muy completa y se puede configurar de manera muy sencilla (incluidos productos para descarga) e incluso se permite completar la venta sin registro.

Lo mejor de todo: es de código abierto y se puede descargar gratis y modificarlo según nuestras necesidades. Además, se puede traducir fácilmente con un editor como Poedit o usando el plugin Codestyling Localization y tiene una documentación (escasa en la web) y un espacio en GitHub al que poder subir mejoras o traducciones.

Os dejo con el vídeo de presentación para que comprobéis su potencia y la sencillez de configuración:

Y una vez más, Google continúa reinventándose y actualizándose, y en este caso nos presentan una nueva función sobre su última aplicación, Google+, la cual consigue que podamos compartir los círculos con cualquier contacto, añadiendo así un importante servicio que no hace más que buscar una mejora sustancial en el uso de la red social.

Los círculos son una manera curiosa de organizar contactos a modo de listas. El ingeniero de Google Owen Prater  comenta que compartir esas listas es algo sencillo mediante tan sólo añadir un comentario opcional en el círculo y seleccionar la opción ‘Compartir’ (Share). De este modo, el círculo con todos los contactos que albergue será publicado en la línea de tiempo del usuario.

El nombre del círculo seguirá siendo privado y cada usuario que reciba el círculo podrá organizarlo a su gusto, añadiendo o eliminando contactos. El vídeo explicativo en cuestión lo integramos a continuación:

No en una, ni en dos, sino que será en varias las ocasiones en las que necesitemos saber algún tipo de información de algún cliente en cuanto a detalles informáticos, y es posible también (lo más probable) que el cliente no tenga mucha idea de cómo mirar cierto tipo de información por muy básico que parezca.

Cuantas veces se habrá dado la situación en la que un cliente os llama indicando que no ven de manera correcta el portal web que les hemos desarrollado, no quedando otra opción que plantearle al cliente una serie de preguntas tales como:

“¿En que navegador lo estas visualizando?”, “¿Qué resolución estas utilizando?”,“¿Qué sistema operativo estas utilizando?”.

Muchos clientes no tienen ni idea de cómo obtener dichos datos (tampoco es su labor), por eso está bien tener algún tipo de aplicación que se pueda utilizar desde cualquier sitio con internet.

Con Support Details puedes saber la información que necesitas saber del cliente sin tener que estar presente en persona y sin tener que dar soporte informático por teléfono.

Lo único que le tendrás que decir a tu cliente es que entre en la URL http://www.supportdetails.com y en la web le saldrá información como:

Además de informar de todos estos aspectos, nos brindan un formulario para enviar la información por e-mail indicando el nombre y el e-mail, además te da la opción de exportar toda la información en un pdf o enformato csv.

Publish Sync es una excelente extensión de Google Chrome con la que conseguiremos compartir lo que queramos en Google+, Twitter o Facebook desde una misma ventana dependiendo de la red donde estemos compartiéndolo.

Como veis en las imágenes, esta extensión añade opciones debajo de cada red social para compartir en las demás.

Interesante para aquellos que no quieran entrar en cada una de ellas para compartir.

Enlace de la descarga: Publish Sync Extension (Google Chrome)

Según un análisis de CMS que realiza la empresa BuiltWith Trends, prácticamente la mitad de los principales 10.000 sitios están funcionando gracias a WordPress, ahí es nada.

Como puedes ver en la gráfica, en segundo lugar de los CMS estaría Drupal, pero a mucha distancia.

Pero la cifra es mucho más impresionante si vemos la gráfica de los 100.000 sitios más importantes, donde WordPress llega casi al 60% …

Pero donde ya se muestra como absolutamente imbatible es si vemos la gráfica del millón de sitios principales, de los cuales prácticamente el 70% usan WordPress.

Recientemente Google Analytics realizó una serie de cambio que afectan el modo en que se cuentan las visitas a una página. Básicamente, modificó el tiempo de sesión y modificó la forma en que considera las visitas a través del buscador de Google.

Esta noticia nos viene por parte de la gente de Attach Media (Siempre bueno saber de los que saben), que nos explican con bastante claridad los cambios y sus consecuencias.

Google Analytics es la herramienta de analítica web más difundida, al menos entre quienes los adminsitradores de sitios web que no son especialistas en el tema. Si bien hay otras que la superan en la cantidad de información y capacidad de análisis, al ser gratuita y estar integrada a los demás servicios de Google suele ser la opción más habitual.

Habrá novedades para finales de Octubre. Adobe nos presentará alguna de las novedades que llegarán con Flash 11 y AIR 3.Una de las principales novedades, es la posibilidad de crear entornos 3D con “calidad de videoconsola” dentro de un juego en Flash.

Los entornos de dos dimensiones no se dejan apartados, y mejoran con un rendimiento al renderizar mil veces mayor que Flash 10. Además, la compatibilidad con las extensiones nativas permitirá que los desarrolladores usen código nativo de su sistema en sus aplicaciones para la plataforma multimedia de Adobe.

Tanto Flash 10 como AIR 3 quieren estar en tantas plataformas como sea posible: Windows, OS X, Linux, Android, BlackBerry y hasta iOS, aunque en ese sistema sólo podremos tener AIR por la actitud de Apple con Flash. En las plataformas móviles Flash tendrá acceso a partes del dispositivo como la vibración o los sensores de luz, ganando en versatibilidad para algunos juegos.

A pesar del enfrentamiento con Apple, desde Adobe no encuentran motivo para perder el fuelle con la evolución de Flash. Con la capacidad de crear mundos tridimensionales podríamos ver grandes juegos usando sólo ese plug-in, aunque tendremos que ver si el rendimiento está a la altura.

La página principal es la carta de presentación de la web, el trampolín hacia sus contenidos internos y tiene la misión de comunicar con eficacia su identidad y objetivos, así como servir de trampolín hacia el resto de páginas que compondrán nuestra web.

Por ello vamos a exponer algunos consejos básicos para construir la portada de una página web:

Llamar la atención: Será importante mantener una identidad visual coherente que esté en consonancia con los objetivos de la web y que responda a las necesidades del usuario.

Definir objetivos: Los usuarios nuevos querrán saber al instante dónde están y para qué sirve la web, teniendo siempre claro el por qué permanecer en la web y no marcharse a otra. Por ello es importante definir la identidad y el objetivo de la web cerca del logo, y usar la etiqueta <title> para así dejar constancia de ello.

Facilitar búsquedas: expertos en la materia distinguen entre usuarios link-dominants (aquellos que exploran la web antes de buscar) y search-dominants (aquellos que acuden al buscador tan pronto como entran en el sitio). Para los segundos es imprescindible un buscador interno que esté situado en una parte visible de la web, funcione de forma eficaz y, a ser posible, permita una búsqueda avanzada con opciones de acotación.

Organizar propuesta: La web debe tener una estructura jerárquica y un menú de navegación representativo, teniendo en cuenta los hábitos de búsqueda de los usuarios en los literales de la web para mejorar su experiencia lectora y el rendimiento en los buscadores.

Actualizar: En función del propósito de la web necesitarás actualizar los contenidos con mayor o menor regularidad. Renovarse o morir.

Muestra tus contenidos: Para cumplir los objetivos de la web necesitas crear incentivos que orienten a los usuarios hacia la conversión. Puedes promocionar contenidos internos a través de recursos como “lo último”, “lo más popular” o “lo más comentado” y apostar por llamadas a la acción (call to action) visibles y con literales originales.

No molestar: Ventanas emergentes y bloques de publicidad invasivos fatigan al usuario.

Conversa: Es muy importante mostrar tu presencia en redes sociales a través de widgets o botones. Tener seguidores significa que hay usuarios que ya han utilizado el mismo producto o servicio antes y de forma satisfactoria.

La semana pasada nos llegó la noticia. Desde hace un tiempo veníamos pidiendo a gritos que saliera a la luz la API de Google+ para que aplicaciones de terceros pudieran incluir opciones de publicación en sus servicios.

Desde googleplusplataform nos informan hoy mismo de esta estupenda noticia con todos los detalles para que los desarrolladores pueden empezar a crear sus aplicaciones. Aunque por ahora es un primer paso y no tiene todas las funciones disponibles, lo cierto es que las fundamentales como son, compartir contenidos de forma pública, identificarse o mantener conversaciones las tenemos disponibles desde hoy mismo.

Los programadores podrán ver todos los detalles en developers google donde irán publicando novedades.

Lo primero de todo es entender a las viñetas como un instrumento principalmente gráfico. En internet, nos ayudan a elaborar listas con las que resaltamos los detalles principales de un párrafo, a la vez que lo hacemos más atractivo visualmente. Su diseño vertical resulta muy útil en la maquetación de páginas web, eso sí, siempre empleándose con moderación, ya que con su abuso, estas perderán su eficacia. Debemos seleccionar en qué párrafos las aplicaremos y no recurrir a ellas para destacar cosas sin importancia.

Normas generales para elaborar listas con viñetas:

Normas de puntuación:

Nuevas tecnologías, nuevas posibilidades y por ello vamos ha realizar un pequeño ejemplo con HTML5 y CSS3 y ver así que cosas podemos llegar a implementar, y que con CSS2 era impensable.

El pequeño ejemplo consistirá en realizar un cubo en 3D con CSS. Las 3 caras del cubo se compondrán en nuestro caso, del logo corporativo, “como nó!!    ;)  , labor de marketing”.

Para empezar, necesitamos 3 imágenes separadas, cada imagen de 100 x 100 píxeles, degradado de claro a oscuro. Después añade dos píxeles de borde, que en un futuro nos servirá como el borde del propio cubo.

Código CSS

Ahora que tenemos nuestras imágenes, vamos a empezar a crear el código CSS.

.cube {

position: absolute;

                top: 100px;

                left: 100px;

}

El contenedor de nuestro cubo se llamará .cube, no necesitamos aplicarle altura y anchura, pero es recomendable aplicarle posición absoluta.

.face {

                position: relative;

                width: 100px;

                height: 100px;

                overflow: hidden;

}

Después necesitamos crear una característica global para cada cara de nuestro cubo. En esta parte si será necesario utilizar el posicionamiento absoluto. Indicaremos una altura y anchura de 100 píxeles, y ocultaremos el overflow para que si las imágenes son más largas, no destruyan el cubo.

.top {

                top: 0;

                left: 89px;

                background: #ffffff;

                -webkit-transform: rotate(-45deg) skew(15deg, 15deg);

                -moz-transform: rotate(-45deg) skew(15deg, 15deg);

}

Ahora posicionaremos la imagen superior del cubo con top y left. Después añadiremos el color de fondo, que no es necesario pero queda mejor. La siguiente parte seguramente sea la más importante, la nueva propiedad CSS3 transform. Muchos navegadores ya soportan esta propiedad, por lo que no tendremos problemas. Necesitamos incluir dos líneas extra para navegadores basados en webkit y para Firefox con el objetivo de que se muestre correctamente. Rotaremos el cubo 45º en el sentido de las agujas del reloj, 15º en posición oblicua para hacerlo coincidir con las otras caras del cubo.

.left {

                top: 77px;

                left: 44px;

                background: #ffffff;

                color: #ffffff;

                -webkit-transform: rotate(15deg) skew(15deg, 15deg);

                -moz-transform: rotate(15deg) skew(15deg, 15deg);

}

Después debemos construir un espejo de la cara izquierda con la derecha, es decir, las mimas propiedades de forma invertida.

.right {

                top: -115px;

                left: 145px;

                background: #ffffff;

                color: #ffffff;

                -webkit-transform: rotate(-15deg) skew(15deg, -15deg);

                -moz-transform: rotate(-15deg) skew(-15deg, -15deg);

}

Código HTML

La parte de HTML es la más sencilla, el formato sería así:

<div class="cube">

<div class="face top">

            <img src=".../WPN-P.png" height="100" width="100">

        </div>

<div class="face left">

            <img src=".../WPN-W.png" height="100" width="100">

        </div>

<div class="face right">

            <img src=".../WPN-N.png" height="100" width="100">

        </div>

</div>

Con HTML estructuraremos las imágenes. El ejemplo final sería así: