xploit29 - Tecnología al alcance de tus manos » Diseño

Nuevo sistema de notificaciones de Canonical

pinwin0 — Thu, 01 Jan 2009 20:24:46 +0000

En pleno auge de las notebooks, el espacio real dentro de una pantalla no puede ser desaprovechado, y eso Canonical lo sabe muy bien, es por eso que ha mostrado su propuesta para mejorar la integración del sistema de notificaciones con su sistema operativo, aplicándolo a tareas cotidianas como un nuevo e-mail recibido o una tarea terminada

No sólo son los cambios estéticos lo mejor de todo esto, sino que se ha trabajado mucho en los campos de usabilidad e interacción de las notificaciones. Esperemos que los demás desarrolladores de sistemas operativos tomen nota del trabajo que Canonical está realizando.

Vía | ArsTechnica

Entradas relacionadas:

101 Diseños para Joomla

ikcam — Thu, 11 Dec 2008 19:41:18 +0000

Ever-real ha realizado una recopilación de 101 diseños/plantillas para Joomla. Se sabe que Joomla no es lo que exactamente se dice “un buen CMS” ya que es considerado el “Windows de los CMS” sin embargo existen una gran cantidad de plantillas (gratuitas/pagadas) para este gestor de contenidos. Por supuesto que no son tantos como los que existen para WordPress pero a continuación verán algunos de los cuales me ha llamado más la atención y si desean pueden adquirir para su sitio web. También pueden ver la lista completa de plantillas.

Vía | Ever-real Blog

Entradas relacionadas:

Windows Vista WordPress Theme

ikcam — Wed, 10 Dec 2008 02:48:41 +0000

Existen mucho temas para WordPress con la apariencia de Windows Vista; sin embargo unos son mejores que otros pero nunca imaginé encontrar un tema que se asemeje tanto como el que verán a continuación. Aquí algunas capturas:

El botón del menú inicio, realmente funciona:

Al posar el cursor sobre el texto de cualquiera de las opciones del menú inferior se muestra una pequeña ventana con el contenido del botón del menú:

Posibilidad de cambiar la combinación de colores que usa la plantilla, múltiples opciones:

El nombre exacto del tema es Inanis Glass WordPress Theme y es compatible con WordPress 2.6 a superior.

Enlace | Inanis Glass WordPress Theme
Descarga | Inanis Glass WordPress Theme

Entradas relacionadas:

Liberado “X-Blue” Theme para WordPress por xploit29

ikcam — Fri, 21 Nov 2008 18:41:50 +0000

“X-Blue” es el nombre que le he dado a la plantilla que he diseñado y maqueteado para WordPress. Es una plantilla de 1 columna, pero ésta columna es lo suficientemente ancha para poder soportar widgets con pestañas las cuáles son muy llamativas y por lo tanto se realizará un ahorro de la rueda de desplazamiento para poder visualizar todo el contenido de la barra lateral.

La plantilla cumple con todo los estándares web tanto de XHTML & CSS. En caso realices éstas comprobaciones en mi sitio verás que los errores de XHTML & CSS son generados por plug-ins de terceros más no por parte de la plantilla.

Principales características:

100% Fácil de leer
Fácil integración con banners de publicidad, la que posee una posición no intrusiva
Incluye botones para compartir el contenido (gracias a KNXDT Bookmarks)
Compatible con Windows Live Writer
Separación de forma automática de Pingbacks o Trackbacks de los Comentarios
Ancho total de 990px, con 640px de contenido y 310px en el sidebar
Plantilla 100% en español
Cumple estándares web.

Descarga:

Descargar X-Blue Theme para WordPress (con plug-in para pestañas)
Descargar X-Blue Theme para WordPress (sin plug-in para pestañas)

Instalación:

El archivo de descarga incluye el plug-in para los tabs, lo importante de este plug-in es que se deben mantener el archivo uitabs.css (es muy importante usar el archivo CSS modificado para esta plantilla)

Debes subir la carpeta del theme dentro de la carpeta /wp-content/themes/
Una vez subido el theme recuerda activarlo en tu Panel de Administración de WordPress en “Diseño” > “Temas”
Si también has descargado el archivo que contiene el plug-in recuerda que tienes que activarlo para que funcione correctamente.

Preguntas y comentarios:

Si tienes cualquier tipo de pregunta o comentario, déjalo en la parte inferior del blog o también puedes contactarme.

Permisos y legalidad:

Esta obra se encuentra bajo licencia Creative Commons y puede ser modificada y distribuida sin fines comerciales siempre que se mantenga el crédito al autor original. Cualquier modificación al plug-in editando el crédito de su reconocimiento (línea 156 del código) editando la URL destino no está permitida.

