Desarrollo Web I

UJCM
Introduccin AJAX
Ingeniera Web I
UJCM
Qu es AJAX?
AJAX
son
las
siglas
de Asynchronous JavaScript And XML.

No es un lenguaje de programacin sino un
conjunto de tecnologas (HTML-JavaScript-
CSS-DHTML-PHP/ASP.NET/JSP-XML)
que
nos permiten hacer pginas de internet ms
interactivas.
Curso: Ingeniera Web I
CAP 1
UJCM
Qu es AJAX?
La
caracterstica fundamental
permitir
de AJAX es
actualizar parte de una pgina
con informacin que se encuentra en el servidor
tener que refrescar
sin
completamente
la
pgina. De modo similar podemos enviar informacin al

servidor.
CAP 1
UJCM
Qu es AJAX?
La complejidad se encuentra en que debemos
dominar varias tecnologas:
HTML
CSS
JavaScript
PHP o algn otro lenguaje que se ejecute en el servidor
(ASP.Net / Python / etc).
CAP 1
UJCM
Formas para indicar el color

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="fondo1">Primer prrafo</p>
<p class="fondo2">Segundo prrafo</p>
<p class="fondo3">Tercer prrafo</p>
</body>
</html>
CAP 1
UJCM

.fondo1 {
background-color:rgb(255,0,0);
}
.fondo2 {
background-color:rgb(100%,50%,50%);
}
.fondo3 {
background-color:#fab;
}
CAP 1
UJCM

.fondo1 {
background-color:rgb(255,0,0);
}
.fondo2 {
cambiar
el
CSS
para
tonalidades
background-color:rgb(100%,50%,50%);
derivadas del azul
}
.fondo3 {
background-color:#fab;
}
Ahora
CAP 1
UJCM
Definir un cursor para un elemento HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Este texto tiene por mostrar las anclas con un cursor distinto al que
est definido por defecto:</p>
<a href="http://www.google.com.pe">google.com</a><br>
<a href="http://www.yahoo.com">yahoo.com</a><br>
<a href="http://www.bing.com">bing.com</a>
</body>
</html>
CAP 1
UJCM
Definir un cursor para un elemento HTML
La hoja de estilo es:

a { cursor:help; }
CAP 1
UJCM
Definiendo reglas de estilo a una tabla
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<caption>
cantidad de lluvia caida en mm.
</caption>
<thead>
<tr>
CAP 1
UJCM
<th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th>
</tr>
</thead>
<tbody><tr>
<th>Arequipa</th>
<td>210</td><td>170</td><td>120</td></tr>
<tr>
<th>Puno</th>
<td>250</td><td>190</td><td>140</td></tr>
<tr>
<th>Cusco</th>
<td>175</td><td>140</td><td>120</td></tr>
</tbody>
</table>
</body>
</html>
CAP 1
UJCM
caption
{ font-family:arial;
font-size:15px;
text-align: center;
margin: 0px;
font-weight: bold;
padding:10px; }
table
{ border-collapse: collapse; }
th
{ border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0.5em;
background-color:#6495ed; }
CAP 1
UJCM
thead th
{ background-color: #6495ed;
color: #fff; }
tbody th
{ font-family:arial;
font-weight: normal;
background-color: #6495ed;
color:#ff0; }
td {
border: 1px solid #000;
padding: .5em;
background-color:#ed8f63;
width:100px;
text-align:center; }
CAP 1
UJCM
Propiedad float aplicada a una imagen
<!DOCTYPE html>
<html>
<head>
<title>Problema</title> <link rel="StyleSheet" href="estilos.css"
type="text/css">
<link </head> <body> <img src="imagen1.png">
<p> El texto envuelve a la imagen.El texto envuelve a la imagen El texto envuelve
a la imagen.El texto envuelve a la imagen El texto envuelve a la imagen.El texto
envuelve a la imagen El texto envuelve a la imagen.El texto envuelve a la imagen
El texto envuelve a la imagen.El texto envuelve a la imagen El texto envuelve a la
imagen.El texto envuelve a la imagen El texto envuelve a la imagen.El texto
envuelve a la imagen
</p> </body> </html>
CAP 1
UJCM
Propiedad float aplicada a una imagen
La hoja de estilo:
img { float:right; }
CAP 1
UJCM
Aplicacin de hojas de estilo a un
formulario
<!DOCTYPE html>
<html>
<head>
<title>Problema</title> <link rel="StyleSheet" href="estilos.css"
type="text/css">
</head>
<body>
<div id="contenedorform">
<form method="post" action="#">
<label>Ingrese nombre:</label>
<input type="text" name="nombre" size="30> <br>
<label>Ingrese mail:</label>
<input type="text" name="mail" size="45> <br>
<label>Comentarios:</label>
<textarea name="comentarios" cols="30" rows="5"></textarea> <br>
<input class="botonsubmit" type="submit" value="confirmar">
</form> </div>
</body>
</html>
CAP 1
UJCM
Aplicacin de hojas de estilo a un
#contenedorform {
width:500px;
margin-left:20px;
margin-top:10px;
background-color:#ffe;
border:1px solid #CCC;
padding:10px 0 10px 0; }
#contenedorform form label {
width:120px;
float:left;
font-family:verdana;
font-size:14px; }
.botonsubmit {
color:#f00;
background-color:#bbb;
border: 1px solid #fff; }
CAP 1
formulario
UJCM
Propiedad clear
La propiedad clear se emplea
otros elementos
combinndola con
que se hayan definido la propiedad
float. La propiedad clear define que un elemento HTML no

permite que flote en el caso que el elemento anterior se haya
definido con dicha propiedad.
Tambin se puede definir que no flote a izquierda o derecha
nicamente.
CAP 1
UJCM
Propiedad clear
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="caja1">
<p>caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1
caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1 caja1
</p>
</div>
CAP 1
UJCM
Propiedad clear
<div id="caja2"> <p>

caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2 caja2
caja2 caja2 caja2
</p> </div>
CAP 1
UJCM
Propiedad clear

caja3
</p> </div>
CAP 1
UJCM
Propiedad clear

caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4 caja4
</p> </div> </body> </html>
CAP 1
UJCM
Propiedad clear
#caja1 {
float:left;
width:250px;
background-color:#ffc;
margin:10px; }
#caja3 {
float:left;
width:250px;
margin:10px; }
#caja2 {
float:left;
width:250px;
margin:10px; }
#caja4 {
float:left;
width:250px;
margin:10px; }
CAP 1
UJCM
Selector de atributo
Ahora veremos otra forma de seleccionar elementos HTML mediante el
acceso de sus atributos.
Recordemos que un elemento HTML est normalmente constituido por
una marca de comienzo, un valor, la marca de cierre y sus atributos:
<a href="http://www.google.com.pe" target="_blank">
Titulo Principal</a>
En este ejemplo el elemento "
a" tiene definido
dos atributos: href y target.

CAP 1
UJCM
Hay una serie de posibilidades de utilizar el selector de atributo que
pasaremos a ver:
1. Con el selector de atributo

podemos verificar si un elemento
HTML tiene definida un atributo
determinado para as poder aplicar
estilos.css
un estilo.
Por ejemplo apliquemos
a[target]{
} "a"
estilos
distintoscolor:#f00;
a los elementos
que tienen definido el atributo
target:
CAP 1
UJCM
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Enlaces a buscadores.</h1>
<ol>
<li> <a href="http://www.google.com.pe"> Ir a google</a> </li>
<li> <a href="http://www.bing.com">
Ir a bing</a> </li>
<li>
<a href="http://www.yahoo.com"
yahoo</a> </li>
</ol>
</body>
</html>
target="_blank">Ir a
CAP 1
UJCM
2. Una segunda posibilidad es no

solo verificar si un elemento HTML
define una determinada propiedad
sino controlar si su contenido
almacena un determinado valor.
Confeccionemos
una pgina que
estilos.css
a[href="#"]{
text-decoration:line-through;
muestre
todos
los enlaces "a" de}
la
pgina
que
CAP 1
tengan
UJCM
3.
Podemos tambin controlar si el valor de la propiedad

