Módulo de 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.
ETIQUETAS 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 mas
utilizadas
- <div> </div>: Se utiliza comúnmente en el desarrollo de documentos con propósitos estilísticos, en conjunto con los atributos style y class.
- <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>:contiene información sobre la página.
- <body>:encontramos el contenido de la página, lo que se ve a través del navegador: texto, imágenes, enlaces, tablas, etc... Por lo tanto dentro del <body> pueden ir la gran mayoría de las etiquetas html.
- <title>: Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip"
- <h1>: es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web.
- <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
- <class>: Asigna nombres de clases al elemento. Por defecto, clases CSS.
- <style>: Permite especificar información de estilo. Por defecto, estilos CSS.
- <br>: produce un salto de línea en el texto.
Página Web
Una página web, o página electrónica, página digital, o ciber página 112 es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.
Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, 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 una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).
Tipos de páginas web
Una Pagina Web se divide en dos partes: estáticas y dinámicas.
ESTÁTICAS: Una página web estática es un sitio de Internet que muestra el mismo contenido para todos los usuarios, en vez de proporcionar contenido personalizado a la medida de cada usuario, y que no se actualiza a menudo. Las páginas web estáticas, que algunas veces se conocen como páginas planas, contrastan con las páginas web dinámicas que se actualizan frecuentemente y proporcionan información personalizada para usuarios individuales.
Es aquella que esta compuesta de una serie de archivos que contiene el código HTML que constituye la pagina en si y que permiten mostrar los textos, imágenes, vídeos etc. que conforman el contenido de la pagina.
1.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.
2.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
3. WEBQUEST:
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.
- DINÁMICAS: Una web dinámica es aquella que contiene aplicaciones dentro de la propia web, otorgando mayor interactividad con el navegante. Ejemplos de aplicaciones dinámicas son 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 ....
1. FOROS:
Foro de mensajes, de opinión o de discusión. Es una aplicación web que apoya los debates en línea y opiniones. Genera gran cantidad de actividad entre usuarios, quienes en retorno estarán encantados de contribuir con tu proyecto, al igual que ayudar al responder, comentar o dar su opinión sobre temas de interés. Esta estrategia es útil para aumentar la lealtad de los usuarios.
Agrega un Foro a tu sitio web con las más avanzadas características como categorías, ranking de puntuación, cargar archivos e imágenes, búsqueda avanzada, publicidad, subscripciones, encuestas, entre otras y logra transformar tu Foro en un perfecto lugar de reunión.
2.CATÁLOGOS ELECTRÓNICOS
Posicione sus productos y servicios con su imagen, especificaciones y método de pago y comience a venderlos a través del mercado que deseas. ¡Monta tu catálogo online ahora mismo!
3.Portales Web
Un portal puede tener herramientas y directorios para encontrar negocios y servicios. Es ideal para publicaciones con varios temas o categorías.
¿QUÉ ES EL PROTOCOLO IP ?
Un protocolo es un conjunto de normas que rigen el funcionamiento de las cosas en una determinada tecnología, por lo que de esta forma se consigue que exista algún tipo de estandarización. Cuando hablamos de comunicaciones de red, un protocolo es el conjunto de normas que rigen cómo los paquetes de comunicación se transmiten a través de la red. Cuando tienes un protocolo, puedes estar seguro de que todas las máquinas de una red (o del mundo, cuando se trata de Internet), por muy diferentes que sean, hablan el mismo idioma y pueden integrarse en cualquier sistema.
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.
¿QUÉ SON 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.
Insistimos en que es algo que se usa con mucha frecuencia, ya que moverse por Iternet es algo que hace la mayoría del público en los tiempos que corren. Sea para echar un vistazo al correo, para ojear una web de noticias o para entrar en YouTube, el navegador web suele ser el medio indicado para llevar a cabo dicha tarea, de ahí que esté tan presente y su uso esté tan normalizado.
¿QUÉ SON 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).
Tales documentos, comúnmente denominados páginas web, poseen hiperenlaces o hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.
1. Google Chrome. Navegador popular del gigante de Internet Google. Se centra en el rendimiento mejorado de las aplicaciones web. Cientos de extensiones útiles se pueden descargar e instalar de forma gratuita desde Chrome Store y se pueden usar para uso personal.
2.Mozilla Firefox. Un navegador web diseñado para la simplicidad, seguridad, extensibilidad y flexibilidad y potencia. Disponible para Linux y Android también.Hay muchos complementos y extensiones con algunas herramientas de desarrollador potentes.
3. Internet Explorer: Propiedad de Microsoft, se creó en 1995. Aunque llegó tarde, fue el navegador que desbancó a Netscape. El hecho de estar integrado en el sistema operativo Windows de forma gratuita ayudó a conseguirle una cuota del 95% de usuarios.
¿Qué son Hojas 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.
La Hoja de estilos es la clave para establecer el diseño de una web, por lo tanto, se convierte en el principal espacio de trabajo para los diseñadores web. El lenguaje que usa es el CSS, por lo que programar en ella es algo natural para cualquier programador web.
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.
¿Qué son Tablas o Plantillas?
Las tablas se pueden integrar dentro del Gestor de Contenidos Vualà de la misma forma que se venía haciendo hasta ahora en Composer. Sin embargo, debemos limitar su uso exclusivamente a la tabulación de datos y evitar su utilización para maquetar la información de nuestra web.
¿Qué es Marco( 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>
¿ Qué es edición de estilos 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.
¿Qué es un Publicador de sitios 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:
- 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