X-Blue WordPress Theme by xploit29 is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 2.5 Perú License.
Based on a work at www.xploit29.com.

Donaciones:

Si deseas apoyar al desarrollo y evolución de X-Blue quizás desees considerar realizar una donación voluntaria a través de PayPal.

Entradas relacionadas:

Crear tabs para cualquier sitio con jQuery (Parte II)

ikcam — Mon, 13 Oct 2008 08:03:00 +0000

Continuando con este tutorial para incorporar “TABS” o pestañas a nuestro sitio web, ahora vamos a aprender a incorporarlos a WordPress, que pasos debemos seguir y que hay que tener en cuenta. Antes de comenzar es necesario que revisen el primer tutorial de esta serie para que tengan una idea de lo que me refiero con algunos términos.

Para incorporarlos a nuestra plantilla debemos seguir lo siguientes pasos,

Nos dirigimos a nuestro panel de administración en WordPress, luego al editor de temas y editamos el archivo header.php (Encabezado)

Dentro de la edición de este archivo añadimos las siguientes líneas entre las etiquetas y

  <script src="http://code.jquery.com/jquery-latest.js">
  	 
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
     
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
     
  </script>
  <script type="text/javascript">
     
  </script>

A continuación nos dirigimos a editar el archivo style.css (Hoja de estilos) para definir el estilo de nuestro widget.

A este archivo le tenemos que añadir las líneas de código de CSS del tutorial anterior, lo mejor es que ingresen su hoja de estilos propias, verán que no es muy difícil editarla. Pero en caso deseen practicar, aquí tienen el ejemplo que tienen que añadir al final del archivo style.css

