Los blogs más populares no superan la validacion W3C

W3CTodos los blogs más populares en Technorati no validan según el estándar establecido por la W3C. ¿Será que no le toman importancia?. Por supuesto no es una obligación seguir estandares web, pero seguirlos revela que clase de desarrollar web eres. Por experiencia propia seguir estándares permite realizar proyectos web sin complicaciones. Los estándares han permitido que ahora se dé más importancia a Javascript, Ajax y otras librerías relacionadas, que trabajan justamente con la estructura de los documentos HTML. Por otra parte algunos de estos blogs tratan temas de desarrollo, pero ¿qué clase de desarrolladores son si no lo demuestran en sus blogs?.

Ver Artículo Completo ››

Gráficos 3D con Canvas

El autor de Dragan's Blog ha desarrollado una librería llamada canvas3DGraph.js que nos permite crear / mostrar gráficos 3D en una página HTML. Él nos explica que la etiqueta <canvas> no es soportada por IE (cuando no!). Así que teniendo en cuenta eso se ayudo de la librería excanvas.js para mostrar o trabajar sobre IE. Sobre Firefox y Safari los gráficos hechos con canvas van de maravilla (10 veces más rápido que IE).

Canvas 3D

El la página del proyecto podemos encontrar un ejemplo en tiempo real e información sobre como usar las librerías en nuestra páginas web. 

Enlaces | ¿Qué es canvas?

Calendario con Mootools - JavaScript

Mootools CalendarHe aquí un interesante calendario elaborado con Mootools. La página del autor ofrece un ejemplo y documentación sobre las opciones que dispone. Además de los archivos necesarios: DataPicker.js y DataPicker.css. Necesitarán descargar la librería de Mootools v1.11 ó superior y algunas dependencias: Core, Class, Class.Extras, Array, String, Function, Number, Element, Element.Event, Element.Filters, Element.Selectors, Window.DomReady y Json.

Ejemplo

<html>
<head>
<title>MooTools DatePicker Ejemplo</title>

<link rel="stylesheet" href="DatePicker.css" type="text/css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/DatePicker.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
$$('input.DatePicker').each( function(el){
new DatePicker(el);
});
});
</script>

</head>
<body>
<div>
<h1>MooTools Date Picker</h1>
<p>
<label for="birthday">default calendar</label>
<input readonly="readonly" id="birthday" name="birthday" class="DatePicker" tabindex="1" value="10/24/2016" type="text">
</p>
<p>
<label for="new_day">calendar with all options</label>
<input readonly="readonly" id="new_day" name="new_day" class="DatePicker" alt="{
dayChars:3,
dayNames:['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
daysInMonth:[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
format:'dd-mm-yyyy',
monthNames:['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Deciembre'],
startDay:1,
yearOrder:'desc',
yearRange:90,
yearStart:2007
}" tabindex="1" value="02-08-2007" type="text">
</p>
</div>
</body>
</html>


Desplazamiento interactivo de imágenes con Javascript

Corner Dock es una pequeña utilidad en Javascript que permite desplazarnos de manera interactiva a través de un grupo de imágenes. Por defecto la ubicación de las imágenes es en la esquina superior (por algo el nombre), aunque no he visto si eso se puede configurar.

Como usarlo

Después de descargar el paquete comprimido, referenciamos en nuestra página html, la hoja de estilos y el archivo Javascript.

<script language="JavaScript" src="js/CornerDock.js"></script> 
<link rel="stylesheet" href="css/CornerDock.css" type="text/css" />

Luego en un div (id=MiDiv) colocamos una serie de imágenes.

<div id="CornerDockDiv" style="border:1px solid red;"> 
<!-- Each 'a' tag must have a unique ID and must contain one single 'img' tag -->
<a id="0" href="JavaScript:alert('You clicked icon 1');"><img src="images/Chart.png" alt="" /></a>
<a id="1" href="JavaScript:alert('You clicked icon 2');"><img src="images/Pie Diagram.png" alt="" /></a>
<a id="2" href="JavaScript:alert('You clicked icon 3');"><img src="images/User.png" alt="" /></a>
<a id="3" href="JavaScript:alert('You clicked icon 4');"><img src="images/Chat_01.png" alt="" /></a>
<a id="4" href="JavaScript:alert('You clicked icon 5');"><img src="images/Class.png" alt="" /></a>
<a id="5" href="JavaScript:alert('You clicked icon 6');"><img src="images/Contact.png" alt="" /></a>
<a id="6" href="JavaScript:alert('You clicked icon 7');"><img src="images/Copy.png" alt="" /></a>
<a id="7" href="JavaScript:alert('You clicked icon 8');"><img src="images/House.png" alt="" /></a>
<a id="8" href="JavaScript:alert('You clicked icon 9');"><img src="images/Shopping cart.png" alt="" /></a>
</div>

Creamos un Corner Dock, pasamos como parámetros el id del div que contiene nuestras imágenes, así como la altura y ancho de este.

<script language="JavaScript">  
window.CornerDock = new JSCornerDock('CornerDockDiv',300,800);
</script>

El resultado final lo podemos apreciar aquí.

Los Captchas más Locos de la Web

Los spammers llevan a muchos desarrolladores a tomar medidas de seguridad para sus aplicaciones web por lo que un buen captcha es siempre útil (aunque no lo definitivo para acabar con el spam). Pero no vayamos al extremo, como podrá apreciar en estos captchas:

A las justas sé 2x1=oferta... 

Captcha Matemático

Yo no entiendo eso! pero creo que un ciego si... 

 Captcha Braile

Escribiría algo si no fuera por ese protector de pantalla... 

Captcha Dificil 

Esto de los símbolos lo dejo a los pequeños... 

Captcha Infantil 

Ver más captchas

Menu desplegable con CSS

Menu Desplegable con CSS

Encuentro esta interesante utilidad hecho en CSS: un menu desplegable muy interesante con una imagen de fondo (creo que si usamos PHP podemos hacer que esta imagen sea aleatoria...es una idea nada mas). Este menu trabaja sobre IE 5.5 o superior, Firefox, Opera, Safari (Windows) sin ningún problema.

Visto en CSSplay

wrapScroll: Desplazamiento automático de DIV's

Haber, para entender esto mejor vamos a suponer que deseamos mostrar un aviso "importante" a nuestro navegantes y (debido a su importancia) queremos que ese aviso (dentro de un DIV) se mueva a medida que el usuario se desplaza verticalmente por la página. Bien, para ello existe una librería hecha en Javascript: wrapScroll.

Uso básico

Primero descargamos la librería, y ubicamos el archivo wrapscroll.js y lo referenciamos en nuestra página html.

 <script type="text/javascript" src="wrapscroll.js"></script>

Iniciamos el método wrapScroll donde indicaremos el div que se desplazara.

 <script type="text/javascript">
new wrapScroll("midiv");
</script>

Creamos un hoja de estilo con los siguientes valores. Nota: para la etiqueta body la propiedad height le colocamos el valor 1200px para poder ver el efecto del desplazamiento.

#midiv{
position:absolute;
top:100px;
border:3px dashed red;
width:200px;
height:150px;
}
body{
height:1200px;
}

