Xyberneticos » Elias http://xyberneticos.com Desarrollo Web, Diseño, Recursos, Wordpress, Themes Fri, 04 Nov 2011 14:10:38 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 liScroll, muestra mensajes horizontales en movimiento http://xyberneticos.com/index.php/2008/01/04/liscroll-muestra-mensajes-horizontales-en-movimiento/ http://xyberneticos.com/index.php/2008/01/04/liscroll-muestra-mensajes-horizontales-en-movimiento/#comments Fri, 04 Jan 2008 15:24:23 +0000 Elias http://xyberneticos.com/index.php/2008/01/04/liscroll-muestra-mensajes-horizontales-en-movimiento/ Para eso sirve liScroll, un plugin basado en jQuery con el cual podremos trasformar una lista de elementos desordenados en un “desplazador” horizontal, para noticias, eventos, noticias destacadas o lo que queramos. Aquí tenéis una demo. Vamos a ver como implementarlo.

Lo primero es descargar el script y jquery (usar botón derecho>guardar enlace como en ambos casos) y crear un .html, guardarlo con el nombre que prefiráis. Seguido incluimos las dos librerías entre las etiquetas head /head:

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.li-scroller.1.0.js"></script>

Creamos la estructura para llamar al script, también entre head /head:

PLAIN TEXT
JavaScript:
<script type="text/javascript">
$(function(){
    $("ul#ticker01").liScroll();
});
</script>

Y los estilos que nos proporcionan (para cambiar el aspecto esto será lo que modificaremos)

PLAIN TEXT
CSS:
<style type="text/css">
/* liScroll style declarations */

.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff;
width: 738px;
height: 27px;
margin: 0 auto;
padding: 0
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
</style>

Finalmente creamos la estructura html entre body /body:

PLAIN TEXT
HTML:
<ul id="ticker01">
    <li><span>10/10/2007</span><a href="#/ogt/content/news/News183.complete">The first thing that most Javascript programmers</a></li>
    <li><span>10/10/2007</span><a href="#/ogt/content/news/News175.complete">End up doing is adding some code</a></li>
    <li><span>10/10/2007</span><a href="#/ogt/content/news/News177.complete">The code that you want to run</a></li>
    <li><span>08/10/2007</span><a href="#/ogt/content/news/News176.complete">Inside of which is the code that you want to run</a></li>
    <li><span>08/10/2007</span><a href="#/ogt/content/news/News178.complete">Right when the page is loaded</a></li>
</ul>

Si queremos aumentar o disminuir la velocidad en la que se muestran los elementos, añadiremos la función “travelocity”, quedando de esta manera:

PLAIN TEXT
JavaScript:
$(function(){
    $("ul#ticker01").liScroll({travelocity: 0.15});
});

Enlace liScroll (a jQuery News Ticker made easy) 1.0

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC

]]> http://xyberneticos.com/index.php/2008/01/04/liscroll-muestra-mensajes-horizontales-en-movimiento/feed/ 2 Slopsbox, cuentas de correo desechables http://xyberneticos.com/index.php/2008/01/04/slopsbox-cuentas-de-correo-desechables/ http://xyberneticos.com/index.php/2008/01/04/slopsbox-cuentas-de-correo-desechables/#comments Fri, 04 Jan 2008 15:07:48 +0000 Elias http://xyberneticos.com/index.php/2008/01/04/slopsbox-cuentas-de-correo-desechables/ slopsbox

Otro servicio que se une a los muchos que existen con características y objetivos similares. La función de Slopsbox no es otra que la de poder crear cuentas de correo desechables, para por ejemplo usarlas en registros a servicios, sin dar nuestra verdadera dirección y así no ser victimas potenciales del odiado spam. Solamente tendremos que inventarnos nuestra dirección, nombre@slopsbox.com pudiendo escoger entre varios dominios más. Un punto diferente es que tenemos la opción de usar nuestro propio dominio cambiando la DNS en la configuración. Seguidos estos simples pasos solamente nos queda entrar indicando nuestra dirección y tipeando el captcha, a continuación veremos los mensajes que hemos recibido, que serán eliminados en 24 horas. Así de simple.

Via Genbeta
Enlace Slopsbox

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC

]]> http://xyberneticos.com/index.php/2008/01/04/slopsbox-cuentas-de-correo-desechables/feed/ 0 Variado DOS: Fuentes free y Slideflow http://xyberneticos.com/index.php/2008/01/03/variado-dos-fuentes-free-y-slideflow/ http://xyberneticos.com/index.php/2008/01/03/variado-dos-fuentes-free-y-slideflow/#comments Thu, 03 Jan 2008 18:42:40 +0000 Elias http://xyberneticos.com/index.php/2008/01/03/variado-dos-fuentes-free-y-slideflow/

