Clase1

Tecnologías Web

Profesor:
Luis López Bracamonte

Objetivo Generales
• Conocer y Manejar Las herramientas necesarias para desarrollar
aplicaciones Web de Calidad
• Conocer y Manejar los conceptos básicos de seguridad Para
aplicaciones Web

Unidades
 Tecnologías Para la Web Estática
 Tecnologías Para la Web Dinámica
 Base de Datos
 Seguridad Web

Orígenes de Internet
 1969 Arpanet (Red Militar)
 1971 Correo Electrónico
 1979 USENET
 1984 Grupos de noticias
 1989 WEB

Objetivos de la web
 Los objetivos han ido variando en el tiempo y ha dado lugar a
las fases del desarrollo de la WEB al interior de la empresa
que se pueden agrupar de la siguiente forma:
1. Presencia
2. Interacción
3. Transacciones
4. Transformación

Web Estática
 HTML(HyperText Markup Language): Es un lenguaje de
formato de texto que a través de sus etiquetas (tags)
determina la forma en como se presenta el contenido en el
cliente
 Los navegadores interpretan estas etiquetas
 Java Script: Es un Lenguaje de programación que soportan
los navegadores. Su código se programa directamente dentro
de la página HTML y es interpretado por el navegador al
leerla
 CSS(Cascading Style Sheets): permiten añadir o modificar el
estilo de la presentación de las páginas y las etiquetas HTML,
permitiendo un mayor control de la presentación de la página

Web Estática:TAG
 Es un marcador que define el como debe ser presentado en
el navegador parte de un documento
 Los Tag comienzan y terminan por estándar. Caso Explorer y
Netscape – <table>.....</table>
 Algunos tags tienen atributos que definen otras
características. – <img src=“/Imagenes/logo.gif”>
– src representa la ruta de la imagen.

Tags Básicos
 <html>..</html> Marca el inicio de un documento html
 <head>..</head> Marca el inicio de la sección de encabezado
 <title>..</title> Establece el título de un documento
 <body>..</body> Contiene el contenido del documento

Tag Link
 Pertenece a la sección encabezado del documento
html(head).
 Permite establecer una relación entre el documento y otros
documentos.
 Permite modularizar la página
 Dentro de sus atributos se encuentran:
– href: URL en donde se encuentra el documento relacionado.
– rel: identifica el tipo de documento relacionado.
Ejemplo Tag Link
En la plantilla ejemplo.htm se encuentra dentro de la sección
head : <link rel="stylesheet" href="css/principal.css"
type="text/css">

Tag Script
 Pertenece a la sección encabezado o bien el cuerpo del
documento html(body)
 Define que lo escrito dentro de este tags debe ser
interpretado como un lenguaje script
 Permite modularizar la página
 Dentro de sus atributos se encuentran:
– Language: especifica el lenguaje del script.
– Type: pueden ser dos valores text/javascript o text/vbscript
 Ejemplo Tag Script
 • En la plantilla ejemplo.htm se encuentra dentro de la sección
head : <script type="text/javascript“ language="JavaScript">
 //Código Javascript </script>

Tags de Textos, Formatos y
Párrafos
 <h1><h2><h3><h4><h5><h6> Se utiliza para crear los títulos
de los documentos
 <strong>..</strong> Permite dar mayor énfasis a un texto
 <p>..</p> Define el comienzo de un párrafo
 <center>..</center> Permite centrar un texto
 <br>..</br>Produce un quiebre de línea
 <i>..</i> Permite definir un texto con estilo italic
 <LI>..</LI> Define cada elemento de una lista

Imágenes y sus atributos
 Se utiliza el tag <img>.
 Los atributos de este Tag son:
– Border: numérico, indica si la imagen tiene contorno.
– Width : Define el ancho de una imagen.
– Height: Define el alto de una imagen.
– Alt : Texto alternativo que se mostrará en caso de que la
imagen no pueda ser mostrada

Links y Atributos
 Se define a través del Tag <a>..</a>
 Dentro de los tags comienzo y fin se escribe el texto a
desplegar. Ejemplo:
 – <a href=“#”>Haga Clic Aquí</a>
 Los atributos de este Tag son:
– Href: este atributo define una url, nombre de archivo o bien
javascript a ejecutar, También puede ir # que involucra que
permanecer en la misma página.
– Target: donde se ejecutará la acción del link.

Links y Atributos
 Ejemplo
<a href=“pag.html" target=“<:Target>">Hacer Clic Aquí</a>
Valor Descripción

_blank Abre el documento vinculado en
una nueva ventana o pestaña

_self Abre el documento vinculado en el
mismo marco que se ha hecho clic
(esto es por defecto)

Tablas
 Permiten manejar la información de manera ordenada (ideal
para mostrar los campos a llenar en un formulario y los
resultados de un reporte)
Tabla: <TABLE> Fila: <TR> Columna: <TD>
<TABLE border = "1">
<TR><TH>Año<TH>Ingresos<TH>Gastos</TH></TR>
<TR><TD>1997<TD>100<TD>200</TD></TR>
<TR><TD>1998<TD>200<TD>100</td></TR>
</TABLE>

Tablas
 Atributos
Valor Descripción

align Justifica el texto de la celda del
mismo modo que si fuese el de un
párrafo
valign Podemos elegir si queremos que el
texto aparezca arriba (top), en el
centro (middle) o abajo (bottom) de
la celda
bgcolor Para el color a la celda o línea
elegida
bordercolor Define el color del borde

background permite colocar un fondo para la
celda a partir de un enlace a una
imagen

Tablas
 Continuación Atributos
Valor Descripción

