Lo primero que vereis cuando entreis a la demo será la página principal:

Como podreis observar la página esta divida en tres secciones:

1. El logo
2. El div central: Barra de progresso y twitter
3. El pie de página: La sección de tabs y copyright

Exclusivamente para este archivo, no va a ser necesario el registro para poder descargaros el archivo (Aunque unos comentarios animan mucho…). Os dejo también dos enlaces para descargar el archivo de ayuda para poder modificar la plantilla a vuestro gusto. Uno es en Ingles y otro en Español. He utilizado los archivo que ThemeForest proveyó para ello.

Tanto el HTML como el CSS está totalmente validado por la W3C.

Así que cuando pulseis sobre un enlace de descarga se os reedirigirá al acceso de usuarios si previamente no estabais logeados en el blog.

La verdad es que no me gusta el limitar acceso. SI pronto se empieza a ver algún tipo de mejora en cuanto a comentarios, participación etc se refiere se volverán a poner todas las descargas libres.

Por cierto en unos días una manera de hacer tabs que se muestren hacia arriba

Un saludo,

Krato!

Esperemos que todo salga bien

Estas seguro que no quieres entrar y pegarle un vistazo? Yo de ti no dudaría ni un segundo y entraría en este momento!

Aunque a partir de ahora también podrás entrar desde los enlaces situados a la derecha.

Unsaludo.

1. dafont.com

   
   www.dafont.com
   Contiene una gran variedad de fuentes clasificadas por categorías. Fácil  de ver y de descargar las fuentes que necesitemos. Un referente claro!

2. 1001 Fonts.com

   
   www.1001freefonts.com
   También es muy fácil de usar y podemos ver una vista previa de la fuente que queramos.
   

3. 
   

   AbstractFonts

   
   www.abstractfonts.com
   La página tiene un estilo similar a dafont.com. Aunque no me acaba de gustar la web es una fuente muy buena de fuentes (valga la redundancia )

4. UrbanFonts

   
   www.urbanfonts.com
   Contiene un diseño agradable. Cuando pasas por encima de una fuenta te muestra los carácteres de la misma lo cual es una buena idea, contiene también una vista previa, aunque no contiene muchas fuentes para MAC.

5. FontReactor

   
   www.fontreactor.com
   Sin duda una de las mejores. AParte de estar en Castellano., lo cual ya le da puntos, contiene muchas fuentes para descargar, con una gran variedad de categorías y posibilidad de una vista previa muy buena en ajax sin tener que recargar la página. Una pega es que muchas de las fuentes no sirven para MAC.

6. FontSpace

   
   www.fontspace.com
   Para mi sin duda la más completa. Gran varidade de fuentes (ahora mismo 10826 fuentes gratis para descargar) y de categorías. Además de tags para poder buscar mejor las fuentes y el mejor sistema de Vista previa. Es el mejor sistema ya que no tienes que ir probando la vista previa en cada fuente que desees probar. Una vez que pongas la vista previa en una fuente, y después pasaemos a otra galería de fuentes todas las fuentes pasarán a tener la vista previa con nuestro texto además de poder cambiar el tamaño del texto del mismo. Sin duda ahora mismo la mejor página para descargar fuentes.

Y hasta aquí la colección de páginas para descargar fuentes. Si conoceis alguna que no esté aquí comentad y la añadiré. Espero que os valgan. Bye!

En éste caso vamos a ver como podemos cambiar la opacidad de una image, un div o cualquier elemento del html de nuestra página. Y para ello, aparte de llamar al framework de jQuery, deberemos usar la siguiente sintaxis.

jQuery('elemento').css("opacity", valor)

1. Recordad que podemos usar o la palabra clave jQuery o el dolar $
2. Elemento -> Elemento a cambiar la opacidad
3. Valor _> EL valor que quermos darle. 0 significa que elemento tiene la opacidad al 0% y 1 que la tiene al 100%

En este ejemplo cambiaríamos la opacidad de todos las imágenes de nuestro html

jQuery('img').css("opacity", 0.7)

Pero si queremos que qude un poco más profesional, podemos por ejemplo jugar con las imágenes de nuestro html para que cuando estemos sobre ellas en vez de cambiar la opacidad de un modo brusco podemos usar el evento fadeTo para hacerlo de un modo más suave.

Pongamos un ejemplo:

jQuery("img").hover(function(){
 
    jQuery(this).fadeTo("slow", 1.0); // Cambia la opacidad al 100 %
 
 },function(){
 
    jQuery(this).fadeTo("slow", 0.5); // Cambia la opacidad al 50% cuando
                                  // ya no tiene el foco
});

Este ejemplo hará que  todas las ímagenes de nuestro html cambien a opacidad 100% cuando estemos sobre alguna de ellas y cuando no cambiará al 50% y todo ello de como si fuera un efecto de transición.

Y ahora os toca jugar a vosotros

Os dejo un ejemplo simple para descargar y podais ver el efecto.

Ya podeis descargaros el ejemplo (Se me había olvidado subirlo, jeje)

Para éste tutorial utilizaremos un plugin externo que se encargará de resaltar el texto que le enviemos. Se trata del Highlight v3 para jQuery. Es muy fácil de usar y nosotros la vamos a utilizar para crear una búqueda “al vuelo” en nuestra página web mediante las herramientas que jQuery nos suministra.

En este caso vamos a crear un campo de texto y con el evnto keyUp de jQuery buscaremos en el texto.

El html de ejemplo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Búsqueda al vuelo con jQuery</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="busca.js" type="text/javascript"></script>
<style type="text/css">
.marca{ background-color: yellow}
 
*{
margin:0;
padding:0;
}
 
li {
	list-style-type:none;
	float:left;
	display:inline;
}
 