.estilo {
			margin:0 0 15px 0;
			padding:0;
			width:310px;
		}
		.ui-tabs-nav{
			margin:0;
			padding:0;
			list-style:none;
		}
		.ui-tabs-nav li {
			margin:0 2px 0 0;
			padding:0 5px 0 5px;
			float:left;
			height:30px;
			border-top:1px #3399FF solid;
			border-right:1px #3399FF solid;
			border-left:1px #3399FF solid;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height:30px;
			text-transform:uppercase;
		}
		.ui-tabs-nav li:hover {
			background:#EBEBEB;
			color:#333333;
		}
			.ui-tabs-nav li:hover a {
				color:#333333;
			}
		.ui-tabs-nav li {
			background:#FFFFFF;
		}
			.ui-tabs-nav li a {
				color:#336699;
				text-decoration:none;
			}
		.ui-tabs-panel {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-panel ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-panel ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-panel a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-panel a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
		.ui-tabs-hide {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			display:none;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-hide ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-hide ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-hide a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-hide a:hover {
				color:#3399FF;
				text-decoration:underline;
			}

Lo siguiente, es editar el archivo sidebar.php (Barra lateral) para poder añadir nuestros “widgets” en código bruto PHP (que más adelante verán) ya que al usar esta sidebar con pestañas no pueden usar el sistema de WordPress para añadir “widgets” a sus recuadros con pestañas.

Dentro de la edición de este archivo, tenemos que añadir las siguientes líneas de código, si lo deseamos visualizar en la parte superior de nuestra plantilla lo tenemos que añadir antes de la siguiente línea de código:

 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Pero si lo desea visualizar en la parte inferior, lo tenemos que poner antes del final del sidebar, es decir, antes de la última etiqueta . La líneas de código a añadir son las siguientes:

    <div id="EJEMPLO" class="estilo">
    <ul>
        <li><a href="#tab-1">Título 1</a></li>
        <li><a href="#tab-2">Título 2</a></li>
    </ul>
    <div id="tab-1">
            Aquí el contenido</div>
    <div id="tab-2">
            Aquí el contenido</div>
    </div>

Debemos recordar mantener la estructura que se mencionó en el tutorial anterior para así evitar que nuestro código no funcione.

Finalmente, nuevamente nos dirigimos al archivo header.php para una última adición. Tenemos que añadir lo siguiente tantas veces se hallan añadido recuadros en la edición del archivo sidebar.php manteniendo los nombres de los respectivos id. La línea de código a añadir es la siguiente:

  <script type="text/javascript">
  $(document).ready(function(){
    $("#EJEMPLO > ul").tabs();
  });
  script>

Repito, debemos repetir, tantas veces sea necesario.

Luego de realizar todas esas modificaciones, nuestro widget con pestañas se mostrará en nuestra barra lateral de WordPress. A continuación, les daré una lista de funciones en PHP que llamarán algunos widgets sin la necesidad de llamarlos a través de nuestro panel de administración de WordPress:


//Mostrar cateogrías
wp_list_categories('orderby=name&title_li=');
?>
 
//Mostrar archivo
wp_get_archives('type=monthly'); 
?>

//Ultimos 10 posts
get_archives('postbypost', 10); 
?>

//Blogroll
wp_list_bookmarks('title_before=&title_after=&title_li=&category_before=&category_after=');
?>

En caso, tengas alguna duda acerca de este tutorial, déjanos un comentario y recuerda que respecto a la edición de la barra lateral, cada barra lateral es distinta en cada plantilla así que ten cuidado.

Entradas relacionadas:

Nuevo diseño del blog

ikcam — Wed, 08 Oct 2008 01:19:05 +0000

Quienes visitan constantemente el blog habrán notado cambios en el diseño de la plantilla del blog la cual es el resultado de horas de trabajo buscando la manera de que todo quede de forma correcta (aunque aún no es así) la he implementado para poder probarla y verificar que todo vaya de forma correcta.

Mi objetivo al haber desarrollado y diseñado esta plantilla ha sido desde el principio para liberarla bajo una licencia GNU (General Public License) de uso libre, casi como una forma de regalo a quienes visitan de forma continua y constante el blog y para quienes deseen modificar el diseño de su blog.

Las características de la plantilla son las siguientes:

Ancho de 990 pixeles
Sidebar de 310 pixeles
Área del post de 640 pixeles
Adaptado a AdSense
Separa comentarios de “Trackbacks & Pingbanks”
Botones para compartir (próximamente más botones)
Tamaño de fuente adecuado
Compatible con Windows Live Writer
Probado en Firefox 3 e Internet Explorer 7

Agradecimientos:

Quisiera agradecer a los siguientes blogs pues he obtenido un poquito de cada uno de ellos para de esa manera buscar la mejor forma de sacarle el jugo al diseño del blog:

Medidas y sidebar – ALT1040
Invitación a RSS – Tecnología Diaria
Lista de tags que se pueden usar en comentarios – Tinta Fantasma
Diseño del formulario de envío de comentarios – Anieto2K
Fuente para el contenido del post – Aprendiendo Web

Gracias también a aquellos pequeños tutoriales para el maqueteo de una plantilla de WordPress.

Finalmente, quisiera que cualquier tipo de duda o problema, el que sea respecto a la plantilla háganmelo llegar a través de un comentario en este post o a través de formulario de contacto. Manténgase al tanto del blog, agregándolo a su lector de RSS, pues en los siguiente días tengo planeada la entrega de la versión 0.9 Beta de mi plantilla X-Blue.

Entradas relacionadas:

ColorZilla, analiza los colores de cualquier sitio

ikcam — Sat, 04 Oct 2008 02:14:50 +0000

ColorZilla es una extensión muy útil para Firefox, la cual no únicamente está enfocada para el uso de diseñadores sino también para quienes desees optimizar sus ganancias con AdSense. Por ejemplo, si hacemos que los colores de un anuncio sean muy similares a los naturales del sitio, esto llama la atención de las visitas y podrías ganar más clics en un anuncio de AdSense.

Además, este herramienta analiza un sitio web aprovechando el DOM de Firefox (Document Object Model o Modelo de maqueteo de sitio web)podemos identificar los colores de zonas específicas de las cuales desea escoger el punto de color (píxel).

Y eso no es todo, podemos hacerle un zoom a la página que deseemos analizar para así tener mayor claridad del punto que deseamos escoger para obtener su código de color. Esto se configura haciendo clic derecho sobre el ícono del cuenta gotas en la zona inferior izquierda de la ventana de Firefox.

ColorZilla es una herramienta muy útil, quizás existan algunos problemas para lograrla hacerla funcionar en Ubuntu (de hecho nunca logré hacer que funcione correctamente) aunque en un sitio oficial se menciona que si funciona en Ubuntu.

Enlace | ColorZilla Firefox Add-ons

Entradas relacionadas:

Twitter cambia su interfaz

ikcam — Fri, 19 Sep 2008 01:45:56 +0000

El día de hoy, Twitter repentinamente cambió toda su apariencia a una que algunos consideran mejor y que otros las consideran peor (dependiendo de gustos) personalmente me gusta y me llama más la atención que la anterior interfaz.

Twitter ha realizado todo un conjunto de modificaciones a su plantilla por defectos, cambios que detallaré a continuación:

Las pestañas han cambiado de lugar, pues ahora se encuentran en el lado derecho del sitio.

Ajax para una mayor velocidad, las actualizaciones (simplemente haciendo clic sobre “Home”) se hacen a través de esta tecnología evitando así el tener que refrescar la página constantemente (aunque seguramente los seguiremos haciendo por costumbre)
Iconos de control de tweets, los íconos de borrar, replicar y agregar a favoritos a primera vista no se ven pues aparecerán al arrastrar el cursor sobre un tweet.

“Ligero, elegante y simple”; líneas sencillas y espaciado entre tweets, el logo lo han reducido unos cuantos píxeles, el sistema de actualización de tweets, la esquinas ahora están redondeadas (que no se verán en Internet Explorer pero si en Safari, Firefox y hasta en Chrome)

Opciones de personalización de diseño, para aquellos que no les guste el diseño, se han incluido plantillas ya diseñadas a las que podemos modificar el fondo o cambiar su combinación de colores.

La pestaña “Archivo” ha sido removida, pues para poder visualizar nuestro archivo es posible hacerlo desde la URL de nuestro perfil de Twitter.

De momento no son más que cambios visuales pero según se menciona en el post oficial con los cambios en Twitter, esto no es más que el comienzo para un serie de cambios que se vienen para el sitio:

…it was an investment in the future. We plan to have more tabs, and we’d run out of room putting them along the top. This was the driving factor for this redesign, but you won’t see all the benefits until a future release (hopefully, very soon!).

Personalmente me gusta como es Twitter ahora y no creo que requiera más pestañas o funciones que lo hagan más complicado.

Enlace | Twitter
Vía | Twitter Blog

Entradas relacionadas:

Imágenes de lo que sería el nuevo diseño de Hi5

ikcam — Wed, 27 Aug 2008 02:09:21 +0000

Bueno información concreta no existe pero imágenes respecto a estos cambios que posiblemente sufrirá Hi5 en los siguientes días pueden darle otro rumbo a esta red social que a pesar de no ser una con más usuarios alrededor del mundo es la red social más usada en muchos países de Latinoamérica.

Las imágenes han sido capturadas por @killingbytz autor en Walhez quien vía Twitter estuvimos analizando no solo el nuevo diseño sino también algunos nuevos agregados a Hi5.

En la siguiente imagen podemos apreciar la modificación de la barra de navegación de Hi5 a un color azul muy similar al tono de Facebook que se ha vuelto muy popular como mencionó Cesar Soplín de Indexante anteriormente. También podemos hacer notar la modificación de la posición de los módulos con información dándole a Hi5 un parecido en cuanto a estructura similar a la de Facebook.

En cuanto a la visualización de un perfil se ha realizado la modificación de la barra de navegación de Hi5, la cual es la misma en todas las sub-páginas de Hi5; sin embargo, es fácil observar que el reciente agregado que muestra lo que el usuario está haciendo se asimila mucho al de Facebook.

Eso no es todo recientemente se ha cambiado el anterior favicon por uno nuevo que da una mejor apariencia.

Finalmente, lo peor, perdón una de las últimas cosas que hemos notado que ha agregado es una versión para celulares la cual ha sido probada con el fin de ver como se ve en el iPhone con resultados estrepitosamente malos, debo admitirlo. Una imagen vale más que mil palabras:

Pueden visitar el modo móvil de Hi5 en: http://m.hi5.com

No se sabe cuando se aplicarán los cambios en su diseño pero parece que será pronto y que se irán dando poco a poco.

Hi5 sin duda alguna está teniendo problemas de identidad en este momento y no es la primera vez que los tiene según sé. Pues las últimas modificaciones que ha ido agregando han sido por asimilarse cada vez más a lo que actualmente es Facebook, sin embargo los usuarios ni los mismos términos, reglas y/o condiciones de uso que posee no hacen que esta red social sea la número 1 de la red de redes , ni la número 2. Espero que todo cambio sea para bien y por el bien de los usuarios ya que la seguridad, la privacidad y sobretodo el respeto es donde más énfasis se debería poner.

Agradecimiento a @killingbytz de Walhez por las imágenes y algunos datos extras.

Enlace | Hi5

Entradas relacionadas:

Crear esquinas redondeadas con CornerShop

ikcam — Tue, 19 Aug 2008 23:48:35 +0000

CornerShop con la cuál podemos simplificar minutos en crear las esquinas redondeadas para nuestro proyecto en alguna aplicación de diseño como Photoshop o Corel Draw.

Es muy fácil y sencilla de usar ya que únicamente tenemos que ingresar 4 datos y listo. Los datos necesarios para realizar el proceso son el código de color del plano y de fondo; la medida de la esquina (en píxeles) que se desea crear y también no menos importante, si deseamos que alguno de los colores de plano o fondo sean transparentes.

Y si con ello no basta luego de haberse creado las 4 imágenes (1 por cada esquina) esta utilidad nos muestra un ejemplo de como agregar estas esquinas en nuestro código fuente, tanto en la CSS como en la HTML.

Una herramienta muy útil para ahorrarnos unos minutos y darle algo más de estilo a los sitios web ya que se ha vuelto una tendencia el diseño de los sitios con estas formas.

Enlace | CornerShop
Vía | Geeks Room