Iniciación a HTML y jQuery

Mensaje por **ari0k0** » 07 Jul 2010 07:28

INDICE DE RETOS:

Reto 1: Crear la primera página html
Reto 2: Como instalar jQuery
Reto 3: Ejecutar javascript desde un link
Reto 4: Ocultar y Mostrar elementos con jQuery
Reto 5: Creación de slideshow (animación de imágenes) con javascript y jQuery

La idea, no será poner un manual explicando todo (porque esto sería un monólogo interminable), y quien quiera aprender tiene que mojarse, la idea es ir planteando ejercicios o retos y que entre todos los podamos ir resolviendo, comparando soluciones y así mejorando, con la ayuda de los demás.

Como partimos de que no se tiene porque saber HTML ni nada sobre jQuery, lo primero que se debería intentar hacer, es crear una página .html y como instalar el jQuery para poder usarlo. Ya se que posiblemente ya sepais como hacerlo, pero si dejamos aquí unos pasos básicos de como se haría, ayudarán a la gente nueva que pueda llegar aquí. Los retos propuestos irán de nivel fácil, e irán incrementando la dificultad.

Reto 1: Crear la primera página html (Nivel básico)
Realizar una página web sencilla, donde aparezca el típico texto de "hola mundo" centrado en la pantalla y en negrita.

Reto 2: Como instalar jQuery (Nivel básico)
jQuery es una librería javascript, que es gratuita y de libre uso, puedes descargarla y añadirla a tus ficheros html. Por lo tanto, hay que mirar, como añadir ficheros javascript en un fichero html.

Dejaré un tiempo a ver quien se anima a comentar como ha solucionado los dos primeros retos y finalmente pondré como se podría hacer y así también veo el nivel de los participantes, para ir incorporando nuevos retos.

Si alguien quiere incorporar un reto concreto, que lo proponga y se irá incorporando.

Irenicus · Mensaje por **Irenicus** » 07 Jul 2010 09:24

Bueno, lo he hecho sin CSS. Yo estoy empezando con HTML así que lo he puesto todo "como debería", con lo de DOCTYPE y eso para irme acostumbrando. A ver si así está bien:

Código: Seleccionar todo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">

<html>                                                                  
<head>
 <title>Título del ejemplo</title>
 <meta name="description" content="Instalar jQuery">
 <meta name="keywords" content="jquery, javascript">
 <meta name="language" content="es">
 <meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" > 
 <script type="text/javascript" src="jquery.js"></script>          
 <script type="text/javascript">
 
 
 
 </script>                                                               
</head>                                                                 
<body>                                                                  
 <p align="center"><strong>¡¡ Hola MundoBIP !!</strong></p>                        
</body>                                                                 
</html>

