Módulo 5 : Diseño y Desarrollo Web
Objetivo: Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando herramientas multimedia que permitan promocionar la información e imagen de una organización y/o cliente.
De Clic aquí para ingresar a aulaclic
ETIQUETA HTML
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, ...
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacias, como la etiqueta
<br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacias no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacias son <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato
<etiqueta atributo1="valor"atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.
Por ejemplo,
<a href="https://www.aulaclic.es">Visita aulaClic</a>
ETIQUETAS DE HTML MÁS UTILIZADAS
- <div> </div> : div de "division" -división . Sirve para crear secciones o agrupar contenidos.
- <p> </p> : El elemento p (párrafo) es el apropiado para distribuir el texto en párrafos.
- <html> : Texto informativo o titulo del elemento
- < head>: provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.
- <little>: Texto informativo o título del elemento.
- <body> : encontramos el contenido de la página, lo que se ve a través del navegador: texto, imágenes, enlaces, tablas, etc...
- < h1>: es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web.
- <h2>: La etiqueta H2 es un elemento similar al H1, que indica títulos de importancia para subsecciones del documento web actual.
- <h3>: las etiquetas H3 en adelante nos permiten definir títulos de subapartados de un bloque encabezado con un H2. Su incidencia en SEO es más limitada, y por ello no es habitual ni recomendable el trabajar los titulares a partir de H4.
- <class>: es una lista de las clases del elemento separada por espacios . Las clases permiten a CSS y Javascript .
- <style>: Es el elemento encargado de indicar la información de estilo.
- <br>: produce un salto de línea en el texto.
- <a href: sirve para agregar vínculos , enlaces.
- <center> </center> : sirve para centrar.
- <video> </video>: permite insertar contenido de vídeo en la pagina web ,como, un vídeo , clip ,etc.
- <embed> </embed>: Permite incrustar contenido interactivo.
- <u> </u>: sirve para poner el texto en subrayado
PÁGINAS WEB
Consideramos una página web a un documento disponible en Internet, o World Wide Web (www), codificado según sus estándares y con un lenguaje espcífico conocido como HTML. Es algo a lo que estamos acostumbrados a acceder si leemos este artículo pero no todos conocen realmente su funcionamiento.
A estos sitios se puede llegar a través de los navegadores de Internet, que reciben la información del documento interpretando su código y entregando al usuario la información de manera visual.
Estos suelen ofrecer textos, imágenes y enlaces a otros sitios, así como animaciones, sonidos u otros.
Una página web necesita un lugar donde alojarse para que cuando el usuario solicite la información desde su navegador, la información que esta contiene se cargue y aparezca en el ordenador.
TIPOS DE PÁGINAS WEB :
Básicamente existen dos tipos de páginas web: estáticas y dinámicas.
Estáticas
Las estáticas forman parte de épocas anteriores, puesto que son de contenido fijo y no son aptas a actualizaciones constantes.Son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces (links) entre las páginas Web que conforman el sitio, este tipo de Web son incapaces de soportar aplicaciones Web como gestores de bases de datos, foros, consultas on line, e-mails inteligentes...
La principal ventaja de este tipo de páginas es lo económico que resulta crearlas, con un diseño vistoso e incluyendo las imágenes y el texto con el cual queremos informar a los navegantes, se puede crear fácilmente sin necesidad de ningún tipo de programación especial (php, asp, ...) un sitio Web estático.
La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos on-line,
Ejemplos:
1. WEB QUEST:
Son sitios Web desarrollados principalmente por profesores y universidades, con un claro objetivo educativo, proponiendo a un grupo de alumnos un tema en particular (biología, geometría, física, literatura con un serie de cuestiones formuladas acerca del tema elegido, el grupo tiene disponible, en la misma Web, direcciones (links) a otras páginas Web donde pueden indagar e investigar acerca del tema, de tal forma que puedan responder a las preguntas planteadas. El principal objetivo de las Web Quest reside en aprender los contenidos del tema elegido de una manera interactiva.
2. BLOC O BITÁCORA:
Es un sitio Web donde se recopilan cronológicamente mensajes de uno o varios autores, sobre una temática en particular siempre conservando el autor la libertad de dejar publicado lo que crea pertinente, también llamado blog o bitácora,
3.WEB INFORMATIVA:
Aquellos sitios Web que simplemente ofrecen información acerca de un tema específico (Fiestas en Valencia: Las fallas, Gastronomía andaluza. por lo general estos sitios no se actualizan, de tal forma que los contenidos permanecen invariables a lo largo de su vida
Dinámicas
En el caso de las dinámicas, pueden ser construidas en HTML o en otra extensión, como por ejemplo PHP. En este último caso se permite la interacción en tiempo real, apto para algunas páginas web con estas necesidades específicas, como pueden ser los foros.
son aquellos que permiten crear aplicaciones dentro de la propia Web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada.
Ejemplos:
1.Tiendas online
Los ecommerces o tiendas online son sitios webs en los que se comercializan productos o servicios. En la actualidad están teniendo un gran crecimiento debido a que muchos usuarios ya realizan sus transacciones por Internet y también muchos comercios tradicionales se han lanzado a desarrollar este tipo de sites para generar negocio en la red. Por darte algún dato, algunos ecommerces se han convertido ya en gigantes de la distribución y son algunas de las empresas más grandes del mundo como Alibaba o Amazon
.
.
2.Wikis
Son páginas web dónde los usuarios son los que crean y modifican su contenido directamente desde su navegador. La wiki más famosa es la Wikipedia, una de las páginas web más visitadas del mundo.
3.Foros
Un foro o una comunidad, es un espacio virtual dónde se reúnen una serie de personas para debatir sobre algún tema determinado. Los foros suelen tener dos figuras, el administrador o administradores del mismo y los usuarios, los primeros se encargan de moderar los mensajes y los segundos de publicarlos. Los foros también pueden estar incluidos en secciones de algún sitio para facilitar un espacio de discusión a los usuarios que visitan esas páginas.
PROTOCOLO IP
El protocolo de IP (Internet Protocol) es la base fundamental de la Internet. Porta datagramas de la fuente al destino. El nivel de transporte parte el flujo de datos en datagramas. Durante su transmisión se puede partir un datagrama en fragmentos que se montan de nuevo en el destino. Las principales características de este protocolo son:
- Protocolo orientado a no conexión.
- Fragmenta paquetes si es necesario.
- Direccionamiento mediante direcciones lógicas IP de 32 bits.
- Si un paquete no es recibido, este permanecerá en la red durante un tiempo finito.
- Realiza el "mejor esfuerzo" para la distribución de paquetes.
- Tamaño máximo del paquete de 65635 bytes.
- Sólo ser realiza verificación por suma al encabezado del paquete, no a los datos éste que contiene.
El Protocolo Internet proporciona un servicio de distribución de paquetes de información orientado a no conexión de manera no fiable. La orientación a no conexión significa que los paquetes de información, que será emitido a la red, son tratados independientemente, pudiendo viajar por diferentes trayectorias para llegar a su destino. El término no fiable significa más que nada que no se garantiza la recepción del paquete.
La unidad de información intercambiada por IP es denominada datagrama. Tomando como analogía los marcos intercambiados por una red física los datagramas contienen un encabezado y una área de datos. IP no especifica el contenido del área de datos, ésta será utilizada arbitrariamente por el protocolo de transporte.
Direcciones IP
Para que en una red dos computadoras puedan comunicarse entre sí ellas deben estar identificadas con precisión Este identificador puede estar definido en niveles bajos (identificador físico) o en niveles altos (identificador lógico) de pendiendo del protocolo utilizado. TCP/IP utiliza un identificador denominado dirección internet o dirección IP, cuya longitud es de 32 bites. La dirección IP identifica tanto a la red a la que pertenece una computadora como a ella misma dentro de dicha red.
Tomando tal cual está definida una dirección IP podría surgir la duda de cómo identificar qué parte de la dirección identifica a la red y qué parte al nodo en dicha red. Lo anterior se resuelve mediante la definición de las "Clases de Direcciones IP". Para clarificar lo anterior veamos que una red con dirección clase A queda precisamente definida con el primer octeto de la dirección, la clase B con los dos primeros y la C con los tres primeros octetos. Los octetos restantes definen los nodos en la red específica.
¿Qué son los Navegadores?
Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, además de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software realmente habitual y muy utilizado actualmente.
¿Qué son los navegadores web ?
Un navegador web (en inglés, web browser) es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser visualizados.
La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el usuario y también pueden estar en cualquier otro dispositivo conectado en la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).
¿Qué es
una Hoja de estilo?
Una Hoja de estilo es un archivo que suele acompañar al fichero
principal de cualquier página web, con la extensión css, y que
se encarga de definir diferentes aspectos relacionados con el formato y el
diseño de la web, estableciendo los parámetros que definen las etiquetas
utilizadas en el código fuente de la misma.
Este fichero es donde se almacena información del estilo del
tipo de fuente a utilizar, los colores, su tamaño, el espaciado entre párrafos,
las dimensiones de los diferentes títulos y un larguísimo etcétera. Gracias
a esto, los diseñadores y desarrolladores
pueden dotar de un estilo unificado a todos los apartados y páginas de una web, consiguiendo una imagen homogénea y característica.
¿Para qué sirve una Hoja de estilos?
Una Hoja de estilos sirve para dar coherencia al diseño de una
web y mantener un estilo uniforme y homogéneo, sin secciones que usen
fuentes distintas ni nada que rompa con la imagen que se desea transmitir al
visitante. Esta unicidad resulta cómoda y atractiva estéticamente para
cualquier usuario, lo que permite que permanezca más tiempo en la web.
Ejemplos de Hoja de estilos
Hay tantos Ejemplos de Hoja de estilos como web abiertas en Internet,
por lo tanto, no es difícil dar con casos que ilustren el concepto del que
hablamos.
Tablas o plantillas
Puede personalizar la
apariencia de las tablas de planificación de paneles. Puede especificar la
configuración de apariencia general, así como la información del circuito y el
resumen de cargas.
Marcos (frame)
Un marco (o frame) es una
ventana independiente dentro de la ventana general del navegador. Cada marco
tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se
dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un
documento HTML específico, que llamaremos documento de definición de marcos. En
él especificaremos el tamaño y posición de cada marco y el documento HTML que
contendrá. Vamos a ver un ejemplo de este tipo de
documento:
<HTML>
<HEAD>
<TITLE>Mi primera página con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice"
SRC="indice.html">
<FRAME NAME="principal"
SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero sólo podrás ver esta
página
si tu navegador tiene la capacidad de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
PRESENTACION
ESTA ES LA VERSION
CON FRAMES DE MI PAGINA |
EDICIÓN DE SITIOS WEB
Un editor de páginas web es
una aplicación diseñada con el fin de facilitar la creación y edición de
documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.
También llamado editor de texto plano. Este tipo de editor
suele ser muy sencillo. Dos ejemplos son Notepad o Bloc
de Notas (incluido en Windows) y Kate (GNU/Minix). Con cualquiera de los dos bastaría para escribir las líneas
de código necesarias para diseñar una página Web.
Publicador Web
El
Publicador es una herramienta que creamos que permite modificar contenidos
dentro del Sitio Web. Dicha herramienta permite la adaptación de acuerdo a las
necesidades de cada cliente, pudiendo así actualizar los sectores que
usted necesite modificar asiduamente, siendo estos fotos, imágenes, textos
y otros.
Para poder utilizar ésta herramienta no necesita conocimientos previos en informática.
El mantenimiento de su Sitio Web depende de la o las personas que usted desee y puede ser realizado por varias personas al mismo tiempo. Cada uno accede con su usuario y contraseña; de modo que usted podrá verificar quién realiza los cambios en contenidos y en que momento.
Incluye:
Para poder utilizar ésta herramienta no necesita conocimientos previos en informática.
El mantenimiento de su Sitio Web depende de la o las personas que usted desee y puede ser realizado por varias personas al mismo tiempo. Cada uno accede con su usuario y contraseña; de modo que usted podrá verificar quién realiza los cambios en contenidos y en que momento.
Incluye:
- acceso por usuario y contraseña
- cuentas de correo del tipo nombre@dominiocontratado.com de acceso POP3 (ej.
outlook, eudora y otros) o Web Mail (por intermedio de nuestro Sitio
Web www.vag-net.com)
- subidor de imágenes.
- publicación en línea de las estadísticas de
visitas al sitio.
- manual de uso.
- soporte vía chat
No hay comentarios.:
Publicar un comentario