Está en la página 1de 15

REPÚBLICA BOLIVARIANA DE VENEZUELA

MINISTERIO DEL PODER POPULAR PARA LA


EDUCACIÓN
UNIVERSITARIA, CIENCIA Y TECNOLOGÍA
UNIVERSIDAD ALEJANDRO DE HUMBOLDT
FACULTAD DE INGENIERÍA
ESCUELA DE INFORMÁTICA
ASIGNATURA: COMPUTACIÓN GRÁFICA
SECCIÓN: DCM0701IIV1
DOCENTE: RUBEN DUGARTE

METODOS GRÁFICOS PARA COMUNICACIONES


ENSAYO

Estudiante:
Angel Useche
C.I: 28.156.286
Caracas, 11 de Febrero de 2021
ÍNDICE

Contenido
ÍNDICE...............................................................................................2

DESARROLLO DE SOFTWARE......................................................3

Análisis y diseño de software............................................................3

Validación de usuario........................................................................4

Levantamiento de Información..........................................................4

Análisis de Factibilidad......................................................................5

Definición de las Herramientas.........................................................6

Planificación......................................................................................7
COMPUTACIÓN GRÁFICA

Hoy en día cuando se habla sobre HTML muchas personas suelen


compararlo con un lenguaje de programación, pero en realidad HTML es un
lenguaje de marcado que sirve para definir la estructura del contenido incluido en
cualquier página web. Las siglas HTML significan HyperText Markup Language,
es decir, Lenguaje de Marcas de Hipertexto”, estas “Marcas de hipertexto” son
conocidas como “etiquetas” y son las que permiten ordenar el contenido de una
página web.

Las etiquetas en el HTML cumplen el rol de identificar, ordenar y


clasificar de forma lógica todo el contenido dentro de la página web para que este
pueda ser reconocido correctamente por los motores de búsqueda. Se puede
comparar a la estructura de un artículo de noticia, un ensayo, un trabajo de
investigación, entre otros, sabemos que cada uno de estos escritos cuenta con una
estructura predefinida que ayudan al lector a identificar cada parte de un texto y
darle sentido (Encabezados, títulos, subtítulos, la introducción al texto, el
desarrollo, la conclusión, entre otros.), de tal forma que HTML hace uso de las
etiquetas para cumplir y dar forma a este tipo de estructuras, permitiendo así que
el lector (el navegador) sea capaz de identificar correctamente el contenido.

Es necesario

1. Principales códigos HTML.

HTML es un lenguaje de marcado que se utiliza para el


desarrollo de páginas de Internet. Se trata de la siglas que
corresponden a HyperText Markup Language, es decir,
Lenguaje de Marcas de Hipertexto”.

2. Listas numeradas,
Mucho del contenido web está dado por listas, así que HTML tiene
elementos especiales para ellas. El marcado de listas se realiza siempre en
al menos dos elementos. Los dos tipos de listas más comunes son las listas
ordenadas y las desordenadas:

Las listas desordenadas son aquellas en las que el orden de los items no es
relevante, como en una lista de compras. Estas son encerradas en un
elemento <ul> (unordered list).

Las listas ordenadas son aquellas en las que el orden sí es relevante, como
en una receta. Estas son encerradas en un elemento <ol> (ordered list).

Cada elemento de la lista se coloca dentro de un elemento <li> (list item).


Las listas en HTML ordenadas son aquellas que nos muestran los elementos
de la lista en orden. Para representar el orden tendremos los elementos numerados.
Es decir, cada uno de los elementos irá precedido de un número o letra que
establezca su orden.

Las listas en HTML ordenadas se representan mediante el elemento OL.

<ol> ... </ol>

Cada uno de los elementos de la lista ordenada se representará mediante


el elemento LI.

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento N</li>
</ol>

Un ejemplo de lista ordenada sería el siguiente:


<ol>
<li>Julio</li>
<li>Carmen</li>
<li>Ignacio</li>
<li>Elena</li>
</ol>

Que produciría el siguiente efecto:

1. Julio
2. Carmen
3. Ignacio
4. Elena

3. viñetas,
Las listas desordenadas en HTML nos sirven para mostrar los elementos sin
ningún tipo de orden, simplemente precedidos por una viñeta que puede ser un
punto, un cuadrado,…

Para definir una lista desordenada en HTML utilizamos el elemento ul.

<ul> ... </ul>

Para representar los elementos de la lista desordenada utilizamos el mismo


elemento que con las listas ordenadas, es decir, el elemento li.

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento N</li>
</ul>

