Inspira, expira, inspiración en CSS expiración en HTML, te presentamos un punto de referencia indispensable así que a bookmarquearlo de inmediato.
Esta reseña se trata de la galería de CSS de los denominados premios CSS Los CSS Awards, así que tras los cacareados Oscars, ahora toca el tema de los CSS, and the winner is:
Enlace: http://www.thecssawards.com/gallery.php
Este tema para Wordpress nos ha gustado mucho, muy limpio y memorable.
Lo mejor de ello es que sus creadores, la agencia N-desing Studio nos ha dejado el boceto con las medidas y mejor aún el fichero PSD para que puedas modificar la plantilla con Photoshop o Gimp para crear tu propia variación sobre este tema, a nosotros ya se nos han ocurrido un montón, el más evidente desaturar ese amarillo estilo post-it y pasarlo a blanco marcando el rayado de imprenta que contiene con un azul más intenso, dejar una goma de borrar marca Milan algo sucia de usarla colocada en alguno de los márgenes, algún garabato por el papel y vaya… inspirarnos en los cuardenos que nos acompañaron durante EGB.
La distribución y maquetación de este tema de Wordpress para nosotros es perfecta, tamaño correcto, textos a la izquierda para facilitar la lectura y no tener que saltar el bloque de menú o sidebar con cada línea que el visitante lea, diferenciación visual entre fecha, título, breve del artículo. botones generales de navegación destacados en la parte superior y con un diseño muy Apple, todo a excepción del header que no aporta belleza alguna y diluye algo el buen efecto que puede causar este tema, un header que no mostramos en la captura y el fondo iMac translúcido
Aqui os dejamos el boceto o wireframe del tema para Wordpress comentado:
El fichero PSD para que puedas editar: Fichero Photochop tema Wordpress (1)
El fichero con el tema para Wordpress listo para uploadear: Tema Notepad para Wordpress (1)
Enlace: http://www.ndesign-studio.com/wp-themes/notepad
Bueno, aunque el título reza que lo que hoy te traemos es exclusivo para iPhone, más bien es para cualquier tipo de dispositivo que disponga digamos de una pantalla especialmente pequeña o con unas proporciones diferentes a las habituales, incluídos los Androids, los aburridos Windows Mobile 7 y las gorditas Blackberries.
Se trata de un framework (un framework es una estructura de trabajo predefinida y un pequeño conjunto de utilidades básicas para el desarrollo enfocado) desarrollado bajo html 5 y compatible con casi todos los navegadores modernos y con el que gracias a él te podrás olvidar de las diferentes resoluciones para los diferentes dispositivos pues con este framework la web detecta la resolución de pantalla y autoadapta el contenido para que se visualice de forma óptima en el dispositivo lo que representa una clara mejora en la usabilidad de cualquier página web, blog o aplicación web.
Este framework está compuesto por un par de ficheros CSS, un javascript y una forma de maquetar el encolumnado mediante CSS. Aún no hemos podido ponerlo en práctica por nosotros mismos pero en la web que enlazamos, la de sus creadores, puedes jugar a resizar (redimensionar) la ventana del navegador y ver como el contenido se adapta de forma perfecta a cualquier tamaño y proporción.
Aquí tenéis, listo para bajar un archivo zipeado con los ficheros del framework y un ejemplo: Framework web para iPhone (1)
Enlace: http://lessframework.com/
Hoy os traigo un experimento, se trata de una hackeo muy casero de una conocida plantilla para el sistema de blogs Wordpress. La imagen que acompaña a este post no es del todo apropiada porque lo que buscamos es un superclick y no un superatón, es decir nuestro objetivo hoy es conseguir el mayor número de clicks hasta reventar el CTR o clicktrought de Google adSense con nuestra página optimizadísima para adSense.
En capítulos anteriores, nuestro super ratón que no es otro que nuestro blog experimental:
Conseguía un triste 0,87 clicktrought lo que nos equivale a 0.90 CPM ganancias por cada mil impresiones de anuncios. Con eso no tenemos ni para el hosting, ahora bien: ¿conseguirá super ratón llegar al soñado 20% de CTR?
Esta plantilla es muy sencilla, dispone de un sistema de dos columnas y un fondo 100% estilo iPhone. La llevamos aplicando hace ya algún tiempo en uno de nuestros blogs experimentales.
Primero probamos hackeando el template e introduciendo un sistema de 4 columnas, el resultado era un sistema de menú más tres columnas con anuncios “Sólo de texto” en formato 160 x 600, de esta forma a excepción del menú lateral izquierdo todo eran posibles clicks pero no nos ha funcionado, la gente, los usuarios son demasiado listos y ya empiezan casi todos a diferenciar casi sin mirar, adSense de contenido real.
Podríamos integrar en la primera columna la que tiene el menú del blog una nueva tira de anuncios de texto, pero no, no es posible pues adSense sólo permite 3 bloques de anuncio por página como máximo, también pensamos en pasar a un sistema de tres columnas en lugar de cuatro pero Google no dispone de ningún banner largo más ancho de 160 píxeles por lo que entonces el sistema cantaba en exceso, si bien podríamos haber incorporado una cuarta columna falsa y sin ser clickable decidimos dejar pasar el tiempo haber si ese CTR mejoraba. Un pimiento frito, eso es lo que podríamos haber comprado, aceite de oliva no incluído, con las ganancias por publicidad del mes de enero de este año.
Por fin hemos visto la luz, y hoy hemos cambiado nuestro sistema de optimización, ahora utilizamos sólo banner gráficos para las tres columnas y tres bloques de enlaces para el menú, con los banners gráficos la mosca de Google queda siempre abajo, de momento, y hemos eliminado esos primeros enlaces del propio block, ahora son enlaces patrocinados porque Google te permite 3 bloques de anuncios y 3 bloques de enlaces simultáneamente, posiblemente consigamos alguna mejora en el CTR, ya te lo comentaremos.
El sistema de los banner verticales extralargos no tiene otro objetivo que ofrecer más zona de click antes del scroll de la página, y si es posible en resoluciones de pantalla populares que la molesta mosca cojonera de “Anuncios de Google” o “Ads by Google” para las webs de lengua inglesa quedase fuera de la zona visible.
Transcurrido un tiempo, creemos que Google se percató y sí o sí pone su marca ahora siempre arriba en los banners de textos así que el sistema duró bien poco, volvemos al símil del ratón de la imagen que acompaña este post y curiosamente si nosotros seguimos siendo el ratón adivina quien es el perro, o era el gato, no se, esto de los refranes siempre me falla, tan sólo quería nuevamente alzarme contra Google.
Soñarás con esa mosca, cojonera donde las alla, pues por mucho que la intentes camuflar cambiando los colores de fondo, el estilo de letra, etc no conseguirás nada, porque esa maldita mosca de Google estropea cualquier intento, y no la intentes tapar con un div “position:absolute” por encima porque en menos de lo que piensas recibirás una advertencia de la todopoderosa, nosotros lo hemos intentado incluso con un sistema inteligente que era la repera y contemplaba 10 factores antes de tomar la decisión de taparla, navegador, sistema operativo, ip de origen, incluso la hora, las páginas vistas para al final generar un random del estilo número de 0 a 100 sólo si es mayor de 60 me tapas la mosca. Pero nada, recibimos un misterioso email amenazante.
Que diferencia resultaría para nosotros los pequeños si la todopoderosa nos permitiese cambiar ese texto por un “Enlaces Patrocinados” tal y como lo hace con las grandes cuentas, que lo hace con muchas de esas que tienen impresiones a patadas. ¡Maldito poder!
No se si eres un publisher como nostros, es decir te dedicas a generar contenido y postearlo o sencillamente sindicas lo que dicen otros. Si es así lo más probable es que integres la fórmula adSense entre tus intentos de amortizar el esfuerzo e inversión que puede llegar a representarte tener tu blog al día.
Posiblemente conozcas aunque sea algo por encima las limitaciones de adSense, su política o requirimientos para que no te encuentres tu cuenta bloqueada de un día para otro.
Si bien podemos decir que nuestro sistema es totalmente legal, admitimos que roza todos los límites y es poco o nada considerado con el usuario su usabilidad es cero pelotero, viniendo a ser prácticamente como una página capturadora de clicks al más puro estilo de un parking de dominios de SEDO pero con contenidos 600 píxeles más abajo.
La fórmula es 3 + 3, o lo que es lo mismo tres bloques de enlaces más tres bloques de enlaces.
Sólo nos queda un paso, cambiar el cajetín de búsqueda por un bloque de búsqueda de Google.
Como podeis ver nuestro blog experimental ha vendido su alma a Google, lo que hay que hacer para entretenerse… pruebas, bienvenidos a la nueva categoría del “El gato y el ratón”
Si bien el uso de los comandos <table> actualmente está en deshuso a favor de los mágicos y a la vez más complejos <div> os vamos a pasar un enlace donde encontrarás un montón de estilos CSS muy optimizados para implementar en tus tablas.
En este enlace podrás ver en directo muchos de los CSS aplicados, pulsa sobre el título del diseño del CSS y la misma página que contiene una tabla se vestirá con el CSS escogido, dispones de un botón “Download” que te bajará o mostrará el CSS que se aplica sobre la tabla.
Enlace: http://icant.co.uk/csstablegallery/