» Internet

BrowserSim 1.0

Publicado el 05/03/2008

BrowserSim 1.0 // Una acción de Photoshop creada por Martin Kuplens-Ewart que crea ventanas del navegador de Mac y Windows para simular capturas de pantalla de páginas web.

Descargar BrowserSim

Popularity: 11% [?]

Servicios de Google: GMail

Publicado el 24/02/2008

Un video que Saatchi Moscow creo y produjo para Google para atraer más personas de nacionalidad rusa a GMail.

Popularity: 17% [?]

Herramientas online

Publicado el 10/08/2007

Descargas

Entretenimiento

  • Cdcovers archivo de carátulas
  • Wayback Machine archivo de Internet desde 1996, nos permite ver versiones anteriores de un sitio web
  • Photos you LikeBetter test de personalidad basado en cuál fotos de 2 opciones nos gusta más
  • 20Q Piensa en un objeto y la inteligencia artificial intentará adivinar en qué estás pensando a través de una serie de sencillas preguntas. El objeto en que pienses debe ser algo que la mayoría de la gente conozca, nunca una persona, lugar o cosa concreta.

Popularity: 10% [?]

Sitios de arte digital

Publicado el 10/08/2007

superbad

www.superbad.com Este sitio lo recomendó Ruth, una de las vj’s de MTV en un programa que se llamaba conexión, hace varios años, sigue online y está muy bueno.


Buscando sitios similares encontré:

idealworld

IdealWorld IdealWorld se publicó en Internet en Agosto de 2003 y desde entonces se han ido agregando regularmente nuevos contenidos. IdealWorld es un producto de las nuevas sociedades artísticas y su proposito no es otro que el de arrojar dudas al campo de la estética digital.


000text

000 TEXT Estética digital-retro

Popularity: 11% [?]

Confirmación para ver una página

Publicado el 01/04/2007

<html>
<head>
<script language="JavaScript">
<!--
function check()
{
if (!confirm
("Si deseas entrar presiona Aceptar, sino Cancelar."))
history.go(-1);return " "}
document.writeln(check())
// -->
</script>
</head>
<body>
</body>
</html>

Popularity: 3% [?]

Un texto que persigue al puntero

Publicado el 01/04/2007