Segunda entrega de recursos varios que han aparecido por la red (estas entregas continuarán en el futuro).

El primero de ellos es un recopilatorio salido de desingvitality con 10 sitios donde descargar infinidad de fuentes gratuitas, de todos los tipos, estilos y tamaños que nos podamos imaginar, cumpliendo todos los sitios la premisa de ser de alta calidad.
[Enlace: Screw Paying: The 10 Free Font Websites Every Designer Should Save]

El segundo va de galerías, tema tratado en numerosas ocasiones por nikko. Su nombre es Slideflow, galería basada en javascript y muy similar a ImageFlow, con unos resultados vistosos y no complicada de implementar. Además de todo esto incluye un archivo atn (acciones para photoshop), para poder modificar nuestras imágenes y dejarlas listas para usar en Slideflow.
[Enlace: AJAX Image Gallery powered by Slideflow (like Cover Flow)]

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC

]]> http://xyberneticos.com/index.php/2008/01/03/variado-dos-fuentes-free-y-slideflow/feed/ 0 Completo paquete de herramientas para diseño web http://xyberneticos.com/index.php/2007/12/19/completo-paquete-de-herramientas-para-diseno-web/ http://xyberneticos.com/index.php/2007/12/19/completo-paquete-de-herramientas-para-diseno-web/#comments Wed, 19 Dec 2007 19:49:11 +0000 Elias http://xyberneticos.com/index.php/2007/12/19/completo-paquete-de-herramientas-para-diseno-web/

Genial descubrimiento de webintenta (como siempre) esta completa utilidad para el diseño web. Se trata de “Design” que es un paquete de utilidades muy buenas a la hora de diseñar un sitio web compuesto por tres herramientas: Rejilla, Regla, Unidad y Cruz. Para empezar a usarlo lo primero es instalarlo en unos sencillos pasos (funciona con FireFox 2, InternetExplorer7, Safari 2.0.4 y Opera 9.2). Entramos en la web de la aplicación y añadimos el enlace del botón “Design” a nuestros favoritos, bien arrastrándolo hasta la barra favoritos o haciéndolo manualmente. Nos dirigimos al sitio en el que queremos hacer uso de las herramientas y una vez cargado picamos en el marcador “Desing” que hemos guardado antes. Finalmente nos saltará el panel de “Design” con las cuatro herramientas y picaremos sobre la que queramos usar.
La función de Grid es la de poner una rejilla sobre el sitio e incorpora multitud de opciones. Rule mostrará una regla con una opción tan interesante como es la de colocar guías. Unit nos sirve para hacer una medición entre dos puntos que le demos. Finalmente queda Crosshair que nos convierte el puntero en una cruz mostrando las coordenadas x e y del lugar en el que coloquemos el centro.

Enlace: Design
Visto en webintenta

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC

]]> http://xyberneticos.com/index.php/2007/12/19/completo-paquete-de-herramientas-para-diseno-web/feed/ 3 Variado UNO: Texturas y Esqueletos CSS http://xyberneticos.com/index.php/2007/12/18/variado-uno-texturas-y-esqueletos-css/ http://xyberneticos.com/index.php/2007/12/18/variado-uno-texturas-y-esqueletos-css/#comments Tue, 18 Dec 2007 21:45:16 +0000 Elias http://xyberneticos.com/index.php/2007/12/18/variado-uno-texturas-y-esqueletos-css/

Un pequeño “revuelto” de recursos que seguro nos vendrá como anillo al dedo en algún momento. Concretamente sobre dos cosas, la primera una pequeña ración de texturas desde bittbox, 4 en total a resolución de 2005x3000 imitando diferentes tipos de papeles. Las imágenes están alojadas en Flickr, entraremos, picaremos en la lupa con el más y escogeremos que tamaño queremos descargar.
[Enlace: Free High Res Grungy Paper Textures]

La segunda es un estupendo recopilatorio hecho por Vandelay con 22 recursos para facilitarnos el trabajo a la hora de comenzar algún proyecto basado en css. En el recopilatorio hay varios sitios para descargar plantillas en css, los esqueletos y sitos que nos proporcionan algún tipo de herramienta para crearlos nosotros mismos con los tamaños y disposición que queramos. [Enlace: 22 Resources to Easily Create CSS Layouts]

