Submodulo III. Elaboración de paginas Web.

Enlace a páginas Galeón.

Luis Enrique Luna Núñez 6-3

Asignatura Submódulo III.

Diseñar y programar páginas web utilizando las tics.

Conocer las tecnologías HTML. Y PHP.

Competencias genéricas:

Sustentar una postura de internes y relevancia sobre los temas, considerando otros puntos de vista de manera critica y reflexiva aprender por iniciativa e interés propio a lo largo de la vida participa y colabora de manera afectiva en equipos diverso.

Competencias disciplinares, identifica e interpreta las ideas, los datos y conceptos explícitos de un texto considerando el contexto en que se genera y que se recibe, expresar ideas o conceptos con introducciones, desarrollados y conclusiones claras.

Bloque I.

Utilizar los elementos fundamentales de diseño.

Objetivos:

1.- Identifica los elementos básicos de una página web.

2.- Identifica la terminología de las páginas web.

Actividades:

Act.1 Examen diagnostico.

Act.2 Conocer el programa de la asignatura.

Act.3 Solicitar la recopilación de la terminología básica de las páginas web.

Act.4 Descripción de los elementos, recursos, tipos y programas para crear páginas.

Act.5 Solicitar consulta de la estructura de una página web.

Bloque II.

Manejar los elementos básicos del lenguaje HTML en la creación de página web.

Objetivos:

1.- Crear archivos.

2.- Describir la estructura de una página web.

Actividades

Act.1 proyectar los elementos llamados marcadores como cabeceras y párrafos.

Act.2 Determinar los atributos de los comandos y etiquetas.

Act.3 Empleo de encabezados, estilos, comentario, párrafos, fondos y colores.

Act.4 Empleo de vinculación con documentos locales; vinculación con un punto especifico del documento (enlaces internos), redacción de pistas.

Bloque III.

Diseñar una página web con software de aplicación.

Objetivos

1.- Crear archivos electrónicos de páginas web por medio del software Dreamweaver.

Actividades:

Act.1 Proyectar el entorno Dreamweader.

Act.2 Descripción de la configuración.

Act.3 Elaboración de páginas web en el entorno Dreamweader.

Act.4 Inserción de lista de hipervínculos y tablas.

Atc.5 Inserción de sonido y video.

Bloque IV.

Publicación de páginas web.

Objetivos:

1.- Crear direcciones electrónicas de alojamientos de páginas web en servidores gratuitos.

Actividades:

Act.1 Ventajas de un Servidor web.

Act.2 Desventajas de un servidor web.

Act.3 Procedimiento de configuración y alojamiento de un sitio web.

Examen Diagnostico:

¿Qué es un servidor?

En informática, un servidor es un nodo que forma parte de una red, provee servicios a otros nodos denominados clientes. Una aplicación informática o programa que realiza algunas tareas en beneficio de otras aplicaciones llamadas clientes. Algunos servicios habituales son los servicios de archivos, que permiten a los usuarios almacenar y acceder a los archivos de una computadora y los servicios de aplicaciones, que realizan tareas en beneficio directo del usuario final. Este es el significado original del término. Es posible que un ordenador cumpla simultáneamente las funciones de cliente y de servidor.

Por lo cual podemos llegar a la conclusión de que un servidor también puede ser un proceso que entrega información o sirve a otro proceso. El modelo Cliente-servidor no necesariamente implica tener dos ordenadores, ya que un proceso cliente puede solicitar algo como una impresión a un proceso servidor en un mismo ordenador.

Mencione algunos navegadores:

Google Chrome, Opera, Internet Explorer, Mozilla Firefox.

Mencione algunos buscadores:

Google, Yahoo, Ask, Terra, Altavista,

¿Qué es hipermedia?

Hipermedia es el término con el que se designa al conjunto de métodos o procedimientos para escribir, diseñar o componer contenidos que integren soportes tales como: texto, imagen, video, audio, mapas y otros soportes de información emergentes, de tal modo que el resultado obtenido, además tenga la posibilidad de interactuar con los usuarios.

La estructura hipermedia de estos contenidos, califica especialmente al conjunto de los mismos, como herramienta de comunicación e interacción humanas. En este sentido, un espacio hipermedia es un ámbito, sin dimensiones físicas, que alberga, potencia y estructura las actividades de las personas, como puede verse en casos como, entre otros: Redes sociales, Plataformas de colaboración online, Plataformas de enseñanza online, etc.

¿Qué es hipertexto?