p {clear:both; padding-top:30px;}
 
#contenedor{
	margin:30px;
}
 
#muestra {
	padding-left: 10px;
	font-weight:bold;
}
#bus {
	padding-left: 10px;
}
</style>
<body>
<div id="contenedor">
<ul>
  <li><label>
    <input type="text" name="textfield" id="texto" />
  </label></li>
  <li><span id="bus"></span>Texto buscado: <span id="muestra"></span></li>
</ul>
<p>
  Esto es un ejemplo de "búsqueda al vuelo" mediante jQuery. Un sencillo ejemplo  que puedes descargar desde <a href="http://2kblog.net">2kblog.net</a></p>
<p>This is an Example of "fly search" with jQuery. An easy example that can be downloaded from <a href="http://2kblog.net">2kblog.net</a></p>
<p>Este es el código js - This is the js code:</p>
<p>&nbsp;</p>
<code>
$(document).ready(function(){						   
 	jQuery('#texto').keyup(function (e) {
 
			$('body').quitamarca();
			q = $("#texto").val();
			if(q != "") {$('body').marca(q);} else {$("#muestra").text(" ");}
	 });
});
</code>
<p>Bye</p>
</div>
</body>
</html>

Como veis lo único que cargo es el jQuery de google y el js que he hecho.

Ahora veamos el js que es lo con l0 que funciona la búsqueda:

1
2
3
4
5
6
7
8

$(document).ready(function(){
 $(document).ready(function(){
 	jQuery('#texto').keyup(function (e) {
	  $('body').quitamarca();
	  q = $("#texto").val();
	  if(q != "") {$('body').marca(q);} else {$("#muestra").text(" ");}
	 });
});

Vamos a dividir el código:

1. Le decimos que la función empieze cuando la tecla se levante con la función keyup. Si lo intentamos con el evento keypress no funcionará ya que la tecla que hayamos pulsado aún no se a añadido al campo de texto por lo que fallará. (He estado un buen rato para esa tontería jeje).
2. Le quitamos la marca (por si hay alguna). Esto hace que si borramos se actualice la búqueda.
3. Recogemos en la variable q el texto que hay en el campo con id=texto
4. Si el campo no tiene nada no busca el texto y resetea el span que muestra el texto que hemos buscado. Si existe algo lo marca. Esto es necesario por si borramos el campo que no falle el javascript y la página se quede colgando.

Y ya tenemos nuestro buscador funcionando!

El css del ejemplo es muy simple pero bastante para ver como funciona

Descarga el ejemplo:

Vamos a empezar por lo primero, el código html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQUery Tabs - 2kblog.net</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<link href="tabs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tabs.js"></script>
<script language="javascript" type="text/javascript">
	jQuery(document).ready(function(){
		jQuery("#tabs").tabs();
	});
 </script>
</head>
 
<body>
<div id="tabs">
    <ul class="misTabs"> 
	<li><a href="#blog" class="activa">2kBlog</a></li> 
	<li><a href="#tab1">Tab1</a></li> 
	<li><a href="#tab2">Tab 2</a></li> 
	</ul> 	 
	<div id="blog">
    	Ejemplo 1         
    </div> 
		Ejemplo 2
	</div> 
	<div id="tab2">
		Ejemplo 3
	</div> 
</div>
 
</body>
</html>

Vamos a desribir el código:

1. Como siempre la llamada a jQuery alojada en google.
2. La llamada al css y al javascript que haremos
3. Para que funcione la función javascript deberemos tener una estructura igual a la mostrada en el ejmplo, es decir, un div general, dentro una lista y antes de cerrar el div general los distintos divs a los que llamaremos.
4. Para que el script funcione debemos llamarle mandandole la id del div general, en mi caso: #tabs

Ahora veamos el js de 10 lineas: (lo pongo comentado para que lo veais)

1
2
3
4
5
6
7
8
9
10

jQuery.fn.tabs = function() {  //Creamos la función
	var elemento = jQuery(this);  //creamos una variable opara recoegr el elemento
	jQuery(elemento).find("div").hide().eq(0).show(); //Escondemos todas menos el primer elemento
	jQuery(elemento).find("ul li a").click(function(){ //para cada elemento clicado
		jQuery(elemento).find("ul li a").removeClass('activa'); //le quitamos la clase por si la tiene activa
		jQuery(this).addClass('activa'); //Añadimos la clase al elemento pulsado
		jQuery(elemento).find("div").hide(); //escondemos todos los divs
		jQuery( jQuery(this).attr('href') ).fadeIn(1000); //mostramos el div al elemento que hemos pulsado
	});
}

Lo único que hay que señalar es que podemos cambiar el modo en que se muestra y la velocidad. En vez de fadeIn podemos usar slideDown o slideToggle o simplemente show. Y en cuanto a la velocidad podemos usar milisegundos, o poner “slow” para lento, “fast” para rápido o “normal” para normal. (recordad que si ponemos 3000 serán 3 segundos)

Un ejmplo de la función con el css del ejemplo:

Como podes ver podemos incluir texto o video o cualquier cosa que pensemos.

Podeis descargaros el ejemplo desde aquí:

Mediante ejemplos muy fáciles podemos aprender desde como hacer un formulario irregular hasta por ejemplo crear un cronómetro.  E incluso tenemos un glosario!

Tenemos también tutoriales sobre como conectar con bases de datos, enlaces para descargar el software necesario para programar en vb.net, ejemplos de estructuras simples como distintos tipos de bucles, anidados, condiciones etc.

Lo podeis añadir a vuestro lector de RSS mediante este enlace : RSS de solovb.net

Os animo a ver la web que es realmente muy buena!!

Enlace -> solovb.net