skip to main |
skip to sidebar
Este codigo es para pner el buscador de google en nuestro sitio.action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value=es>
<INPUT type=submit name=btnG VALUE="Búsqueda Google">
</td></tr></TABLE>
</FORM>
</center>
<!-- Búsqueda Google -->
Seguir leyendo »
Pues checando el mail me encontré con el boletín de webtaller, que para ser sincero tengo poco haciéndole caso, y en verdad me pregunto porque no lo hice antes, ya que tiene buenas notas, ahora les traigo una de las que me gusto. el titulo lo dice todo.
1. Error 1: Peso en la página 2. Error 2: DTD inexistentes 3. Error 3: Páginas sin el idioma especificado 4. Error 4: Títulos de página molestos y enigmáticos 5. Error 5: Sin imágenes navegar una página es imposible 6. Error 6: URL matemáticas, casi imposibles de entender y recordar 7. Error 7: Código prehistórico reemplazable con CSS 8. Error 8: Olvidarse de la semántica, los documentos son una pila de información sin clasificar… 9. Error 9: Sin estilos la página no se entiende, ni tiene significado… 10. Error 10: Documentos Web que son enemigos de la impresora 11. Error 11: Ventanas emergentes, inútiles, sin sentido y no muy accesibles. 12. Error 12: Instale Flash, o de lo contrario no podrá navegar el sitio Web 13. Error 13: Javascript supera todas las tecnologías de lenguajes, HTML, CSS, PHP, Javascript es la hostia… 14. Error 14: HTML no es un lenguaje de modelaje de páginas 15. Error 15: HTML comentado, es igual a más peso en la página 16. Error 16: Utilizar hojas de estilo en línea o embebidas en los documentos 17. Error 17: Javascript no modularizado 18. Error 18: Elementos Meta inservibles… 19. Error 19: Mapa Web del sitio 20. Error 20: Buscador ciego… buscador inútil 21. Error 21: La Web no es la televisión 22. Error 22: Frames no, si us plau. 23. Error 23: Formularios inaccesibles 24. Error 24: Tipografías mal aplicadas 25. Error 25: Archivos multimedia, PDF, etc.
Seguir leyendo »
Para poner el famoso juego de tetris
utilizando jQuery
y tetris
.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tetris with jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tetris.js"></script>
<link rel="stylesheet" type="text/css" href="tetris.css"/>
</head>
<body>
<h1>Tetris with jQuery</h1>
<div id="tetris">
<div id="grid">
<table>
<tr><td id="a1"></td><td id="a2"></td><td id="a3"></td><td id="a4"></td><td id="a5"></td><td id="a6"></td><td id="a7"></td><td id="a8"></td><td id="a9"></td><td id="a10"></td></tr>
<tr><td id="b1"></td><td id="b2"></td><td id="b3"></td><td id="b4"></td><td id="b5"></td><td id="b6"></td><td id="b7"></td><td id="b8"></td><td id="b9"></td><td id="b10"></td></tr>
<tr><td id="c1"></td><td id="c2"></td><td id="c3"></td><td id="c4"></td><td id="c5"></td><td id="c6"></td><td id="c7"></td><td id="c8"></td><td id="c9"></td><td id="c10"></td></tr>
<tr><td id="d1"></td><td id="d2"></td><td id="d3"></td><td id="d4"></td><td id="d5"></td><td id="d6"></td><td id="d7"></td><td id="d8"></td><td id="d9"></td><td id="d10"></td></tr>
<tr><td id="e1"></td><td id="e2"></td><td id="e3"></td><td id="e4"></td><td id="e5"></td><td id="e6"></td><td id="e7"></td><td id="e8"></td><td id="e9"></td><td id="e10"></td></tr>
<tr><td id="f1"></td><td id="f2"></td><td id="f3"></td><td id="f4"></td><td id="f5"></td><td id="f6"></td><td id="f7"></td><td id="f8"></td><td id="f9"></td><td id="f10"></td></tr>
<tr><td id="g1"></td><td id="g2"></td><td id="g3"></td><td id="g4"></td><td id="g5"></td><td id="g6"></td><td id="g7"></td><td id="g8"></td><td id="g9"></td><td id="g10"></td></tr>
<tr><td id="h1"></td><td id="h2"></td><td id="h3"></td><td id="h4"></td><td id="h5"></td><td id="h6"></td><td id="h7"></td><td id="h8"></td><td id="h9"></td><td id="h10"></td></tr>
<tr><td id="i1"></td><td id="i2"></td><td id="i3"></td><td id="i4"></td><td id="i5"></td><td id="i6"></td><td id="i7"></td><td id="i8"></td><td id="i9"></td><td id="i10"></td></tr>
<tr><td id="j1"></td><td id="j2"></td><td id="j3"></td><td id="j4"></td><td id="j5"></td><td id="j6"></td><td id="j7"></td><td id="j8"></td><td id="j9"></td><td id="j10"></td></tr>
<tr><td id="k1"></td><td id="k2"></td><td id="k3"></td><td id="k4"></td><td id="k5"></td><td id="k6"></td><td id="k7"></td><td id="k8"></td><td id="k9"></td><td id="k10"></td></tr>
<tr><td id="l1"></td><td id="l2"></td><td id="l3"></td><td id="l4"></td><td id="l5"></td><td id="l6"></td><td id="l7"></td><td id="l8"></td><td id="l9"></td><td id="l10"></td></tr>
<tr><td id="m1"></td><td id="m2"></td><td id="m3"></td><td id="m4"></td><td id="m5"></td><td id="m6"></td><td id="m7"></td><td id="m8"></td><td id="m9"></td><td id="m10"></td></tr>
<tr><td id="n1"></td><td id="n2"></td><td id="n3"></td><td id="n4"></td><td id="n5"></td><td id="n6"></td><td id="n7"></td><td id="n8"></td><td id="n9"></td><td id="n10"></td></tr>
<tr><td id="o1"></td><td id="o2"></td><td id="o3"></td><td id="o4"></td><td id="o5"></td><td id="o6"></td><td id="o7"></td><td id="o8"></td><td id="o9"></td><td id="o10"></td></tr>
<tr><td id="p1"></td><td id="p2"></td><td id="p3"></td><td id="p4"></td><td id="p5"></td><td id="p6"></td><td id="p7"></td><td id="p8"></td><td id="p9"></td><td id="p10"></td></tr>
<tr><td id="q1"></td><td id="q2"></td><td id="q3"></td><td id="q4"></td><td id="q5"></td><td id="q6"></td><td id="q7"></td><td id="q8"></td><td id="q9"></td><td id="q10"></td></tr>
<tr><td id="r1"></td><td id="r2"></td><td id="r3"></td><td id="r4"></td><td id="r5"></td><td id="r6"></td><td id="r7"></td><td id="r8"></td><td id="r9"></td><td id="r10"></td></tr>
</table>
</div>
<div id="next">
<table>
<tr><td id="x00"></td><td id="x10"></td><td id="x20"></td><td id="x30"></td></tr>
<tr><td id="x01"></td><td id="x11"></td><td id="x21"></td><td id="x31"></td></tr>
<tr><td id="x02"></td><td id="x12"></td><td id="x22"></td><td id="x32"></td></tr>
<tr><td id="x03"></td><td id="x13"></td><td id="x23"></td><td id="x33"></td></tr>
</table>
</div>
<div id="stats">
<div>Level: <span id="level">1</span></div>
<div>Lines: <span id="lines">0</span></div>
<div>Score: <span id="score">0</span></div>
</div>
<div id="cmd">
<input id="start" type="button" value="start"/><br/>
<input id="stop" type="button" value="stop" disabled="disabled"/>
</div>
<div id="info">
<div>Left: J</div>
<div>Right: L</div>
<div>Rotate: I</div>
<div>Down: K</div>
</div>
</div>
<div id="overlay"></div>
<a id="src" href="tetris.js">Source code</a>
</body>
</html>
Tetris.js
/*
* Tetris with jQuery - 2006/06/25
* see: http://en.wikipedia.org/wiki/Category:Tetris
* http://en.wikipedia.org/wiki/Tetris_Worlds
* be careful: http://en.wikipedia.org/wiki/Tetris_effect
* Copyright (c) 2006 Franck Marcia
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
var tetris = {
// Shape colors
colors: ['#eaeaea','#ff6600','#ffff00','#0000ff',
'#cc00ff','#00ff00','#66ccff','#ff0000'],
// Starting line for each shape
startAt: [0, -1, -1, -1, 0, -1, -1, 0],
// Points per number of lines
points: [0, 40, 100, 300, 1200],
// Combination of each shape
shapes: [
// none
[],
// I
[[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
[[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]]],
// T
[[[0,0,0,0],[1,1,1,0],[0,1,0,0],[0,0,0,0]],
[[0,1,0,0],[1,1,0,0],[0,1,0,0],[0,0,0,0]],
[[0,1,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
[[0,1,0,0],[0,1,1,0],[0,1,0,0],[0,0,0,0]]],
// L
[[[0,0,0,0],[1,1,1,0],[1,0,0,0],[0,0,0,0]],
[[1,1,0,0],[0,1,0,0],[0,1,0,0],[0,0,0,0]],
[[0,0,1,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
[[0,1,0,0],[0,1,0,0],[0,1,1,0],[0,0,0,0]]],
// J
[[[1,0,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]],
[[0,1,1,0],[0,1,0,0],[0,1,0,0],[0,0,0,0]],
[[0,0,0,0],[1,1,1,0],[0,0,1,0],[0,0,0,0]],
[[0,1,0,0],[0,1,0,0],[1,1,0,0],[0,0,0,0]]],
// Z
[[[0,0,0,0],[1,1,0,0],[0,1,1,0],[0,0,0,0]],
[[0,0,1,0],[0,1,1,0],[0,1,0,0],[0,0,0,0]]],
// S
[[[0,0,0,0],[0,1,1,0],[1,1,0,0],[0,0,0,0]],
[[0,1,0,0],[0,1,1,0],[0,0,1,0],[0,0,0,0]]],
// O
[[[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]]],
// Pre-load elements of the grid
init: function() {
var i, j, k;
tetris.cells = [];
for (i = -3; i < 18; ++i) {
tetris.cells[i] = [];
for (j = 1; j < 11; ++j) {
k = String.fromCharCode(i + 97);
tetris.cells[i][j] = $(['#', k, j].join(''));
}
}
tetris.bound = $.browser == 'msie' ? '#tetris' : window;
},
// Initialize to start the game
start: function() {
// Stats
tetris.level = 0;
tetris.lines = 0;
tetris.score = 0;
// Array which contains data of the grid
tetris.grid = [
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],[1,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1]];
$('#grid td').css('backgroundColor', tetris.colors[0]);
$('#start').unclick(tetris.start).val('pause').click(tetris.pause);
$('#stop').set('disabled', false);
$(tetris.bound).keypress(tetris.key);
tetris.next = tetris.newShape();
tetris.shift();
tetris.duration = 600;
tetris.refresh();
tetris.timer = window.setInterval(tetris.moveDown, tetris.duration);
},
// Define the action to be fired depending on key entry
key: function(e) {
switch(e.charCode || e.keyCode) {
case 74: case 106: tetris.moveLeft(); break; // J
case 76: case 108: tetris.moveRight(); break; // L
case 75: case 107: tetris.moveDown(); break; // K
case 73: case 105: tetris.rotate(); break; // I
}
return false;
},
// Generate an random shape
newShape: function() {
var r = 1 + Math.random() * 7;
return parseInt(r > 7 ? 7 : r, 10);
},
// Define then draw the next shape
setNext: function() {
var i, j, s, c, d, n = tetris.colors[0];
tetris.next = tetris.newShape();
s = tetris.shapes[tetris.next][0];
c = tetris.colors[tetris.next];
for (i = 0; i < 4; ++i) {
for (j = 0; j < 4; ++j) {
d = s[i][j] ? c : n;
$(['#x', j, i].join('')).css('backgroundColor', d);
}
}
},
// The next shape becomes the current one; reset coordinates
shift: function() {
tetris.cur = tetris.next;
tetris.x = tetris.x0 = 4;
tetris.y = tetris.startAt[tetris.cur];
tetris.y0 = tetris.y - 2;
tetris.r = tetris.r0 = 0;
tetris.curShape = tetris.shapes[tetris.cur];
if (tetris.canGo(0, tetris.x, tetris.y)) {
tetris.setNext();
return true;
}
return false;
},
// Pause the game
pause: function() {
$(tetris.bound).unkeypress(tetris.key);
window.clearInterval(tetris.timer);
tetris.timer = null;
$('#start').unclick(tetris.pause).val('resume').click(tetris.resume);
},
// Resume the game
resume: function() {
$(tetris.bound).keypress(tetris.key);
tetris.timer = window.setInterval(tetris.moveDown, tetris.duration);
$('#start').unclick(tetris.resume).val('pause').click(tetris.pause);
},
// Stop the game
gameOver: function() {
var i, j;
// Manage buttons
if (tetris.timer) {
$(tetris.bound).unkeypress(tetris.key);
window.clearInterval(tetris.timer);
tetris.timer = null;
$('#start').unclick(tetris.pause).val('start').click(tetris.start);
} else {
$('#start').unclick(tetris.resume).val('start').click(tetris.start);
}
$('#stop').set('disabled', true);
// Draw everything in white
for (i = 0; i < 18; ++i) {
for (j = 1; j < 11; ++j) {
if (tetris.grid[i][j]) {
tetris.cells[i][j].css('backgroundColor', '#ffffff');
}
}
}
tetris.draw(tetris.r0, tetris.x0, tetris.y0, '#ffffff');
},
// Check overlays
canGo: function(r, x, y) {
var i, j;
for (i = 0; i < 4; ++i) {
for (j = 0; j < 4; ++j) {
if (tetris.curShape[r][j][i] && tetris.grid[y + j] &&
tetris.grid[y + j][x + i]) {
return false;
}
}
}
return true;
},
// Move the current shape to the left
moveLeft: function() {
if (tetris.canGo(tetris.r, tetris.x - 1, tetris.y)) {
--tetris.x;
tetris.refresh();
}
},
// Move the current shape to the right
moveRight: function() {
if (tetris.canGo(tetris.r, tetris.x + 1, tetris.y)) {
++tetris.x;
tetris.refresh();
}
},
// Rotate the current shape
rotate: function() {
var r = tetris.r == tetris.curShape.length - 1 ? 0 : tetris.r + 1;
if (tetris.canGo(r, tetris.x, tetris.y)) {
tetris.r0 = tetris.r;
tetris.r = r;
tetris.refresh();
}
},
// Move down the current shape
moveDown: function() {
if (tetris.canGo(tetris.r, tetris.x, tetris.y + 1)) {
++tetris.y;
tetris.refresh();
} else {
tetris.touchDown();
}
},
// The current shape touches down
touchDown: function() {
var i, j, k, r, f;
// mark the grid
for (i = 0; i < 4; ++i) {
for (j = 0; j < 4; ++j) {
if (tetris.curShape[tetris.r][j][i] &&
tetris.grid[tetris.y + j]) {
tetris.grid[tetris.y + j][tetris.x + i] = tetris.cur;
}
}
}
// search complete lines
f = 0;
for (i = 17, k = 17; i > -1 && f < 4; --i, --k) {
if (tetris.grid[i].join('').indexOf('0') == -1) {
// Complete lines become white
for (j = 1; j < 11; ++j) {
tetris.cells[k][j].css('backgroundColor', '#ffffff');
}
++f;
for (j = i; j > 0; --j) {
tetris.grid[j] = tetris.grid[j - 1].concat();
}
++i;
}
}
// animate
if (f) {
window.clearInterval(tetris.timer);
tetris.timer = window.setTimeout(function(){tetris.after(f);}, 100);
}
// try to continue
if (tetris.shift()) {
tetris.refresh();
} else {
tetris.gameOver();
}
},
// Finish the touchdown process
after: function(f) {
var i, j, l = (tetris.level < 20 ? tetris.level : 20) * 25;
// stats
tetris.lines += f;
if (tetris.lines % 10 === 0) {
tetris.level = tetris.lines / 10;
}
window.clearTimeout(tetris.timer);
tetris.timer = window.setInterval(tetris.moveDown, tetris.duration - l);
tetris.score += (tetris.level + 1) * tetris.points[f];
// redraw the grid
for (i = 0; i < 18; ++i) {
for (j = 1; j < 11; ++j) {
tetris.cells[i][j].css('backgroundColor',
tetris.colors[tetris.grid[i][j]]);
}
}
tetris.refresh();
},
// Draw the current shape
draw: function(r, x, y, c) {
var i, j;
for (i = 0; i < 4; ++i) {
for (j = 0; j < 4; ++j) {
if (tetris.curShape[r][j][i]) {
tetris.cells[y + j][x + i].css('backgroundColor', c);
}
}
}
},
// Refresh the grid
refresh: function() {
// remove from the old position
tetris.draw(tetris.r0, tetris.x0, tetris.y0, tetris.colors[0]);
// draw to the next one
tetris.draw(tetris.r, tetris.x, tetris.y, tetris.colors[tetris.cur]);
// change stats
$('#level').html(tetris.level + 1);
$('#lines').html(tetris.lines);
$('#score').html(tetris.score);
// reset coordinates
tetris.x0 = tetris.x;
tetris.y0 = tetris.y;
tetris.r0 = tetris.r;
}
};
// Everything starts here
$(window).load(function() {
tetris.init();
$('#grid table, #next table').css('backgroundColor', tetris.colors[0]);
$('#start').click(tetris.start);
$('#stop').click(tetris.gameOver);
});
Descargar jQuery
Seguir leyendo »
Creáremos una barra "preload" como las creadas en flash, pero esta vez usando javascript lo que en teoría la aria mas rápida y de igual manera seria visto, bueno aquí les dejo el código completo<html>
<head>
<title>Preload Image Page</title>
<script language="JavaScript1.1">
<!-- begin hiding
/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/
// You may modify the following:
var locationAfterPreload = "http://dynamicdrive.com" // URL of the page after preload finishes
var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array("http://yourdomain.com/test1.gif","http://yourdomain.com/test2.gif")
// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>
</head>
<body bgcolor="#FFFFFF">
<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a> | <a href="http://dynamicdrive.com/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>
</body>
</html>
Seguir leyendo »
Entradas
