Aplicaciones Web

APLICACIONES WEB
M.C. SHULAMITH SAMANTHA BASTIANI MEDINA
CONCEPTOS
Interfaz GUI
Pgina WEB
Sitio WEB
Hipervnculo
Servidor WEB
Hospedaje y Dominio
HTML
WWW
PREGUNTAS
Qu es para ti Interfaz GUI?
Qu es para ti Pgina WEB?
Qu es para ti Sitio WEB?
Qu entiendes por diseo de paginas WEB?
Qu Herramientas de diseo web conoces?
Qu es un Hipervnculo?
Qu es lo que ms te llama la atencin cuando entras a una pagina WEB?
Qu caractersticas crees importantes en el diseo se sitios WEB?
RESPUESTAS
Qu es para ti Interfaz GUI? En ingls Graphic User Interface. Una interfaz es el sistema de comunicacin
entre el usuario y la computadora.
Qu es para ti Pgina WEB? Unapgina web,pgina electrnicaociberpgina,es undocumentoo
informacin electrnica capaz de contener texto,sonido, vdeo, programas, enlaces, imgenes, y muchas
otras cosas, que puede ser accedida mediante unnavegador.
Qu es para ti Sitio WEB? es una coleccin depginas de internetrelacionadas y comunes a undominio
de Internetosubdominioen laWorld Wide WebenInternet
Qu Herramientas de diseo web conoces?
Qu es un Hipervnculo? Unhipervnculoes un enlace, normalmente entre dos pginas web de un mismo
sitio, pero un enlace tambin puede apuntar a una pgina de otro sitio web, a un fichero, a una imagen,
etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobre l. Tambin se conocen
como hiperenlaces, enlaces o links.
Qu es lo que ms te llama la atencin cuando entras a una pagina WEB?
Qu caractersticas crees importantes en el diseo se sitios WEB?
HTML
Cuando visitamos pginas web en realidad estamos accediendo a archivos en un servidor web. La direccin o URL tiene
este formato:
http://www.nombredominio.com/directorio/paginaweb.htm
Donde http:// es el protocolo y www. indica el sistema de pginas web. Sin embargo hace falta escribir esto en el
navegador. Pero es porque el navegador se encarga de aadirlo, no porque nos es necesario. nombredominio.com es el
nombre del sitio. Al ir directamente ah, vamos a su pgina de inicio. La ltima parte indica el archivo del sitio que
estamos viendo. En este caso, una pgina llamada paginaweb.htm que est en una carpeta llamada directorio.
Podemos visitar una direccin desde un buscador o desde un enlace en otra pgina. Podemos teclear la direccin en la
barra de direcciones del navegador o acceder desde nuestros favoritos.
Internet esta formada por un conjunto de servidores conectados. Un servidor es un ordenador conectado a la red de acceso
a Intenet que dispone de un programa que es capaz de recibir una URL y devolver una pgina web al que hizo la peticin.
Podramos decir queInternetestformadoporunagrancantidaddeordenadoresquepuedenintercambiar
informacinentreellos. Es una gran red mundial de ordenadores.
HTML
Una pgina web es un documento de texto con marcas, llamadas etiquetas (tags en ingls). Cuando este documento se
ve a travs de un navegador web, las etiquetas se interpretan y se visualiza el documento como una pgina web. Las
etiquetas no se muestran pero determinan el aspecto de la pgina, y otras caractersticas, por ejemplo, si el texto es un
enlace, en la etiqueta se indica la pgina a la que nos lleva el enlace.
Por lo tanto, si somos capaces de escribir un documento de texto, seremos capaces de escribir una pgina web. Slo
necesitamos conocer el lenguaje de las etiquetas o HTML.
Vamos a comenzar por escribir una pgina web muy sencilla. Para ello utilizaremos un editor de texto sin formato, como
puede ser el Blocdenotas (Notepad) includo en Windows. Puedes encontrarlo en Todoslosprogramas Accesorios.
El aspecto del Bloc de notas es muy simple, una hoja en blanco con una barra de mens.
Si no ests familiarizado con las forma de escribir en un ordenador, consulta este bsico .
PRUEBA
EJEMPLO
<html>
<head>
<title>Mi primera pgina</title>
</head>
<body>
<p>Hola mundo</p>
</body>
</html>
EJEMPLO
<html>
<head>
</head>
<body>
<p>Hola mundo</p>
<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans
Serif">Bienvenidos a www.aulaclic.es</font></p>
</body>
</html>
EJEMPLO
<html>
<head>
</head>
<body>
<p>Hola mundo</p>
<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos
a www.aulaclic.es</font></p>
<b>Te gusto la pagina:</b><br>
<INPUT TYPE=RADIO NAME=LIKE VALUE=LIKE>SI <INPUT TYPE=RADIO NAME=LIKE VALUE=LIKE>No<br>
</body>
</html>
EJEMPLO
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentacin</h2>
<p> En esta web encontrars informacin sobre la
asociacin y nuestra coleccin de fotografas de
flores.<br />
Tenemos las fotografas organizadas en diferentes categoras</p>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra pgina de contacto. Te esperamos.</p>
</body>
</html>
EJEMPLO<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentacin</h2>
<p> En esta web encontrars informacin sobre la
asociacin y nuestra coleccin de fotografas de
flores.<br />
Tenemos las fotografas organizadas en diferentes categoras</p>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra pgina de contacto. Te esperamos.</p>
<img src="descarga_1.jpg" alt="texto alternativo" /><br />
<img src="descarga_1.jpg" alt="Rosa" width="91" height="41" title="Flores" />
</body>
</html>
ETIQUETA INPUT
La forma general de la etiqueta INPUT es la siguiente:
<INPUT TYPE="tipo" NAME="nombre" VALUE="valor" SIZE="tamao"
MAXLENGTH="max_longitud" CHECKED>
Los atributos de INPUT son:
TYPE determina el tipo de entrada que se va a utilizar y sus valores pueden ser uno de los siguientes:
text, muestra una caja donde introducir texto. Es el tipo por defecto de INPUT.
password, muestra una caja donde se teclear texto cuyo eco ser sustituido por asterscos.
checkbox, un botn que slo puede tener dos estados, {on, off}.
radio, un botn que slo puede tener dos estados, {on, off}, pero que a diferencia de los checkbox,
puede
agruparse con otros botones de tipo radio con el mismo nombre y obtener as un comportamiento ``uno
de muchos''.
submit, un botn que produce que el formulario actual sea enviado al URL especificado en el
atributo ACTION del formulario.
reset, un botn que produce que todos los elementos del formulario pasen a su estado por defecto.
hidden, es una entrada que no se muestra en el browser y que sirve para pasar
informacin desde el formulario al servidor que no se quiere que el usuario vea.
PRACTICA
PRACTICA
PRACTICA
JAVASCRIPT
JavaScript es un lenguaje de programacin que se utiliza

