Diseño de un sitio Web
-
Upload
gaby-nieva-paredes -
Category
Documents
-
view
220 -
download
0
Transcript of Diseño de un sitio Web
-
7/30/2019 Diseo de un sitio Web
1/23
Notas de la asignatura Desarrollo de Aplicaciones Web
-
7/30/2019 Diseo de un sitio Web
2/23
Contenido
Requerimientos para publicar un sitio Web
Conceptos de dominio, IP y URL
Registro de Dominios
Registrador de Dominios
Hosting
Tipos de Hosting
Infraestructura Web
Tipos de Aplicaciones Web
Procesamiento de pginas Web estticas
Procesamiento de pginas Web dinmicas
HTML, XHTML, XML
-
7/30/2019 Diseo de un sitio Web
3/23
Requerimientos para publicar un sitioWeb
1. Registrar el
dominio del sitio
Web
2. Adquirir y
configurar la
infraestructuraWeb para alojar
el sitio Web
3. Disear el
Layout del sitio,as como el
Mapa del sitio.
4. Programar losarchivos HTML y
disear elwebart. As
como las bases
de datos si se
requiere
5. Publicar los
documentos
HTML y verificarsu
funcionamiento
-
7/30/2019 Diseo de un sitio Web
4/23
Conceptos de dominio, IP y URL
Una direccin IP es una secuencia de nmeros que identifica a un nodo dentro de uma
red que utiliza el protocolo IP (Internet Protocol)
Los nodos se conectan entre s en Internet mediante sus respectivas direcciones IP. Sin
embargo, a los seres humanos nos es ms cmodo utilizar otra notacin ms fcil de
recordar, como los nombres de dominio, la traduccin entre unos y otros se resuelve
mediante los servidores de nombres de dominio o DNS.
Por lo tanto, un nombre de dominio es nombre que identifica un nodo conectado aInternet, sin estos, los usuarios tendran que acceder a cada servicio web utilizando ladireccin IP del nodo, por ejemplo en lugar de www.yahoo.com, tendra que escribir:209.191.93.52
La URL es el Localizador Uniforme de Recursos, y es la identificacin de cada uno de losdocumentos de un sitio web, no confundir con dominio. Por ejemplo: dominio es:http://ecommerceutt.webatu.com y una URL es:http;//ecommerceutt.webatu.com/sitios.html
-
7/30/2019 Diseo de un sitio Web
5/23
Registro de dominios
Elegir un dominio.
Verificar la disponibilidaddel nombre de dominio
deseado en algnregistrador.
Ingresar los datospersonales.
Elegir la cantidad de tiempoque el dominio
permanecer registrado.
Pagar el dominio,normalmente con tarjetade crdito (o tambin por
transferencia bancaria)
Una vez comprado, eldueo del dominio debe
configurarlo con la URL a lacual redireccionar, IP del
servidor al que encontrarmediante la DNS, servidor
DNS usada por este.
El dueo del dominio debeesperar un tiempo para queel dominio sea reconocidoen todos los servidores de
Internet.
El registrador contacta conInterNIC y realiza el proceso
de forma transparente parael registrante.
Se avisa al registrante queel dominio fue registrado.
El nuevo dominio funciona,y resuelve a la IP apropiada
en el servidor DNS usado,poco a poco.
La pgina ya es accesiblemediante un nombre de
dominio desde cualquiercomputadora.
-
7/30/2019 Diseo de un sitio Web
6/23
Registrador de Dominios Un registrador de dominios es una empresa que vende dominios de
Internet. Permiten que un individuo o empresa pueda pagar una cuotaanual a cambio de tener un nombre de dominio, como .com, .es, .org, .net ymuchos otros.
Una empresa de registro de dominios ha de estar acreditada por ICANNpara poder venderlos o formar parte de una cadena de distribucin. ICANNes el organismo que controla los 13 servidores raz (root servers), y portanto tiene el control de factode todo el sistema de nombres de dominio.
Cada registrador puede poner unas normas distintas respecto a qudominios permite registrar. Por ejemplo, algunos impiden usar palabras quese refieran a poltica, religin, obscenidades, o marcas que puedan violar lapropiedad intelectual.
Adems, pueden tener otras normas o restricciones locales. Por ejemplo,
muchos registradores permiten usar ms caracteres que los que ofrece elASCII original. Como curiosidad, y a fecha de febrero de 2006, la ee no sepermite en los .es (esto cambi a partir del ao 2007, ahora se permiten losdominis multilinges), pero s en los .cl, .com, y otros; en general, en todoslos que permiten el uso de Nombres de dominio internacionalizados(IDN).
En Mxico, los Registradores de Dominio se encuentran listados enhttp://www.registry.mx/jsf/rar_list/search/search.jsf
-
7/30/2019 Diseo de un sitio Web
7/23
Hosting
El web hosting o alojamiento web es el servicio que provee a los usuarios de Internet unsistema para poder almacenar informacin, imgenes, vdeo, o cualquier contenidoaccesible va web.
Es una analoga de "hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa
un lugar especfico, en este caso la analoga alojamiento web o alojamiento de pginasweb, se refiere al lugar que ocupa una pgina web, sitio web, sistema, correo electrnico,
archivos etc. en internet o ms especficamente en un servidor que por lo general hospeda
varias aplicaciones o pginas web.
Las compaas que proporcionan espacio de un servidor a sus clientes se suelendenominar con el trmino en ingls web host.
-
7/30/2019 Diseo de un sitio Web
8/23
Tipos de hosting
Generalmente agregan publicidad en los sitios y tienen unespacio y trfico limitadoGratuito
En este servicio se alojan clientes de varios sitios en un mismoservidor, es econmico debido a la reduccin de costos al
compartir el servidor con varios usuarios.
La desventaja es la disminucin del desempeo del servidor.
Compartido
Este servicio est diseado para personas que venden el
servicio de hospedaje a otras personas.
Cuenta con gran cantidad de espacio y dominios disponibles
para cada cuenta.
Reseller
Un servidor dedicado es una computadora que se utiliza
especficamente para alojamiento web.Su desventaja es el costo del servicio.Dedicado Est basado en las tecnologas ms innovadoras que permiten a un gran
nmero de mquinas actuar como un sistema conectadas a un grupo demedios de almacenamiento .
La seguridad de un sitio web alojado en la nube est garantizada por
numerosos servidores en lugar de slo uno.
Cloud Hosting
-
7/30/2019 Diseo de un sitio Web
9/23
Infraestructura Web
La Infraestructura Web est conformada por elHardware y Software para alojar el sitio Web.Existen diversos paradigmas de desarrollo queutilizan distintas plataformas de desarrollo. La combinacin ms importante es:
Otra combinacin es:
-
7/30/2019 Diseo de un sitio Web
10/23
Tipos de aplicaciones Web
Una aplicacin Web es
un conjunto de pginasWeb estticas y
dinmicas.
Una pgina Webesttica es aqulla queno cambia cuando un
usuario la solicita: el
servidor Web enva lapgina al navegador
Web solicitante sin
modificarla.
Por el contrario, el
servidor modifica laspginas Web dinmicas
antes de enviarlas al
navegador solicitante.
La naturaleza cambiante
de este tipo de pgina
es la que le da elnombre de dinmica.
-
7/30/2019 Diseo de un sitio Web
11/23
Tipos de aplicaciones Web
Web esttica:
Todos los usuarios recibenexactamente el mismo contenidocuando acceden al sitio Web.
Web Dinmica:
Cada usuario recibe contenidopersonalizado cuando accede alsitio Web.
-
7/30/2019 Diseo de un sitio Web
12/23
Procesamiento de pginas Web estticas
Un sitio Web esttico consta de unconjunto de pginas y de archivos HTML
relacionados alojados en un equipo que
ejecuta un servidor Web.
Un servidor Web es un software que
suministra pginas Web en respuesta a laspeticiones de los navegadores Web. Lapeticin de una pgina se genera cuando el
usuario hace clic en un vnculo de unapgina Web, elige un marcador en unnavegador o introduce una URL en el
cuadro de texto Direccin del navegador.
El contenido final de una pgina Webesttica lo determina el diseador de la
pgina y no cambia cuando se solicita la
pgina.
El navegador Web solicita la pgina esttica.
El servidor localiza la pgina.
El servidor Web enva la pgina alnavegador solicitante.
-
7/30/2019 Diseo de un sitio Web
13/23
Procesamiento de pginas Webdinmicas
Cuando un servidor Web recibe una peticin para mostrar una
pgina Web esttica, el servidor la enva directamente al
navegador que la solicita. Cuando el servidor Web recibe unapeticin para mostrar una pgina dinmica, sin embargo,
reacciona de distinta forma: transfiere la pgina a un software
especial encargado de finalizar la pgina. Este softwareespecial se denomina servidor de aplicaciones.
El servidor de aplicaciones lee el cdigo de la pgina, finaliza
la pgina en funcin de las instrucciones del cdigo y elimina
el cdigo de la pgina. El resultado es una pgina esttica queel servidor de aplicaciones devuelve al servidor Web, que a su
vez la enva al navegador solicitante. Lo nico que elnavegador recibe cuando llega la pgina es cdigo HTML puro
-
7/30/2019 Diseo de un sitio Web
14/23
Procesamiento de pginas Web
dinmicas
1. El navegador Web solicitala pgina dinmica.
2. El servidor Web localiza lapgina y la enva al servidorde aplicaciones.
3. El servidor de aplicacionesbusca instrucciones en la
pgina y la termina.
4. El servidor de aplicaciones
pasa la pgina terminada alservidor Web.
5. El servidor Web enva lapgina finalizada al navegador
solicitante.
-
7/30/2019 Diseo de un sitio Web
15/23
Creacin de pginas Web dinmicas
La creacin de una pgina dinmica implica, en primer lugar,escribir el cdigo HTML
Y aadir los scripts o etiquetas del lado del servidor al cdigoHTML para crear la pgina dinmica.
La utilizacin de un lenguaje basado en scripts se decide enfuncin de la tecnologa de servidor disponible en el servidor.
Un script o archivo de rdenes es un programa usualmentesimple que por lo regular se almacena en un archivo de texto.
-
7/30/2019 Diseo de un sitio Web
16/23
Creacin de pginas Web dinmicas
La utilizacin de un lenguaje basado en etiquetas oen scripts se decide en funcin de la tecnologa deservidor disponible en el servidor.:
Tecnologa de servidor Lenguaje
ColdFusion ColdFusion Markup Language
(CFML)
Active Server Pages (ASP)
JSP
Java Server Pages (Sun)
VBScript
JavaScript
JavaScript, Java
PHP- MySQL PHP
-
7/30/2019 Diseo de un sitio Web
17/23
Ejemplo de aplicacin de una pgina Web dinmica:
acceso a Base de datos.
1. El navegadorWeb solicita la
pgina dinmica.
2. El servidor Weblocaliza la pgina y
la enva al servidorde aplicaciones.
3. El servidor deaplicaciones buscainstrucciones en la
pgina.
4. El servidor deaplicaciones enva la
consulta alcontrolador de la
base de datos.
5. El controladorejecuta la consulta
en la base de datos.
6. El juego deregistros se
devuelve alcontrolador.
7. El controladorpasa el juego de
registros al servidorde aplicaciones.
8. El servidor deaplicaciones inserta
los datos en una
pgina y luego pasa lapgina al servidor
Web.
9. El servidor Webenva la pgina
finalizada alnavegadorsolicitante.
-
7/30/2019 Diseo de un sitio Web
18/23
HTML y XHTML
HTML: HyperText Markup Language(Lenguaje de Marcado de Hipertexto)
Es usado para describir la estructura y elcontenido de un texto, as como paracomplementar el texto con objetos talescomo imgenes. HTML.
Se escribe en forma de etiquetas,
rodeadas por . HTML tambin puede describir, hasta un
cierto punto, la apariencia de un documento,y puede incluir un script(por ejemploJavaScript), el cual puede afectar elcomportamiento de navegadores web y otrosprocesadores de HTML.
XHTML: eXtensible HyperText MarkupLanguage (Lenguaje de Marcado deHipertexto Extensible).
Es una versin ms estricta y limpia de HTML, que nace precisamente con el objetivo deremplazar a HTML ante su limitacin de usocon las cada vez ms abundantes
herramientas basadas en XML . XHTML extiende HTML 4.0 combinando la
sintaxis de HTML, diseado para mostrardatos, con la de XML, diseado para describirlos datos.
XHTML, al estar orientado al uso de unetiquetado correcto, exige una serie derequisitos bsicos a cumplir en lo que acdigo se refiere. Entre estos requisitos
bsicos se puede mencionar unaestructuracin coherente dentro deldocumento donde se incluiran elementoscorrectamente anidados, etiquetas enminsculas, elementos cerradoscorrectamente, atributos de valoresentrecomillados, etc.
-
7/30/2019 Diseo de un sitio Web
19/23
Diferencias entre HTML y XHTML Los documentos deben estar bien formados:
Los nombres de atributos y elementos deben ir en minsculas:
Los elementos que no estn vacios necesitan etiquetas de cierre:
Los valores de las etiquetas deben ir siempre entre comillas: Todos losvalores de los atributos deben ir entre comillas, incluso aquellos que seannumricos.
-
7/30/2019 Diseo de un sitio Web
20/23
XML
XML: eXtensibleMarkupLanguage('lenguaje de marcado extensible'). Es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web
Consortium (W3C), permite definir la gramtica de lenguajes especficos.
XML no es realmente un lenguaje en particular, sino una manera de definir lenguajespara diferentes necesidades.Algunos de estos lenguajes que usan XML para sudefinicin son XHTML, SVG, MathML.
XML no ha nacido slo para su aplicacin en Internet, sino que se propone como unestndar para el intercambio de informacin estructurada entre diferentesplataformas. Se puede usar en bases de datos, editores de texto, hojas de clculo ycasi cualquier cosa imaginable.
XML es una tecnologa sencilla que tiene a su alrededor otras que la complementan yla hacen mucho ms grande y con unas posibilidades mucho mayores. Tiene un
papel muy importante en la actualidad ya que permite la compatibilidad entresistemas para compartir la informacin de una manera segura, fiable y fcil.
-
7/30/2019 Diseo de un sitio Web
21/23
CSS
(Cascading Style Sheets)Hojas de estilo en cascada.
Es un lenguaje usado para definir la presentacin deun documento estructurado escrito en HTML o XML
(y por extensin en XH La informacin de estilo puede ser adjuntada como
un documento separado o en el mismo documentoHTML. En este ltimo caso podran definirse estilos
generales en la cabecera del documento o en cadaetiqueta particular mediante el atributo "style".TML)
-
7/30/2019 Diseo de un sitio Web
22/23
Tipos de Hojas de Estilo CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una pgina Web:
Una hoja de estilo externa, es una hoja de estilo que est almacenada en un archivo diferente alarchivo donde se almacena el cdigo HTML de la pgina Web. Esta es la manera de programar mspotente, porque separa completamente las reglas de formateo para la pgina HTML de la estructurabsica de la pgina:
Una hoja de estilo interna, que es una hoja de estilo que est incrustada dentro de un documentoHTML. (Va a la derecha dentro del elemento .) De esta manera se obtiene el beneficio deseparar la informacin del estilo del cdigo HTML propiamente dicho. Se puede optar por copiar lahoja de estilo incrustada de una pgina a otra (esta posibilidad es difcil de ejecutar si se desea paraguardar las copias sincronizadas). En general, la nica vez que se usa una hoja de estilo interna, escuando se quiere proporcionar alguna caracterstica a una pgina Web en un simple fichero, porejemplo, si se est enviando algo a la pgina Web.
Un estilo en lnea (inline) es un mtodo para insertar el lenguaje de estilo de pgina directamentedentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar ladescripcin del formateo dentro del documento de la pgina Web, a nivel de cdigo, se convierte enuna manera larga, tediosa y poco elegante de resolver el problema de la programacin de la pgina.Este modo de trabajo se podra usar de manera ocasional si se pretende aplicar un formateo conprisa, al vuelo. No es todo lo claro o estructurado que debera ser, pero funciona. ste es el mtodorecomendado para maquetar correos electrnicos en HTML.
-
7/30/2019 Diseo de un sitio Web
23/23
Ms sobre CSS
http://en.wikibooks.org/wiki/Cascading_Style_Sheets
http://www.csszengarden.com/
http://en.wikibooks.org/wiki/Cascading_Style_Sheetshttp://www.csszengarden.com/http://www.csszengarden.com/http://en.wikibooks.org/wiki/Cascading_Style_Sheetshttp://en.wikibooks.org/wiki/Cascading_Style_Sheets