Desarrolla aplicaciones-web

LOGO

“ Add your company slogan ”

Desarrolla Aplicaciones Web

L.I. María del Carmen Rivera González

Contenido

Introducción al HTML1

Estructura de HTML2

Cuerpo de un Documento.3

CompetenciasCATEGORÍA COMPETENCIAS ATRIBUTOS

Piensacrítica y reflexivamente

1. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos establecidos.

Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo.

Ordena información de acuerdo a categorías, jerarquías y relaciones.

Utiliza las tecnologías de la información y comunicación para procesar e interpretar información.

1. Sustenta una postura personal sobre temas de interés y relevancia general, considerando otros puntos de vista de manera crítica y reflexiva.

Elige las fuentes de información más relevantes para un propósito específico y discrimina entre ellas de acuerdo a su relevancia y confiabilidad.

Reconoce los propios prejuicios, modifica sus puntos de vista al conocer nuevas evidencias, e integra nuevos conocimientos y perspectivas al acervo con el que cuenta.

Conceptos Bàsicos

¿Qué es el HTTP? HTTP de HyperText Transfer Protocol (Protocolo de transferencia de hipertexto) es el método más común de intercambio de información en la world wide web, el método mediante el cual se transfieren las páginas web a un ordenador.

HTML

¿Que es HTML?

El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de marcación de hipertexto), es un lenguaje de marcas diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de

las páginas web. Gracias a Internet y a los navegadores del tipo Explorer o Netscape, el HTML se ha convertido en uno de los formatos más populares que existen para la construcción de documentos.

¿Que es Javascript?

Javascript (JS) es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web..

¿Que es applets?

Los applets son pequeños programas escritos en lenguaje Java, diseñados para ser ejecutados desde internet, que podemos colocar en nuestro servidor, junto con el resto de ficheros que componen un sitio

Web (documentos HTML, ficheros de imagen, sonido, etc.) para lograr múltiples efectos con texto, imágenes, sonidos, etc

¿Que es applets?

Los applets son pequeños programas escritos en lenguaje Java, diseñados para ser ejecutados desde internet, que podemos colocar en nuestro servidor, junto con el resto de ficheros que componen un sitio

Web (documentos HTML, ficheros de imagen, sonido, etc.) para lograr múltiples efectos con texto, imágenes, sonidos, etc

¿Que es ActiveX?

ActiveX es un conjunto de tecnologías de Microsoft que permiten incluir contenido interactivo en la World Wide Web.Con ActiveX, los sitios cobran vida utilizando efectos multimedia, objetos interactivos.

¿Que es Ajax?

JavaScript Asíncrono y XML (AJAX), es un término que describe un nuevo modo de utilizar conjuntamente varias tecnologías existentes. Esto incluye: HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT, y el objeto XMLHttpRequest. Cuando estas tecnologías se combinan en un modelo AJAX, es posible lograr aplicaciones web capaces de actualizarse continuamente sin tener que volver a cargar la página completa. Esto crea aplicaciones más rápidas y con mejor respuesta a las acciones del usuario.

¿Que es WWW?

(WWW) o Red informática mundial comúnmente conocida como la web, es un sistema de distribución de documentos de hipertexto interconectados y accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de esas páginas usando hiperenlaces.

Aplicación web

Se denomina aplicación web a aquellas aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador (Internet Explorer, Firefox, Opera, Chrome, etc).

INVESTIGA EN INTERNET AL MENOS 10 APLICACIONES WEB MAS UTILIZADAS HOY EN DIA.

HTML

Características del lenguaje HTML

• El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.

• El Web tenía que ser hipertexto y debía ser fácil navegar por él.

• Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo

tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).

• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

Primeras herramientas

Editor de Texto

Navegador

Características principales del HTML

Ejemplo: <BODY BGCOLOR="#9F5F9F" TEXT="#000000"> Contenido </BODY>

El primer documento HTMLEl primer documento HTML

Las etiquetas

  El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje.

A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. 

Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /.

El primer documento HTML Las páginas HTML se dividen en dos partes: la cabecera y el

cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

El primer documento HTML

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

El primer documento HTML

A continuación se muestra el código HTML de una página web muy sencilla:

En Notepad++ marcará de color azul las etiquetas que utilizas para hacer tu página web.

Ubica el archivo creado con la extension .html y ábrelo con el navegador de tu preferencia

El resultado es el siguiente:

Si quieres probar este primer ejemplo, debes hacer lo siguiente: Abre un editor de archivos de texto Notepad ++ y crea un archivo

nuevo Copia el código HTML mostrado anteriormente y pégalo tal cual en

el archivo que has creado. Guarda el archivo con el nombre de miPrimeraPaginaWeb, pero

con la extensión .html

Encabezados

Los encabezados en HTML nos sirven para indicar el nombre del tema principal con el cual se estará trabajando en el documento HTML (título del tema).

Las etiquetas para encabezados son los siguientes:

<h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <h4>Encabezado 4</h4> <h5>Encabezado 5</h5> <h6>Encabezado 6</h6>