Que lo disfruten sus mercedes.

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC

]]> http://xyberneticos.com/index.php/2007/12/18/variado-uno-texturas-y-esqueletos-css/feed/ 2 NanoScan, el primer analizador de virus instantáneo http://xyberneticos.com/index.php/2007/12/13/nanoscan-el-primer-analizador-de-virus-instantaneo/ http://xyberneticos.com/index.php/2007/12/13/nanoscan-el-primer-analizador-de-virus-instantaneo/#comments Thu, 13 Dec 2007 13:25:22 +0000 Elias http://xyberneticos.com/index.php/2007/12/13/nanoscan-el-primer-analizador-de-virus-instantaneo/ nanoscan

De la mano de Panda llega esta potente herramienta online con la que matan dos pájaros de un tiro, mejoran considerablemente en lo que fallan otros analizadores de virus y demás amenazas, la velocidad y le dan un enfoque muy 2.0. Según sus cifras detecta más de 2.718.070 virus, spyware y otras amenazas, descubre amenazas que aún no conoce gracias a la tecnología TruPrevent, en un minuto se descarga y realiza el análisis y ocupa solamente unos 400K. La definición exacta:

Es un analizador "instantáneo" de virus, spyware y otras amenazas. En menos de un minuto es capaz de detectar una enorme cantidad de amenazas que puedan estar ejecutándose ahora mismo en tu PC. De hecho no te sorprendas si encuentra virus, spyware o troyanos activos en tu PC, aunque tengas antivirus actualizado.

Lo he probado y efectivamente es muy rápido, esto dependerá también de nuestra conexión y las características de nuestro PC. Esta velocidad la consiguen nutriéndose de toda la información de Panda, solamente instalamos una pequeña extensión y el resto sale de Panda, no descargamos ningún base de firma de virus ni similares. Como decía, también le han dado un enfoque 2.0, creando un blog y teniendo la opción de contactar con ellos para dar ideas, nuevas funcionalidades o la posibilidad de incorporar NanoScan en nuestro sitio (mucho me temo que esto solo se podrá si pagamos). Solamente les falta liberar su API. Todo se andará.

Enlace NanoScan

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC

]]> http://xyberneticos.com/index.php/2007/12/13/nanoscan-el-primer-analizador-de-virus-instantaneo/feed/ 5 Centrando en el centro http://xyberneticos.com/index.php/2007/11/14/centrando-en-el-centro/ http://xyberneticos.com/index.php/2007/11/14/centrando-en-el-centro/#comments Wed, 14 Nov 2007 21:29:05 +0000 Elias http://xyberneticos.com/index.php/2007/11/14/centrando-en-el-centro/ ¿Qué?. Ahora lo entenderemos todos. Supongamos que necesitamos centran un div o imagen en el centro mismo de la pantalla (por ejemplo el logotipo de una web en la pantalla de presentación para el sitio) y no damos con la solución.CSS Tricks nos la da. Lo más lógico es crear una clase para esa imagen o div que queremos centrar (si es un div tenemos que darle un ancho y un alto fijo), proporcionando un porcentaje superior del 50% e izquierdo de otro 50%:

PLAIN TEXT
CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
}

Pero esto como muchos habrán deducido no nos vale, porque lo que hace es centrar la esquina superior izquierda de la imagen o div en el centro de la pantalla, pero no el centro de la imagen en el centro de la pantalla.

not-centered-csstrick.gif

*Imagen de CSS Trick

La solución es simple, añadiremos un margen superior negativo dándole como medida la mitad de la altura que tenga la imagen o div y otro margen izquierdo negativo dándole como medida la mitad de la anchura de la imagen o div:

PLAIN TEXT
CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}

 

centered-csstrick.gif

*Imagen de CSS Trick

¿Solucionado? No, porque IE6 interpreta como le da la gana, así que tendremos que añadir a todo lo anterior un hack en nuestra hoja de estilos:

PLAIN TEXT
CSS:
*html .centered {
position:absolute
}

Ahora sí, ya tenemos la imagen o div centrado en el centro de la pantalla para IE6, IE7 y FireFox.

ACTUALIZACIÓN: Todo lo dicho anteriormente sigue siendo válido pero actualizamos para explicar como eliminar el hack (anieto2k nos lo comentó en los comentarios de esta misma entrada pero se perdieron debido a la mudanza del blog), solo tendremos que cambiar el valor de "position" poniéndolo en "absolute". Así quedaría el código:

PLAIN TEXT
CSS:
.centered {
position: absolute;
top: 50%;
left: 50%;
}

Para el segundo ejemplo sería lo mismo, cambiar la propiedad de position por absolute. Con esto evitamos el uso de ningún tipo de hack.

