Xyberneticos » Programacion

34 hojas de trucos para diseñadores y desarrolladores web

Nikko — Mon, 23 Nov 2009 12:07:32 +0000

Como diseñadores web solemos pasar gran parte de nuestro tiempo programado y utilizando diversos programas de diseño, por momentos descubrimos que es realmente difícil recordar cada uno de los atajos y combinaciones de teclas para cada programa. Pero con 34 cheat sheets for web designers and developers, un fabuloso artículo que descubrí, algunas cosas serán aun más fáciles de recordar. En este artículo se presentan 34 hojas de trucos esenciales para los programas más populares relacionados al desarrollo web.

Enlace 34 cheat sheets for web designers and developers

Interface Slideshow

Nikko — Sun, 31 Aug 2008 20:25:02 +0000

Interface Slideshow, otra agradable alternativa para mostrar nuestras imágenes en diapositivas y con desvanecimiento. Sin duda la cantidad de opciones que se nos suelen presentar son tantas, que hace muy difícil la elección de uno a la hora de implementarlo en nuestros proyectos. Soy de esos que creen, que aunque suelan verse muy similar a otros, todos poseen diversas ventajas y pequeñas cosas que llamaran más la atención uno de otro. Sea en la forma de implementarse, la librería en la cual se basa, las diferentes opciones que nos presenta y demás. Interface Slideshow utiliza jquery y un poco de css para dar el estilo que veremos en el ejemplo. Creo que les gustara.
Ver Demo -Interface Slideshow

Uso:

Lo primero será descargar ambas librerías, jQuery 1.1.2 19 kb junto con Interface 1.2 146kb alojarlo en nuestro servidor o la carpeta que contiene todas nuestras librerías y realizar la llamada a ellos desde nuestro encabezado. Dentro de nuestras etiquetas < Head >…

PLAIN TEXT

JavaScript:

Un poco de CSS

PLAIN TEXT

CSS:

#slideShow1
{
width: 300px;
height: 280px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
margin: 10px;
}
#slideShow2
{
width: 300px;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
margin: 10px;
}
.pagelinks a
{
font-weight: bold;
color: #666;
}
.slideCaption
{
background-color: #FFFFCC;
padding: 4px;
text-align: center;
font-weight: bold;
}
.pagelinks a.activeSlide
{
color: #f90;
}
/* this is for IE so the prev/next links can be hovered*/
.nextSlide,.prevSlide
{
background-image: url(images/spacer.gif);
}
.nextSlide:hover
{
background-image: url(images/nextslide.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
.prevSlide:hover
{
background-image: url(images/prevslide.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
.inputsTooltip
{
border: 1px solid #ccc;
background-color: #eee;
padding: 4px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}
#tooltipURL
{
display: none;
}

Estructura de ambos ejemplos

PLAIN TEXT

HTML:

PLAIN TEXT

JavaScript:

Ver Demo -Mas info Interface Slideshow

Resaltar productos con MooTools

Nikko — Mon, 21 Jul 2008 03:31:12 +0000

Create a Simple, Powerful Product Highlighter with – Una bonita técnica que podremos utilizar en nuestros proyectos web para crear simples y potentes secciones resaltadas con MooTools. Este tutorial te permitirá conocer un poco esta técnica y las ventajas de utilizar MooTools.

Ver Demo - Descarga - Mas info Create a Simple, Powerful Product Highlighter with MooTools

Instalacion:

PLAIN TEXT

JavaScript:

un poco de estilo

PLAIN TEXT

CSS:

contenido

PLAIN TEXT

HTML:

Mas info Create a Simple, Powerful Product Highlighter with MooTools

10 scripts para generar estadísticas

Nikko — Thu, 19 Jun 2008 05:27:43 +0000

Si te encuentras trabajando en algún proyecto online en el cual deberás montar graficas de estadísticas u otro tipo de información, pero aun no sabes de que modo las diseñarlas, creo q este articulo denominado 10 Free Chart Scripts será realmente útil para ti, es ni mas ni menos que una pequeña recopilación de agradables script basados en JavaScript, Flash, Silverlight, y Java, que te permitirán crear todo tipo de graficas. Básicamente son solo 10 las opciones que encontraremos, pero considero que son más que suficiente. Todas son realmente muy diferentes, en cuanto a diseño y como montarlas en nuestros proyectos online, lo que seguramente significa que encontraras la forma mas adecuada de implementar algunas de estas graficas, al proyecto en el cual te encuentras trabajando.

Enlace 10 Free Chart Scripts

Trucos útiles para wordpress

Nikko — Mon, 16 Jun 2008 20:42:01 +0000

No hay dudas de lo que significa hoy para todo desarrollador wordpress, esta plataforma que se ha convertido en una de las más populares en Internet, y la que solemos utilizar frecuentemente sin importar cual sea el proyecto en el cual trabajaremos. Siempre mediante unas líneas de código adicionales, WordPress se adaptara a lo que necesitemos. Evidentemente trabajar con frecuencia con wordpres nos lleva cada día a aprender nuevos trucos, tips, o formas de solucionar ciertos problemas de la forma mas rápida y practica, pero es obvio que es tanta la información que es imposible recordar cada uno de ellos en el momento que lo estamos necesitando. Seguramente es lo que te pasara a ti en algún momento al trabajar en el diseño de tu próximo theme wordpress. La gente de Stylizedweb estos días ha despertado pensando en ello, y ha publicado un post que nos será muy útil en ocasiones. En el encontraremos fragmentos reutilizables de códigos que todos necesitamos de vez en cuando.El artículo incluye tips para:

Realización de una plantilla
Invertir orden de comentarios
Crear post Destacados
Incluir un archivo específico
Etiquetas condicional
Invertir el orden de post
Caracteres especiales
Y mas…

Mas informacion Useful wordpress tricks
Ejemplo: Reverse comment order

PLAIN TEXT

PHP:

$comments = array_reverse($comments, true); ?>
foreach ($comments as $comment) : ?>
content here
endforeach; ?>

jQuery 1,5 UI: Mas Efectos, API, y Themeroller

Nikko — Tue, 10 Jun 2008 05:22:39 +0000

jQuery IU ha lanzado una importante actualización jQuery 1,5 UI. Realmente con muchos cambios. API que eliminan el 95% de nuestros métodos expuestos, y mantiene un solo método sobrecargado por el plugin. Todos los efectos conocidos desde script.aculo.us se han añadido (pliegue, diapositiva, etc), pero otro gran numero de efectos mas de traspaso, clip, escala. Etc. Mas info y descarga jQuery 1,5 UI - Ver Demos

Pero lo mas practico es sin duda Themeroller, una interfaz de usuario donde podremos diseñar y construir nuestros propios themes personalizados, listo para ser descargados. Algo como Tabs, acordeones, recolectores de fechas, etc. Tan simple como ajustar los colores, fuentes y texturas a gusto personal, descargar y usar. Y lo mejor, podrás ver cada cambio que hagas en tiempo real u online.

Enlace Themeroller

via ajaxian - css-tricks

Menu animado basado en Mootools

Nikko — Wed, 23 Jan 2008 05:53:36 +0000

Si les agradan los Menú animados para sus proyectos online, y específicamente el menú que vemos en el sidebar del sitio oficial de mootools, quizás este post Mootools animated sidebar menú les pueda ser útil. Es un tutorial del cual podremos descargar los ejemplos listos para ser usados en nuestros proyectos online. El pack de este menú basado en Mootools, contiene todo el código fuente, moofx.js y todo archivo que permitirá obtener los efectos visuales.

Ver Demo - Descarga Demo

Codepress, Editar código online y plugin para evitar errores

Nikko — Fri, 17 Aug 2007 04:19:06 +0000

Codepress, es un editor de código fuente que podremos integrar a nuestras web facilmente. Básicamente lo que nos permite Codepress es editar nuestros códigos de manera online, coloreando la sintaxis para que los lenguajes que vayamos escribiendo sean más fáciles de leer a medida que lo vamos desarrollando.
Características
• Resaltado de sintaxis en tiempo real
• Soporta ASP, C#, CSS, HTML, Java, JavaScript, Perl, PHP, Ruby, SQL y VBScript.
• Fragmentos pre-armados de código (snippets). Por ejemplo, en modo PHP, tecleamos “switch” y presionamos TAB y se genera la estructura del switch lista para rellenar.
• Autocompletado de código.
• Diversos atajos de teclado.
• Posibilidad de tener múltiples ventanas.

Demo - Descarga - Web Oficial Codepress - Via bitslab

Codepress Plugin wordpress

WordPress Plugin Code Editor es un plugin basado en Codepress que nos permite resaltar todas las sintaxis de los diferentes lenguajes utilizados en nuestra plataforma wordpress. Por ejemplo cuando deseamos corregir algo de nuestra hoja de estilo, de nuestro header, etc, La idea con este plugin es tratar de que puedas leer o ubicar todo de una forma más sencilla y puedas así localizar errores de sintaxis fácilmente o evitarlos.

Instalación:

Descargar WordPress Plugin Code Editor - otro enlace opcional Aqui
Descomprimir el fichero
Alojarlo en la carpeta de los plugin “/wp-content/plugins/” todo el contenido
Activar desde el menú administrador

Built With: Revela que tecnología usa un sitio web

Nikko — Thu, 16 Aug 2007 19:24:02 +0000

Built with es una herramienta online no apta para curiosos, Con ella podemos indagar sobre otros blog y ver que tecnología se encuentran utilizando. Que sistema de sindicacion de contenidos implementan, la plataforma en la que esta desarrollado el sitio web, el sistema de publicidad que utiliza, visitas aproximadas, los scripts incluidos, y montón de cositas mas. El servicio es muy sencillo, solo debemos ingresar la URL del sitio, y esperar los resultados arrojados por Built with.
Los sitios mas consultados han sido google y digg, no es para menos ¿no?

Enlace Built with

Via wwwhatsnew | blogmundi