<html>
<head>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
}
</style>
<script>
var x,y
var step=20
var flag=0
// Tienes que dejar un espacio al final de tu mensaje
var message="soy el texto que persigue al ratón "
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i–) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval(”span”+(i)+”.style”)
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i–) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval(”document.span”+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout(”makesnake()”,30)
}
</script>
</head>
<body onLoad=”makesnake()” style=”width:100%;overflow-x:hidden;overflow-y:scroll”>
</body>
<script>
<!–
for (i=0;i<=message.length-1;i++) {
document.write(”<span id=’span”+i+”‘ class=’spanstyle’>”)
document.write(message[i])
document.write(”</span>”)
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
</script>
</html>

Popularity: 4% [?]

Cambiar el color de fondo del body según la hora

Publicado el 01/04/2007

<HTML>
<HEAD>
<script>
<!--
var now = new Date();
var hours = now.getHours();
var psj=0;
if (hours > 17 && hours < 20){
document.write('<body bgcolor="orange">')
}
if (hours > 19 && hours < 22){
document.write('<body bgcolor="red">')
}
if (hours > 21 hours < 5){
document.write('<body bgcolor="black">')
}
if (hours > 8 && hours < 18){
document.write('<body bgcolor="green">')
}
if (hours > 6 && hours < 9){
document.write('<body bgcolor="blue">')
}
if (hours > 4 && hours < 7){
document.write('<body bgcolor="white">')
}
//-->
</script>
</HEAD>
<body>
</body>
</html>

Popularity: 6% [?]

Vínculo para cerrar una ventana

Publicado el 31/03/2007

<a href="javascript:window.close();">Cerrar</a>

Cerrar una ventana popup

<a href="javascript:self.close();">Cerrar</a>

Cerrar una ventana con marcos

<a href="javascript:parent.close();">Cerrar</a>

Popularity: 3% [?]

Vínculo para imprimir una página

Publicado el 31/03/2007

<a href="javascript:window.print();">Imprimir esta página</a>

Popularity: 4% [?]

Intercambiar hojas de estilo utilizando Javascript

Publicado el 31/03/2007

<head>
<link href="hoja1.css" rel="stylesheet" type="text/css" id="estilo"/>
<script type="text/JavaScript">
<!--
function estilo(archivo) {
document.getElementById('estilo').href=archivo;
}
function MM_callJS(jsStr) {
return eval(jsStr)
}
//-->
</script>
</head>

<body>
<a href=”#” onclick=”MM_callJS(’estilo(\’hoja2.css\’)')”>Cambiar estilo</a>
</body>

Popularity: 5% [?]

Algunos conceptos CSS

Publicado el 31/03/2007

El interlineado en las hojas de estilo es la propiedad line-height.

El margen es el espacio entre un elemento y los elementos que se encuentran arriba, abajo, a la izquierda y a la derecha. El padding es el espacio entre los bordes de un elemento y su contenido.

Una capa es una metáfora, cuando hablamos de capas (etiquetas div) generalmente nos referimos a un contenedor o elemento HTML que puede ser ubicado en una posición específica en una página web.

Posición estática es la manera predeterminada en la cual el navegador dibuja las páginas. Posición absoluta nos permite determinar la coordenadas (por ejemplo superior e izquierda) en las que se ubicará un elemento con respecto al elemento padre al cual pertenece. Cuando hacemos scroll, el elemento también se mueve. Posición fija, nos permite todas las ventajas de los marcos sin sus desventajas, cuando hacemos scroll el elemento se mantiene en su posición. Posición relativa, lo ubica con respecto a donde estaría estáticamente.

Un elemento con visibilidad hidden funciona como el hombre invisible, no se ve, pero ocupa un lugar en el espacio. Visibilidad none funciona como si el elemento no existiera.

Popularity: 4% [?]

Pseudo clases de vínculos

Publicado el 30/03/2007

Cuando los selectores tienen igual especificidad, el selector que ocurre más lejos de la parte superior de la hoja de estilo prevalece, o sea, los estilos se van aplicando de arriba hacia abajo, por lo que uno puede sobreescribir al anterior.

Para que los vínculos se visualicen de manera correcta, es importante definirlos en el siguiente orden: *

a { }
a:link { }
a:visited { }
a:hover { }
a:active { }

* No es necesario que estén todos presentes, por lo general utilizo solamente a, a:visited y a:hover.

Popularity: 4% [?]

Fuentes para pantalla

Publicado el 30/03/2007

Georgia

Es una fuente con serifas, diseñada por Matthew Carter en 1993. Fue creada para una óptima lectura en pantalla siendo su altura x mayor a la Times New Roman, pero no tanto como la Verdana. Sus números tienen un estilo antiguo.

Tahoma

Diseñada por Matthew Carter en 1994, es la fuente predeterminada del sistema operativo Windows. Es menos ancha que la Verdana, el espacio entre las letras es más apretado y tiene un juego de caracteres de Unicode más completo.

Trebuchet

Diseñada por Vincent Connare en 1996. Algunas de sus particularidades son:

  • Las hastas de la M forman un ángulo de 10º con la horizontal
  • La forma de la cola de la Q
  • Las colas acortadas de la e y de los números 6 y 9
  • La cola abierta de la g
  • Los puntos redondos y la forma de la i y la j
  • La l tiene una terminación curva
  • La forma del $ en el cual la línea aparece solamente por encima y por debajo de la S

Verdana

Diseñada por Matthew Carter en 1996. Se caracteriza por su gran altura x, proporciones anchas, espacio holgado entre letras y diferencias entre letras similares para aumentar la legibilidad, por ejemplo: la I, a pesar de una fuente sin serifas, tiene serifas para que se distinga fácilmente de una l o un 1.

Popularity: 17% [?]