Download - Diseño de paginas Web

Transcript
Page 1: Diseño de paginas Web

Diseño de páginas web

Victor Juan González

Page 2: Diseño de paginas Web

Conceptos básicos Página web Servidor Cliente Servidor web Servidor ftp Cliente ftp Hosting Dominio

Page 3: Diseño de paginas Web

Páginas web Son documentos normalmente en formato

html o htm, que se desarrollan según un lenguaje denominado html

Se puede conseguir la última versión del lenguaje html en español en el siguiente enlace:http://html.conclase.net/w3c/html401-es/cover.html

Page 4: Diseño de paginas Web

Cliente - Servidor

Page 5: Diseño de paginas Web

Servidores web Es el ordenador que contendrá nuestra página web para que cualquiera

pueda verla en internet. También se refiere al programa que responde ante peticiones de visionado de páginas web. Normalmente habrá que pagar para tener este servicio. El servidor web más popular es el Apache

Page 6: Diseño de paginas Web

Servidores y clientes ftp Mediante ftp, podemos subir nuestra página web

a internet mediante la empresa de hosting que hayamos contratado.

Desde nuestro equipo utilizaremos un cliente ftp que se conectará a un servidor ftp

El funcionamiento es similar al del explorador de windows

Uno de los clientes ftp más populares es el Filezilla (gratuito)

Page 7: Diseño de paginas Web

Hosting El término hosting se refiere a dónde, en

qué empresa, vamos a tener nuestra página web para que se pueda visitar por cualquiera en internet

Ejemplos de hosting Galeon: http://galeon.hispavista.com/ 1 y 1: http://www.1and1.es

Page 8: Diseño de paginas Web

Dominios Un dominio es por ejemplo

www.elmundo.es Se suelen contratar junto con la empresa con la que hemos

contratado el hosting. Tenemos antes que comprobar que ese dominio

actualmente no pertenece a nadie Se pueden comprar, vender y especular con dominios. En el caso de los blogs, ya nos asignan automáticamente

un subdominio de forma gratuita. Ejemplo: pepitogrillo.blogspot.com

Page 9: Diseño de paginas Web

Tecnologías web Html: el lenguaje de las páginas web Java y Javascript: lenguaje de programación que

se ejecuta en un cliente Flash: video Php: leguaje de programación que se ejecuta en

un servidor Asp: lenguaje de programación que se ejecuta en

un servidor Mysql: base de datos en internet Css: estilos de diseño web

Page 10: Diseño de paginas Web

El código html<HTML>

<HEAD> <TITLE>Primer ejemplo de JavaScript</TITLE> </HEAD>

<BODY> <b>Esto es texto normal de un documento

HTML</b> </BODY> </HTML>

Page 11: Diseño de paginas Web

El código html

Page 12: Diseño de paginas Web

Ejemplo de javascript<HTML> <HEAD>

<TITLE>Primer ejemplo de JavaScript</TITLE>

</HEAD>

<BODY> <b>Esto es texto norrnal de un documento HTML</b> <P>

<SCRIPT LANGUAGE="JavaScript"> docurnent.write("Texto generado desde JavaScript") </SCRIPT> <P> <b>Esto es, de nuevo, HTML</B>

</body>

</HTML>

Page 13: Diseño de paginas Web

Ejemplo de Flash

Page 14: Diseño de paginas Web

Diseñar en Flash Ventajas: Videos que ocupan

muy poco espacio Programación flash

que permite interactuar al usuario

Inconvenientes El usuario necesita

tener instalado un componente para ver la página web

Los buscadores de internet no pueden indexar normalmente el contenido en flash

Page 15: Diseño de paginas Web

Ejemplo de php <html>

<head>    <title>Ejemplo de PHP</title> </head> <body> <?php    echo strlen("12345"),"<br>";        $palabras=split(" ","Esto es una prueba");    for($i=0;$palabras[$i];$i++)       echo $palabras[$i],"<br>";           $resultado=sprintf("8x5 = %d <br>",8*5);    echo $resultado,"<br>";        echo substr("Devuelve una subcadena de otra",9,3),"<br><br>";

   if (chop("Cadena \n\n ") == "Cadena")       echo "Iguales<br><br>";

   echo strpos("Busca la palabra dentro de la frase", "palabra"),"<br><br>";        echo str_replace("verde","rojo","Un pez de color verde, como verde es la hierba."),"<br>";     ?> </body> </html>

Page 16: Diseño de paginas Web

Ejemplo de Mysql mysql> SELECT t1.name, t2.salary FROM employee AS t1, info AS

t2 -> WHERE t1.name = t2.name; mysql> SELECT t1.name, t2.salary FROM employee t1, info t2 -> WHERE t1.name = t2.name;

Page 17: Diseño de paginas Web

Tipos de páginas web Blogs Galerías fotográficas Páginas web Otras

Page 18: Diseño de paginas Web

Los Blogs No se requiere pagar por ningún servicio, ni

contratar ninguna empresa de hosting, pues ya te ofrecen ese servicio de forma gratuita

Ejemplos de blogs contratados mediante Blogger, el servicio de blogs de Google:

Fogonazos (http://fogonazos.blogspot.com) Visión Beta (http://matiascallone.blogspot.com)

Page 19: Diseño de paginas Web

Partes de un blog

Page 20: Diseño de paginas Web

Galerías de fotografías

http://www.turismochile.cl/isladepascua/isla.htm

http://www.galeriade.com/angel/ http://www.adyma.com/

Page 21: Diseño de paginas Web

Páginas web

Page 22: Diseño de paginas Web

Cómo crear nuestras primeras páginas web en html con el bloc de notas

Page 23: Diseño de paginas Web

Escribir el código html en el bloc de notas

Page 24: Diseño de paginas Web

Guardar el archivo en formato html

Page 25: Diseño de paginas Web

Nuestra primera página web (en blanco)

Page 26: Diseño de paginas Web

Nuestra segunda página web

Page 27: Diseño de paginas Web

Guardar el archivo en formato html

Page 28: Diseño de paginas Web

Nuestra segunda página web