Ejercicio

Realiza un documento tipo html con el nombre de Encabezados , a continuación escribe el siguiente código.

Formato de Textos

Etiquetas para dar forma al texto

Ejemplos

Realiza la siguiente página Web

La etiqueta FONT

La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio (<FONT SIZE="">) y de fin (</FONT>).

Ejemplo en código

El resultado sería el siguiente

Código de Colores en

Hexadecimal

La etiqueta Body y sus atributos

Através de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página.

El color de fondo puede establecerse a través del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido.

Por ejemplo, para hacer que el color de fondo de una página sea de color azul, tendremos que escribir:

<body bgcolor="#0000FF">Contenido del cuerpo ...</body>Sería equivalente a poner:<body bgcolor="blue">Contenido del cuerpo </body> </html>

Listas en HTML

Una lista es un párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas: 

Listas ordenadas;

Listas no ordenadas;

Listas de definiciones.

Listas en HTML

Lista ordenadaContenedor<ol><li> ítem 1 </li><li> ítem 2 </li></ol>Efecto visual1.- ítem 12.- ítem 2

Listas en HTML

Lista no ordenadaContenedor <ul> <li> ítem 1 </li> <li> ítem 2 </li> </ul>visual ítem 1 ítem 2

Listas en HTML

Lista de definicionesContenedor <dl> <dt>Término</dt> <dd>Definición</dd> </dl>visualTérmino Definición

TABLAS EN HTML

Tablas <TABLE> <TR> <TD> Las tablas surgieron con la versión HTML 3.0.

Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.

El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.

TABLAS EN HTML

Tablas simples Una tabla HTML puede ser considerada de manera simple como un grupo de filas

donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo:

TABLAS EN HTML

Tipos de celdas Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda

simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra es un tipo de celda especial (tag HTML th) que contiene información de encabezado para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los navegadores pueden graficar el contenido de las celdas de encabezado en una manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es comúnmente encontrado en el encabezado de una tabla.

En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado:

TABLAS EN HTML

Unificando celdas Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que

tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).

Observa en el ejemplo anterior como una definición de celda unificando dos celdas, es el equivalente unificado de dos definiciones de celda simple. Esto también funciona para unificar verticalmente con una pequeña diferencia debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente, las definiciones de celda en la columna afectada deberán ser omitidas. Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas

ATRIBUTOS

valignEspecifica la alineación vertical del contenido de una celda. Funciona exactamente como el atributo "align" pero para el espacio vertical. Los valores posibles son (insensibles a mayúsculas/minúsculas):top: El contenido es alineado arriba.middle: La información es centrada verticalmente. Este es el valor predeterminado.bottom: El contenido es alineado abajo.baseline: Todas las celdas en una fila que tienen esta alineación deberían tener su primera línea de texto en una línea base común a todas las celdas de una fila.

MANIPULAR IMÁGENES Y ANIMACIONES EN UNA PAGINA WEB.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria.

Formato GIF:Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animación.

Formato JPG:Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero eltamaño de la imagen es mayor y tarda más en descargarse.

Formato GIF:

Formato JPG:

<img src="imagen.jpg">

En ésta instrucción se da por defecto que la imagen que se inserta tiene la extensión JPG. Para insertar otro tipo de imagen sólo deberá especificar la extensión correspondiente. Las imágenes pueden ser adquiridas de la galería de imágenes de Microsoft, o de cualquier otra imagen digitalizada.

Incluso se pueden crear iconos animados desde algún programa de animación, y usarlos en una página Web.

Selección del formatoUno de los grandes dilemas a la hora de incluir gráficos en sus páginas Web es elegir el formato adecuado para cada tipo de imagen, vamos a intentar guiarle en la selección de cada formato.

Para insertar una imagen, debe utilizar la siguiente sintaxis:

Imágenes fotográficas

Imágenes obtenidas a través de fotografías de personas o lugares. Para este tipo de imágenes el formato más recomendado es el JPEG porque consigue una gran compresión con una mínima perdida de calidad.

Imágenes renderizadas

Este tipo de imágenes son las obtenidas por un programa de generación de imágenes sintéticas mediante algún proceso de trazado de rayos o similar. Se caracterizan por degradados suaves y líneas muy bien definidas.

Para este tipo de imágenes es recomendable usar el formato PNG. Tenga presente que el formato PNG es el más reciente y puede no estar soportado en todos los navegadores..

Imágenes sencillas

Para las imágenes sencillas con pocos colores y con formas muy delimitadas, el formato más recomendado es el GIF, ya que se puede adaptar al número de colores de una imagen. Con el paso del tiempo puede que el formato PNG desbanque al GIF ya que el primero es más avanzado, pero como su uso todavía no está muy extendido recomendamos el formato GIF.

instrucción para insertar una imagen en el documento pero en la imagen se puede colocar un texto alternativo.<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">

Instrucción para que aparezca una imagen en el fondo del documento.<BODY BACKGROUND="yellow_r.gif">