He descargado el archivo jquery.js de la página oficial (http://code.jquery.com/jquery-1.4.2.js) y lo he guardado a un archivo llamado jquery.js en el mismo directorio que index.html . Así que he hecho el src = "jquery.js".

Mensaje por **ari0k0** » 07 Jul 2010 10:31

Más que bien!! Perfecto, tanto el Reto1 como el Reto2. Quesito para Irenicus

Para los que no sepan mucho de html, la página html se vería igual si ponemos los elementos básicos:

Código: Seleccionar todo

<html>                                                                 
<body>                                                                 
<p align="center"><strong>¡¡ Hola MundoBIP !!</strong></p>                       
</body>                                                                 
</html>

Pero vemos que como bien especifica Irenicus, usando ciertos tags, conseguimos una página que se verá igual con el navegador pero en realidad internamente está mucho mejor, porque que cuando un BOT (programa automático que usan los buscadores, como google, bind, etc...) lee la página le aporta mucha más información, con lo que lo valora mejor y esa página la mostrará por encima de otras similares.

Para los tags básicos de HTML se puede consultar en infinidad de manuales, por ejemplo: Tutorial Básico de HTML. Pero si hacemos un poco de detalle en algunos interesantes de los que ha puesto Irenicus, tenemos:

DOCTYPE --> Este nos servirá para indicar el tipo de documento, las reglas que segirá, esto sirve para confirmar que ese documento viene marcado por unas normas concretas. (en XML es similar, se pueden hacer .dtd concreto para nuestros XML).
Title --> titulo de la página, parece una tontería pero los BOTS lo valoran mucho.
Meta --> Son textos clave, que están ocultos en la web, pero que los BOTS valoran mucho para poder clasificar tu web.
SCRIPT --> Este tag nos servirá para cargar ficheros externos o poner código entre la apertura y cerrar el tag.
Importante también, tener claro el charset que usamos al codificar la página: ISO o UTF-8, porque esto... a la larga, nos puede traer problemas dependiendo de que tipo de codificación usemos.

Como sería el árbol DOM basico de la página web? (ver adjunto)

Bien teniendo ya estas nociones básicas, se podría pasar al siguiente reto.

Reto 3: Partiendo de esa página web, añadir un link que al seleccionarlo ejecute un código en javascript
Hay que tener en cuenta que jQuery no deja de ser javascript, así que habrá que tener algunas nociones de javascript.

Xtreme · Mensaje por **Xtreme** » 07 Jul 2010 10:52

No consigo hacer que un link ejecute el código javascript, aquí lo que he hecho yo

Código: Seleccionar todo

<html>
<head>
<title>Prueba Javascript</title>
</head>                                                                 
<body>                                                                 
<p align="center"><strong>¡¡ Hola MundoBIP !!</strong></p>                                                                                       
</html>

<div id="codigo1" >
<script type=text/javascript>
window.onbeforeunload = function exitAlert()
{
var texto = "¿Desea realmente cerrar la página?";
return texto;
}
</script>
</div>
</body>
</html>

Si pudieras ayudarme a como ejecutar ese código al pinchar en el enlace estaría genial

PD: El javascript es simplement una confirmación con el texto que desee al cerrar la web

Irenicus · Mensaje por **Irenicus** » 07 Jul 2010 11:14

Creo que lo que tienes que hacer es poner eso mismo en el head ya que es un script global; quedando así:

(¿Y de paso sirve para el Reto 3 aunque no hayamos usado jQuery?)

Código: Seleccionar todo

<html>
<head>
<title>Prueba Javascript</title>
<script type=text/javascript>
window.onbeforeunload = function exitAlert() {
	var texto = "¿Desea realmente cerrar la página?";
	return texto;
}
</script>
</head>                                                                 
<body>                                                                 
<p align="center"><strong>¡¡ Hola MundoBIP !!</strong></p>
</body>
</html>

Aunque yo acabo de comenzar hoy javascript y es posible que otra opción sea mejor.

EDITADO: Te había leído mal, pensaba que el código que habías puesto no funcionaba; pero veo que funciona perfecto. No me hagas caso, jajaja.

Xtreme · Mensaje por **Xtreme** » 07 Jul 2010 11:26

Ahora que venga el maestro y nos ilustre

Mensaje por **ari0k0** » 07 Jul 2010 12:04

Nada de maestro.. aquí somos todos al igual

unos saben de unas cosas y otros de otras...
Las etiquetas de script, siempre tienen que estar antes dentro del head, antes del body. Y luego desde el body, se llamarán a las funciones. ¿Porque? porque se toma como una buena práctica y porque para cuando se carge el <body> las funciones tienen que estar listas y cargarse antes.

Las etiquetas DIV.. son muy típicas en las páginas web, porque sirven como "contenedores".. englobas elementos en etiquetas DIV para luego aplicarle a todos los elementos una acción o agruparlos. Se utilizan mucho para maquetar mediante CSS agrupando elementos y aplicándoles la misma maquetación.

Mirando el javascript, hay una cosa interesante para comentar:

Código: Seleccionar todo

windows.onbeforeunload = function ....

windows.onbeforeunload --> es un evento en javascript, que salta antes de que se cierre la pagina que tienes abierta, lanza la función javascript que especificas.

El reto3 sirve para pillar nociones básicas de como hacer un link (Html), como enlazar con el link, como llamar a una función javascript desde el link, ya que se usará para más tarde llamar las funciones jQuery desde el javascript.

Pero en la página html que habeis puesto, faltaría agregar un link (tag "a" en html), crear una función javascript que por ejemplo te haga un "alert" de un texto y llamar a la función en javascript creada. De modo que al clickear el link, se abrirá una ventanita (alert) con un texto informativo.

Xtreme · Mensaje por **Xtreme** » 07 Jul 2010 12:06

Lo que no comprendo es como llamar a la funcion javascrip desde el link

Irenicus · Mensaje por **Irenicus** » 07 Jul 2010 13:45

Propongo este código:

Código: Seleccionar todo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">

<html>                                                                  
<head>
<title>Título del ejemplo</title>
<meta name="description" content="Instalar jQuery">
<meta name="keywords" content="jquery, javascript">
<meta name="language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" > 
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<a href="http://www.mundobip.com" onclick="alert('¡Bienvenido a MundoBIP!')">Enlace a MundoBIP</a>
</body>                                                                 
</html>

O para poner que TODOS los enlaces tengan el código javascript pondríamos el siguiente código en el head:

Código: Seleccionar todo

<script type="text/javascript">
 	$(document).ready(function() {
   		$("a").click(function() { alert("¡Hola MundoBIP!"); });
 	});
</script>

(esto último visto en la página de jQuery)

Xtreme · Mensaje por **Xtreme** » 07 Jul 2010 14:00

Claro, lo último que has puesto es lo que he visto yo en la página de Jquery, pero no comprendo el funcionamiento del código

Ahora con el tuyo primero me queda mucho más claro el asunto

Iniciación a HTML y jQuery

Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery

Re: Iniciación a HTML y jQuery