TECNOLGICO NACIONAL DE MXICO

INSTITUTO TECNOLGICO DE ACAPULCO

Educacin Tecnolgica con Compromiso Social

Carrera:
Ingeniera en Sistemas Computacionales

Asignatura:
Programacin Web.
REPORTE DE PRACTICA 2.

Profesor: Ing. Jos Francisco Gazga Portillo

INTEGRANTES DEL EQUIPO: NUMERO DE CONTROL PORCENTAJE

Alejandro Bautista Santos 13320828 20%
Jos Ral Lpez Morales 13320914 20%
Nstor Abraham Len Cataln 13320911 10%
Yazmin Hernndez Suastegui 13320899 10%
Rogelio Ramrez Silva 13320955 20%
Juan Carlos Herrera Cervantes 13320900 20%

FECHA: 14/03/2017

Contenido
INTRODUCCION:.................................................................................................. 3
DEFINICION DEL PROBLEMA:............................................................................... 3
OBJETIVO GENERAL:........................................................................................... 3
OBJETIVO ESPECIFICO:....................................................................................... 3
MARCO TERICO:................................................................................................ 3
PROCESO DE DESARROLLO.............................................................................. 15
IMPLEMENTACION:............................................................................................. 15
ANLISIS DE RESULTADOS:................................................................................ 23
CONCLUSIN:.................................................................................................... 24

INTRODUCCION:
Para el desarrollo de nuestras pginas web a veces tenemos la necesidad de
agrupar determinadas palabras o frases en un conjunto de elementos que tienen
ms significado de forma conjunta. El men de navegacin de un sitio web por
ejemplo est formado por un grupo de palabras. Aunque cada palabra por
separado tiene sentido, de forma conjunta constituyen el men de navegacin de
la pgina, por lo que su significado conjunto es mayor que por separado.
El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos:
listas no ordenadas (se trata de una coleccin simple de elementos en la que no
importa su orden), listas ordenadas (similar a la anterior, pero los elementos estn
numerados y por tanto, importa su orden) y listas de definicin (un conjunto de
trminos y definiciones similar a un diccionario).

DEFINICION DEL PROBLEMA:

Hacer un programa (pgina web) que utilice listas ordenadas con sublistas.

OBJETIVO GENERAL:
Manejar las listas ordenadas, as como generar listas anidadas o con sublistas con
numeracin automtica.

OBJETIVO ESPECIFICO:
Identificar los diferentes tipos de listas que pueden construirse con HTML.

Conocer los atributos de las listas con los diferentes valores que pueden darse a
stos.

Escribir las listas en HTML de acuerdo a una estructura.

MARCO TERICO:
Mdulo de las listas HTML5

Una lista es una enumeracin de cosas, personas, cantidades, entre otras cosas,
que se realiza o confecciona con un determinado propsito. Por ejemplo, una
actividad muy frecuente para cualquier ser humano es ir al supermercado,
entonces, por lo general, cuando llega el momento de ir no vamos a hacerlo por
una o dos cosas nada ms, sino que la idea es simplificar las cosas y de una ida
comprar todo aquello que necesitemos para todo un mes, por ejemplo, por lo cual
la metodologa ms conveniente para no olvidarnos de nada es hacer una lista en
la cual dispongamos todas aquellas cosas que necesitamos s o s comprar.

En tanto, existen otros tipos de listas muy recurrentes en el lenguaje cotidiano

como ser, la lista de bodas, que es aquella enumeracin de los objetos que una
pareja elige para que los invitados a su casamiento le regalen. Luego nos
encontramos con la llamada lista de espera, generalmente utilizada en los centros
mdicos, se emplea para poner en orden de llegada o de necesidad los nombres
de las personas que esperan un turno de atencin.

Tambin est la conocida como lista negra, en la cual casi nadie querra jams
aparecer, ya que en ella se colocan los nombres de las personas, empresas o
instituciones que por alguna cuestin y para la persona que confecciona la lista,
son enemigas o representan intereses indeseables.