De esa forma podríamos tener el siguiente código HTML:

<ul>
<li>FC. Barcelona</li>
<li>Real Madrid</li>
<li>Real Betis</li>
<li>Atlético de Madrid</li>
</ul>

Lo que nos mostrará por pantalla:

 FC. Barcelona
 Real Madrid
 Real Betis
 Atlético de Madrid

4. glosarios,

Listas de Definiciones
Las listas en HTML de definiciones en HTML nos sirven para montar listas en
las que tenemos la estructura valor y definición. Suelen ser listas para definir
términos, como si fuese un diccionario, si bien pueden ser cualquier par valor-
definición.

Las listas en HTML de definiciones en HTML se construyen mediante


el elemento dl.

<dl> ... </dl>

En este caso, dentro de las listas en HTML de definiciones tenemos dos


elementos anidados, el que representa al valor dt y el que representa a la
definición dd. De esta forma la estructura de las listas en HTML de definiciones es la
siguiente:

<dl>
<dt>Término1</dt>
<dd>Definición 1</dd>
<dt>Término 2</dt>
<dd>Definición 2</dd>
...
<dt>Término N</dt>
<dd>Definición N</dd>
</dl>

Si queremos crear una lista en HTML con definiciones de palabras, podemos


escribir lo siguiente:

<dl>
<dt>Pizpireta</dt>
<dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
<dt>Pulular</dt>
<dd>Dicho de las personas, animales o cosas: Abundar y bullir en un
lugar.</dd>
<dt>Concupiscencia</dt>
<dd>En la moral católica, deseo de bienes terrenos y, en especial,
apetito desordenado de placeres deshonestos.</dd>
</dl>

Lo cual nos acabará mostrando por pantalla lo siguiente:

Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Pulular
Dicho de las personas, animales o cosas: Abundar y bullir en un
lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito
desordenado de placeres deshonestos.
Por defecto los navegadores dejan el término y en la siguiente líne, junto con
un tabulador, la definición.

Aprenderemos a como hacer una lista de terminologías o


definiciones en html con sus respectivas etiquetas. Esto nos
servirá para dar un significado semántico a los términos y sus
definiciones.
 ETIQUETA <dl>.- Esta etiqueta se utiliza para crear una lista
de definiciones si lo deseamos.
 ETIQUETA <dt>.- Esta etiqueta contiene el término que
queremos definir.
 ETIQUETA <dd>.- Esta etiqueta contiene la definición del
término que le precede.

5. menú y

La etiqueta menu representa las listas de menú. Las listas de menú en HTML 3.2 tenían
la misma estructura que las listas desordenadas. Están obsoletas en XHTML y
en HTML5 es utilizado para menús contextuales, barras de herramientas y para listar
formularios de control y comandos.

El siguiente código:

<menu>

<li>primer elemento </li>

<li>segundo elemento </li>

<li>tercer elemento </li>

</menu>

Se visualiza así:

 primer elemento
 segundo elemento
 tercer elemento

6. directorios.

El elemento dir (directorio) es un elemento desaprobado. En su


origen fue pensado para crear directorios en multicolumna, en la
actualidad es inutil.

Sus etiquetas son: <dir> y </dir> (ambas obligatorias).


El siguiente código:
<dir>

<li>primer elemento </li>

<li>segundo elemento </li>

<li>tercer elemento </li>

</dir>

Se visualiza así:

 primer elemento
 segundo elemento
 tercer elemento

7. Listas anidadas.
Cuando estemos manejando listas podemos anidar unas en otras
independientemente del tipo de lista que estemos anidando.

Para crear listas anidadas en HTML simplemente tenemos que hacer que el


elemento de una de las listas sea a su vez una lista. Es decir, el esquema de listas
sería parecido al siguiente:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>
<ol>
<li>Elemento 2.1</li>
<li>Elemento 2.2</li>
...
<li>Elemento 2.N</li>
</ol>
</li>
<li>Elemento 3</li>
...
<li>Elemento N</li>
</ul>

En este caso hemos anidado una lista ordenada dentro del tercer elemento
li de una lista desordenada.

Hay que tener cuidado de poner el elemento li dentro de la lista anidada, ya


que si no lo ponemos estaremos generando un código incorrecto.

Las anidaciones de listas puede ser de cualquier tipo de lista y sin límite de
anidación.

Un ejemplo de listas anidadas sería una clasificación de animales como la


siguiente:

<ul>
<li>Carnívoro
<ul>
<li>León</li>
<li>Buitre</li>
<li>Hiena</li>
</ul>
</li>
<li>Herbívoro
<ul>
<li>Cabra</li>
<li>Vaca</li>
</ul>
</li>
<li>Omnívoro
<ul>
<li>Oso</li>
<li>Urraca</li>
</ul>
</li>
</ul>

El efecto que obtendríamos sería el siguiente:

 Carnívoro
o León
o Buitre
o Hiena
 Herbívoro
o Cabra
o Vaca
 Omnívoro
o Oso
o Urraca

8. Hipervínculos y anclas.

En HTML se utiliza el elemento ancla <a> para crear un enlace. Cuando


un visitante hace clic en él, el navegador abre otra página. El elemento
ancla es un elemento contenedor y su aspecto es el siguiente:

<a>...</a>

El contenido sobre el que pulsa el visitante se coloca dentro del elemento


ancla:

<a>Enlace a otra página</a>


El problema del enlace de anterior es que no apunta a ningún sitio. Para
convertirlo en un enlace que funcione debe aportar la URL de la página de
destino mediante el tributo href (que significa referencia de hipervínculo).

Por ejemplo, si quiere un enlace para llevar al lector a una página llamada
enlacepagina.html, debe utilizar el siguiente código de HTML:

<a href="enlacepagina.html">Enlace a otra página</a>

9. Tablas y creación de formularios.

Las tablas es el elemento del lenguaje HTML que utilizaremos para mostrar
información de forma agrupada. Ya sea texto, imágenes, vídeos,…

El elemento table será el que nos ayudará para crear las tablas en HTML.

Un mal uso de las tablas en HTML es el motivo de maquetación, uso que se


dió a las tablas en los principios del lenguaje HTML. Algo que hoy en día es
una mala práctica. Cambiando por un modelo de maquetación apoyado en
capas.

Crear una tabla simple


Para crear una tabla vamos a necesitar conocer, al menos, tres
elementos: table, tr y td. Si bien existen otros cuantos que nos permitirán ampliar la
funcionalidad de las tablas.

El primer elemento es table. table es el elemento que representa las tablas y


será el que agrupe al resto de elementos. Por lo tanto tiene sus etiquetas de inicio y
cierre.

<table> ... </table>


Siguiendo con la construcción de la tabla el siguiente elemento que
necesitamos es tr. El elemento tr representa a una fila de la tabla. Por lo tanto
tendremos tantos elementos tr como filas tenga la tabla.

Así, si queremos tener una tabla de tres filas tendremos un código como el
que sigue:

<table>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</table>

El último elemento que necesitamos conocer es td. El elemento td es el que


representa de una forma unitaria a una celda. Por lo tanto los elementos tr tendrán
tantos elementos td en su interior como celdas contenga la fila.

El contenido que haya entre los elementos td será el contenido de la celda.

Una tabla de tres filas por cuatro columnas quedaría de la siguiente forma:

<table>
<tr>
<td>Fila 1 Columna 1</td>
<td>Fila 1 Columna 2</td>
<td>Fila 1 Columna 3</td>
<td>Fila 1 Columna 4</td>
</tr>
<tr>
<td>Fila 2 Columna 1</td>
<td>Fila 2 Columna 2</td>
<td>Fila 2 Columna 3</td>
<td>Fila 2 Columna 4</td>
</tr>
<tr>
<td>Fila 3 Columna 1</td>
<td>Fila 3 Columna 2</td>
<td>Fila 3 Columna 3</td>
<td>Fila 3 Columna 4</td>
</tr>
</table>

Así con los tres elementos table, tr y td tenemos construida nuestra tabla.

Visualmente tendríamos algo así:

Fila 1 Fila 1 Fila 1 Fila 1


Columna 1 Columna 2 Columna 3 Columna 4

Fila 2 Fila 2 Fila 2 Fila 2


Columna 1 Columna 2 Columna 3 Columna 4

Fila 3 Fila 3 Fila 3 Fila 3


Columna 1 Columna 2 Columna 3 Columna 4

Formularios
Los formularios HTML son elementos de las páginas web que nos sirven
para recuperar información del usuario y enviarla al servidor para que pueda ser
procesada.

La sintaxis para definir un formulario será mediante el elemento form:

<form>...</form>

10. Diseño preliminar de páginas WEB con HTML.

11. Creación de una conexión de Base de datos.


https://aprende-web.net/php/php14_1.php

http://www.manualweb.net/html/formularios-html/

También podría gustarte