Esta librería funciona con:

  • InternetExplore 6.x, 7.0 o sup.
  • Firefox 1.5, 2.0 o sup.
  • Opera 9.x o sup.
  • Safari 1.2 o sup., Safari3.0 para Windows
[ Descargar este ejemplo ]

Hemos explicado la forma básica de usar esta excelente librería, sin embargo podemos añadirle otras funciones adicionales, como se puede observar en los siguientes ejemplos: 1, 2, 3, 4 y 5

Extensiones Firefox para el Desarrollado Web

1. Firebug

Fire Bug

Con esta extensión podemos editar y depurar código HTML en tiempo real, mejorar los estilos, monitorizar tiempo de carga de un sitio, depurador Javascript, explorador del DOM y mucho más. [ Ver mas ]

2. MeasureIt

Measure It

Esta extensión, permite obtener las dimensiones de cualquier zona de una página web. Útil cuando estamos diseñando una web y necesitamos ajustar al máximo todas las imágenes.

3. ColorZilla

colorzilla

Al instalar esta extensión, se añade un icono de cuentagotas en la barra de estado; basta pulsar sobre él para que se abra el programa. Pasando el cursor sobre las zonas coloreadas de la página visitada, muestra el código (en RGB o hexadecimal), y al pulsar con el botón derecho podemos guardar el código, así como acceder a un selector de paletas. [ Ver mas

4. Screen Grab

Screen Grab

Permite realizar capturas de pantalla de páginas web dentro del propio navegador. Una vez instalada tan sólo tenemos que pulsar con el botón derecho en cualquier lugar de la página y acceder al menú de ScreenGrab, que da diferentes opciones de captura. Las imágenes se pueden guardar en los formatos .png o .jpg, o bien copiarlas directamente al portapapeles del sistema operativo. [ Ver mas

Ver Artículo Completo ››

Evitando el spam con CSS

Esto no es nuevo: tienes un formulario de contacto, por ejemplo, con el objetivo de que tus visitantes pueden comunicarse contigo para un asunto en especial, pero lamentablemente este formulario pierde su proposito debido al spam que llega y llena nuestro buzón de entrada con tontería y media. Existen muchos métodos para evitar el spam basado en Captcha, pero en modernblue encontramos un método con CSS.

¿Cómo trabaja? 

Pues es fácil, se basa en el hecho de que los spambots llenan "todos" los campos de un formulario. Así que teniendo eso en mente, mediante CSS ocultamos un campo.

.special {
width:5px;
visibility:hidden;
}
 <input name="info" class="special" type="text" />

Ya mediante el lenguaje servidor (PHP, ASP, etc) evaluarás si tal campo esta lleno entonces es un spambot. Sencillo.

Enlace | Fighting Span With CSS 

Menu con CSS y Prototype

Un pequeño ejemplo que nos muestra como desarrollar un interesante menú con CSS y prototype.js (1.5.1).

index.html

 <div id="menu">
<div id="m-top">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="m-slider">
<div id="slider"></div>
</div>
</div>

helper.js

window.onload=function(){

var offsetLeft=$('menu').offsetLeft;

Event.observe('menu', 'mousemove', function(event){

coordinateX=Event.pointerX(event)-offsetLeft;
$('slider').style.marginLeft=coordinateX-20+'px';

});

}

La hoja de estilos puedes descargarla desde aquí. El ejemplo quedaría así: 

Menu con CSS y Slider

Finalmente puedes descargas los archivos necesarios para este ejemplo desde Dragan's Blog.

Navegación

Categorias

Archivos

Monitored by eXternalTest