Cuando se concibe una lista, sus elementos se pueden enumerar (1, 2, 3 o A, B,

C) o simplemente a cada elemento se le puede aadir una vieta (circulo, cuadro,
asterisco, etc.). En este modo podemos diferenciar entre cada tipo de lista. Por un
lado, tenemos listas ordenadas y por otro lado listas no ordenadas o sin ordenar.
No obstante, existe otro tipo de lista donde un trmino es explicado igual como los
trminos de un diccionario. Es lo que se llama lista de definiciones.

Estructura de una lista

Aunque a nivel de diseo el navegador imprima cada lista en un modo distinto, a

nivel de cdigo HTML, las listas tienen elementos en comn. Por ejemplo, cada
lista est formada por varias directivas y las directivas estn reunidas bajo un
contenedor. Un contenedor no es otra cosa que una directiva ms que agrupa bajo
sus reglas las dems directivas que compone la lista.

Por lo tanto, el contenedor para la lista ordenada es la directiva <ol>, la lista sin
ordenar o no ordenada est delimitada por la directiva <ul> y por fin, la lista de
definiciones esta agrupada por la directiva <dl>. Cuando hablamos de delimitar un
grupo de directivas se debe entender que aquel contenedor dispone siempre de
una etiqueta de inicio y una etiqueta de cierre.

<ol>
...
</ol>

<ul>
 ...
</ul>

<dl>
...
</dl>

La nica directiva que puede definir un elemento de una lista (ordenada o no

ordenada) es la directiva <li>, pero esto no significa que un contenedor no puede
agrupar y otras directivas, por ejemplo, un ttulo o un prrafo.

<ol>
<p>Lista ordenada</p>
<li>Elemento1</li>
<li>Elemento2</li>
<li>Elemento3</li>
</ol>

Resultado:
Lista ordenada
1. Elemento1
2. Elemento2
3. Elemento3

<ul>
<p>Lista no ordenada</p>
<li>Elemento1</li>
<li>Elemento2</li>
<li>Elemento3</li>
</ul>

Resultado:
Lista no ordenada
 Elemento1
Elemento2
Elemento3
En cambio, las listas de definiciones son un tanto diferente con respecto a la de
enumeracin de sus elementos porque estn formadas por un trmino y una
explicacin. Los trminos se deben introducir con la directiva <dt> y la explicacin
con la directiva <dd>.

<dl>
<dt>Elemento1</dt>
<dd>Explicacion del Elemento1</dd>
<dt>Elemento2</dt>
<dd>Explicacion del Elemento2</dd>
<dt>Elemento3</dt>
<dd>Explicacion del Elemento3</dd>
</dl>

Resultado:

Elemento1
Explicacin del Elemento1
Elemento2
Explicacin del Elemento2
Elemento3
Explicacin del Elemento3

Atributos de las listas

Todos los navegadores estn pensados y construidos de tal forma que dan un
formato bsico a la pgina Web. Por ejemplo, cuando se introduce un prrafo, el
navegador lo coloca en la pgina Web con un margen de 10 pixeles
aproximadamente, le otorga al tamao de la letra 16 pixeles y lo formatea con el
tipo de letra Times New Roman. Es lo que viene por defecto est claro que
esto se puede cambiar a travs de los atributos de la directiva (si la directiva
permite atributos) o a travs de los estilos CSS.

Igual pasa con las listas HTML. Por ejemplo, a una lista no ordenada, el
navegador imprima a los elementos un tipo de vieta, en general un disco lleno de
color negro, a las listas ordenadas siempre les coloca una enumeracin rabe
ascendente y a las explicaciones de las listas de definiciones les coloca ms a la
derecha con respecto a los trminos.