Autoría original del tutorial: CSS Tricks Títuolo original: Quick CSS Trick: How To Center an Object Exactly In The Center

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC

]]> http://xyberneticos.com/index.php/2007/11/14/centrando-en-el-centro/feed/ 9 LogoTemplater, plantillas vectoriales de logotipos http://xyberneticos.com/index.php/2007/11/14/logotemplater-plantillas-vectoriales-de-logotipos/ http://xyberneticos.com/index.php/2007/11/14/logotemplater-plantillas-vectoriales-de-logotipos/#comments Wed, 14 Nov 2007 15:25:13 +0000 Elias http://xyberneticos.com.elserver.com/index.php/2007/11/14/logotemplater-plantillas-vectoriales-de-logotipos/ Vamos a seguir engordando nuestra lista de sitios interesantes. En esta ocasión se trata de LogoTemplater, creado por Vlastimil Svoboda profesional del diseño especializado en logotipos. En el nos proporcionan 6 paquetes con imágenes en formato vectorial pensadas todas ellas para servirnos como punto de partida en el diseño de nuestros propios logos para diferentes proyectos, tanto profesionales como personales, pudiendo variar fácilmente el tamaño, colores y demás factores que seguro nos harán falta modificar para acomodarlos a nuestros diseños.

Pack Aremio - 5 Logotipos en formato .ai y .eps - Descargar

1.jpg

Pack Buzzverse - 4 Logotipos en formato .ai y .eps - Descargar

2.jpg

Pack Eimia - 4 Logotipos en formato .ai y .eps - Descargar

3.jpg

Pack Zoomopia - 4 Logotipos en formato .ai y .eps - Descargar

4.jpg

Pack Vinti - 4 Logotipos en formato .ai y .eps - Descargar

5.jpg

Pack Centible - 4 Logotipos en formato .ai y .eps - Descargar

6.jpg

Enlace: logotemplater.com

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC

]]> http://xyberneticos.com/index.php/2007/11/14/logotemplater-plantillas-vectoriales-de-logotipos/feed/ 0 De iconos, PixelResort y Fast Icon http://xyberneticos.com/index.php/2007/10/23/de-iconos-pixelresort-y-fast-icon/ http://xyberneticos.com/index.php/2007/10/23/de-iconos-pixelresort-y-fast-icon/#comments Wed, 24 Oct 2007 00:26:50 +0000 Elias http://www.xyberneticos.com/index.php/2007/10/23/de-iconos-pixelresort-y-fast-icon/ Empezamos por el último, para llevar la contraria. Fast Icon es un sitio bastante conocido por la calidad de sus iconos, tanto los que están en venta como los paquetes freeware que nos regala de vez en cuando. Uno de esos packs es el que han liberado hace pocos días, formado por 8 iconos disponibles para Mac, Linux y Windows formados por unos simpáticos muñecos, “Cloth Dolls”. Gracias a Dirceu Veiga (responsable del sitio) que me avisó de este nuevo pack.

Descargar: Cloth Dolls Icons

El segundo lo ví en webintenta que ha vuelto a publicar después de algún tiempo de parón (todos para allí que es un gran blog) y es el sitio web del diseñador de iconos Michael Flarup donde nos enseña una muestra de sus trabajos pudiendo descargar algunos de ellos, concretamente tres paquetes de iconos y tres wallpapers ambas cosas de una calidad excelente.

Descargar: Pixelicious

]]> http://xyberneticos.com/index.php/2007/10/23/de-iconos-pixelresort-y-fast-icon/feed/ 2 Videobox, muestra videos en dialogo externo http://xyberneticos.com/index.php/2007/10/23/videobox-muestra-videos-en-dialogo-externo/ http://xyberneticos.com/index.php/2007/10/23/videobox-muestra-videos-en-dialogo-externo/#comments Tue, 23 Oct 2007 23:43:01 +0000 Elias http://www.xyberneticos.com/index.php/2007/10/23/videobox-muestra-videos-en-dialogo-externo/

Seguro que casi todos conocéis el script Lightbox (del que también hay plugin para wordpress) con el cual se pueden mostrar imágenes en un dialogo externo a la página, muy útil por lo “limpio” de los resultados en vez de tener que hacerlo con un tosco pop-up. Videobox hace exactamente lo mismo pero para videos, es tan parecido a Lightbox que está basado en él y está hecho con la misma librería, mootools, añadiendo el uso de swfobject para gestionar los vídeos. La instalación es simple, descargar los archivos necesarios, llamarlos desde el header y usar añadiendo en el enlace a las imágenes la etiqueta rel="vidbox". En la página viene explicado, si no sabes ingles con el traductor de google será suficiente para entender lo que dicen. Se puede usar con vídeos de YouTube, Metacafe, Google Video e iFilm.

Enlace: Videobox: Lightbox for videos, Youtube, Metacafe, Google Video, iFilm

]]> http://xyberneticos.com/index.php/2007/10/23/videobox-muestra-videos-en-dialogo-externo/feed/ 8