Es el nombre que recibe el texto que en la pantalla de un dispositivo electrónico, permite conducir a otros textos relacionados, pulsando con el ratón o el teclado en ciertas zonas sensibles y destacadas. La forma más habitual de hipertexto en informática es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos (lexias). Si el usuario selecciona un hipervínculo el programa muestra el documento enlazado. Otra forma de hipertexto es el stretchtext que consiste en dos indicadores o aceleradores y una pantalla. El primer indicador permite que lo escrito pueda moverse de arriba hacia abajo en la pantalla. Es importante mencionar que el hipertexto no está limitado a datos textuales, podemos encontrar dibujos del elemento especificado o especializado, sonido o vídeo referido al tema. El programa que se usa para leer los documentos de hipertexto se llama “navegador”, el "browser", "visualizador" o "cliente" y cuando seguimos un enlace decimos que estamos navegando por la Web. El hipertexto es una de las formas de la hipermedia, enfocada en diseñar, escribir y redactar texto en una media.

¿Qué es hipervínculo?

El hipervínculo es en la computación aquella referencia o elemento de navegación que permite pasar de un documento electrónico a otro o a diferentes partes del mismo documento. El hipervínculo es conocido como una de las partes más importantes y esenciales de la red de Internet. Sin embargo, son muchos los medios y los soportes electrónicos que pueden utilizarlo por fuera de ella.

LAN:

(es decir, Local Área Network), consiste básicamente en la conexión tanto física (o sea, mediante Hardware) como también Lógica (comprendiendo una conexión de software y realizando un intercambio de archivos) en un entorno más bien cercano, siendo frecuente la Oficina o el Hogar.

WAN:

WAN son las siglas de Wide Area Network, red de área amplia, una red de ordenadores que abarca un área geográfica relativamente grande. Normalmente, un WAN consiste en dos o más redes de área local (LANs).

Los ordenadores conectados a una red de área ancha normalmente están conectados a través de redes públicas, como la red de teléfono. También pueden estar conectados a través de líneas alquiladas o de satélites.

Topología física:

Es la forma en la que el cableado se realiza en una red. Existen tres topologías físicas puras:

- Topología en anillo.

- Topología en bus.

- Topología en estrella.

Existen mezclas de topologías físicas, dando lugar a redes que están compuestas por más de una topología física.

Topografía lógica:

Es la forma de conseguir el funcionamiento de una topología física cableando la red de una forma más eficiente.

Existen topologías lógicas definidas:

- Topología anillo-estrella: implementa un anillo a través de una estrella física.

- Topología bus-estrella: implementa una topología en bus a través de una estrella

Red hibrida:

En la terminología de redes, una red híbrida (también llamada topología de red híbrida) combina las mejores características de dos o más redes diferentes. De acuerdo con "Auditoría y Control de la Tecnología de la Información", las topologías híbridas son confiables y versátiles. Estas proporcionan un gran número de conexiones y caminos de transmisión de datos para los usuarios. Las redes más reales son las híbridas, de acuerdo con "Lecturas sobre telecomunicaciones y redes".

Red estrella:

Una red en estrella es una red en la cual las estaciones están conectadas directamente a un punto central y todas las comunicaciones se han de hacer necesariamente a través de este. Los dispositivos no están directamente conectados entre sí, además de que no se permite tanto tráfico de información. Dada su transmisión, una red en estrella activa tiene un nodo central activo que normalmente tiene los medios para prevenir problemas relacionados con el eco.

Se utiliza sobre todo para redes locales. La mayoría de las redes de área local que tienen un enrutador (router), un conmutador (switch) o un concentrador(hub) siguen esta topología. El nodo central en estas sería el enrutador, el conmutador o el concentrador, por el que pasan todos los paquetes de usuarios

Red de bus lineal:

En la topología linear bus todas las computadoras están conectadas en la misma línea. El cable procede de una computadora a la siguiente y así sucesivamente. Tiene un principio y un final, la red linear Bus requiere un terminal en cada final, así recibe la señal y no retorna por eso uno de los finales de una red tipo linear Bus debe terer un "ground".

Una red linear Bus usualmente usa cable coaxial grueso o fino, el Ethernet 10 Base 2 y el 10 Base5.

www:

son las iniciales que identifican a la expresión inglesa World Wide Web, el sistema de documentos de hipertexto que se encuentran enlazados entre sí y a los que se accede por medio de Internet. A través de un software conocido como navegador, los usuarios pueden visualizar diversos sitios web (los cuales contienen texto, imágenes, videos y otros contenidos multimedia) y navegar a través de ellos mediante los hipervínculos.

