by nax
Hace ya mucho me vi en la obligación de crear un pequeño
script para formatar correctamente códigos y así poder publicarlos en blogger.
Hace uno o dos días, hablando con yoyahack me explicó que existia una alternativa para "colorear" los códigos en tu blog o web independientemente del cms o la distribución.
Su nombre es
SyntaxHighlighter
Su instalación es simple, solo debemos agregar estos códigos js en nuestras cabeceras:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
y a la hora de redactar encerraremos nuestro códgio entre:
<pre class="brush: js">
</pre>
o
<pre class="brush: php">
</pre>
Hay más lenguajes que estos dos, solo son los que yo uso más... también podemos omitir los scripts js de los lenguajes que no vayamos a utilizar.
El único inconveniente es que aún necesitamos un pequeño script para hacer la función htmlentities() y así no tener problemas con los símbolos < >.
El script que yo uso es:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" style="margin-bottom:40px">
<div id="formulario">
<textarea rows="20" cols="80" name="codigo"></textarea> <br />
<input type="submit" name="enviar" value="Formatear" /></div>
</form>
<?php
if (!empty($_POST['codigo'])) {
$codigo = $_POST['codigo'];
$codigo = str_replace("t", " ", $codigo);
$codigo = htmlentities(stripslashes($codigo));
$file = fopen("tmp.txt", "w");
fwrite($file, $codigo);
fclose($file);
$lineas = file('tmp.txt');
unlink('tmp.txt');
for ($i = 0; $i < count($lineas); $i++)
$resultado = $resultado.htmlentities($lineas[$i])."<br />";
echo '<h3> Inserta ste codigo en tu site: </h3>' .$resultado.'</div>';
}
?>
Eso es todo.
nax
by nax
Hace unos días me llego un tweet sobre este script de JS.
Se trata de dar un punto de vista diferente a nuestros formularios, algo elegante, simple y vistoso.
La demo así como la descarga se encuentran en su página oficial:
Uniform - Sexy forms with jQuery
by nax
Hoy me pidieron ayuda con este código y lo dejo por si a alguien le es de utilidad.
Lo que hace es mostrar un "preview" de los datos de un formulario usando la propiedad .innerHTML
<html>
<head>
</head>
<script language="javascript">
function preview() {
div = document.getElementById('previewform')
text = "----------------" +
"<br /> Formulario <br />" +
"Nombre: " + document.forms.form1.nomb.value +
"<br />Apellido: " + document.forms.form1.apell.value +
"<br />----------------";
div.innerHTML = text;
}
</script>
<body>
<form id="form1" name="form1" method="get" action="pagina.php">
<p><strong>Tú Nombre:</strong><input type="text" name="n" id="nomb"></p>
<p><strong>Tú Apellido:</strong><input type="text" name="a" id="apell"></p>
<input type="submit" value="Enviar" style="font-family: Verdana; font-size: 12px; text-align: center; width: 80; height: 25; font-weight: bold"><br>
<input type="reset" value="Borrar" style="font-family: Verdana; font-size: 12px; text-align: center; width: 80; height: 25; font-weight: bold">
<input type="button" value="Preview" style="font-family: Verdana; font-size: 12px; text-align: center; width: 80; height: 25; font-weight: bold" onclick="javascript:preview()" />
</center>
</form>
<div id="previewform"> </div>
</body>
</html>
by nax
Hoy es domingo y he tenido un día ajetreado así que a diferencia de otros días les dejo un code muy sencillo en javascript del cual pedian una ayuda en LH
Hace una rotación de X imágenes cada Y segundos durante un tiempo indefinido.
<html>
<head>
<title>Secuencia</title>
<script language="javascript">
var SecuenciaEjecutandose = false
var SecuenciaID = null
var imagen = 4
var duracion = 1000
if ( CompruebaVersion() ) {
imagenes = new CreaArray( 4 )
imagenes[1].src = "imagen1.jpg"
imagenes[2].src = "imagen2.jpg"
imagenes[3].src = "imagen3.jpg"
imagenes[4].src = "imagen4.jpg"
}
function CompruebaVersion() {
if (navigator.appVersion.charAt(0) >= 3 && document.images)
return true
else return false
}
function CreaArray(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
function DetenerSecuencia () {
if( SecuenciaEjecutandose )
clearTimeout(SecuenciaID)
SecuenciaEjecutandose = false
imagen = 0
}
function MostrarSecuencia () {
if (CompruebaVersion()) {
document.images["secuencia"].src = imagenes[imagen].src
imagen++
if ( imagen == 5 )
imagen = 1
}
SecuenciaID = setTimeout(" MostrarSecuencia() ", duracion)
SecuenciaEjecutandose = true
}
function IniciarSecuencia () {
DetenerSecuencia()
imagen = 1
MostrarSecuencia()
}
</script>
</head>
<body onLoad="IniciarSecuencia()">
<img src="imagen1.jpg" width="100" height="100" alt="Secuencia"
name="secuencia">
</body>
</html>
Como se aprecia en el code el script carga 4 imágenes en un array y esas imágenes las va pasando por una etiqueta llamada secuencia.
saludos
nax
by nax
Login Rainbow es un efecto del borde con varios colores simulando un arcoiris.
Me parece muy bueno estéticamente y se le puede sacar gran partido.
El código no estaba al acceso público (los JS si pero la parte php no..)
Pero un usuario a simulado los PHP y nos ha dejado este gran efecto con JQuery.
Source code
forgot.php script:
http://www.manifestinteractive.com/usenet/login...
checklogin.php script:
http://www.manifestinteractive.com/usenet/login...
Demo
Página de
Dragon Labs
by nax
Este también me topé buscando sobre lightbox
Se trata de efectos de botones y fondos.
Están muy interesantes y bonitos
La
demo
La
descarga
En la demo vemos varios efectos, el primero es solo css
El segundo es css y jquery con el efecto blend
El tercero es css y jquery con blend y pulse (como si se encendiera y se apagara)
El cuarto es css y jquery con reverse (el mismo efecto pero al revés)
espero les guste
by nax
Cuando estaba escribiendo sobre Lightbox 2 topé con esta biblioteca que me pareció muy atractiva.
Funciona de forma similar a Lightbox 2 aunque en mi opinión es más rápida y estética.
La
demo
La
descarga
Para más información visiten su página web.
web:
www.colorpowered.com
by nax
Lightbox 2 es una de esas aplicaciones para poder ver la imagen en grande a partir de una miniatura en la misma página web sin necesidad de cargar un pop-up y de una forma elegante.
Lightbox 2 utiliza el framewor Prototype y Scriptaculous Effects Library.
La
demo
la
descarga
Un ejemplo de código:
<html>
<head> </head>
<body>
<script type=\"text/javascript\" src=\"js/prototype.js\"></script>
<script type=\"text/javascript\" src=\"js/scriptaculous.js?load=effects,builder\"></script>
<script type=\"text/javascript\" src=\"js/lightbox.js\"></script>
<link rel=\"stylesheet\" href=\"css/lightbox.css\" type=\"text/css\" media=\"screen\" />
<a href=\"images/image-1.jpg\" rel=\"lightbox\" title=\"my caption\">image #1</a>
<a href=\"images/image-1.jpg\" rel=\"lightbox[roadtrip]\">image #1</a>
<a href=\"images/image-2.jpg\" rel=\"lightbox[roadtrip]\">image #2</a>
<a href=\"images/image-3.jpg\" rel=\"lightbox[roadtrip]\">image #3</a>
</body></html>
Nota: el primer
<a href=""> hace referencia a una imagen unica
los siguientes lo hacen a un grupo de imagenes (por lo cual tenemos un botón next y prev.
Web del autor
