TECNOLGICO NACIONAL DE MXICO

Instituto Tecnolgico de Len

PROGRAMACIN WEB

JQUERY

QUE PRESENTA:

ISABEL GUADALUPE ROCHA RAMREZ

PROFESOR:

LIC. ANGELICA MARA ORTIZ GAUCN

Len, Guanajuato Fecha

30 de octubre de 2017

1
Contenido
INTRODUCCIN .............................................................................................................................. 3
JQUERY............................................................................................................................................. 4
QU ES? ......................................................................................................................................... 4
PARA QU SIRVE? .......................................................................................................................... 4
CMO SE UTILIZA? ........................................................................................................................ 4
Hay varias maneras de comenzar a usar jQuery en su sitio web. Usted
puede:........................................................................................................................................... 4
DESCARGANDO jQUERY..................................................................................................... 4
EJEMPLO .......................................................................................................................................... 5
JQUERY MOBILE ............................................................................................................................ 6
QU ES? ..................................................................................................................................... 6
PARA QU SIRVE? .................................................................................................................. 6
CMO SE UTILIZA? ............................................................................................................... 6
EJEMPLO ....................................................................................................................................... 7
RESPONSIVE DESIGN ................................................................................................................. 8
QU ES? ..................................................................................................................................... 8
PARA QU SIRVE? .................................................................................................................. 8
CMO SE UTILIZA? ............................................................................................................... 8
MEDIA QUERIES........................................................................................................................ 9
QU ES? ..................................................................................................................................... 9
PARA QU SIRVEN? ............................................................................................................... 9
CMO SE UTILIZA? ............................................................................................................... 9
EJEMPLO ..................................................................................................................................... 11
CONCLUSIN ........................................................................................................................... 12
REFERENCIAS .............................................................................................................................. 13

2
INTRODUCCIN

En este documento hablaremos de jQuery, as mismo resolviendo algunas

preguntas como qu es jQuery, responsive design y los media query, para que se
usan y como aprender a usarlos. Adems como optimizar nuestros sitios web con
estas herramientas que nos ofrecen.

3
JQUERY

QU ES?
jQuery es una biblioteca de JavaScript ligera, "escribir menos, hacer ms. jQuery toma
muchas tareas comunes que requieren muchas lneas de cdigo JavaScript
para cumplir, y las envuelve en mtodos que puede llamar con una sola
lnea de cdigo.

PARA QU SIRVE?
El objetivo de jQuery es facilitar el uso de JavaScript en su sitio web.
jQuery tambin simplifica muchas cosas complicadas de JavaScript, como
llamadas AJAX y manipulacin de DOM.

CMO SE UTILIZA?
Hay varias maneras de comenzar a usar jQuery en su sitio web. Usted
puede:

Descargue la biblioteca jQuery de [Link]

Incluye jQuery desde un CDN, como Google

DESCARGANDO jQUERY
Descargamos el archivo desde [Link], el archivo que se descarga es un
archivo de JavaScript.

Para hacer referencia a esta librera, lo que tenemos que hacer es lo siguiente,
entre las etiquetas de <head> colocamos la etiqueta <sript src = aqu va el
nombre del archivo JavaScript que descargamos> y cerramos la etiqueta de
<script> con </script>. Como se ve a continuacin.

<head>

<script src="[Link]"></script>

</head>

4
EJEMPLO
<!DOCTYPE html>
<html>
<head>
<script src=""[Link]""> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>
</body>
</html>

5
JQUERY MOBILE

QU ES?
JQuery Mobile es un Framework optimizado para dispositivos tctiles
(tambin conocido como Framework mvil) que est siendo desarrollado
actualmente por el equipo de proyectos de jQuery. El desarrollo se
centra en la creacin de un Framework compatible con la gran variedad
de smartphones y tablets.

PARA QU SIRVE?
Con este jQueryMobile, aceleramos la velocidad de desarrollo de
aplicaciones, encapsulando muchas tareas comunes ue se realizan
cuando usamos el lenguaje JavaScript. Agrega una capa ms a JQuery e
intenta suplir algunas necesidades que los programadores de
dispositivos mviles padecen.

CMO SE UTILIZA?
Para comenzar, como cualquier framework, tenemos que insertar en la
cabecera de nuestro html unos ficheros:

JS de JQuery (base) [Link]

JS de JQuery Mobile [Link]

