Infoadis » HTML

Convierte tu navegador en un bloc de notas

forber — Wed, 30 Jan 2013 12:11:13 +0000

Te gustaría usar tu navegador como editor de texto o bloc de notas? Pega este código en la barra de direcciones y listo..

data:text/html,

Yo por ahora solo lo he usado en Google Chrome.

Juego del Arkanoid en html5

forber — Mon, 04 Apr 2011 13:07:23 +0000

Arkanoid html5

Aquí os dejo una versión bastante curiosa del juego Arkanoid para navegadores que soporte html5. Lo he probado en Firefox4 y Google Chrome y no tiene desperdicio

Link: http://hakim.se/experiments/html5/breakdom/

HTML Instant: un editor instantáneo

forber — Sun, 17 Oct 2010 08:00:49 +0000

Os dejo aquí un link de un Editor HTML, donde podeis hacer vuestras pruebas de código (no muy complicadas).
En fin, una aplicación más que demuestra que nada es imposible en la red.

Link: HTML Instant

Cambiar fuente de tu página web con Cufon

forber — Fri, 01 Oct 2010 07:20:59 +0000

Si estas harto de que tu web siempre tenga la misma letra que el resto de webs, se ha desarrollado hace ya un tiempo con un script llamado Cufon.

Ventajas:

Tiene varias ventajas como:

Los usuarios de tu web no tienen porque tener instalada la fuente en cuestión
Es fácil de instalar y utilizar
Totalmente valida para los buscadores

¿Como añadirlo a nuestra web?

Ahora os preguntareis, como instalo esto en mi web.

Lo primero es bajarte aquí la librería fuente y pones el siguiente código en el para que todo marche sobre ruedas.

Como no podemos usar nuestras fuentes TTF que tenemos instalado en nuestro sistema operativo, debemos convertirla a un formato especial desde la propia página de cufon usando su conversor automático nos generará un fichero .js de deberemos añadir también a nuestro:

Por último, deberemos indicarle que etiquetas html queremos reemplazar las nuevas letras, se aconseja siempre que sean los titulares por darle mas agilidad, pero bueno haya que haga cada uno lo que quiera.

En este ejemplo lo que se pretende es sustituir las etiquetas

con la nueva fuente.

Algunos problemas encontrados:

Por ahora solo me he encontrado con un problema, y es que ni acentos, las ñ, etc.. (me refiero al español) a veces no se ven, esto es debido a que puede que tu fuente no soporta estos caracteres especiales. Esto no es un fallo del sistema, esto es que como casi todas las fuentes que existen en ingles son inglesas y contemplan estos caracteres.

Destruye una página web

forber — Thu, 30 Sep 2010 17:38:28 +0000

Espero que no esteis aquí para destrozar mi página web, pero si algun día os ha entrado ganas he encontrado este pequeño script donde podreis jugar al Asteroid y disparar contra la página web…

Pulsa aquí para activar el juego

Visto en Microsiervos

Tabla periódica HTML5

forber — Mon, 06 Sep 2010 11:56:19 +0000

Tabla periódica HTML5

Publican en Microsiervos un enlace interesante y a la vez curioso de una página web en el que nos muestra los elementos de HTML en forma de tabla periódica. Además podeis poner cualquier web y hace un rastreo, iluminando los elementos que usa y en cuantos números, una web curiosa por lo menos…

Link: Periodic Table of the Elements – Josh Duck

Alternativa a iluminar celdas usando solo CSS

forber — Tue, 03 Jun 2008 18:42:20 +0000

Como ya hace unos días dije como iluminar filas y columnas con jquery, pues bien, lamentablemente para webs con un panel de administración que suelta más de 500 filas y mas de 11 columnas, es un efecto poco útil y que además ralentiza muchísimo la web. Así que he buscado una solución mas “caserilla” pero hace el efecto óptico deseado y es el de iluminar la fila entera y con otro color iluminamos la celda por donde pasa el ratón.

La solución es sencilla bajo mi punto de vista y es usando una pequeña hoja de estilos, no la voy a hacer tan complicada como la tengo yo pero el efecto es el mismo…

Así que, saltándome los pasos de que ya sabéis crear una tabla os pongo el estilo para que os salga algo como en la foto inicial…

tr:hover{
    background-color: #FFFFCC; /* amarillo */
}
tr td:hover{
    background-color: #FF9900; /* naranja */
}

Con esto conseguimos en amarillo iluminar toda la fila y en naranja iluminar la celda por donde pasamos el ratón.

Ya, ya se que no es lo mismo que la otra ilumina toda la columna y no es lo mismo, pero bueno me he buscado otros recursos para poder saber que significa en esa celda cuando te encuentras en medio del océano (osea en la mitad de los 500 registros) y no sabes si subir o bajar

Solo os digo que de 21seg de carga ha bajado a 15s. Lo se, parece un montón de segundos pero seguro que pronto conseguiré bajar el tiempo y con mas registros