De esta manera, podríamos decir, utilizando una comparación con el sector de las comunicaciones telefónicas, que www es el “prefijo” que tiene todo portal que se encuentre en la mencionada Red al que queremos acceder

Modem:

Módem es un acrónimo de MOdulador-DEModulador; es decir, que es un dispositivo que transforma las señales digitales del ordenador en señal telefónica analógica y viceversa, con lo que permite al ordenador transmitir y recibir información por la línea telefónica.

Los chips que realizan estas funciones están casi tan estandarizados como los de las tarjetas de sonido; muchos fabricantes usan los mismos integrados, por ejemplo de la empresa Rockwell, y sólo se diferencian por los demás elementos electrónicos o la carcasa.

URL:

Un URL ó Uniform Resource Locator (Localizador Uniforme de Recurso) es un medio estándar de identificar direcciones internet en la Web. Tiene dos partes, separadas por dos puntos:

Antes de los dos puntos: especifica el método de acceso (http, ftp, mail, news...)

Después de los dos puntos: se interpreta según el método de acceso. Suele contener direcciones y puntos de acceso en una máquina.

HTML:

HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML

PHP:

PHP es un lenguaje de programación de uso general de script del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en el documento HTMLen lugar de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera la página Web resultante. PHP ha evolucionado por lo que ahora incluye también una interfaz de línea de comandos que puede ser usada en aplicaciones gráficas independientes. PHP puede ser usado en la mayoría de los servidores web al igual que en casi todos los sistemas operativos y plataformas sin ningún costo.

HEAD:

Los elementos <HEAD></HEAD> se colocan inmediatamente después de la apertura de la marca <HTML> y cierran el encabezamiento propiamente dicho del documento; es decir toda la información que necesita el navegador, el servidor de web y los motores de búsqueda. Se trata del primer elemento que lee el navegador y, por ello, es el mejor lugar para insertar sintaxis script. Dentro de <HEAD></HEAD> se introduce el título del documento y otros datos

TITLE:

El elemento <TITLE></TITLE> es el más utilizado dentro de la marca <HEAD>, dado que sirve para dar título a la página. El título suele ser visualizado por los navegadores en la cabecera de página.

BODY:

Define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes.

NAME:

El atributo name especifica el nombre de un ancla.

El atributo de nombre se utiliza para crear un marcador en un documento.

El href o el atributo de nombre debe estar presente en la etiqueta <a>

JUSTIFY:

Con el fin de sugerir que parte del texto se justifica por ambos lados, se puede utilizar el align = "justify" atributo en HTML o el texto-align: justify declaración en CSS, o ambos .

LEFT Y RIGHT:

Decida lo que desea alinear en su sitio y encuentra el texto HTML que se correlaciona con el gráfico en particular o de texto.

Tipo de bien align = left align = right o al final de la etiqueta de introducción a esa sección en particular. Por ejemplo, si desea alinear un párrafo a la izquierda de la página, escriba ALIGN=LEFT> <P. Si desea insertar un gráfico y lo han alineado a la derecha de la página, escriba <IMG SRC="graphic.jpg" ALIGN=RIGHT>.

CENTER:

La etiqueta <center> se utiliza para centrar alinear el texto en HTML.

WIDH y HEIGHT:

ANCHO y ALTURA dicen al navegador las dimensiones de la imagen. El navegador puede utilizar esta información para reservar espacio para la imagen tal como contructs la página, a pesar de que la imagen no se ha descargado aún. Por ejemplo, esta etiqueta indica al navegador que la imagen es de 105 píxeles de ancho y 97 píxeles.

BOTTOM:

La propiedad bottom especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

Para los elementos con una posición absoluta (aquellos que tienen la propiedad position: absolute o position: fixed), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor.

Para los elementos con una posición relativa (los que tienen la propiedad position: relative), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad top se antepone a la propiedad bottom, por lo que si top no es auto, el valor computado de bottom es el valor negativo del valor computado de top.

MIDLE:

Alinea el punto medio (en altura) de la imagen con la base del texto.

TOP:

Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual.

COMMON:

Cierre de HTML fue escrito por Gilbert Baumann como parte del navegador web Clausura. Se convirtió primero en una instalación independiente de Ignas Mikalajūnas y, finalmente, volver a montar y documentado para la integración con XML de cierre y utilizar con el navegador de cierre por David Lichteblau con su nombre actual.

Es disponible bajo una licencia tipo MIT.

INSERT:

La acción de agregar alguna imagen por <img seguido de la URL de donde se encuentra la imagen.

LAYPUT:

Gráficos por ordenador son los gráficos creados con los ordenadores y, más generalmente, la representación y la manipulación de la imagende datos por parte de un equipo especializado con la ayuda de software y hardware .

El desarrollo de gráficos por ordenador ha hecho las computadoras más fáciles de interactuar con y mejor para comprender e interpretar muchos tipos de datos. Los avances en gráficos por ordenador han tenido un profundo impacto en muchos tipos de medios de comunicación y han revolucionado la animación , películas y videojuegos de la industria

FRAMES:

Como podemos ver, el código del marco está encerrado entre las marcas <FRAMESET></FRAMESET> que se comportan como las marcas usuales <HTML></HTML>.
El tamaño de los marcos, o mejor dicho, el espacio que cada uno de ellos debe ocupar en la página, queda establecido mediante la marca rows="80,*, que significa que el marco alto (que en este caso es una fila, "row") debe tener 80 píxel, mientras que "*" significa que todo el resto debe asignarse al marco central. Asimismo, habríamos podido expresar el tamaño de los marcos en tantos por ciento de esta manera:

Android

Programa para hacer paginas web en android

Lanzan aplicación para Android que permite crear sitios web móviles

Redacción.- La compañía Telnames lanzó este día una aplicación para Android que permite a cualquier persona crear un sitio web móvil, en cuestión de minutos.

De acuerdo a un comunicado, la aplicación Telnames Mobile Website Builder (Constructor de Sitio Web Móvil de Telnames) amplía sus posibilidades y alcances para poder ser utilizada ahora por un mayor número de personas.

“La aplicación elimina toda la complejidad de comprar y crear su propio sitio web móvil en un teléfono inteligente”, dijo Khashayar Mahdavi, CEO de Telnames. “Ahora, sólo con sus credenciales de Google Play, crear su sitio web es tan simple como descargar un juego o una película”.

También aseguran que ninguna otra aplicación ofrece la funcionalidad completa y la facilidad de uso a pequeñas empresas y profesionales que deseen crear un sitio web apto para hacer negocios en línea. En este sentido, reportan que ya miles de negocios han entrado en la telefonía móvil en minutos.

La aplicación se puede descargar gratis de la tienda Google Play Store y para usuarios de dispositivos iOS de la tienda Apple, App Store, a través de http://telnamesapps.tel.

(Con información de Notimex)

¿Qué es Android?

Android es un sistema operativo basado en Linux, diseñado principalmente para móviles con pantalla táctil como teléfonos inteligentes o tabletas inicialmente desarrollados por Android, Inc., que Google respaldó económicamente y más tarde compró en 2005, Android fue desvelado en 2007junto la fundación del Open Handset Alliance: un consorcio de compañías de hardware, software y telecomunicaciones para avanzar en los estándares abiertos de los dispositivos móviles. El primer móvil con el sistema operativo Android se vendió en octubre de 2008.

¿Dónde se utiliza?

Diseñado principalmente para móviles con pantalla táctil como teléfonos inteligentes o tabletas

¿Qué software desarrolla páginas web?

Dreamweber JavaFX o Microsoft Expression Web.

Trabajar en la nube. Una tendencia que ha llegado para quedarse

Uno de los avances más relevantes que la tecnología nos ha dado después del nacimiento de Internet, es la Nube, más conocida por su término inglés: Cloud. ¿Cómo podemos definirla? En palabras simples, se puede decir que se trata de un espacio virtual en nuestro navegador en el que se puede almacenar lo que sea y trabajar directamente en archivos sin descargar software alguno.

Como se puede deducir de lo que acabamos de exponer, la Nube es una herramienta que otorga a los usuarios una autonomía impensada hace tan sólo un par de años; con ella tenemos la posibilidad de desarrollar el proyecto que queramos, en cualquier momento y en cualquier lugar. Lo único que se necesita es un ordenador y, por supuesto, una conexión a Internet. Y ahí radica el principal valor de trabajar en la nube para las PYMES y pequeños comercios.

Además, como no se necesita realizar ninguna instalación en los equipos y sólo se paga por el tiempo en que se trabaja en ella, la Nube se ha transformado en la herramienta perfecta para incentivar el teletrabajo y mejorar la productividad en las empresas, sobre todo en las pequeñas y medianas. Dentro de este contexto se entiende mejor las posibilidades que ofrece Google Docs, por ejemplo.