La nica lista que todava guarda sus atributos en la versin 5 de HTML es la lista
ordenada, es decir la lista delimitada por la directiva <ol>. Las dems listas se
pueden formatear utilizando CSS, pero hay que tener en cuenta que aunque la
directiva <ol> guarda parte de sus atributos estos tienen equivalencia en CSS y se
recomienda su uso. Los tres atributos de la lista ordenada controlan: el tipo, el
orden (ascendente o descendente) y el inicio de la enumeracin.

El atributo @reversed controla el orden de la enumeracin que por defecto viene

ascendente. Es un atributo booleano. Su presencia cambia el orden ascendente
en descendente.

<ol reversed>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>

Resultado:

3.Elemento
2.Elemento
4.Elemento
El atributo @start, directiva <ol>

Hemos visto hasta ahora como la lista ordenada tiene atributos que controlan tanto
el orden como el tipo de enumeracin de los elementos que componen la lista. No
obstante, existe otro atributo, el atributo @start con el cual se puede controlar el
inicio de la enumeracin. El valor de @start debe ser siempre un valor numrico
con el cual el navegador tomara como referencia en el inicio de la lista ordenada.
Funciona de la siguiente manera: si tenemos como valor del atributo @start el
nmero 3 y la lista tiene una clasificacin numrica rabe, el primer elemento de la
lista empezar con el nmero 3, si es una clasificacin numrica romana, va a
empezar con el numero romano III, y si tiene una clasificacin segn las letras del
alfabeto, va a empezar con la letra C.

<ol type="A" start="3">

<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>

Resultado:

C. Elemento
D. Elemento
E. Elemento

<ol type="I" start="3">

<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>

Resultado:

III. Elemento
IV. Elemento
V. Elemento

Solo hay que aadir ms que si la lista ordenada tiene una numeracin rabe, el
nmero de inicio puede ser tambin un nmero negativo, como -3.
<ol start="-3">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>

Resultado:

-3. Elemento
-2. Elemento
 -1. Elemento

Estilos CSS en las listas

Para tener una pgina Web completa se debe utilizar varias tecnologas: Html5,
CSS, JavaScript, PHP, etc, pero imprescindible es tener conocimientos de CSS.
Es imposible en da de hoy construir una buena pgina Web sin CSS. Si
antiguamente HTML incorporaba atributos que podan cubrir algunos aspectos
grficos, con la versin 5 las cosas han cambiado y los atributos solamente se
limitan en traer funcionalidades bsicas (construir bordes, identificar una directiva,
etc.).

Es una ventaja separar grafica del contenido Web. As los desarrolladores tienen
un cdigo HTML ms limpio con una estructura todava ms lgica y con infinitas
posibilidades de formatear la pgina Web a travs de CSS.

Hemos visto hasta ahora como los atributos pueden cambiar el funcionamiento de
una lista ordenada, pero hay que saber que todos estos atributos tienen
equivalencia en CSS y a travs de l podemos tambin controlar y cambiar el
aspecto grafico en las dems listas.

Es posible que al principio CSS nos parezca complicado porque utiliza varias
lneas de cdigo para sustituir un solo atributo HTML, pero, aun as, nos da la
posibilidad de cambiar por completo la grfica de cualquier lista o directiva HTML.
Ejemplos de uso

Por defecto, los navegadores muestran unos pequeos crculos rellenos para
cada elemento de las listas no ordenadas <ul> y una numeracin decimal para
los elementos de las listas ordenadas <ol>. Utilizando la propiedad list-style-
type es posible seleccionar otros marcadores entre una serie de marcadores
predefinidos.
La mayor limitacin de la propiedad list-style-type es que slo se pueden elegir
los marcadores entre 14 valores predefinidos. De ellos, slo tres marcadores
son de tipo grfico, lo que limita el diseo grfico de las listas de elementos.
Afortunadamente, la propiedad list-style-type permite mostrar cualquier imagen
como marcador de los elementos de cualquier lista. Para ello, slo es
necesario indicar la URL de la imagen que se quiere mostrar.

El siguiente ejemplo muestra tres listas de elementos con marcadores grficos

personalizados:

Lorem ipsum dolor sit amet

Consectetuer adipiscing elit
 Nullam quis felis
Aliquam erat volutpat
Aenean non mauris
Lorem ipsum dolor sit amet
Consectetuer adipiscing elit
Nullam quis felis
Aliquam erat volutpat
Aenean non mauris
Lorem ipsum dolor sit amet
Consectetuer adipiscing elit
Nullam quis felis
Aliquam erat volutpat
Aenean non mauris

A continuacin, se muestra el cdigo CSS del ejemplo anterior:

ul#primera li {

list-style-image: url("imagenes/circulo_verde.png");

ul#segunda li {

list-style-image: url("imagenes/flecha_gris.png");

ul#tercera li {

list-style-image: url("imagenes/estrella.png");

}
La imagen utilizada como marcador puede ser de cualquier formato reconocido
por los navegadores (normalmente jpeg, gif o png) y puede ser de cualquier
tamao. No obstante, si se utiliza una imagen muy grande, los elementos de la
lista se muestran demasiado separados entre s.
Por otra parte, la principal limitacin de la propiedad list-style-image es que no se
puede modificar la posicin en la que se muestra la imagen del marcador.
Adems, tampoco se pueden indicar de forma global diferentes imgenes para
cada elemento de la lista, por lo que normalmente no se utiliza en las listas
ordenadas <ol>.
Si se utilizan de forma simultnea las propiedades list-style-type y list-style-image,
esta ltima tiene prioridad. Si se considera el siguiente ejemplo:
ul li {

list-style-type: square;

list-style-image: url("imagenes/imagen.png");

}
En el ejemplo anterior, si el navegador puede descargar correctamente la imagen
indicada, los elementos de la lista muestran esa imagen como marcador. En
cualquier otro caso, los elementos de la lista muestran el cuadrado establecido
mediante la propiedad list-style-type.

Emplear simultneamente las propiedades list-style-type y list-style-image no slo

no es redundante, sino que es una buena prctica que protege el diseo de la
pgina frente a los innumerables errores que pueden provocar que la imagen del
marcador no se pueda descargar.
Ejemplos de uso
La propiedad margin es una de las "propiedades shorthand" que define CSS y que
se utilizan para establecer de forma abreviada el valor de una o ms propiedades
individuales.

Si se quiere establecer el mismo valor para todos los mrgenes de un elemento,

se podra utilizar la siguiente regla CSS:

div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
Utilizando la propiedad margin, es posible establecer de forma abreviada el mismo
valor a todos los mrgenes de un elemento:

div {
margin: 10px;
}
La propiedad margin es tan poderosa que permite establecer uno, dos, tres o los
cuatro mrgenes de forma simultnea.

Si se indican dos valores, el primero hace referencia a los mrgenes verticales y el

segundo es el valor de los mrgenes horizontales, de modo que las siguientes
reglas CSS son equivalentes:

div {
margin: 10px 20px;
}

div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
Si se indican tres valores, el primero hace referencia al margen superior, el
segundo es el valor de los mrgenes horizontales y el tercero es el margen
inferior, de modo que las siguientes reglas CSS son equivalentes:

div {
margin: 10px 20px 30px;
}

div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
}
Por ltimo, si se indican cuatro valores, el primero es el margen superior, el
segundo es el margen derecho, el tercero es el margen inferior y el cuarto es el
margen izquierdo, de modo que las siguientes reglas CSS son equivalentes:

div {
margin: 10px 20px 30px 40px;
}

