Iniciación a HTML y jQuery

Todo sobre lenguajes de programación, IDEs, lenguajes de bases de datos, HTML, etc.
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Iniciación a HTML y jQuery

Mensaje por ari0k0 »

INDICE DE RETOS:
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.
Última edición por ari0k0 el 10 Jul 2010 19:04, editado 3 veces en total.
Irenicus
Mensajes: 1238
Registrado: 19 Mar 2007 23:22

Re: Iniciación a HTML y jQuery

Mensaje por Irenicus »

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".
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

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.
Adjuntos
Arbol DOM
Arbol DOM
arbol dom 01.png (3.13 KiB) Visto 5625 veces
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

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
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Irenicus
Mensajes: 1238
Registrado: 19 Mar 2007 23:22

Re: Iniciación a HTML y jQuery

Mensaje por Irenicus »

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.
Última edición por Irenicus el 07 Jul 2010 11:33, editado 2 veces en total.
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

Ahora que venga el maestro y nos ilustre :P
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

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.
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

Lo que no comprendo es como llamar a la funcion javascrip desde el link
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Irenicus
Mensajes: 1238
Registrado: 19 Mar 2007 23:22

Re: Iniciación a HTML y jQuery

Mensaje por Irenicus »

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)
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

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 ;)
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Responder