principalmente para crear pginas web dinmicas.
Una pgina web dinmica es aquella que incorpora efectos
como texto que aparece y desaparece, animaciones, acciones
que se activan al pulsar botones y ventanas con mensajes de
aviso al usuario.
Los eventos son acciones determinadas que Javascript puede
detectar y los objetos de eventos aportan la informacin de
que evento ha ocurrido, estos pueden haber sido provocados
por la accin del usuario o por el propio dinamismo de la
pgina.
ETIQUETA INPUT
<input type="button" value="7"

onClick="document.calculator.ans.value+=4'">
CALCULADORA
MUSICA
embed.- La etiqueta incorpora sonidos en una pgina web, sonidos que se

ejecutan con un reproductor.
<embed src="C:\Users\Sam\Downloads\Spectre.mp3">
TABLAS
LINK
http://galeon.com/miprimerpaginassbm/formulario.html
GRFICOS EN EL SITIO WEB

Google API Chart
<img src="http://chart.apis.google.com/chart?
chs=400x100&cht=p&chd=t:45,25,10,20&chl=Valencia|Madrid|Barcelona|Lugo"
width="400" height="100">
Tamao de la imagen:
chs=400x100
Tipo de grfico (en este caso circular ):
cht=p
Datos del grfico:
chd=t:45,25,10,20
Los nombres de los campos que acompaan al grfico:
chl=Valencia|Madrid|Barcelona|Lugo
<img src="http://chart.apis.google.com/chart?
chs=400x100&cht=bhg&chco=e5f867|aaaaaa|
596605&chd=t:60,10,30&chdl=Me+gusta+%286+votos%29|
no+me+gusta+%281+voto%29|nsnc+%283+votos%29"
width="400" height="100">
PHP
https://www.appservnetwork.com/en/download/
Notepad++


<html>
<head>
<title>Ejemplo de PHP</title>
</head>
<body>
<?php
$a = 1;
$b = 3.34;
$c = "Hola Mundo";
echo $a,"<br>",$b,"<br>",$c;
?>
</body>
</html>


<html>
<head>
<title>Ejemplo de PHP</title>
</head>
<body>
<?php
$a = 8;
$b = 3;
echo $a + $b,"<br>";
echo $a - $b,"<br>";
echo $a * $b,"<br>";
echo $a / $b,"<br>";
$a++;
echo $a,"<br>";
$b--;
echo $b,"<br>";
?>
</body>
</html>
PHP
<html>
<head>
<title>Ejemplo de
PHP</title>
</head>
<body>
Parte de HTML normal.
<BR><BR>
<?php
echo "Parte de
PHP<br>";
for($i=0;$i<10;$i++)
{
echo "Linea ".
$i."<br>";
}
?>
</body>

Aplicaciones Web

Uploaded by

Document Information

Original Title

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

Aplicaciones Web

Uploaded by

Copyright:

Available Formats

APLICACIONES WEB

M.C. SHULAMITH SAMANTHA BASTIANI MEDINA

<title>Mi primera pgina</title>

JavaScript es un lenguaje de programacin que se utiliza

<input type="button" value="7"

embed.- La etiqueta incorpora sonidos en una pgina web, sonidos que se

GRFICOS EN EL SITIO WEB

You might also like