Embed Size (px)
Citation preview
Universidad Autónoma Metropolitana
Unidad Iztapalapa- División de Ciencias Básicas e Ingenierías
Primer reporte del sitio personal desarrollado para la materia de Introducción a la Programación en la Administración.
Por: Emmanuelle Laguna Marín
19 de Mayo del 2010
1
Índice Justificación ........................................................................................................................... 2
Introducción ........................................................................................................................... 2
XHTML ........................................................................................................................ 2
CSS .............................................................................................................................. 3
Arquitectura de la información ................................................................................. 3
Proceso unificado ...................................................................................................... 4
Teoría y documentación ........................................................................................................ 4
Etiquetas básicas de XHTML ..................................................................................... 4
Conociendo CSS ......................................................................................................... 8
FTP .............................................................................................................................. 9
Herramientas ............................................................................................................. 9
Diagramas de navegación ....................................................................................... 10
Bosquejo .................................................................................................................... 11
Casos de uso .............................................................................................................. 12
Códigos del sitio personal .................................................................................................... 13
Tarea 1 ........................................................................................................................ 13
Tarea 2 ...................................................................................................................... 16
Index ......................................................................................................................... 22
Bitácora .................................................................................................................... 34
Gustos ........................................................................................................................41
Ejercicios ................................................................................................................... 48
Teoría y documentación. ......................................................................................... 52
Herramientas ........................................................................................................... 58
CSS ............................................................................................................................ 66
Conclusiones. ....................................................................................................................... 68
Bibliografía. .......................................................................................................................... 68
2
Justificación
Los reportes sirven en la vida académica y de igual manera en la profesional. Son un medio
de comunicación muy poderoso que ayuda a otros a comprender, estudiar o reproducir
nuestro trabajo.
La importancia de este reporte radica en dos aspectos principales, el primero es dar a
conocer a los interesados en este sitio web su documentación técnica, la segunda pero no
de menor importancia es tener una referencia ordenada y sistemática del desarrollo de
este sitio. Es importante mencionar que al ser una referencia técnica deben ser
mencionadas las herramientas y los requerimientos así como también las teorías y
metodologías usadas en el desarrollo del sitio.
Este es el reporte de un sitio personal creado para la materia Introducción a la
Programación en la Administración (IPA) y contiene toda la documentación necesaria para
el mantenimiento de éste, así como la edición o la modificación.
Introducción
Para entender el desarrollo de páginas web debemos considerar varios conceptos, ya que
no sólo debemos aprender un lenguaje de programación sino también teorías sobre
manejo de la información.
En este aspecto para el sitio desarrollado utilizamos el lenguaje XHTML, el lenguaje CSS, y
las teorías de “Arquitectura de la información” y “Proceso unificado”. Más adelante
explicaremos a detalle los lenguajes utilizados, así como la manera en que éstos fueron
implementados y por qué se utilizaron de esa forma, a su vez se dará mayor detalle de las
teorías y metodologías mencionadas.
XHTML
El lenguaje XHTML proviene de dos lenguajes que son por una parte y como su nombre lo
indica el lenguaje HTML y por otra el XML.
El nombre de XHTML viene de eXtensible Hyper Text Mark Language y es un lenguaje de
etiquetas. Se le llama lenguaje de etiquetas porque precisamente es con etiquetas con lo
que se trabaja. Dividiremos a estas etiquetas en dos grandes grupos, las etiquetas
normales y las autocontenidas. Las primeras deberán ser cerradas, por ejemplo el código
para declarar un nuevo párrafo es:
<p>aquí va el texto</p>
Como se ve claramente en el ejemplo la etiqueta a la que se hace referencia se abre y cierra
con su homónima pero antecediendo una diagonal o slash al nombre de la etiqueta,
3
también podemos ver que las etiquetas van entre dos signos, el de menor que < para abrir
y el de mayor que > para cerrar. El segundo grupo de etiquetas, el de autocontenidas son
aquellas que no necesitan cerrarse con otra etiqueta, es decir se cierran en la misma
etiqueta en la que se abren, por ejemplo:
<br />
Esta etiqueta nos sirve para dar un salto de línea pero podemos ver que no es necesario
cerrarla con otra ya que ella se cierra a sí misma conteniendo la diagonal.
Cabe señalar que las etiquetas también son llamadas tags nombre que proviene del inglés.
En este reporte usaremos los nombres en español de casi todos los términos, exceptuando
aquellas que no tengan traducción, pero se hará referencia a los nombres en inglés porque
en cierta literatura así se encuentra.
Para terminar esta sección quisiera mencionar que las normas que rigen el lenguaje HTML,
CSS y HTML es el W3C (Worldwild Web Consortium) conocido como el “consorcio”. Así
que si queremos estar seguros de que nuestros documentos web funcionen correctamente
debemos seguir los lineamientos, reglas y especificaciones del consorcio. También debo
puntualizar que a lo largo de este reporte se ira mostrando el funcionamiento del lenguaje
y se especificara el uso de varias etiquetas.
CSS
CSS recibe su nombre de Cascade Style Sheet, o también conocidas como Hojas de Estilo en
cascada, es la especificación aprobada por el consorcio para la normalización de estilos en
documentos web, también es el consorcio mismo quien regula el lenguaje CSS que sirve
para crear, definir y editar estilos web.
Es común no diferenciar el lenguaje HTML de CSS pero en realidad hay una gran brecha
entre los dos. HTML nos sirve principalmente para crear el documento web y a pesar de
que en este se puede dar formato y estilo al documento esto no es recomendable y es aquí
en donde CSS hace su trabajo.
Más adelante este concepto se ira aclarando a través de ejemplos y mayores referencias.
Arquitectura de la información
La arquitectura de la información es el estudio de la organización de la información. Como
se ve claramente en su definición está completamente ligada al internet y por ende a la
web. Nos ayuda a planificar mejor, en nuestro caso en particular, cómo se debe organizar
la información de un sitio web para que el usuario o visitante pueda encontrarla más
rápido, le sea agradable y tenga mayor retención y comprensión de la información
mostrada.
4
La arquitectura de la información comprende todos los aspectos de la red, tanto como se
muestra la información, rótulos, encabezados, imágenes, vídeos, audio, como la
indexación, búsqueda, navegación y etiquetado de contenidos.
La arquitectura de la información, IA de aquí en adelante es una metodología utilizada por
profesionales de las CC. de la Documentación, CC. de la comunicación y CC. de la
computación, entre otras. Es gracias a que se ha nutrido de las experiencias y fundamentos
de estas disciplinas que sea tan basta.
Proceso unificado
El proceso unificado es una metodología para el desarrollo de software basado en la
arquitectura de programación orientada a objetos.
Las principales características del proceso unificado son:
•Manejo de casos de uso.
•Centrado en la arquitectura.
•Iterativo e incremental.
El manejo de casos de uso se utiliza para capturar los requerimientos del software a usar.
En el caso de las páginas web no es muy diferente, ya que puede ser para ofrecer algún
tipo de aplicación en la nube o simplemente para mostrar información en cualquier caso el
proceso unificado puede ser aplicado.
Centrado en la arquitectura no es un paso aparte de los casos de uso en el proceso
unificado sino mas bien es llevado al mismo tiempo, los casos de uso dirigen el camino a
seguir de la arquitectura pero el centrado en la arquitectura es una influencia para los casos
de uso, por este motivo ambos maduran a la par en el ciclo de vida del software.
El proceso unificado toma para la vida del software ciclos que a su vez se dividen en fases,
cada una de esta fases se subdivide en iteraciones en las cuales se puede cada cierto
tiempo o evento implementar alguna mejora al sistema en cuestión, a esta mejora le
llamamos incremento de ahí que podemos decir que el proceso unificado responde a la
característica de iterativo e incremental.
Teoría y documentación
Etiquetas básicas de XHTML
Para empezar debemos saber en donde escribiremos nuestro código de XHTML es decir
nuestra herramienta, pues no se necesita mas que un editor de texto plano, es importante
que sea un editor de este tipo, ya que los procesadores de textos tipo MS Word y Write no
nos sirven ya que queremos que nuestro código no contenga “marcas” y este limpio. En
5
este caso en particular use el editor de texto de Geany un compilador libre que se puede
descargar en línea. Seleccione este editor por su flexibilidad y por su compatibilidad con
XHMTL, además este editor tiene la característica de cerrar las etiquetas por nosotros, así
no se nos olvidara hacerlo, también pone colores diferentes al texto dependiendo de lo
que se trate por ejemplo para los comentarios usa gris, para las etiquetas azul, para los
atributos verde etc.
Los documento web por sencillos o sofisticados y extensos que sean responden a la misma
estructura que se compone de tres partes, la declaración DOCTYPE, la cabecera y el cuerpo,
mas adelante abordaremos estos temas uno poco mas a fondo.
Ya hablamos de las etiquetas en XHTML pero aun nos falta otra parte de estas muy
importante, me refiero a los atributos. Los atributos son características que se le dan a las
etiquetas y sirven entre otras cosas para dar nombres, identificadores, o formato pero
recordemos que en la medida de lo posible no daremos formato a los documentos web
con XHTML sino con CSS. Entonces ahora si revisemos algunas etiquetas básicas del
lenguaje.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Esta es la primera etiqueta que revisaremos y que también ira en nuestro código, esta es
una excepción al cualquiera de los dos tipos de etiquetas vistas, y sirve para especificarle al
navegador que tipo de documento debe validarse de a cuerdo a un archivo de definición
(DTD) para XHTML. Los documentos de definición son tres, transitional, strict y frameset
para este sitio se utilizó transitional pero para sitios profesionales lo recomendable es usar
el tipo strict.
<html></html>
La etiqueta arriba mencionada acota todo el resto del código esta instrucción se utilizaba
en HTML y se mantuvo pero para aclarar al navegador que se trata de un documento
XHTML y no uno HTML utilizaremos un atributo como se muestra a continuación:
<html xmlns="http://www.w3.org/1999/xhtml"></html>
Note que dentro de la etiqueta se agrego el atributo xmls el cual le indica al navegador,
como ya mencionamos, que se trata de una documento XHTML, como se dará cuenta el
lenguaje es muy sencillo.
<head></head>
Esta etiqueta forma la cabecera, es la parte del documento es en donde estableceremos el
titulo de este y la forma en que los buscadores web lo catalogaran.
<title>Aquí va el titulo de la pagina</title>
6
Es nuestra obligación como desarrolladores de un sitio web dar a conocer al usuario una
pequeña información sobre el tema o temas de la página, este texto aparece en la aparte
superior del navegador y también sirve para que los buscadores puedan catalogar y
posicionar nuestro sitio.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Como ya se habrá dado cuenta el lector, esta es una etiqueta autocontenida, es decir se
cierra a si misma, y contiene varios atributos, un documento web puede llevar varios metas
dependiendo de las necesidades de éste, el primer atributo le dice al navegador que este
meta define el tipo de contenido el atributo “content” le dice que es un texto XHTML y que
se utilizara la codificación UTF-8 para la pagina.
La codificación puede variar dependiendo del tipo de caracteres que mostraremos,
nosotros utilizamos UTF-8 en este proyecto por que es la más estandarizada.
<body> </body>
La etiqueta <body> lleva contenido el cuerpo de la página es decir todo aquello que será
mostrado al usuario, en esta incluiremos, las imágenes, textos, vídeos y demás elementos
multimedia.
Hasta aquí hemos visto las etiquetas más importantes e imprescindibles que puede
contener un documento web. Las siguientes etiquetas son opcionales según el uso, no se
darán a conocer todas las etiquetas existentes pero si las que fueron utilizadas en la
elaboración del sitio.
<!--Aquí va un comentario-->
Los comentarios no son visibles al usuario y no tienen efecto alguno en el código pero nos
son muy útiles para saber que se esta haciendo en ciertas partes.
<h1>Aquí va un encabezado</h1>
Se utiliza para hacer referencia a un encabezado, el número uno puede cambiarse por 2, 3,
4,5, ó 6 siendo el 6 el mas pequeño, Se debe utilizar solo para encabezados.
<div id="header"> </div>
Podemos ver que esta etiqueta <div> tiene un atributo llamado id el cual indica el nombre
con el que el explorador identificara esa etiqueta, la etiqueta en si sirve para dividir el
documento en secciones, estas divisiones son invisibles al usuario pero son una buena
practica de programación y tienen gran utilidad ya que gracias a esto podemos hacer
anclajes a este punto o poner cierto formato en esta parte del documento con CSS
<img src=”direccion_de_la_imagen” />
Como es notorio, esta etiqueta autocontenida, sirve para insertar una imagen, el atributo
que lleva es la dirección de la imagen ya sea un URL de internet o de un fichero interno.
7
Puede llevar más atributos como “width” o “height” que sirven para redimensionar los
objetos pero como ya dijimos esto se lo dejaremos a CSS. Además, es recomendable que
nuestras imágenes ya estén en el tamaño deseado y que no sean muy grandes o pesadas.
<table></table>
Es la etiqueta principal para la creación de tablas aunque para que estas en realidad se
muestren como tablas se depende de dos etiquetas más, <tr></tr> que llama a una nueva
fila y <td></td> que llama a una nueva columna.
<a href=”liga”></a>
Con esta etiqueta podemos ligar una parte del documento a otra o bien ir a otra pagina ya
sea del mismo sitio o de otro. El atributo “ref” recibe como valor la dirección a la cual
queremos que el usuario se diriga al dar click sobre ella.
<p>Aqui va un parrafo</p>
Ya antes habíamos dado una referencia de para qué utilizamos esta etiqueta, es para
separar un párrafo de otro.
<ul></ul>
Hay veces que queremos ordenar la información en forma de lista es por eso que
utilizamos la etiqueta <ul> pero esta no es la única que puede utilizarse ya que también se
encuentra la etiqueta <ol></ol>, utilizaremos <ul> para listas no ordenadas, es decir que
solo lleven boliches o algún otro tipo de iconos para enlistarlos, la etiqueta <ol> la
utilizaremos para las listas numeradas o listas ordenadas como se diría en el mundo del
desarrollo web.
<li>Aquí va un elemento de la lista</li>
Si hablamos de listas no podemos dejar de lado la etiqueta <li> se utiliza para indicar que
este es un elemento de la lista y va dentro de la etiqueta <ul> o en su caso <ol>.
<br />
Como podemos ver está es una etiqueta autocontenida y sirve para dar un salto de línea y
puede servir para textos, imágenes u otros elementos.
<link rel="stylesheet" type="text/css" href="css.css" />
Esta etiqueta debe ir dentro de la cabecera y sirve para ligar nuestro documento a una hoja
de estilos o CSS en este caso.
En ella se muestra el atributo “rel” que dice que tipo de archivo se ligara, el atributo “type”
que ya habíamos explicado y “href” que al igual que en la etiqueta <img /> recibe como
valor la dirección del archivo.
8
Conociendo CSS
Al igual que en XHTML en CSS utilizaremos un editor de texto plano, y por su puesto para
este sitio utilizamos de nuevo el editor de Geany y por las mismas razones que en XHTML.
Las hojas de estilo en etiqueta son muy útiles y practicas y gracias a CSS podemos hacer
que nuestro sitio web luzca profesional, pero más allá debemos tomar en cuentas que hoy
en día no sólo podemos hacer un sitio, la web como presencia corporativa o personal dejo
de existir, ahora se debe crear y mantener y esto incluye que tal vez cambiemos el estilo. Es
aquí en donde CSS cobra sentido ya que si queremos que el sitio luzca al menos un poco
serio y profesional tendremos que homogeneizar todas sus paginas. CSS nos permitirá
hacer esto con el mínimo esfuerzo ya que podremos manejar por ejemplo todos los
encabezados <h1> o varios mas al miso tiempo, los elementos de las listas, o cualquier otro.
También nos sirve para poner fondos (backgrounds), colores de letra, familias o ligas.
Hay principalmente tres formas de aplicar el estilo por medio de CSS, los estilos en línea,
hojas de estilos interna y hojas de estilos externa, nosotros usaremos esta ultima.
Las hojas de estilos externa se hace en un archivo diferente al documento web y es
guardado con la extensión .css mismo archivo que se liga mediante el uso de la etiqueta
<link />. Cabe señalar que los documentos CSS exclusivamente recibe las referencias de
estilo y no puede recibir etiquetas que no sean para este fin, podríamos imaginar esto
como si sacáramos todos los atributos de estilo de las etiquetas y los metiéramos en un
archivo diferente.
Dentro de las hojas de estilo externas también podemos encontrar varias divisiones las
cuales utilizaremos según nuestra conveniencia. Esta divisiones principalmente sirven para
decirle al explorador que parte del documento queremos afectar con el estilo. A estas
divisiones se les llama selectores y existen los selectores:
• De etiqueta.
• De clase.
• De id.
• Contextuales
• Pseudo-elementos
• Universal
• Atributo
Nosotros nos ocuparemos tan solo de los selectores de etiqueta y de los selectores de ID.
Los selectores de etiqueta, afectan como su nombre lo dice, a las etiquetas, es decir un
párrafo, un encabezado, una tabla, etc.
9
Los selectores de ID afectan a aquellas etiquetas cuyo atributo id reciba el mismo valor
que nuestro código CSS, recordemos que cuando hablamos del atributo “id” dijimos que
nosotros podíamos ponerle el nombre que quisiéramos a nuestra etiqueta, y por eso es
correcto hacer uso de la etiqueta <div> ya que así podremos afectar solo las partes que nos
interesen. Como aclaración es importante tomar en cuenta que dos etiquetas no pueden
tomar el mismo valor “id” en el mismo documento.
FTP
FTP es el nombre que se le da por sus siglas en ingles (File Transfer Protocol) es un
protocolo diseñado para transferir archivos basado en la arquitectura cliente-servidor. Esta
forma de transferir archivos es muy útil ya que pueden descargarse archivos desde el
servidor o desde el cliente, es decir la transferencia de información puede ser bidireccional
si importar la plataforma en la que trabaje cada uno. También es recomendable el uso de
FTP por que aumenta la velocidad de transmisión de datos lo cual lo hace excelente para
administrar un sitio web ya que regularmente se contrata un servidor para alojar el sitio.
Herramientas
Como ya se ha comentado antes en el texto es necesario un editor de texto plano, pero eso
no es todo lo que necesitamos para la elaboración del sitio web. Aquí enlistaremos todos
los elementos que se utilizaron y explicaremos cual es su función específica en el desarrollo
de este proyecto.
• Editor de texto plano.
• Explorador web.
• Editor de imágenes.
• Servidor1.
• Cliente FTP
Hablar sobre el editor de texto tal vez sea a estas alturas innecesario así que sólo recordare
que es aquí en donde editaremos todo nuestro código, haciendo para cada página un
archivo diferente.
Es necesario el uso de un explorador web ya que en este es en donde visualizaremos
nuestro trabajo, es en realidad aquí en donde podemos probar como el usuario tendrá la
interacción con el sitio y como lo verá. Podemos utilizar cualquier explorador en el caso de
este sitio fue probado en su mayoría con Mozilla Firefox aunque también se probó en
Internet Explorer y Google Chrome.
1 El servidor puede ser o no gratuito, esto dependerá de las necesidades y de los recursos con que se
cuenten.
10
El editor de imágenes utilizado para este sitio fue Pixlr de pixlr.com, lo elegí porque es
gratuito y trabaja en la nube. Es decir, no necesitamos descargarlo ya que trabaja en línea.
Otro factor por el cual utilicé este editor es su facilidad de manejo y su gran calidad.
El editor fue utilizado para redimensionar las imágenes que se ven en el sitio o para
crearlas, ya que a pesar de que con CSS podemos decirle al explorador de que tamaño
queremos la imagen es buena costumbre de programación redimensionarlas desde un
principio ya que así pesaran lo menos posible. De esta manera, un sitio ligero será más
agradable al usuario y seguro le hará regresar. Si necesitas la misma imagen en dos lugares
diferentes y con diferentes tamaños es mejor hacer dos copias con los tamaños adecuados.
El servidor es en donde alojaremos nuestro sitio para que así pueda verse en internet y las
personas interesadas puedan visitarlo. Existen servidores de pago y servidores gratuitos
para este sitio se eligió uno gratuito y es este:
Con el cliente FTP subiremos nuestros archivos al servidor, utilizamos este método porque
es muy cómodo y practico. El cliente FTP utilizado para la transferencia de archivos en este
sitio fue FileZilla ya que es gratuito y trabaja muy bien.
Por supuesto las herramientas recomendadas aquí son opcionales y pueden usarse otras a
consideración del desarrollador y/o cliente.
Diagramas de navegación
El diagrama de navegación sirve para tener una idea de como queremos la estructura del
sitio. Nuestro diagrama tiene, en este caso en particular, tres niveles como se puede
apreciar en la figura. Esta es una muy buena representación del mapa del sitio y una vez
hecho esto podemos empezar a planear como quedaran nuestras páginas.
11
Bosquejo
El siguiente paso es hacer un bosquejo de cómo queremos que se vea cada página, este
bosquejo también es llamado “layout”, y a esta técnica se le conoce como técnica de
“storyboard”. Los bosquejos de este sitio los pondré de acuerdo al orden de aparición en el
diagrama de usos. Este orden no es obligatorio pero lo elegí para ser más ordenado y tener
una referencia.
12
Casos de uso
Utilizamos los casos de uso para saber como van a interactuar los interesados en el sitio.
Estos interesados reciben el nombre de actores.
Para hacer solo caso de uso primero debemos nombrar a los actores y después describir su
función en el sitio.
Los actores particulares de este sitio son:
• El cliente (quien pidió la página).
• El desarrollador web.
• El profesor de la clase.
• Familiares y amigos (usuarios en general).
13
Ahora mostraremos como interactúan los actores con mayor detalle.
Una vez realizados los casos de uso podemos describir el código de nuestro sitio.
Códigos del sitio personal
Para elaborar el sitio se utilizó la misma estructura en todas las páginas, esto se hizo por
dos razones importantes, la primera para ser ordenados y seguir con las buenas
costumbres de programación; la segunda para que al elaborar el archivo CSS sea más fácil
aplicar los estilos. Primero se mostrara el código de los primeros ejercicios XHTML, estos
aparecen sin estilo, a partir del código de la página principal, la cual se ha guardado con el
nombre de index.htm debido a los protocolos, las páginas ya tienen estilo.
Tarea 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Primera Tarea de Cuaderno</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="styles/pie.css"> </head> <body> <div id="pagina_principal"> <div id="encabezado"> <a href="ejercicios.htm"><img src="pictures/arrow_left.png" width="32" height="32" href=></a> <a href="index.htm"><img src="pictures/home.png" width="32" height="32" href=></a><br />
14
<hr /> </div> <div id="contenido"> <h1>Algunas etiquetas sencillas:</h1> <p> Este es un <em>párrafo</em> <strong>peqeño</strong> </p> <table border = "1"> <caption>Tabla simple sin formato</caption> <th>Columana 1</th> <th>Columna 2</th> <tr> <td>Celda 1,1</td> <td>Celda 1,2</td> </tr> <tr> <td>Celda 2,1</td> <td>Celda 2,2</td> </tr> </table> <h2>Paginas de nuestro sitio personal</h2> <ul> <li>Intereses o gustos personales</li> <li>Ejemplos de xhtml y CSS</li> <li>Ejemplos de php y mySQL</li> <li>Documentación</li> <li>Herramientas o sitios que he visitado o usado</li> </ul> <table border = "1"> <br /><br /><br /> <caption>Tabla del plan de IPA</caption> <th></th> <th>Sitio personal</th> <th>Sitio de promoción del negocio</th> <th>Sitio de administración del negocio</th> <tr> <td>Construcción</td> <td>xhtml, CSS <br />Editor<br />Navegador<br />Servidor Gratuito</td> <td>xhtml, CSS <br />Editor<br />Navegador<br />Servidor Gratuito</td> <td>PHP, mySQL <br />Editor<br />Navegador<br />Servidor Gratuito</td> </tr> <tr>
15
<td>Metodología</td> <td>Arquitectura de la información<br />Bosquejos<br />Diagramas de navegación</td> <td>Modelo de negocio<br />Proceso unificado<br />Modelo relacional</td> <td>Proceso unificado<br />Diagrama de actividades<br />Diagramas de casos de uso<br />Diagramas E-R</td> </tr> <tr> <td>Tiempo</td> <td>3 semanas</td> <td>3 semanas</td> <td>4 semanas</td> </tr> </table> </div> <div id="pie"> <div id="licencia"> <h6> <a href="http://creativecommons.org/licenses/by/2.5/mx/"> <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/2.5/mx/88x31.png" /> </a><br /> Sitio Personal de Emmanuelle Laguna<br /> por Emmanuelle Laguna Marín esta protegido bajo la licencia<br /> <a rel="license" href="http://creativecommons.org/licenses/by/2.5/mx/"> Creative Commons Atribución 2.5 México License.<br /> </a> </h6> </div> </div> </div> </body> </html>
Como podemos observar en este código todas las etiquetas que aparecen fueron explicadas con detenimiento en la parte de XHTML, dentro de teoría y documentación. A lo largo de la revisión de estos códigos iré mostrando el resultado con capturas de pantalla.
16
Tarea 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Segunda Tarea de Cuaderno</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="styles/pie.css"> </head> <body>
17
<div id="pagina_principal"> <div id="encabezado"> <a href="ejercicios.htm"><img src="pictures/arrow_left.png" width="32" height="32" href=></a> <a href="index.htm"><img src="pictures/home.png" width="32" height="32" href=></a><br /> <hr /> <a name="inicio"><h1>Aquí comienza la pagina</h1></a> </div> <h3>Logotipo de Shannonbit</h3> <img src = "pictures/shannonbit.jpeg" width = "50px" height = "40px" alt = "Logotipo de Shannonbit" title = "Logotipo de Shannonbit de 40 x 50 px." /> <img src = "pictures/shannonbit.jpeg" width = "100px" height = "80px" alt = "Logotipo de Shannonbit" title = "Logotipo de Shannonbit 100 x 80 px."
18
/> <img src = "pictures/shannonbit.jpeg" width = "150px" height = "120px" alt = "Logotipo de Shannonbit" title = "Logotipo de Shannonbit 150 x 120 px." /> <img src = "pictures/shannonbit.jpeg" width = "200px" height = "160px" alt = "Logotipo de Shannonbit" title = "Logotipo de Shannonbit 200 x 160 px." /> <div id="forma"> <h4> Forma para enviar un correo</h4> <p>Las partes principales de una forma son:<br /> <ul> <li>action</li> <li>method</li> <li>enctype</li> <li>name</li>
19
<li>id</li> <li>input</li> <li>size</li> <li>value</li> <li>maxlenghth</li> </ul> </p> <form action = "mailto:[email protected]" method = "post" enctype = "text/plain"> Nombre:<input type = "text" id = "nombre" name = "nombre" value = "Shannonbit" size = "20"><br /> Correo:<input type = "text" id = "correo" name = "correo" value = "[email protected]" size = "25"><br /> Comentario: <input type = "text" id = "comentario" name = "comentario" value = "Escribe aquí tu comentario." size = "50" /><br /> <input type = "submit" value = "Enviar"> <input type = "reset" value = "Borrar">
20
</form> </div> <a href = "http://www.w3schools.com" title = "Ejercicios Web"> Pagina de referencia que vamos a utilizar</a> <a href = "#inicio"> Ir al inicio</a> <p><h1>Algunas etiquetas importantes</h1></p> <ol type="a"> <li>id: <cite>Se emplea para asignar un identificativo a un objeto, que puede ser:</cite></li> <ul> <li>Imagen</li> <li>Tabla o celda de una tabla</li> <li>Formulario</li> <li>Campo de formulario</li> <li>Párrafo de texto</li> <li>Capa</li> </ul> <li>name: <cite>Tiene la misma función que el atributo id, pero esta restringido a marcos y campos de formulario.</cite></li> <li>value: <cite>Se emplea cuando queremos asignarle un valor predeterminado al campo.</cite></li> </ol> <div id="pie">
21
<div id="licencia"> <h6> <a href="http://creativecommons.org/licenses/by/2.5/mx/"> <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/2.5/mx/88x31.png" /> </a><br /> Sitio Personal de Emmanuelle Laguna<br /> por Emmanuelle Laguna Marín esta protegido bajo la licencia<br /> <a rel="license" href="http://creativecommons.org/licenses/by/2.5/mx/"> Creative Commons Atribución 2.5 México License.<br /> </a> </h6> </div> </div> </div> </body> </html>
22
Index <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:////www.w3.org/1999/xhtml"> <!--Comienza head--> <head> <title>Sitio Personal de Emmanuelle Laguna Marín</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
23
<link rel="stylesheet" type="text/css" href="css.css" /> </head><!--Termina head--> <!--Comienza body--> <body> <!--Comienza el header--> <div id="header"> </div> <!--Termina el header--> <!--Comienza pagina_principal--> <div id="pagina_principal"> <!--Comienza encabezado--> <div id="encabezado"> <h1>Este es el sitio personal de Emmanuelle Laguna Marín</h1> <h3>Siempre Listo</h3> </div><!--Cierra encabezado--> <!--Inicia fotoyo--> <div id="fotoyo"> <center> <img src="pictures/fotoyo.jpg" alt="Mi foto" title="Mi foto" width="200" /> </center> </div><!--Termina fotoyo-->
24
<!--Comienza table--> <div id="table"> <table> <th></th> <th></th> <!--Inicia fila ligas--> <tr> <!--Inicia celda ligas--> <td> <!--Inicia ligas_internas--> <div id="ligas_internas"> <a href="#curriculum">Currículum Vitae</a> • <a href="#folders">Folders</a> • <a href="#bitacora">Bitácora</a> • <a href="#footer">Licencia de uso</a> </div><!--Cierra ligas_internas--> </td><!--Cierra celda ligas--> </tr><!--Cierra fila ligas--> <!--Inicia contenido--> <div id="contenido"> <!--Inicia fila justificacion-->
25
<tr> <!--Inicia celda justificacion--> <td> <!--Inicia justificacion--> <div id="justificacion"> <p> Este sitio fue desarrollado como parte de mi curso de Introducción a la Programación en la Administración (IPA), es un sitio personal el cual contiene datos personales así como tutoriales y herramientas utilizadas para el desarrollo de este sitio. También contiene una bitácora del curso. </p> <a href="#encabezado">Inicio</a> </div><!--Termina justificacion--> </td><!--Cierra celda justificacion--> </tr><!--Cierra fila justificacion--> <!--Inicia fila curriculum--> <tr> <!--Inicia celda curriculum--> <td> <!--Inicia curriculum--> <div id="curriculum"> <h1>CURRICULUM VITAE</h1>
26
<p> Emmanuelle Laguna Marín<br /> Técnico en Computación<br /> </p> <h3>DATOS PERSONALES:</h3> <p> Teléfono local: 58-66-56-99<br /> Teléfono móvil: 55-34-18-72-82<br /> E-mail: [email protected]<br /> </p> <h3>OBJETIVO PROFESIONAL:</h3> <p> Me gustaría trabajar en el área de sistemas y de ser posible en el desarrollo de software para tener la oportunidad de aplicar mis conocimientos y así desarrollarlos y enriquecerlos. </p> <h3>HABILIDADES PERSONALES:</h3> <p> Facilidad para resolver problemas y rápido aprendizaje, además de
27
poseer un vivido entusiasmo por los nuevos conocimientos. Adaptabilidad a diversas condiciones de trabajo. Resistencia al estrés y a las presiones laborales. Trabajo en equipo, capacidad de relacionarse con compañeros y ajenos a la empresa con el fin de obtener éxito en los proyectos laborales.<br /> Idioma: Inglés<br /> Hablado 65 %, Escrito 70 %, Comprensión 70 % </p> <h3>CONOCIMIENTOS TÉCNICOS:</h3> <p> Conocimientos en sistemas operativos, paquetería de informática, hojas de cálculo, manejadores de bases de datos, lenguaje C y Visual Basic. </p> <h3>SOFTWARE:</h3> <p> <ul> <li>Microsoft Word 75%</li> <li>Microsoft Excel 70%</li> <li>Micorostf Power Point 70%</li>
28
<li>Microsoft Acces 75%</li> <li>Corel Draw 60%</li> <li>Open Office Writer 70%</li> <li>Open Office Calc 65%</li> <li>Visual Basic 60%</li> <li>Windows XP 80%</li> <li>Ubuntu Linux 70%</li> </ul> </p> <h3>EXPERIENCIA PROFESIONAL:</h3> <p> Realicé mi servicio social en el Centro Cultural Zapotitlán en la Delegación Tláhuac en el Departamento de Proyectos Culturales, en el cual desarrollé habilidades como desarrollador y administrador de una base de datos la cual controlaba las inscripciones y pagos del alumnado así como la nomina del personal. También aquí realice mis practicas profesionales siguiendo el mantenimiento de la base de datos y dando soporte correctivo a PC's. </p> <h3>TRAYECTORIA ACADEMICA:</h3>
29
<p> 2010- Actualmente: División de Ciencias Básicas e Ingenierías, UAM-I Cursando el quinto trimestre de la Licenciatura en Computación.<br /> 2004 - Harmon Hall Certificación de dominio del idioma inglés.<br /> 2003 - Centro de Estudios Tecnológicos Industrial y de Servicios (CETIS) No. 1 Bachillerato Tecnológico en el Área de Ciencias Fisicomatemáticas, certificado de bachillerato y carta de pasante como técnico en computación (Titulo en trámite.) </p> <a href="#encabezado">Inicio</a> </div><!--Termina Curriculum--> </td><!--Cierra celda curriculum--> </tr><!--Cierra fila curriculum--> <!--Inicia fila folders--> <tr> <!--Inicia celda folders--> <td> <!--Inicia folders--> <div id="folders">
30
<h1>Folders</h1> <a href="gustos.htm">Gustos personales y aficiones</a><br /> <a href="ejercicios.htm">Ejercicios de xhtml, css, php y mySQL</a><br /> <a href="teoria.htm">Teoría y documentación</a><br /> <a href="herramientas.htm">Herramientas y páginas utilizadas</a><br /> <a href="#encabezado">Inicio</a> </div><!--Termina folders--> </td><!--Cierra celda folders--> </tr><!--Cierra fila folders--> <!--Inicia fila bitacora--> <tr> <!--Inicia celda bitacora--> <td> <!--Comienza bitacora--> <div id="bitacora"> <h1>Bitácora</h1> <p> Tarea 1<br /> 30 de abril del 2010<br /> En la tarea 1 se revisaron algunas etiquetas básicas del lenguaje xhtml.... <a href="bitacora.htm">Leer más</a>
31
</p> <p> Tarea 2<br /> 3 de mayo de 2010<br /> En esta tarea se pusieron en practica las etiquetas para formar formularios e introducir imagenes principalmente... <a href="bitacora.htm">Leer más</a> </p> <p> Tarea 3<br /> 7 de mayo de 2010<br /> Para esta parte del sitio se empezó por hacer un boceto de la página,... <a href="bitacora.htm">Leer más</a> </p> <p> Tarea 4<br /> 11 de mayo del 2010<br /> En esta tarea se diseñaron el resto de las paginas del sitio siguiendo las... <a href="bitacora.htm">Leer más</a> </p> <a href="#encabezado">Inicio</a>
32
</div><!--Termina bitacora--> </td><!--Termina celda bitacora--> </tr><!--Termina fila bitacora--> </div><!--Termina contenido--> <!--Inicia fila de footer--> <tr> <!--Inicia celda de footer--> <td> <!--Inicia footer--> <div id="footer"> <!--Inicia licencia--> <div id="licencia"> <h6> <a href="http://creativecommons.org/licenses/by/2.5/mx/"> <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/2.5/mx/88x31.png" /> </a><br /> Sitio Personal de Emmanuelle Laguna<br /> por Emmanuelle Laguna Marín está protegido bajo la licencia<br />
33
<a rel="license" href="http://creativecommons.org/licenses/by/2.5/mx/"> Creative Commons Atribución 2.5 México License.<br /> </a> </h6> </div><!--Termina licencia--> </div><!--footer--> </td><!--Termina celda de footer--> </tr><!--Termina celda de footer--> </div><!--Cierra table--> </div><!--Cierra pagina_principal--> </body><!--Termina body--> </html>
34
Bitácora
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:////www.w3.org/1999/xhtml"> <head> <title>Bitácora</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <!--Comienza body--> <body> <!--Comienza el header--> <div id="header"> </div> <!--Termina el header--> <!--Comienza pagina_principal--> <div id="pagina_principal"> <!--Comienza encabezado--> <div id="encabezado"> <h1>Bitácora</h1> </div><!--Termina encabezado-->
35
<div id="table"> <table> <th></th> <th></th> <!--Inicia fila folders--> <tr> <!--Inicia celda folders--> <td> <!--Inicia folders--> <div id="folders"> <h1>Folders</h1> <a href="index.htm">Home</a> • <a href="gustos.htm">Gustos</a> • <a href="ejercicios.htm">Ejercicios</a> • <a href="teoria.htm">Teoría</a> • <a href="herramientas.htm">Herramientas</a> • </div><!--Termina folders--> </td><!--Cierra celda folders--> </tr><!--Cierra fila folders--> <!--Inicia fila ligas--> <tr>
36
<!--Inicia celda ligas--> <td> <!--Inicia ligas_internas--> <div id="ligas_internas"> <a href="#tarea1">Tarea 1</a> • <a href="#tarea2">Tarea 2</a> • <a href="#tarea3">Tarea 3</a> • <a href="#tarea4">Tarea 4</a> </div><!--Cierra ligas_internas--> </td><!--Cierra celda ligas--> </tr><!--Cierra fila ligas--> <!--Inicia fila tareas--> <tr> <!--Inicia celda tareas--> <td> <!--Inicia tareas--> <div id="tareas"> <!--Inicia tarea1--> <div id="tarea1"> <h3>Tarea 1</h3> <h6>30 de abril del 2010</h6> <p> En la tarea 1 se revisaron algunas etiquetas básicas del lenguaje xhtml.
37
Algunas de estas etiquetas son las siguientes: <ul> <li>html: para establecer que nos referimos a una página html.</li> <li>head: Separa algunos elementos básicos del sitio, tal como la codificación de caracteres que se tendrán, y el titulo de nuestra página en el explorador.</li> <li>body: Este es el cuerpo de nuestra pagina, en el se introducen los textos, imágenes, y demás información que lleve nuestra pagina.</li> <li>div: Sirve para dividir las diferentes secciones de la página. Ésta solo es una división lógica, por lo que no se muestra en pantalla.</li> <li>table: Como su nombre lo indica sirve para declarar tablas. Dentro de la etiqueta table podemos encontrar las dos siguientes.</li> <li>tr: Para declarar una nueva fila.</li> <li>td: Para declarar una nueva columna. Ésta está contenida en tr.</li> <li>p: Esta etiqueta sirve para separar párrafos.</li> <li>h1, h2,...,h6: que se utilizan para distinguir encabezados de sección.</li> <li>li: Etiqueta utilizada para hacer listas.</li> </ul> </p> <a href="#encabezado">Inicio</a> </div><!--Termina tarea1--> <!--Inicia tarea2--> <div id="tarea2"> <h3>Tarea 2</h3>
38
<h6>3 de mayo de 2010</h6> <p> En esta tarea se pusieron en práctica las etiquetas para formar formularios e introducir imágenes principalmente. Se vieron algunos atributos como, id, name y value. Algunas de las etiquetas utilizadas fueron: <ul> <li>img: Para introducir imágenes. Sus atributos tittle y alt que sirven para mostrar en estado hover el titulo de la imagen o en su caso, si no es cargada correctamente.</li> <li>form: Sirve para hacer formas (formularios).</li> </ul> </p> <a href="#encabezado">Inicio</a> </div><!--Termina tarea2--> <!--Inicia tarea3--> <div id="tarea3"> <h3>Tarea 3</h3> <h6>7 de mayo de 2010</h6> <p> Para esta parte del sitio se empezó por hacer un boceto de la página (técnica de storyboard). Se hizo un análisis completo del problema teniendo en cuenta los actores que intervendrían en el sitio. Se dividió en varias secciones, para mi sitio personal las principales secciones son: <ul> <li>Encabezado: contiene un header (imagen principal) y el logotipo.</li> <li>Justificación del sitio.</li>
39
<li>Currículum Vitae.</li> <li>Folders: Con las ligas para navegar por este sitio.</li> <li>Bitácora: Contiene pequeñas síntesis de los post en la bitácora así como la fecha de creación. Esta parte se diseño con formato blog.</li> <li>Footer: Esta última parte contiene la licencia de uso de la página.</li> </ul> </p> <a href="#encabezado">Inicio</a> </div><!--Termina tarea3--> <!--Inicia tarea4--> <div id="tarea4"> <h3>Tarea 4</h3> <h6>11 de mayo de 2010</h6> <p> En esta tarea se diseñaron el resto de las páginas del sitio siguiendo las técnicas utilizadas para el diseño de la página principal, llamada index. Las secciones que componen este sitio en particular son: <ul> <li>Index: Pagina principal, también llamada home.</li> <li>Bitácora: Con el seguimiento de las tareas.</li> <li>Ejercicios: En la cual se colocaron accesos a las páginas de práctica mencionadas arriba.</li> <li>Gustos: Se describen y muestran algunos gustos y aficiones personales.</li> <li>Herramientas: Contiene ligas a sitios utilizados para el desarrollo
40
de este sitio, también se dan algunos títulos de libros y manuales utilizados.</li> <li>Teoría y documentación: Se da sustento teórico a las prácticas, ejercicios y comentarios de este sitio.</li> </ul> </p> <a href="#encabezado">Inicio</a> </div><!--Termina tarea4--> </div><!--Termina tareas--> </td><!--Termina celda tareas--> </tr><!--Termina fila tareas--> <!--Inicia fila de footer--> <tr> <!--Inicia celda de footer--> <td> <!--Inicia footer--> <div id="footer"> <!--Inicia licencia--> <div id="licencia"> <h6> <a href="http://creativecommons.org/licenses/by/2.5/mx/"> <img alt="Creative Commons License" style="border-width:0"
41
src="http://i.creativecommons.org/l/by/2.5/mx/88x31.png" /> </a><br /> Sitio Personal de Emmanuelle Laguna<br /> por Emmanuelle Laguna Marín está protegido bajo la licencia<br /> <a rel="license" href="http://creativecommons.org/licenses/by/2.5/mx/"> Creative Commons Atribución 2.5 México License.<br /> </a> </h6> </div><!--Termina licencia--> </div><!--footer--> </td><!--Termina celda de footer--> </tr><!--Termina celda de footer--> </table><!--Termina table--> </div><!--Termina table--> </div><!--Termina pagina_principal--> </body><!--Termina body--> </html>
Gustos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
42
transitional.dtd"> <html xmlns="http:////www.w3.org/1999/xhtml"> <head> <title>Gustos</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <!--Comienza body--> <body> <!--Comienza el header--> <div id="header"> </div> <!--Termina el header--> <!--Comienza pagina_principal--> <div id="pagina_principal"> <!--Comienza encabezado--> <div id="encabezado"> <h1>Gustos y aficiones personales.</h1> </div><!--Cierra encabezado--> </td>
43
<img src="pictures/tocando.jpg" title="El primer evento con No War" name="El primer evento con No War"/> <img src="pictures/tocando2.jpg" title="En el Centro Cultural Zapotitlan" name="En el Centro Cultural Zapotitlan"/> <img src="pictures/tocando3.jpg" title="En el Centro Cultural Zapotitlan" name="En el Centro Cultural Zapotitlan"/> <img src="pictures/nowar.jpg" title="Logo de No War" name="Logo de No War"/> <img src="pictures/simbion.jpg" title="No War" name="No War"/> <!--Comienza table--> <div id="table"> <table> <th></th> <th></th> <!--Inicia fila folders--> <tr> <!--Inicia celda folders--> <td> <!--Inicia folders--> <div id="folders"> <h1>Folders</h1> <a href="index.htm">Home</a> • <a href="bitacora.htm">Bitácora</a> •
44
<a href="ejercicios.htm">Ejercicios</a> • <a href="teoria.htm">Teoría</a> • <a href="herramientas.htm">Herramientas</a> </div><!--Termina folders--> </td><!--Cierra celda folders--> </tr><!--Cierra fila folders--> <tr> <td> <!--Inicia general--> <div id=" general"> <h1>Mis gustos</h1> <p> En general me gusta la música, la mezcla de ritmos e instrumentos, me gusta escuchar una guitarra eléctrica combinada con una gaita, un bajo eléctrico y un bongo.<br /> Me gusta la mezcla y la experimentación y no me cierro a escuchar ciertas cosas aunque en general me inclino por el ska, rock, y punk.<br /> También me gusta el anime, me considero un lector ocasional ya que no leo tanto como debería.<br /> Tengo afinidad por el cine en especial me gusta la ciencia ficción.<br /> Soy amante de las historias llevadas por el camino del absurdo, de lo increíble y de la esperanza.<br /> </p> <a href="#encabezado">Inicio</a> <!--Inicia musica-->
45
<div id="musica"> <h3>Música</h3> <p> En la música como ya comente me encantan algunas fusiones de ritmos e instrumentos, igual me dejo llevar por un crudo y estridente bajo o por un melodioso saxofón pero si están juntos es mucho mejor.<br /> Los géneros que predominan en mis listas de reproducción y en mi colección personal son el rock, el ska y el punk, pero no puedo negar que escucho géneros menos estridentes, me gusta el jazz, el reggae y por que no decirlo el pop.<br /> Mi gusto musical no termina con escuchar, lo cual me llevo a aprender a tocar guitarra. Por un par de años toque en un proyecto llamado No War, en el cual la única premisa era el gusto por la música, conformada por batería, bajo y guitarra al más puro estilo del viejo punk.<br /> </p> <a href="#encabezado">Inicio</a> </div><!--Termina musica--> <!--Inicia video--> <div id="video"> <h3>Video</h3> <p> En la parte cinematográfica la ciencia ficción es mi debilidad, una tarde junto a Marty McFly, el Dr. Emmett L. Browny y palomitas son suficientes para tener un buen día.<br /> Sin embargo, no sólo me gusta Volver al Futuro, algunos otros títulos de mi especial interés son, Terminator, Robocop, Chicago, Matrix y mi favorita Pi (El orden del caos).<br /> Mi gusto por las imágenes en movimiento no se limita sólo a las películas también me gusta el anime, desde pequeño soy seguidor de los Caballeros del Zodiaco siendo la Saga de las Doce casas mi favorita, Hellsing, Full Metal Alchemist, y Evangelion también se encuentran en mis títulos predilectos.<br />
46
</p> </div><!--Termina video--> <a href="#encabezado">Inicio</a> </div><!--Temina general--> </tr> <!--Inicia fila de footer--> <tr> <!--Inicia celda de footer--> <td colspan="2"> <!--Inicia footer--> <div id="footer"> <!--Inicia licencia--> <div id="licencia"> <h6> <a href="http://creativecommons.org/licenses/by/2.5/mx/"> <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/2.5/mx/88x31.png" />
47
</a><br /> Sitio Personal de Emmanuelle Laguna<br /> por Emmanuelle Laguna Marín está protegido bajo la licencia<br /> <a rel="license" href="http://creativecommons.org/licenses/by/2.5/mx/"> Creative Commons Atribución 2.5 México License.<br /> </a> </h6> </div><!--Termina licencia--> </div><!--footer--> </td><!--Termina celda de footer--> </tr><!--Termina celda de footer--> </table><!--Termina tabla--> </div><!--termina paguina_principal--> </body> </html>
48
Ejercicios
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:////www.w3.org/1999/xhtml"> <head> <title>Ejercicios y Tareas</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <!--Comienza body--> <body> <!--Comienza el header--> <div id="header"> </div> <!--Termina el header--> <!--Comienza pagina_principal--> <div id="pagina_principal"> <!--Comienza encabezado--> <div id="encabezado"> <h1>Ejercicios de xhtml, css, mySQL y PHP</h1> </div><!--Cierra encabezado--> <!--Comienza table-->
49
<div id="table"> <table> <th></th> <th></th> <!--Inicia fila folders--> <tr> <!--Inicia celda folders--> <td> <!--Inicia folders--> <div id="folders"> <h1>Folders</h1> <a href="index.htm">Home</a> • <a href="gustos.htm">Gustos</a> • <a href="bitacora.htm">Bitácora</a> • <a href="teoria.htm">Teoría</a> • <a href="herramientas.htm">Herramientas</a> </div><!--Termina folders--> </td><!--Cierra celda folders--> </tr><!--Cierra fila folders--> <!--Inicia fila de justificacion--> <tr>
50
<!--Inicia celda de justificacion--> <td> <p> En esta sección podrás encontrar algunos de los ejercicios realizados para esta clase. Cabe señalar que el resto de los sitios fue creado a partir de estos ejercicios. Solo pondré los dos primeros ejercicios como páginas separadas, los ejercicios 3, 4 y 5 están contenidos en el mismo sitio y son explicados a detalle en la sección bitácora. </p> </td><!--Termina celda de justificacion--> </tr><!--Termina fila de justificacion--> <!--Comienza fila de ligas--> <tr> <!--Comienza celda de ligas--> <td> <a href="primera.htm">Primera tarea</a><br /> <a href="segunda.htm">Segunda tarea</a> </td><!--Termina celda de ligas--> </tr><!--Termina fila de ligas--> <!--Inicia fila de footer--> <tr> <!--Inicia celda de footer--> <td> <!--Inicia footer--> <div id="footer"> <!--Inicia licencia-->
51
<div id="licencia"> <h6> <a href="http://creativecommons.org/licenses/by/2.5/mx/"> <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/2.5/mx/88x31.png" /> </a><br /> Sitio Personal de Emmanuelle Laguna<br /> por Emmanuelle Laguna Marín está protegido bajo la licencia<br /> <a rel="license" href="http://creativecommons.org/licenses/by/2.5/mx/"> Creative Commons Atribución 2.5 México License.<br /> </a> </h6> </div><!--Termina licencia--> </div><!--footer--> </td><!--Termina celda de footer--> </tr><!--Termina celda de footer--> </table><!--Termina tabla--> </div><!--termina paguina_principal--> </body> </html>
52
Teoría y documentación.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:////www.w3.org/1999/xhtml"> <head> <title>Teoría</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <!--Comienza body--> <body>
53
<!--Comienza el header--> <div id="header"> </div> <!--Termina el header--> <!--Comienza pagina_principal--> <div id="pagina_principal"> <!--Comienza encabezado--> <div id="encabezado"> <h1>Teoría y documentación</h1> </div><!--Cierra encabezado--> <!--Comienza table--> <div id="table"> <table> <th></th> <th></th> <!--Inicia fila folders--> <tr> <!--Inicia celda folders--> <td> <!--Inicia folders--> <div id="folders">
54
<h1>Folders</h1> <a href="index.htm">Home</a> • <a href="gustos.htm">Gustos</a> • <a href="ejercicios.htm">Ejercicios</a> • <a href="bitacora.htm">Bitácora</a> • <a href="herramientas.htm">Herramientas</a> • <a href="#xhtml">XHTML</a> • <a href="#css">CSS</a> • <a href="#arquitectura">Arquitectura de la Información</a> • <a href="#proceso">Proceso Unificado</a> </div><!--Termina folders--> </td><!--Cierra celda folders--> </tr><!--Cierra fila folders--> <!--Inicia documentación--> <tr> <td> <div id="documentacion"> <h1>Teoría</h1> <!--Inicia xhtml--> <div id="teoria"> <h3>XHTML</h3> <p> Para empezar a entender qué es el lenguaje XHTML primero
55
debemos saber que de dónde proviene. Al igual que la mayoría de los lenguajes actuales es la versión modificada o incluso fusionada de uno, dos o mas lenguajes en una o varias versiones. El Lenguaje XHTML es un lenguaje de etiquetas que proviene de HTML (HyperText Markup Language), y XML (eXtensible Markup Languaje). Al igual que otros lenguajes que son derivados de algunos anteriores no es necesario conocer los lenguajes padres de estos para aprender a utilizarlos. En este sitio se utiliza el lenguaje XHTML única y exclusivamente para agregar el contenido y no el formato. Es decir, se dejan de lado casi todos los atributos de formato y edición como son los atributos de familia de tipografía, color, fondo de pantalla locales y generales, y cualquier otro que haga referencia a la edición y el formato dejando esta parte del desarrollo del sitio para el lenguaje CSS del cual se habla en la siguiente sección. </p> <a href="#encabezado">Inicio</a> </div><!--Termina xhtml--> <!--Inicia css--> <div id="css"> <h3>CSS</h3> <p> Las CSS (Cascade Style Sheets) u Hojas de Estilo en Cascada es una normalización aprobada por el consorcio que rige y norma los documentos web incluyendo los estilos. Las principales características y finalidades de CSS son permitir: <ul> <li>Definir la presentación de una página en todos sus detalles. <li>Homogeneizar con facilidad dicha presentación en todas las páginas de un sitio web.</li> <li>Actualizar o modificar la apariencia cuando sea necesario.</li> <li>Mantener una abstracción entres los datos y/o contenidos de un documento web y su apariencia o presentación.</li> </ul> Como ya se dijo anteriormente este sitio fue editado y se le dio estilo por medio de CSS, esto es por su puesto muy práctico ya que si se quieren cambiar las
56
tonalidades, la combinación de colores, o los tamaños de letra basta con modificarlos en el archivo CSS y se modifica en todo el sitio, claro está en las partes referidas. </p> <a href="#encabezado">Inicio</a> </div><!--Termina css--> <!--Inicia arquitectura--> <div id="arquitectura"> <h3>Arquitectura de la información</h3> <p> El término "Arquitectura de la información" se utilizo por primera vez por Richard Saul Wurman quien la definió como: “El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información.” </p> <p> Particularmente en la web la arquitectura de la información es "El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información” según Louis Rosenfeld y Peter Morville en el libro "Information Architecture for the World Wide Web" en su segunda edición. Pera mayor información sobre Arquitectura de la Información puedes visitar <a href="http://www.alzado.org/articulo.php?id_art=516">Alzado.org</a> o bien <a href="http://www.nosolousabilidad.com/articulos/ai.htm">nsu.com</a> </p> <a href="#encabezado">Inicio</a> </div><!--Termina arquitectua--> <!--Inicia proceso-->
57
<div id="proceso"> <h3>Proceso Unificado</h3> <p> El Proceso Unificado de Desarrollo Software o simplemente Proceso Unificado es un marco de desarrollo de Software que se caracteriza por estar dirigido por casos de uso, centrado en la arquitectura y por ser iterativo e incremental. </p> <a href="#encabezado">Inicio</a> </div><!--Termina proceso--> </td> </div> </tr> <!--Inicia fila de footer--> <tr> <!--Inicia celda de footer--> <td> <!--Inicia footer--> <div id="footer"> <!--Inicia licencia--> <div id="licencia"> <h6> <a href="http://creativecommons.org/licenses/by/2.5/mx/"> <img
58
alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/2.5/mx/88x31.png" /> </a><br /> Sitio Personal de Emmanuelle Laguna<br /> por Emmanuelle Laguna Marín está protegido bajo la licencia<br /> <a rel="license" href="http://creativecommons.org/licenses/by/2.5/mx/"> Creative Commons Atribución 2.5 México License.<br /> </a> </h6> </div><!--Termina licencia--> </div><!--footer--> </td><!--Termina celda de footer--> </tr><!--Termina celda de footer--> </table><!--Termina tabla--> </div><!--termina paguina_principal--> </body> </html>
Herramientas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
59
<html xmlns="http:////www.w3.org/1999/xhtml"> <head> <title>Herramientas</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <!--Comienza body--> <body> <!--Comienza el header--> <div id="header"> </div> <!--Termina el header--> <!--Comienza pagina_principal--> <div id="pagina_principal"> <!--Comienza encabezado--> <div id="encabezado"> <h1>Herramientas y páginas utilizadas</h1> </div><!--Termina encabezado--> <div id="table"> <table> <th></th>
60
<th></th> <!--Inicia fila folders--> <tr> <!--Inicia celda folders--> <td> <!--Inicia folders--> <div id="folders"> <h1>Folders</h1> <a href="index.htm">Home</a> • <a href="gustos.htm">Gustos</a> • <a href="ejercicios.htm">Ejercicios</a> • <a href="teoria.htm">Teoría</a> • <a href="bitacora.htm">Bitácora</a> • </div><!--Termina folders--> </td><!--Cierra celda folders--> </tr><!--Cierra fila folders--> <tr> <td> <h1>Ligas</h1> <a href="http://docencia.izt.uam.mx/jcjr/">Página del curso</a><br /> <a href="http://creativecommons.org.mx/">Creative commons
61
México</a><br /> <a href="http://www.calinsoft.com/2008/08/iconos-y-botones-para-disenadores-web.html">Blog de Calif Soft</a><br /> <a href="http://www.freeiconsdownload.com/">Iconos libres y gratuitos</a><br /> <a href="http://www.templateworld.com/">Plantillas Web</a><br /> <a href="http://www.geany.org/">Compilador y editor de texto</a><br /> <a href="http://pixlr.com/">Editor de imágenes en línea</a><br /> <a href="http://www.ucm.es/eprints/4109/">Información sobre arquitectura de la información</a><br /> <a href="http://www.alzado.org/articulo.php?id_art=516">Más información sobre arquitectura de la información</a><br /> <a href="http://www.000webhost.com/" target="_blank">http://www.000webhost.com/</a> <a href="#encabezado">Inicio</a> </td> </tr> <tr> <td> <h1>Libros y manuales</h1> <p> José López Quijado, XHTML 1.0 Y CSS2, México, Alfaomega Grupo Editor, 2009, Primera edición </p>
62
<p> Francisco Jesús Martín Fernández, Yusef Hassan Montero, Qué es la Arquitectura de la Información [en línea], No solo usabilidad, 16 de febrero de 2003, Dirección URL: http://www.ucm.es/eprints/4109/, [consulta: 16 de Mayo de 2010]. </p> <a href="#encabezado">Inicio</a> </td> </tr> <tr> <td> <h1>Software</h1> <p> Explorador web para poder visualizar el sitio. En mi caso utilicé Mozilla Firefox, pero también fue probado con Google Chrome e Internet Explorer. </p> <p> Editor de texto plano, este es utilizado para escribir el código y necesita ser un editor de texto plano ya que no queremos marcas y los procesadores de texto suelen ponerlas. En este caso en particular utilicé el editor de Geany. </p> <p> Editor de imágenes. En realidad sirven cualquier editor, todo depende de la calidad y la habilidad de cada quien para manejar los editores gráficos. Para redimensionar las imágenes y para crear los fondos yo trabajé con pixlr de pixlr.com, debido su sencillez y porque es en línea. </p>
63
</td> </tr> <!--Inicia fila de footer--> <tr> <!--Inicia celda de footer--> <td> <!--Inicia footer--> <div id="footer"> <!--Inicia licencia--> <div id="licencia"> <h6> <a href="http://creativecommons.org/licenses/by/2.5/mx/"> <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/2.5/mx/88x31.png" /> </a><br /> Sitio Personal de Emmanuelle Laguna<br /> por Emmanuelle Laguna Marín está protegido bajo la licencia<br /> <a rel="license" href="http://creativecommons.org/licenses/by/2.5/mx/">
64
Creative Commons Atribución 2.5 México License.<br /> </a> </h6> </div><!--Termina licencia--> </div><!--footer--> </td><!--Termina celda de footer--> </tr><!--Termina celda de footer--> </table><!--Termina table--> </div><!--Termina table--> </div><!--Termina pagina_principal--> </body><!--Termina body--> </html>
65
66
CSS
Este es el codigo CSS de este sitio web. Nótese como esta estructurado y recuerde los tipos de selectores utilizados.
a:visited { font-size:16px; font-family:tahoma, arial; font-weight:bolder; color:#6C6E70; text-decoration:none; text-align:right; } a:link { font-size:16px; font-family:tahoma, arial; font-weight:bolder; color:#6C6E70; text-decoration:none; text-align:right; } a:active { font-size:16px; font-family:tahoma, arial; font-weight:bolder; color:#6C6E70; text-decoration:none; text-align:right; } a:hover { font-family:tahoma, arial; font-size:18px; font-weight:bolder; color:#6C6E70; text-decoration:none; text-align:right; } body { text-align:justify; color:#507EBD; background-color:#000000;
67
} #header { padding-top:50px; background-image: url(pictures/header.jpg); background-repeat:no-repeat; } #encabezado h1, h3 { color:#ffffff; padding-bottom:200px; text-align:center; background-image: url(pictures/shannonbit.jpeg); background-repeat:no-repeat; background-position:center; } #table { margin-left:120px; margin-right:120px; } #table h1, h3 { padding-bottom:30px; text-align:center; font-size:15px; background-image: url(pictures/hpbox.jpg); background-repeat:no-repeat; background-position:center; color:#ffffff; } #table ul { font-style:oblique; color:#376BB4; } #footer { color:#ffffff; text-align:center; background-image: url(pictures/footer.png); }
68
Conclusiones
El sitio ya completo se subió a un servidor gratuito, con las herramientas ya mencionadas.
El servidor que escogí para este sitio es de www.000webhost.com, y nuestro sitio en
particular se aloja en www.shannonbit.herobo.com.
El registro es verdaderamente simple ya que solo tienes que dar tu nombre, una dirección
de correo y un nombre para tu sitio, si esta disponible es todo sino sólo tienes que dar otro
nombre para tu sitio. Después se debe entrar al panel de control y buscar el apartado para
FTP, damos click y con los datos que ahí nos indica, podemos subir nuestro sitio vía FTP.
Debemos tomar en cuenta que para este servidor el sitio debe alojarse en la carpeta
local_host y que se deberá eliminar el archivo defaul.php dentro de esta misma carpeta.
Bibliografía
• José López Quijado, XHTML 1.0 Y CSS2, México, Alfaomega Grupo Editor, 2009,
Primera edición
• Francisco Jesús Martín Fernández, Yusef Hassan Montero, Qué es la Arquitectura de
la Información [en línea], No solo usabilidad, 16 de febrero de 2003, Dirección URL:
http://www.ucm.es/eprints/4109/, [consulta: 16 de Mayo de 2010].