Los que no sepan de qué va, tienen que saber que Google Docs es un servicio gratuito proporcionado por Google, que cuenta con una serie de herramientas ofimáticas para trabajar en la nube, de forma que podamos crear documentos y hojas de cálculo fácilmente y de forma colaborativa. Permite que varias personas a la vez puedan modificar un documento, característica que se ve potenciada por la naturaleza misma de la Nube. De esta forma, los usuarios pueden prescindir con tranquilidad de guardar en sus ordenadores archivos de gran envergadura y agiliza el trabajo colectivo.

Otra de las herramientas que utilizan la Nube para editar textos es Textdropapp. Permite guardar archivos de diferente clase en un directorio de Dropbox; una vez allí podremos verlos, tenerlos a mano y utilizarlos a través de nuestra cuenta las veces que queramos, sin necesidad de URL’s, de enviar correos electrónicos, ni de estar inmóviles en un lugar específico. De esta forma, podemos tener una especie de Google Docs basado en Dropbox, con el que podremos editar nuestros textos allá donde estemos, sin preocuparnos de nada más.

Herramientas como Dropbox, textdropapp o el propio Google Docs proporcionan un incalculable valor a las pequeñas empresas que ven como pueden reducir costes y mejorar su día a día con el uso de herramientas en red.

Los servicios de almacenamiento en la nube son cada vez más numerosos y las ventajas que nos ofrecen, cada vez más interesantes.

El más conocido es dropbox, sin lugar a dudas, el cual se ha convertido en un indispensable para multitud de usuarios gracias a su sincronización instantánea entre dispositivos. Es una solución perfecta para mantener nuestros documentos cómodamente en la nube, accesibles desde cualquier dispositivo. Y hace no mucho os dimos a conocer el servicio minus, el cual os ofrecía de forma gratuita 10 gigas de almacenamiento para compartir nuestros ficheros, sacando aplicación para móviles más tarde.

Uno de los primeros servicios en aparecer, box.net recientemente sufrió un profundo cambio de diseño y se ha convertido en una alternativa a tener en cuenta. Y para celebrar este cambio, nada mejor que ofrecer a sus usuarios 50 gigas gratuitos de almacenamiento con el único requisito de crear una cuenta o entrar en la nuestra desde la nueva aplicación para iOS. De esta forma y de manera automática, pasaremos a disponer de 50 gigas de almacenamiento.

Además, gracias a una serie de plugins, podemos disfrutar de una compatibilidad de la herramienta con otras como Google Docs, Microsoft Office, Linkedin y un gran abanico de posibilidades.

Si Dropbox se ha convertido en la herramienta colaborativa preferida en el entorno casero, box.netse quiere convertir en la herramienta usada en el entorno empresarial, ofreciendo unas soluciones de pago muy interesantes.

Apuntes

<FRAMESET rows="20%,*">

TEMPLATES:

(Plantilla) permite definir la plantilla HTML a utilizar para el área de informe rápido referenciada por area. Esta plantilla será utilizada durante la creación del informe en formato HTML.

La plantilla utiliza un conjunto de etiquetas para procesar los datos. Este funcionamiento permite generar documentos HTML cercanos al informe original o documentos con apariencia totalmente personalizada.

Nota: Primero debe llamar QR SET DESTINATION para definir el formato HTML como destino de salida.

APLICATION:

Es un término que proviene del vocablo latino applicatĭo y que hace referencia a la acción y el efecto de aplicar o aplicarse (poner algo sobre otra cosa, emplear o ejecutar algo, atribuir).

TABLES:

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.

<table>

</table>
Comandos para definir una tabla,

<tr></tr> Se utiliza para definir una fila.

<td> </td>Define una columna de la tabla

TITLE:

La etiqueta <title> se requiere en todos los documentos HTML y define el título del documento.

El elemento <title>:

define un título en la barra del navegador

proporciona un título para la página cuando se añada a favoritos

Muestra el título de la página en los motores de búsqueda

MODIFY:

La edición de un archivo puede hacerse a nivel texto con un procesador de textos. Si el archivo tiene un formato específico, lo usual es editarlo con alguna aplicación que pueda manejar ese tipo de formato. Esas aplicaciones se pueden categorizar dependiendo del tipo de formato que manejan, por ejemplo, editor de audio, editor de video, editor gráfico, etc. En general, estos editores tienen herramientas apropiadas para crear y modificar archivos de su tipo, y algunos son más poderosos que otros.

COMMANDS:

Son las aplicaciones que se le pueden dar a las páginas de HTML quien por medio de ellas se da una acción para que en la página se vea de algunas manera.

SITE:

Se refiere a la dirección de enlace que se pone en el navegador web para poder ubicarlo como por ejemplo http://www.blogger.com/preview-loading.g