height Define la altura de la
celda en pixels o
porcentaje
width Define la anchura de la
celda en pixels o
porcentaje
colspan Expande una celda
horizontalmente
rowspan Expande una celda
verticalmente

Formularios
 Se llama formulario a una plantilla o página con espacios
vacíos que han de ser rellenados con alguna finalidad
 <form name="frmformulario" action="archivo.html"
method=“:Metodo"> --Cuerpo del Formulario</form>
Method: Indicará como enviar las respuestas donde:
- POST: Es el valor que envía los datos al agente de
procesamiento almacenándolos en el cuerpo del
formulario
- GET: Envía los datos agregándolos a la dirección URL
y separándolos de la dirección con un signo de
interrogación, las variables se separaran con el
signo &

Objetos de un Formulario
 Botón de Envío
<input type="submit" name="cmdenviar" value=“Enviar”
id="enviar">

 Botón de Reset
<input type="reset" name="resetear" value="Restablecer"
id="resetear">

 Botón
<input type="button" name="boton" value="boton"
id="boton">

 Casilla de Texto
<input type="text" name="casilla" value="" id="casilla">

 Texto de Password
<input type="password" name="clave" value="" id="clave">

 Casilla de área
<textarea name="casilla de area"> </textarea>

 Campo Oculto
<input name="oculto" type="hidden" value="cualquiera">
 Casilla de Verificación
<input type="checkbox" name="verifica" value="1">
<input type="checkbox" name="varifica2" value="2">

 Casilla de Verificación
<input type="radio" name="opcion1" value="1">
<input type="radio" name=“opcion2" value="2">

 ComboBox
<select name="menu1">
<option value="1" selected>opcion1</option>
<option value="2">opcion2</option>
<option value="3">opcion3</option>
</select>

CSS
 Es un lenguaje usado para definir la presentación de un
documento estructurado escrito en Html
 Proporciona tres tipos reglas de estilo a una página Web
1. Una hoja de estilo externa: está almacenada en un archivo
diferente al archivo donde se almacena el código HTML
2. Una hoja de estilo interna: está incrustada dentro de un
documento HTML(se encuentra a la derecha del <head>)
3. Un estilo en línea: es un método para insertar el lenguaje
de estilo de página directamente dentro de una etiqueta
HTML

css
 Sintaxis Básica
Selector { propiedad: valor; ...}

Declaración

El selector puede ser un elemento HTML o uno definido por
el desarrollador

 Invocación desde la Cabecera (<HEAD>)
<STYLE TYPE="text/css">
<!–
P {text-align:right}
-->
</STYLE>

css
 Estilo como atributo
<P STYLE="text-align: right">Estilo propio</P>

 Hoja de estilo externa
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
Donde:
Atributo REL: El enlace es una hoja de estilos
Atributo TYPE: El archivo es de texto y en sintaxis CSS
Atributo HREF: Archivo con extensión css

Selectores
 Elementos
H1 {font-family: Arial, Helvetica, sans-serif; font size: 10pt; font-
style: italic;}
 Elementos agrupados
H1, P, B {font-color: blue;}
 Clases para elementos
P.enfatizada {font-weight: bold;}
 Clases generales
 .enfatizada {font-weight: bold;}
Sintaxis de Uso
<Tag CLASS = “nombreClase”> … </Tag>

Selectores
 Selectores ID
#enfatizada {font-weight: bold;}
Sintaxis de Uso
<Tag ID = “nombreID”> … </Tag>
 Ejemplo
P.especial { color : green; border: solid red; }
H1 {color:#CC9900;}
.enfatizada {color : green;font-weight: bold;}
#PalabrasClave {color : blue;font-weight: bold}

Ejemplo CSS
<HTML> <HEAD>
<TITLE>Un documento con una hoja de estilo externa</TITLE>
<LINK href="especial.css" rel="stylesheet" type="text/css">
</HEAD><BODY>
<h1>ejemplo Css</h1>
<P class="especial">Este párrafo debería tener texto especial
verde. </p>
<strong class="enfatizada">Prueba de llamado a clase
enfatiza</strong>
<p ID = "PalabrasClave">Palabras clave: Bases de datos,
Programación web, Generación dinámica de contenidos, ASP,
PHP, JSP</p></BODY> </HTML>

Ejemplo CSS
 Ejemplo
td{font-family:Tahoma;font-size:11px;}
.tabla {
background-color: #FBFCFE;
text-align: left;
padding: 2px;
border: 1px solid #ededed;
}

Ejemplo CSS
 Continuación Ejemplo
.rowhead {
font-weight: bold;
color: #333333;
background-color: #f8f8f8;
padding-bottom: 8px;
}

CSS
 Continuación Ejemplo
<html><head><meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"> <title>Prueba</title>
<link href="ejemplo__hoja_estilo.css" rel="stylesheet"
type="text/css"> </head>
<body> <table border='1' align='center' cellpadding='0'
cellspacing='0' bordercolor='#f4f4f4' class='tabla'>
<tr><td class='rowhead'>Rut</td>
<td class='rowhead'>Nombres</td>
<td class='rowhead'>Apellidos</td></tr>
<tr><td>19</td><td>Luis</td><td>López</td></tr>
</table></body></html>

Pseudoclases
 El elemento <A> tiene cuatro pseudoclases asociadas:
link, visited, active, hover
A:link. Selector para enlace no visitado
A:visited. Selector para enlace visitado
A:active. Selector para enlace que está siendo pulsado
A:hover. Selector para enlace por el que está pasando el
Mouse

Pseudoclases
 Ejemplo
a:hover{color:#7099CD}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5378A6;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FF0000;
}

Clase1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Clase1

Similar a Clase1 (20)

Clase1