DocumentacióN Del Sitio Web En Xml

  • 1,439 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,439
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Documentación del sitio Web en XML Por Antonio Ordaz López Pagina de Inicio Explicación del Código HTML Se define el tipo de documento a crear <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Inicio del documento xml <html> En la cabecera definimos el titulo y las hojas de estilo a utilizar, asi como el codigo javascript para leer el xml y procesar los datos del login, como se aprecia el codigo javascript se obtuvo de www.deliciousdays.com y pertenece a Oliver Seidel, mientras que las hojas de estilo de www.psd-to-wp.com .
  • 2. <head> <title>VOSYO Solutions By Antonio Ordaz</title> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <link rel="stylesheet" type="text/css" media="screen" href="cforms.css" /> <!-- Start Of Script Generated By cforms v11.3 [Oliver Seidel | www.deliciousdays.com] --> <script type="text/javascript" src=" cforms.js"></script> <!-- End Of Script Generated By cforms --> <script type="text/javascript"> <!—Se define la funcion login() -- > function Login() { <!— Se crean las variables xmlDoc, usuario y password, a las cuales se les asignan valores nulo para xmlDoc, y especificamos que usuario y password tomaran sus valores del componente usuario y password respectivamente que estan dentro del formulario login dentro de este documento -- > var xmlDoc=null; var usuario=document.login.usuario.value; var password=document.login.password.value; <!—Definimos xmlDoc de acuerdo al navegador utilizado -- > if (window.ActiveXObject) {// code for IE xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } else if (document.implementation.createDocument) {// code for Mozilla, Firefox, Opera, etc. xmlDoc=document.implementation.createDocument("","",null); } else { alert('Tu navegador no soporta esta funcion'); } if (xmlDoc!=null) { xmlDoc.async=false; <!—Cargamos el documento “pass.xml” y establecemos de donde se leerán los datos y en que orden asi como donde se almacenaran y una bandera de acceso -- > xmlDoc.load("pass.xml"); var x=xmlDoc.getElementsByTagName("USER");
  • 3. var band = "0"; var userxml; var passxml; for (var i=0;i<x.length;i++) { userxml = (x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue); passxml = (x[i].getElementsByTagName("PASS")[0].childNodes[0].nodeValue); <!—Si los datos de login son correctos Activamos la bandera de acceso y le decimos que cargue el archivo “enter.html” -- > if (usuario == userxml && password == passxml) { band = "1"; window.location="enter.html"; } } <!—De lo contrario le decimos que cargue el archivo “err.html” -- > if(band == "0") { window.location="err.html"; } } } <!—Cerramos el script y la cabecera -- > </script> </head> <!—Creamos el cuerpo del formulario, si utilizamos clases en las hojas de estilo como en nuestro caso, definimos las clases a usar asi como sus identificadores para tener una mayor organización -- > <body> <div id="universe"> <div id="header" class="clearfix"> <h1>VOSYO Solutions</h1> <div id="tagline">By Antonio Ordaz Lopez </div> </div> <div id="main" class="clearfix"> <div id="portfolio" class="onetwo leftside"> <h2 >Paginas Recomendadas</h2> <p>A continuacion encontraras enlaces a paginas amigas</p> <!—Aquí se definen los enlaces y las imágenes a utilizar del lado izquierdo de la pantalla -- > <div class="clearfix samples">
  • 4. <A HREF="http://www.topicos2010.webcindario.com" TARGET="principal"> <IMG class="thumbnail" SRC="iconos/blogA.jpg" ALT="Pagina de Wordpress"/></a> <A HREF="http://www.bustamanteg.wordpress.com" TARGET="principal"> <IMG class="thumbnail" SRC="iconos/blog.jpg" ALT="blog de auditoria"/></a> <A HREF="http://www.auditoria2010.webcindario.com" TARGET="principal"> <IMG class="thumbnail" SRC="iconos/blogA.jpg" ALT="Pagina de Wordpress"/></a> <A HREF="info.html"> <IMG class="thumbnail" SRC="iconos/pregunta.png" ALT="¿Quienes somos?"/></a> <A HREF="http://www.wordpress.com" TARGET="principal"> <IMG class="thumbnail" SRC="iconos/wp.png" ALT="Pagina de Wordpress"/></a> <A HREF="http://www.itslerdo.edu.mx" TARGET="principal"> <IMG class="thumbnail" SRC="iconos/its.gif" ALT="Pagina del itsl"/></a> </div> </div> <!—Aquí diseñamos el apartado de login, especificando los nombres que utiliza el javascript, y de acuerdo a las hojas de estilo -- > <div id="quote" class="onetwo"> <h2 class="section-title">Log In</h2> <p>Ingrese sus datos para acceder a más informacion.</p> <div id="usermessagea" class="cf_info "></div> <form name=login class="cform"> <ol class="cf-ol"> <li id="li--1" class=""> <label for="user"><span>Usuario</span></label> <input type="text" name="usuario" id="user" class="single" value="Usuario :" onfocus="clearField(this)" onblur="setField(this)"/> </li> <li id="li--2" class=""> <label for="pass"><span>Password</span></label> <input type="password" name="password" id="pass" class="single" value="Password:" onfocus="clearField(this)" onblur="setField(this)"/> </li> </ol> <p class="cf-sb"><input type="button" class="sendbutton" value="Log In" onclick="Login()"/></p> </form> </form> </div> </div> </div> <!—Cerramos el cuerpo y el documento html -- > </body> </html>
  • 5. Si damos clic en alguno de los iconos del lado izquierdo se abrirá lo definido por cada uno de los enlaces en el documento anterior, Estos iconos abriran el blog de topicos, del docente y de auditoria respectivamente Estos iconos abriran la pagina de wordpress y del itsl respectivamente. y este otro abrirá la siguiente pagina
  • 6. <!—Abrimos el documento html y la cabecera donde especificamos el titulo y estilo del documento-- > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vosyo Services</title> <link href="style2.css" rel="stylesheet" type="text/css" /> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" / > <style type="text/css"> <!-- a:link { color: #666; } a:hover { color: #0CF; } --> </style> </head> <!—Abrimos el cuerpo del html y especificamos el diseño y estructura de la pagina -- > <body class="oneColFixCtrHdr"> <div id="Container"> <div id="Logo"> <div id="logoh1"> <div align="center"> <h1>Vosyo Services</h1> </div> </div> </div> <div id="menu"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">Sobre Nosotros</a></li> <li><a href="index.html">Volver</a></li> </ul> </div> <div id="content"> <div id="conte2"> <h2>Nuestros Servicios</h2> <p align="justify"><ul> <li>VENTA E INSTALACION DE EQUIPO DE REDES DE LA MÁS ALTA CALIDAD.</li> <li>INSTALACION DE REDES DE TODO TIPO - LAN, VPN, WAN, MAN, LA QUE NECESITES -</li> <li>CONFIGURACION DE EQUIPO DE COMPUTO Y TELECOMUNICACIONES.</li>
  • 7. <li>CURSOS DE REDES</li> <li>Y TODO LO QUE ABARQUE EL MUNDO DE REDES, TELECOMUNICACIONES E INFORMATICA.</li> </ul> </p> </div> <div id="cont1"> <h2>El lugar que buscabas</h2> <p align="justify">POR MÁS QUE BUSCASTE, NUNCA ENCONTRASTE ALGUIEN PREPARADO QUE TE INSTALARA LA RED DE TU EMPRESA A UN PRECIO ACCESIBLE, CON CALIDAD Y BUENA TRAYECTORIA. DEJA YA DE BUSCAR QUE HAS LLEGADO AL SITIO CORRECTO, TENEMOS LA SOLUCION TOTAO, EFICAZ Y ACCESIBLE PARA TUS PROBLEMAS DE REDES Y TELECOMUNICACIONES. LLAMANOS Y LO COMPROBARAS</p> </div> </div> <div id="footer"> <div id="cop">Copyright 2010 Vosyo Services.<br /> </div> </div> <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> </div><!—Cerramos el cuerpo y el documento html -- > </body> </html> Volviendo al logia ¿Qué pasaria en caso de que se ingresaran los datos de login incorrectamente?
  • 8. <!—Abrimos el documento html y la cabecera -- > <html> <head> <!—Especificamos el titulo, las hojas de estilo, y que se redireccionara hacia el documento “index.html” en 2 segundos -- > <title>Titulo</title> <meta http-equiv="refresh" content="2;URL=index.html" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <link rel="stylesheet" type="text/css" media="screen" href="cforms.css" /> </head> <!—Creamos el cuerpo del documento, texto y diseño -- > <body> <div id="universe"> <div id="header" class="clearfix"> <h1>Datos Incorrectos.</a></h1> <div id="tagline">Por favor vuelva a intentarlo</div> </div> </div> <!—Cerramos el cuerpo y el documento html -- > </body> </html> En caso de que los datos de login sean correctos se muestra la siguiente pantalla.
  • 9. <!—Abrimos el documento html y la cabecera donde especificamos el titulo y estilo del documento-- > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vosyo Services</title> <link href="style2.css" rel="stylesheet" type="text/css" /> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" / > <style type="text/css"> <!-- a:link { color: #666; } a:hover { color: #0CF; } --> </style> </head> <!—Abrimos el cuerpo del html y especificamos el diseño y estructura de la pagina -- > <body class="oneColFixCtrHdr"> <div id="Container">
  • 10. <div id="Logo"> <div id="logoh1"> <div align="center"> <h1>Vosyo Services</h1> </div> </div> </div> <div id="menu"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">Principal</a></li> <li><a href="info.html">Servicios</a></li> <li><a href="oferta.html">Promociones</a></li> <li><a href="contacto.html">Contactanos</a> </li> <li><a href="index.html">Log Out</a></li> </ul> </div> <div id="content"> <div id="conte2"> <h2>Acerca de Vosyo Services</h2> <p align="justify"><H3> Vosyo Services es una empresa totalmente lagunera, fundada por Antonio Ordaz Lopez durante el año 2010, la cual ofrece servicios con calidad profesional dentro de las areas de desarrollo de software, diseño de paginas web, instalacion de redes entre otras tecnologias.</H3></p> <p align="justify"><H3>Vosyo Services esta actualmente avalado por diversas compañias especializadas en las ramas a las que se dedica y entre las cuales se encuentran cisco systems, microsoft y apple por mencionar algunas.</H3></p> </div> <div id="cont1"> <h2>GRACIAS POR INICIAR SESION</h2> <p align="justify"><H2>Recuerda <br> "Si el servicio que buscas no lo ofrecemos, es porque simplemente no existe, y si no existe, lo desarrollaremos para Ti"</H2></p> </div> </div> <div id="footer"> <div id="cop">Copyright 2010 Vosyo Services.<br /> </div> </div> <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> <!—Cerramos el cuerpo y el documento html -- > </body> </html>
  • 11. Si se da clic en el enlace de “promociones”. <!—Abrimos el documento html y la cabecera donde especificamos el titulo y estilo del documento-- > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vosyo Services</title> <link href="style2.css" rel="stylesheet" type="text/css" /> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" / > <style type="text/css"> <!-- a:link { color: #666; } a:hover { color: #0CF; } --> </style></head> <!—Abrimos el cuerpo del html y especificamos el diseño y estructura de la pagina -- > <body class="oneColFixCtrHdr">
  • 12. <div id="Container"> <div id="Logo"> <div id="logoh1"> <div align="center"> <h1>Vosyo Services</h1> </div> </div> </div> <div id="menu"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="principal.html">Principal</a></li> <li><a href="info.html">Servicios</a></li> <li><a href="#">Promociones</a></li> <li><a href="contacto.html">Contactanos</a> </li> <li><a href="index.html">Log Out</a></li> </ul> </div> <div id="content"> <div id="conte2"> <h2>Nuestros Servicios</h2> <div align = center> <IMG SRC="iconos/firma.png" WIDTH=100 HEIGHT=100 BORDER=0 ALT="Descuento"> <br> 10% de descuento al contratar cualquier servicio.* <BR> <BR> <IMG SRC="iconos/win.png" WIDTH=100 HEIGHT=50 BORDER=0 ALT="2x1"> <IMG SRC="iconos/mac.png" WIDTH=100 HEIGHT=50 BORDER=0 ALT="2x1"> <br> 2 x 1 en respaldos de disco duro * <br> 10% de descuento al contratar cualquier servicio. <BR><BR><BR> </div> </p> </div> <div id="cont1"> <h2>Promociones</h2> <p align="right"> <font size = 5>BIENVENIDO. EN ESTE APARTADO ENCONTRARAS PROMOCIONES EXCLUSIVAS, QUE TE PERMITIRAN AHORRAR EN TU DEPARTAMENTO DE REDES. GRACIAS POR TU VISITA. </font> </p> </div> </div>
  • 13. <div id="footer"> <div id="cop">Copyright 2010 Vosyo Services.<br /> </div> </div> <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> <!—Cerramos el cuerpo y el documento html -- > </body> </html> Mientras que si se da clic en “contactanos”. <!—Abrimos el documento html y la cabecera donde especificamos el titulo y estilo del documento-- > <<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vosyo Services</title> <link href="style2.css" rel="stylesheet" type="text/css" />
  • 14. <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" / > <style type="text/css"> <!-- a:link { color: #666; } a:hover { color: #0CF; } --> </style> </head> <!—Abrimos el cuerpo del html y especificamos el diseño y estructura de la pagina -- > <body class="oneColFixCtrHdr"> <div id="Container"> <div id="Logo"> <div id="logoh1"> <div align="center"> <h1>Vosyo Services</h1> </div> </div> </div> <div id="menu"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="principal.html">Principal</a></li> <li><a href="info.html">Servicios</a></li> <li><a href="oferta.html">Promociones</a></li> <li><a href="#">Contactanos</a> </li> <li><a href="index.html">Log Out</a></li> </ul> </div> <div id="content"> <div id="conte2"> <h2>Nuestros Servicios</h2> <p align="right"> TELEFONO 7-98-76-54<IMG SRC="iconos/phone.png" WIDTH=50 HEIGHT=50 BORDER=0 ALT="phone"> </p> <p align="right"> MENSAJES 871-12-34-56<IMG SRC="iconos/SMS.png" WIDTH=50 HEIGHT=50 BORDER=0 ALT="SMS"> </p> <p align="right"> O SIMPLEMENTE VEN Y VISITANOS A PASEO DEL TECNOLOGICO # 1508<IMG SRC="iconos/HAND.png" WIDTH=50 HEIGHT=50 BORDER=0 ALT="MANO">
  • 15. </p> </div> <div id="cont1"> <h2>Contactanos</h2> <p align="right"> ESTAMOS A UN CLICK DE DISTANCIA. SOLO CONTACTANOS Y TENDRAS LAS SOLUCION QUE TU NEGOCIO NECESITA </p> <p align="right"> <A HREF="mailto:topicos.antonio@gmail.com">CORREO DE GMAlL <IMG SRC="iconos/Google.png" WIDTH=50 HEIGHT=50 BORDER=0 ALT="Gmail"></A> </p> <p align="right"> VIA MESSENGER <br> soluciones-networking@hotmail.com<IMG SRC="iconos/msn2.png" WIDTH=50 HEIGHT=50 BORDER=0 ALT="MSN"> </p> </div> </div> <div id="footer"> <div id="cop">Copyright 2010 Vosyo Services.<br /> </div> </div> <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script> </DIV><!—Cerramos el cuerpo y el documento html -- > </body> </html> <!—Si damos clic en “logout” se muestra la pantalla de inicio de sesion -- >