div {
 margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
El uso de propiedades como margin no slo hace ms breve el cdigo CSS, sino
que demuestra que se tienen conocimientos avanzados de CSS.

PROCESO DE DESARROLLO
Igual que en la prctica uno el proceso de desarrollo que implementamos en esta
segunda prctica fue el modelo en cascada, aunque algunas partes de omitieron y
se implementaron en una sola, ya que el proyecto es pequeo y no todas las
etapas se realizan por separado.

FIGURA: Modelo de desarrollo en

cascada

IMPLEMENTACION:
De la misma manera que en la prctica anterior el editor de texto fue ATOM:
Una vez con nuestro proyecto creado y guardado con una extensin HTML
pasamos a escribir las partes nuevas para esta prctica. De acuerdo al resultado
mostrado en pantalla que muestra el manual de prcticas se puede observar que
hay una lista ordenada con sublistas. Para realizar esto se utilizaron hojas de
estilo en cascada (CSS). Por buena prctica de programacin los estilos si van a
colocarse en el mismo documento HTML se deben escribir dentro de la etiqueta
HEAD. Entonces escribimos el cdigo que ser encargado de dar la numeracin
automtica a la lista:
Los estilos se escriben dentro de la etiqueta STYLE. Como puede observarse se
estn afectando a dos elementos de la lista, a la etiqueta OL y a los elementos LI
por medio de una clase definida llama Listas. Ms adelante se mostrar los
efectos de este estilo.

El resultado de la prctica tambin muestra 3 listas ordenadas con diferentes tipos

de numeraciones:

Nmeros romanos en minsculas

Nmeros romanos en maysculas
Nmeros decimales donde el elementos inicial es el 5
Listas desordenadas estilo disco
Listas desordenadas estilo crculo
 Listas desordenadas estilo cuadrado

Para la lista en romanos con minsculas se declara el atributo TYPE dentro de la

etiqueta OL con un valor i.

Para la lista en nmeros romanos con maysculas slo se cambia el valor del
atributo TYPE por una I.

Para la lista con nmeros decimales donde el valor inicial es 5, igualmente se usa
el atributo TYPE donde el valor que se le da es 1 y para que empiece desde el 5
se agrega otro atributo que se llama START a ste se le dio el valor de 5, con esto
el primer elemento de la lista ordenada comenzar en ese nmero.
Para la lista desordenada con estilo de disco se us lo siguiente:

Para la lista desordenada con estilo de crculo:

Para la lista desordenada con estilo de cuadrado:

Agregamos tambin una lista con enlaces:

Por ltimo para la lista con sublistas con una numeracin automtica se realiz de
la siguiente manera:
La idea es anidar listas dentro de los elementos LI, algo como esto:
As hasta completar la estructura de la lista que pide la prctica. Hay que
mencionar tambin que se muestra una etiqueta DIV y dentro de sta se
encuentra toda la lista ordenada, tambin tiene un atributo llamado CLASS con un
valor de Listas. Se hizo esto para que slo el contenido que est dentro de esa
etiqueta se vea afectado por la clase Listas definido en el estilo que se encuentra
en la etiqueta HEAD. El estilo es el encargado de darle la numeracin automtica
a la lista y las sublistas.
ANLISIS DE RESULTADOS:
El resultado de la prctica se muestra a continuacin:

Como se puede observar la pgina contiene las cuatro listas con sus diferentes
tipos de numeracin. Ahora bien, algo importante que podemos decir es que
usamos una clase para la lista con sublista, esto lo hicimos as porque de no haber
especificado una clase el estilo hubiera afectado a todas las listas incluyendo a las
3 primeras.
CONCLUSIN:
Se ha logrado conocer las etiquetas para hacer una lista ordenada, as como los
atributos y valores para poder darle un tipo de numeracin. Otro avance
importante fue el uso de estilos, los estilos nos vienen a facilitar mucho la vida en
trminos de diseo y maquetado de pginas web. Gracias al uso de estilos se
pudo hacer la numeracin automtica para la lista con sus respectivas sublistas
pues de otro modo se hubiera complicado bastante.

Hay que mencionar que las clases o los ID permiten que metamos a ciertos
grupos las etiquetas que nosotros deseemos para darles una cierta configuracin
con la intencin de afectar a stas y slo a stas. Fue lo que empleamos para las
etiquetas OL y LI haciendo referencia a ellas en el estilo por medio de la clase.