WINDOWS:

Es posible abrir ventanas del navegador independientes de la principal de tres maneras diferentes:

Con la simple marca <A HREF="http://www.htmlpoint.com" target="_new">haz clic</a> que abre una nueva ventana con todas las opciones típicas de MsIe

Con sintaxis Javascript que abre una nueva ventana de enlace con la dimensión y opciones deseadas.

Con sintaxis Javascript que pone en marcha automáticamente una ventana con la dimensión y opciones deseadas cuando se abre la página.

DESING:

Diseño se refiere a la manera en que nosotros ágamos nuestras paginas dependiendo que le queramos poner imágenes videos color de fuente etc.

CODE:

El elemento HTML code inserta texto que representa código de computadora. Puede ser útil para mostrar funciones, código de programación o variables.

El contenido de este elemento es usualmente mostrado por los navegadores con un estilo de fuente de ancho fijo.

WEB:

Una página web es el nombre de un documento o información electrónica adaptada para la World Wide Web y que puede ser accedida mediante un navegador . Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones (scripts) e imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un equipo local o un servidor web remoto. El servidor web puede restringir el acceso únicamente para redes privadas, p. ej., en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante su transferencia desde servidores utilizando el protocolo de transferencia de hipertexto (HTTP).

Documentos:

Marcas:

Las marcas delimitan el tamaño y los elementos de un documento como cabeceras, párrafos, etc. Y son utilizados para dar un tratamiento diferente al texto que se encuentre entre las marcas.

El HTML. Las marcas se delimitan con signos para abrir menor que y cerrar mayor que (“<”, “>”).

Atributos de las marcas:

Algunas marcas pueden admitir atributos pudiendo tener cada uno de estos atributos un valor, como por ejemplo ancho, alto, color, formato y estilo. Este valor dirá “si dicho valor es alfanumérico”.

Estructura de los documentos

Cabecera:

La cabecera se emplea para facilitar información acerca del documento y esta delimitada por:

<HEAD>…Texto</HEAD>

Dentro de la cabecera podemos destacar el titulo que indica el nombre del documento:

Cuerpo:

El resto del documento residirá entre las marcas <BODY>y </BODY>.

Encabezado:

Los encabezados se emplean para dividir los documentos en secciones o mas concretamente para marcar los títulos de esas secciones.

Las marcas son entre 1 y 6 donde 1 tiene mayor tamaño:

<H1> Tamaño Mayor </H1>

<H6> Tamaño Menor </H6>

Definición de Bloques:

Para definir y separar bloques de texto, se emplean una serie de marcas que definen párrafos, texto pre formateado o bloques con significado especial como direcciones o citas.

<P>:

Se utiliza para separar párrafos, dado que para el HTML. Todo el texto es continuo necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. La marca inicial y final son <P> y </P>.

<PRE>:

El texto insertado entre las marcas <PRE> y </PRE> será visualizado respetando el formato con el que se fue escrito en el fichero fuente HTML.

<ADDRESS>:

Emplea para indicar que un texto representa una dirección o una firma. Generalmente se activa en cursiva y suele estar tabulado.

<BLOCKQUOTE>:

Se suele representar con tabulaciones a la izquierda y derecha y en cursiva. En sistemas que no permiten representar en cursiva se puede emplear algún tipo de símbolo al principio de las líneas.

<BR>:

Este elemento solo tiene marca inicial se emplea para representar una línea horizontal.

<HR>:

Solo tiene marca inicial y se emplea para representar una línea horizontal.

Contexto que empiece por <!... comentario…> será ignorada por el buscador por lo tanto no será visible esto sirve al autor del documento para comentar en su archivo fuente.

Fondos y colores de texto: un cierto número de atributos de la marca <BODY> permite controlar el color del fondo de la ventana, el color de los enlaces atributo BGCOLOR este atributo permite escoger un color para el fondo de la página:

Donde:

“rr” “gg” “bb”

Son colores hexadecimales

Entre 00 y FF

Atributo BACK GROUND

Este atributo especifica una imagen residente en el servidor la cual se utilizara como fondo de página

<BODYBACKGROUND=“archivos .gif”>

Atributo TEXT:

Permite controlar el color del texto estándar es decir todo texto que no especifique un enlace:

<BODYTEXT=“#rrggbb”>

Atributo LINK:

Color de enlace que aun no ha sido visitado:

<BODYLINK=“#rrggbb”>

Atributo ALINK:

Color muy fugas que aparece cuando se hace clic sobre el enlace:

<BODYALINK=“#rrggbb”>

Atributo VLINK:

El color de un enlace que ya ha sido visitado

<BODYVLINK=“#rrggbb”>

Letra: Es la marca que asigna el tamaño de los caracteres donde “n” varia de 1 a 6. Los más grandes tienen el valor 1 y los mas pequeños valor 6. El texto entre estas marcas se trata en negrita:

<HN> titulo

Tamaño de la letra y color, la marca FONT permite actuar sobre bloques distintos de caracteres, situados en la misma línea:

Atributo SIZE:

Regula la altura de los caracteres (1 a 7)

Atributo COLOR:

Especifica el color de los caracteres ejemplo:

<FONTSIZE=3COLOR=“#008000>…Texto..</FNT>

Estilo físico o estilo de características

<B> Negrita <b> hola! </b> hola!

<I> Cursiva <i> hola! </i> hola!

<v> Subrayado <v> hola! </v> hola!

Estilos lógicos:

<CITE> Cita

<CODE> Código y fuente

<DFN> Definido

<EM> Enfatiza

<KDB> Palabra clave

<SAMP> Ejemplo

<STRONG> Resalta

<VAR> Variable

Se llama combinación de tamaño y estilo, la ventana trabaja bajo el efecto de solo un par cerrado de marcas ejemplo.

<i>

<front site=5> Tamaño de la fuente

<b> hola, </b> como

<front site=6> estas? </front>

</front>

</i>

(Hola cómo estas?)

Hiperenlace

El lector explora un documento en la web haciendo clic sobre las zonas activas para así hacer aparecer nuevos documentos. En HTML, definimos una zona activa (que puede ser un texto o una imagen) de documento. Del documento que sustituirá al documento visualizado cuando se haga clic sobre esta zona.

Un ancla por lo tanto sirve para especificar la partida y la llegada de un enlace hipertexto (<A>).

El atributo HREF ancla de partida hacia un enlace externo.

Crea un enlace hasta un servidor situado en algún documento propuesto, por dicho servidor la marca especifica del atributo HREF cuyo valor precisa el URL del documento a recuperar.

Zonacativable

<A HREF=“URL-de-destino”> zona_activable</A>

El atributo HREF ancla de partida a un enlace interno crea un enlace interno crea un enlace a un punto determinado del fichero en ejecución. Para ello hay que colocar un ancla activa “ancla de partida”.

Un ancla inactiva (ancla de llegada)

El ancla de partida se define de la siguiente forma, zona activable con atributos visuales.

<A HREF=#Etiqueta>zona activable con atributos visuales

</A>

El atributo NAME, ancla de llegada.

Define el ancla de llegada lugar que se podrá acceder o haciendo el clic sobre un ancla de partida.

-zona no activable sin atributos visuales.

· Tablas

Una tabla se define entre las marcas <TABLE> y </TABLE>

Esta 1ra marca regula la presentación general de la tabla mediante 3 atributos: BORDER: Define el grosor del marco exterior.

CELLPADDING: Define el espacio alrededor del texto de una celda.

CELLSPADDING: Define el espacio entre la celda.

WIDTH: Define la anchura de la tabla relativa dela ventana.

Las marcas que define una nueva fila son:

<TR7> y </TR7> que admiten los siguientes atributos de alineación del texto en el interior de todas las celdas de la fila.

VALING (alineación vertical)

Puede tomar los valores:

· TOP: coloca el texto en la parte superior de la celda.

· BOTTOM: Coloca el texto en la parte inferior de la celda.

· MIDDLE: Coloca el texto en el centro de la celda.

ALING (alimentación) que puede tomar los valores

· RIGHT: Coloca el texto a la derecha de la celda.

· LEFT: Coloca el texto a la izquierda de la celda.

· CENTER: Centra el texto de la celda.

La marca <TD> Es el elemento de inicio de una columna. Puede completarse con los atributos; VALING y ALING que será entonces prioritarios sobre los mismos valores definidos en la marca <DR7>

La marca <TH> Esta marca funciona de forma similar a <TD> admitiendo los mismos atributos pero se considera, como una marca de titulo de celda automáticamente centra el texto y lo pone en negrita.

<IMG> Permite incluir una imagen. Esta marca ira siempre complementada con el atributo (scr) que permite dar la dirección de fichero grafico (imagen foto animación) que contiene la imagen.

El valor del atributo es (scr) permite especificar un URL y es por tanto correcto encontrar imágenes definidas como sigue.

Alineación de imágenes.

La marca (<IMG>) admite el atributo AUNH que permite situar la imagen en relación a la línea de texto puede tomar los siguientes valores:

· TOP: Para alinear la parte superior de la imagen.

· MIDDLE: Para alinear el centro de la imagen.

· BOTTOM: Para alinear la base de la imagen por ejemplo.

Imágenes externas: Este tipo de imágenes no aparecen en la pantalla cuando se carga la página sino cuando se crea un enlace hipertexto cuyo extremo podrá ser una imagen:

<A HREF=“image/new.gif”>hacer clic aquí </A>

Imágenes como anclas:

Se puede remplazar el texto de un ancla por una marca que define una imagen en este caso la imagen tiene un borde de color para indicar que se trata de un enlace contexto del que se puede hacer un link ejemplo:

Formularios.

Un formulario es una plantilla para representar un conjunto de datos y generar en la pantalla cuadros de dialogo con el lector.

Como en un formulario en papel, se podrán tener zonas en las que se introducirá un texto, casillas de verificar de verificación, vistas de selección.

El usuario rellenara zonas en su formulario que se identifican con un nombre simbólico cuando el formulario se envía al programa que lo va a tratar este recibe el identificador de cada zona y el valor introducido. Es importante señalar que en la utilidad de los formularios esta limitado al uso de las páginas junto con sus servidores ya que las acciones asociadas son programas (generalmente scripts CGI)

Estos programas deben funcionar en un servidor al que se le proporcionara los datos de un formulario para ser procesados.

Declaración de formulario.

La marca <FORM> y </FORM>: Define un formulario y entre ellas se situaran todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por 2 atributos:

· El atributo METHOD: Esta dirigido al programador que codifica el script al que se puede darse el valor POST o el valor GET que define el modo de transferencia de los datos hacia el script.

· El atributo “ACTION” que define el URL de un programa script encargado de tratar los datos adquiridos desde el formulario.

“Campos de selección”:

La marca <SELECT> permite general vistas de selección general simple o de selección variable. Se programa con una lista en la que los ítems se especifican mediante la marca <OPTION> la presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 esta ausente la lista se interpreta, cómo un menú desplegable (pop-list). En casa contrario la lista se visualiza en una ventana con barra de desplazamiento el valor dado entonces al atributo “sise” da entonces el número de líneas invisible en la ventana, la opción de selección múltiple deriva en la presencia del atributo <MULTIPLE> por ejemplo:

Menú desplegable

<FORM>

<Option> Entrada indirecta

<Option> Entrada lateral

<Option SELECTED>Entrada directa

</Select>

</FORM>

Área de texto

La marca <TEX TAREA> permite crear una ventana con barras de desplazamiento horizontales y verificarles en las que podrán escribir texto. El valor dado a los atributos Rows (líneas) cols (columnas) delimita el tamaño de esta ventana ejemplo:

<FORM>

Introduce aquí tus comentarios

</Textarea>

</FORM>

Todas las marcas que se definirán tienen los siguientes atributos comunes: el atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.

NAME: Nombre_de_la_variable_asociada.

El atributo VALUE definido para un campo de texto.

TEXTO: permite definir el contenido del campo.

Botón SUBMINT: Indica el texto a escribir en el botón.

Botón RADIO, Botón CHECKBOX: Valor asociado al botón cuando esta cursando.

NAME: Identifica el bloque de botones.

Campos de entrada la marca <IMPUT> Servira para definir campos para entrar un texto entre botones y botones que permite escoger opciones.

El atributo TYPE asociado a la marca IMPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores.

SUBMIT: Desencadena el envio de formulario hacia el script. El texto definido en value se escribirá en el botón salida.

<FORM>

</FORM>

RESET: Permite borrar los datos ya entrados:

<FORM>

</FORM>

PASWORD: Permite entrar una palabra clave de forma confidencial

<FORM>
<imput type=“pasword” name=“pwd”

</FORM>

CHECKBOX

Crea un bloque de botones que permiten una selección múltiple de opciones.

<FORM>

<imput type=“checkbox” name=“micro” value=“mac”>Macintosh

<imput type=“checkbox” name=“micro” value=“pc”>Pc

</FORM>

RADIO: Crea un bloque de botones que permiten una selección exclusiva entre varias opciones

<FORM>

<imput type=“radio” name=“media” value=“CD” ckecked>CD-ROM

<imput type=“radio” name=“media” value=“Disquete” ckecked>Disquete

</FORM>

Submodulo III. Elaboración de paginas Web.

domingo, 3 de febrero de 2013

Submódulo III. Elaboración de paginas web. COBAQ 10