Espero que os haya servido para algo y si tenéis alguna duda dejar vuestros comentarios.

Como iluminar filas y columnas con jquery

forber — Fri, 23 May 2008 13:44:42 +0000

Hace tiempo que tenia en mente trastear con un plugin basado en jquery llamado tablehover que mas o menos viene a decir iluminar tablas. Esta claro que hay muchas formulas de ilumuniar las tablas cuando pasamos el raton y que algun dia lo explicaremos todas las opciones que hay.

Lo que pasa es que aveces iluminar el horizontal no es suficiente, asi que en nuestro proyecto de DulcesFamosas este sistema dejo de ser util hace tiempo, debido a la gran cantidad de lineas de datos y columnas, para mostrar informacion en el panel de administracion y una solucion era reducir datos, pero la cantidad de datos que aun desprendia esa solucion no era suficiente, asi que hace tiempo que encontre este plugin para jquery y me parecio bastante util.

Ahora voy a intentar explicaros un poco de que va, ya que veo que la documentacion esta incompleta y para muchos al estar en ingles la web original del creador pues aumenta las dificultades de poder implementar esto en tu sitio web…

Lo primero y muy importante, debes cargar la ultima version de jquery
Segundo y menos importante, debes bajarte la ultima version que tenga el creador del plugin
Despues mirar tambien las demo del plugin. Ver demo

Ahora despues de que ya hayais seguido estos pasos sencillos y habeis visto la demo yo he escogido para mi sistema el ejemplo 3, osea ilumina en vertical, ilumina en horizontal e ilumina la celda donde tienes ubicada el raton.

* Doy por supuesto, que en vuestro script ya teneis bien linkado los *.js de jquery y el plugin tablehover.

Antes de colocar la tabla y dentro de para mostrar los elementos debemos poner esta sentencia javascript para declarar el plugin:

$(document).ready(function(){
    $('#large').tableHover({colClass: 'hover', cellClass: 'hovercell', clickClass: 'click', ignoreCols: [11]});
});

Como vereis hay varios elementos los elementos:

colClass: 'hover', cellClass: 'hovercell', clickClass: 'click'; contienen los nombres de las clases que deberemos editar en nuestra hora de estilos
el elemento ignoreCols: [1, 4] se lo he añadido yo para decirle que no ilumine la columna 1 y la 4
al principio tenemos $('#large'); pues esto no es mas que la id de la tabla donde vamos a aplicar el efecto

Y ahora os pongo un ejemplo en codigo HTML de una tabla…


    
        
            ID
            Título
            Url
            Acciones
        
    
    
        
            ID
            Título
            Url
            Acciones

ID	Título	Url	Acciones
ID	Título	Url	Acciones

Donde las tablas iluminadas seran las que estan dentro de las etiquetas .

Llegados a este punto estareis viendo vuestro script y direis que no funciona, mirareis si os falta codigo, si algo esta mal escrito, etc…

Bueno pues para los que habeis llegado hasta aqui, os dejo la solucion… es que os falta editar vuestra hoja de estilos

td.click, th.click{
    background-color: #bbb;
}
td.hover, tr.hover{
    background-color: #69f;
}
th.hover, tfoot td.hover{
    background-color: ivory;
}
td.hovercell, th.hovercell{
    background-color: #abc;
}
td.hoverrow, th.hoverrow{
    background-color: #6df;
}

Al final de la pelicula os deberia de quedar algo como esto:

Espero que os haya servido de ayuda

Redimensionar imagenes con css

forber — Mon, 19 May 2008 19:32:23 +0000

Para resumir rapidamente su funcionamiento es ocultar una parte de la miniatura de la imagen ya redimensionada anteriormente y la mostramos en su totalidad cuando pasamos el raton por encima o mas conocido como el mouseover.

Aunque la gracia de esto ya no es solo que puede estrechar una imagen y si pasa el raton se hace grande, esta claro que es una de las opciones.. pero pensando en algunas utilidades mas.. nos podria servir para hacer imagenes cuadraditas que estan ahora tan de moda.

Para una web de contactos, galeria de imagenes, etc.. y no podemos utilizar el ImageMagic, como la inmensa mayoria utiliza las librerias GD para el tratamiento de imagenes, es una forma de redimensionar una imagen y como la redimension no es cuadrada (a no ser que la imagen original si lo fuese) si le quitamos la opcion de a:hover se nos abre un mundo nuevo en la redimension, esta claro que es un parche, pero quien no quiera calentarse la cabeza esto es una solucion rapida y efectiva a mi entender.

ul#thumbs a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;
    }
ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;
    }

Link: Create Resizing Thumbnails Using Overflow Property y aqui tambien os dejo una demo del sistema en cuestion

Alli encontrareis la pagina del creador en ingles con todo muy detallado Espero que os haya servido de ayuda!