Hoja de estilos (CSS) de Jquery Mobile [Link]

Como se muestra a continuacin:

<head>

<title>JQueryMobile: Introduccin al desarrollo web para

mviles</title>

<script src=[Link]></script>

<script src=[Link]></script>

<link rel=stylesheet href=[Link] />

</head> 6
EJEMPLO

<!DOCTYPE html>
<html>
<head>
<title>JQueryMobile: Introduccin al desarrollo web para
mviles</title>
<script src=[Link]></script>
<script src=[Link]></script>
<link rel=stylesheet href=[Link] />
</head>
<body>
<div data-role=page>
<div data-role=header>
<h1>Mi empresa</h1>
</div>
<div data-role=content>
<p>Contenido</p>
</div>
<div data-role=footer>
<h4>Copyright</h4>
</div>
</div>
</body>
</html>

7
RESPONSIVE DESIGN

QU ES?
El responsive design corresponde a una tendencia de creacin
de pginas web que pueden ser visualizadas perfectamente en todo tipo
de dispositivos, desde ordenadores de escritorio hasta smartphones o
tablets. Con este tipo de diseo no necesitas tener una versin para
cada dispositivo, una sola web se adapta a todos ellos.

PARA QU SIRVE?
Nos sirve para no realizar ms pginas web para cada dispositivo,
nuestra pgina web o sitio web se adaptar a cada dispositivo dnde se
visualice.

CMO SE UTILIZA?
Se crea una sola website utilizando CSS3 media queries y un layout con
imgenes flexibles. De esta forma, la website detecta desde qu clase
de dispositivo est accediendo el usuario y muestra la versin ms
optimizada para ese medio, reorganizando los elementos de la web e
incluso discriminando algunos de ellos (menos imgenes, ms ligeras,
redistribucin de las columnas en el diseo, menos texto, etc.).

8
MEDIA QUERIES

QU ES?

Puesto de forma sencilla, son un mdulo de CSS que nos permite

identificar el medio en el cual se est mostrando nuestro sitio y bajo qu
condiciones para, en base a esa comprobacin, aplicar estilos
especficos.

PARA QU SIRVEN?

Usando media queries, podremos saber, por ejemplo, cundo el sitio se

est presentado en una ventana que mide 768 pixeles de ancho o
menos, o cuando se est enviando a imprimir

CMO SE UTILIZA?

En la llamada al archivo CSS.

Usando este mtodo le indicamos al navegador que utilice el archivo CSS que
estamos cargando solo si las condiciones se cumplen. Veamos un ejemplo:

<link rel="stylesheet" media="only screen and (max-width: 768px)"

href="[Link]" >

Con esta lnea, que debiera ir dentro del head de nuestro HTML,
estamos cargando la hoja de estilos [Link], pero sus propiedades
solo aplicarn si el sitio se est viendo en una pantalla, dentro de una
ventana de mximo 768 pixeles de ancho.

9
Dentro del archivo CSS

Esta es la forma ms recomendada, ya que nos permite tener mltiples

comprobaciones, sin la necesidad de cargar diferentes archivos por cada
una de las media queries que hagamos.

La forma de escribir un media query en CSS, para obtener el mismo

resultado que en el ejemplo anterior, es la siguiente:

@media only screen and (max-width: 768px) {

/* Aqu van todos los estilos CSS */
}

10
EJEMPLO

.caja {
width: 500px;
}
@media only screen and ( max-width: 700px ) {
.caja {
width: 100%;
}
}

11
CONCLUSIN
Con estas herramientas desarrollar una pgina web es mucho ms sencillo,
adems de que opitimizamos las paginas web con ests herramientas que
acabamos de ver en este documento.

12
REFERENCIAS

Jose Alberto. (2011). JQueryMobile: Introduccin al desarrollo web para

mviles. 30 de Octubre de 2017, de Xataka Sitio web:
[Link]
desarrollo-web-para-moviles

Anonimo. (2010). A Touch-Optimized Web Framework. 30 de Octubre de 2017,

de jQueryFoundation Sitio web: [Link]

Sarah Quesada. (2013|). Qu es Responsive Web Design?. 30 de octubre de

2017, de Maestro del WEB Sitio web: [Link]
responsive-web-design/

Francisco Aguilera G.. (2015). Introduccin al responsive web design y los media
queries. 30 de Octubre de 2017, de AMK Sitio web:
[Link]

13