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>
- <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.
- <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
¿QUÉ ES UNA PÁGINA WEB?
Una página web, o página electrónica, página digital, o ciberpágina 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.....
Se dividen en dos: Paginas estáticas, paginas dinámicas.
-Páginas 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.El desarrollo inicial de una página web estática es un proceso más simple y que requiere menos tiempo en comparación con la creación de una página web dinámica, ya que no requiere sofisticadas habilidades de programación. Las páginas web estáticas solamente requieren la comprensión de un lenguaje de programación básico como HTML y pueden ser creadas por diseñadores de sitios de forma relativamente barata. En contraste, las páginas dinámicas usan lenguajes de secuencias de comandos como PHP y ASP que requieren mayor experiencia y conocimientos en programación, además de más tiempo. La relativa simplicidad de la fase de desarrollo ocasiona que las páginas web estáticas sean atractivas para los usuarios que tienen en mente mantener los costos iniciales a un nivel bajo.
Ejemplos :
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.
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
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
-Páginas dinámicas: Son páginas fijas y a la vez dinámicas donde usted puede ir publicando noticias o lo que desee, desde un simple panel, podrá escribir lo que desee comunicar, lo cual aparecerá automáticamente en su sitio una vez publicado. Además podrá tener todo los servicios de un web informativo.
Se construyen haciendo uso de otros lenguajes de programación, siendo el más utilizado de todos el PHP, con lo Cual podemos definir las funciones y características que se deben cumplir de acuerdo a nuestras necesidades.
¿QUÉ ES EL PROTOCOLO IP?
El protocolo de internet (en inglés Internet protocol o IP) es un protocolo de comunicación de datos digitales clasificado funcionalmente en la capa de red según el modelo internacional OSI.
Su función principal es el uso bidireccional en origen o destino de comunicación para transmitir datos mediante un protocolo no orientado a conexión que transfiere paquetes conmutados a través de distintas redes físicas previamente enlazadas según la norma OSI de enlace de datos.
El diseño del protocolo IP se realizó presuponiendo que la entrega de los paquetes de datos sería no confiable. Por ello, IP tratará de realizarla del mejor modo posible, mediante técnicas de enrutamiento, sin garantías de alcanzar el destino final pero tratando de buscar la mejor ruta entre las conocidas por la máquina que esté usando IP.
Los datos en una red basada en IP son enviados en bloques conocidos como paquetes o datagramas (en el protocolo IP estos términos se suelen usar indistintamente). En particular, en IP no se necesita ningún intercambio de información de control previa a la carga útil (datos), como sí que ocurre, por ejemplo, con TCP.
IP provee un servicio de datagramas no fiable (también llamado del "mejor esfuerzo": lo hará lo mejor posible, pero garantizando poco). IP no provee ningún mecanismo para determinar si un paquete alcanza o no su destino y únicamente proporciona seguridad (mediante checksums o sumas de comprobación) de sus cabeceras y no de los datos transmitidos. Por ejemplo, al no garantizar nada sobre la recepción del paquete, éste podría llegar dañado, en otro orden con respecto a otros paquetes, duplicado o simplemente no llegar. Si se necesita fiabilidad, ésta es proporcionada por los protocolos de la capa de transporte, como TCP. Las cabeceras IP contienen las direcciones de las máquinas de origen y destino (direcciones IP), direcciones que serán usadas por los enrutadores (routers) para decidir el tramo de red por el que reenviarán los paquetes.
El IP es el elemento común en el Internet de hoy. El actual y más popular protocolo de red es IPv4. IPv6 es el sucesor propuesto de IPv4; poco a poco Internet está agotando las direcciones disponibles por lo que IPv6 utiliza direcciones de fuente y destino de 128 bits, muchas más direcciones que las que provee IPv4 con 32 bits. Las versiones de la 0 a la 3 están reservadas o no fueron usadas. La versión 5 fue usada para un protocolo experimental. Otros números han sido asignados, usualmente para protocolos experimentales, pero no han sido muy extendidos.
Si la información a transmitir ("datagramas") supera el tamaño máximo "negociado" (MTU) en el tramo de red por el que va a circular podrá ser dividida en paquetes más pequeños, y reensamblada luego cuando sea necesario. Estos fragmentos podrán ir cada uno por un camino diferente dependiendo de como estén de congestionadas las rutas en cada momento.
¿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.
¿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.
El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a Internet, se llama navegación, de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza, a la cual también se le llama cibernauta). Por otro lado, hojeador es una traducción literal del original en inglés, browser, aunque su uso es minoritario.
Ejemplos:
SafariTorch: Torch es un navegador y suit de internet basado en Chromium desarrollado por Torch Media. El navegador Torch permite navegar en Internet además de otras múltiples tareas como son mostrar sitios web, compartir sitios web por redes sociales, descargar torrents, acelerar descargas y grabar archivos multimedia, todo directamente del navegador. El navegador Torch es comercialmente denominado Freeware.
Torch está basada en el código fuente de Chromium. La versión más reciente de Torch, 45.0.0.11172, usa la versión 45 de Chromium, por lo que es compatible con todos los complementos y extensiones disponibles en la tienda Chrome. El 18 de junio de 2013, Torch anunció que había superado los 10 millones de usuarios activos.
El sitio de descarga de archivos torrent, The Pirate Bay, ha pagado aprobaciones para que Torch abra su sitio web.
Chromium: Chromium es el proyecto de código abierto de navegador web del que Google Chrome obtiene su código fuente.Los navegadores comparten la mayoría de código y características, aun así hay algunas diferencias menores en las características y poseen diferentes licencias. El Proyecto Chromium toma su nombre del elemento cromo. La intención de Google, expresado en la documentación para desarrolladores, era que chromium fuera el nombre del proyecto de fuente abierta y que el nombre del producto final sería Chrome; aun así otros desarrolladores han tomado el código de Chromium y liberado versiones bajo el nombre de Chromium. Estos están listados bajo paquetes comunitarios.
Uno de los objetivos principales del proyecto es que Chromium sea un administrador de ventanas con pestañas, o shell para la web, en lugar de ser una aplicación de navegador tradicional . La aplicación está diseñada para tener una interfaz de usuario minimalista. Los desarrolladores afirman que "debe ser liviano (cognitiva y físicamente) y rápido".
Google Chrome: Google Chrome es un navegador web de software privativo o código cerrado desarrollado por Google, aunque derivado de proyectos de código abierto (como el motor de renderizado Blink). Está disponible gratuitamente. El nombre del navegador deriva del término en inglés usado para el marco de la interfaz gráfica de usuario («chrome»).
Cuenta con más de 750 millones de usuarios, y dependiendo de la fuente de medición global, puede ser considerado el navegador más usado de la Web variando hasta el segundo puesto, algunas veces logrando la popularidad mundial en la primera posición. Actualmente el número de usuarios aumentó considerablemente situándose en una cuota de mercado del 54 % convirtiéndolo en el navegador más utilizado de todo el planeta.
Los lanzamientos de Chrome son obtenidos a partir de Chromium, el proyecto de software libre que también sirve de base para el sistema operativo Chrome OS. Chromium es publicado con una licencia de derechos de autor laxa. En esencia, los aportes hechos por el proyecto libre Chromium fundamentan el código fuente del navegador base sobre el que está construido Chrome y por tanto tendrá sus mismas características, a las cuales Google adiciona otras que no son software libre. También se cambia el nombre y logotipo por otros ligeramente diferentes para proteger la marca comercial de Google. El resultado se publica bajo términos de software privativo. De acuerdo a la documentación para desarrolladores, «“Chromium” es el nombre del proyecto, no del producto, y no debería aparecer nunca entre las variables del código, nombres de APIs, etc. Utilícese “chrome” en su lugar».
El 2 de septiembre de 2008, salió a la luz la primera versión al mercado, siendo esta una versión beta. Finalmente, el 11 de diciembre de 2008, se lanzó una versión estable al público en general. Actualmente el navegador está disponible para Windows, macOS, Linux, Android y iOS.
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é 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á.
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:
- 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