comienza, finaliza o tiene en su interior una
determinada cadena de caracteres. Veamos la sintaxis
con un ejemplo:
a[href^="http"] {
color:#f00; }
a[href$=".pe"] {
color:#0f0; }
a[href*="yahoo"] {
color:#00f; }
CAP 1
UJCM
3.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Enlaces a buscadores.</h1>
<ol>
<li>
<a href="http://www.google.com">Ir
google</a> </li>
<li>
<a href="www.bing.com.pe">Ir
bing</a> </li>
<li> <a href="www.yahoo.com">Ir
a yahoo</a> </li>
CAP 1
UJCM
Transformaciones 2D: rotacin
Las transformaciones todava no estn definidas como un estndar en
todos los navegadores, por lo que es necesario agregar el prefijo del
navegador que la implementa:
Elemento {
-ms-transform: funcin de transformacin(valor(es)); /* InternetExplorer */
-webkit-transform: funcin de transformacin(valor(es)); /* WebKit */
-moz-transform: funcin de transformacin(valor(es)); /* Firefox */
-o-transform: funcin de transformacin(valor(es)); /* Opera */
}
Tengamos en cuenta que la propiedad de transformacin

2D definitiva ser:
Elemento
{ transform: funcin de transformacin(valor(es)); }
CAP 1
UJCM
Para rotar un recuadro 45 grados en sentidos de las agujas
de un reloj y que funcione en la mayora de los navegadores
deberemos implementar el siguiente cdigo:
#recuadro1{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px; }
CAP 1
UJCM
Para rotar un recuadro 45 grados en sentidos de las agujas
de un reloj y que funcione en la mayora de los navegadores
deberemos implementar el siguiente cdigo:
#recuadro1{
width:200px;
padding:10px; }
CAP 1
UJCM
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<style type="text/css">
#recuadro1{
width:200px;
padding:10px;
}
CAP 1
UJCM
#recuadro2{
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width:200px;
padding:10px;
}
CAP 1
UJCM
body {
background:white;
margin:50px; }
</style>
</head>
<body>
<div id="recuadro1">
<h3>Recuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, </p>
</div>
CAP 1
UJCM
<div id="recuadro2">
<h3>Recuadro 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, </p>
</div>
</body>
</html>
CAP 1
UJCM
Gracias
Click to edit company slogan .

Desarrollo Web I

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Desarrollo Web I

Uploaded by

Copyright:

Available Formats

UJCM

de Asynchronous JavaScript And XML.

Curso: Ingeniera Web I

actualizar parte de una pgina

con informacin que se encuentra en el servidor

tener que refrescar

pgina. De modo similar podemos enviar informacin al

Curso: Ingeniera Web I

Curso: Ingeniera Web I

Formas para indicar el color

Curso: Ingeniera Web I

Formas para indicar el color

Curso: Ingeniera Web I

Formas para indicar el color

Curso: Ingeniera Web I

Curso: Ingeniera Web I

La hoja de estilo es:

Curso: Ingeniera Web I

Curso: Ingeniera Web I

Curso: Ingeniera Web I

que se hayan definido la propiedad

float. La propiedad clear define que un elemento HTML no

Curso: Ingeniera Web I

<div id="caja2"> <p>

Curso: Ingeniera Web I

<div id="caja3"> <p>

Curso: Ingeniera Web I

<div id="caja4"> <p>

Curso: Ingeniera Web I

Curso: Ingeniera Web I

En este ejemplo el elemento "

a" tiene definido

dos atributos: href y target.

1. Con el selector de atributo

2. Una segunda posibilidad es no

Curso: Ingeniera Web I

Podemos tambin controlar si el valor de la propiedad

Curso: Ingeniera Web I

Curso: Ingeniera Web I

Tengamos en cuenta que la propiedad de transformacin

Curso: Ingeniera Web I

Curso: Ingeniera Web I

You might also like