Módulo de diseño página 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
Se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas.
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".
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 MAS UTILIZADAS DE HTML
* <HTML>: indica el comienzo del documento HTML.- * <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title> de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
- * <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
- * <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
- * <A>: define los enlaces.
- * <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.
- * <P>: el texto dentro de esta etiqueta forma un párrafo.
- * <IMG>: imágenes.
- * <BR />: salto de línea.
- * <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas.
- * <B> y <STRONG>: se utilizan para resaltar el texto.
- * <U>: texto subrayado.
- * <I>: texto en cursiva.
EJEMPLO:
<html>
<head>
<title> Título de la página </title>
</head>
<body>
<h1>Encabezado de la página</h2>
<h3>Encabezado de menor tamaño</h3>
<p>Este es el texto de un párrafo.</p>
<p>Este es el texto de otro párrafo. Dentro de este párrafo,
pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo
que quieras.</p>
<p>También podemos poner listas como la siguiente:</p>
<ul>
<li>Guión número uno.</li>
<li>Guión número dos.</li>
<li>Guión número tres.</li>
</ul>
</body>
</html>
¿QUÉ ES UNA PAGINA WEB?
Una página web se define como un documento electrónico el cual contiene información textual, visual y/o sonora que se encuentra alojado en un servidor y puede ser accesible mediante el uso de navegadores. Una página web forma parte de una colección de otras páginas webs dando lugar al denominado sitio web el cual se encuentra identificado bajo el nombre de un dominio.
La creación y desarrollo de una página web se realiza bajo un lenguaje de programación capaz de ser interpretados por los navegadores, lenguajes como el HTML, PHP, ASP, JSP o RUBY son ejemplos entre otros. Al inicio de la era de internet accesible, sobre los años 90, era necesario el conocimiento de algún lenguaje de programación para el desarrollo de una web, siendo una tarea encomendada a personas con altos conocimientos informáticos, hoy en día contamos con software especializado capaz de trabajar como un editor de texto ,estilo Word, que transforman toda la información insertada en un lenguaje de programación capaz de ser interpretado por los navegadores, de esta forma se liberalizó y se globalizó la creación de páginas webs con apenas unos escasos conocimientos informáticos, programas como Dreamweaver, Amaya, Sharepoint Designer o Mozilla Composer son entre otros los denominados WYSIWYG (acrónimo del inglés " lo que ves es lo que obtienes") capaces de crear complejas páginas webs con el entorno de un simple editor de texto.
Una vez que hemos creado y desarrollado nuestras páginas webs es necesario alojarlas en un servidor el cuál lo podemos definir como un ordenador conectado constantemente a la intranet privada o a internet cuyo objetivo es poder disponer de la página web a cualquier hora del día. Para poder acceder al servidor es necesario el uso de programas denominados clientes FTP, los cuales conectan el ordenador personal donde se ha desarrollado la página con el servidor donde se alojará, Filezilla, FileFTP o Cute FTP son entre otros ejemplos de clientes FTP.
LAS PÁGINAS ESTÁTICAS
Son páginas enfocadas principalmente a mostrar información permanente, se crean mediante el lenguaje HTML, que no permite grandes libertades para crear efectos o funcionalidades más allá de los enlaces, pero que haciendo uso de otros recursos se pueden obtener muy buenos resultados llegando a ser páginas muy similares a las dinámicas en cuanto a su visualización se refiere. Esta es una opción más que suficiente para aquellos que simplemente ofrecen una descripción de su empresa, quiénes somos, donde estamos, servicios, etc.… ideal para empresas que no quieren muchas pretensiones con su sitio Web, simplemente informar a sus clientes de sus productos y dar a conocer su perfil de empresa, entre otros.
• La principal ventaja de este tipo de páginas es lo económico que pueden resultar, sin embargo pueden con toda seguridad llenar las expectativas deseadas, con un diseño elegante, moderno y funcional incluyendo las imágenes y el texto con el cual se desea mantener informados a los clientes en todo momento.
POR EJEMPLO:
- Wikipedia
- pagina de alguna institución educativa
- pagina de algún famoso
LAS PAGINAS DINÁMICAS
Se construyen haciendo uso de otros lenguajes de programación, siendo el más utilizado de todos el PHP, con lo cual se pueden definir las funciones y características que se deben cumplir de acuerdo a las necesidades.
• Estas permiten la creación de aplicaciones dentro de la propia Web, ofrecen también una mayor interactividad con los usuarios que la visiten. Otras funcionalidades que se pueden crear mediante las web dinámicas son las aplicaciones como encuestas y votaciones, foros de soporte, libros de visita, gestor de noticias, entre otros.
• La creación de una página web dinámica es más compleja, ya que se requiere de conocimientos específicos de lenguajes de programación y gestión de bases de datos. Mediante la creación de una página web dinámica, el cliente o empresa que la solicite recibirá prácticamente 2 páginas en una, ya que por un lado tendrá un panel de administración no visible por los usuarios visitantes de la web y por otro lado tendrá lo que es la web públicamente visible para los usuarios.
• Sus ventajas: Realmente sus ventajas y posibilidades son infinitas, con este tipo de páginas web se puede hacer todo lo que se desee, desde una simple web informativa, hasta una potente herramienta de trabajo rica en contenido dinámico, además de que puede ser manejada y actualizada incluso por el propietario de la web sin la intervención de un programador.
3 EJEMPLOS:
- YouTube
El protocolo de IP
- 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.
(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:
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 Internet 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.
Insistimos en que es algo que se usa con mucha frecuencia, ya que moverse por Internet 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?
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 Internet 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.
Podemos encontrar muchos navegadores diferentes en la actualidad. Numerosas empresas como:
Microsoft: es una compañía tecnológica multinacional consede en Redmond, Washington, EE.UU. Microsoftesel acrónimo de microcomputer y software
Mozilla: es un navegador web libre y de código abierto desarrollado para Linux, Android, iOS, macOS y Microsoft Windows coordinado por la Corporación Mozilla y la Fundación Mozilla. Usa el motor Gecko para renderizar páginas web, el cual implementa actuales y futuros estándares web.
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»).
Internet Explorer: es una serie de navegadores web gráficos desarrollados por Microsoft para el sistema operativo Microsoft Windows desde 1995. Se lanzó por primera vez como parte del paquete complementario Plus! para Windows 95 ese año. Las versiones posteriores estaban disponibles como descargas gratuitas, o en Service Packs, e incluidas en determinadas versiones OEM de Windows 95 y de forma predeterminada en versiones posteriores de Windows. Actualmente el navegador está descontinuado, pero aún recibe mantenimiento. En el año 2015 se anunció que a partir de Windows 10 se sustituye por Microsoft Edge
Una de las herramientas que más usamos en nuestro día a día, independientemente de que lo hagamos como usuarios domésticos o como profesionales. Sin los navegadores, consultar el contenido que ofrece y que amplía Internet a cada día que pasa sería una tarea prácticamente imposible. Son el vehículo que permite conectar nuestro dispositivo al entorno digital a través de una conexión a Internet.
¿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.
¿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.
¿QUÉ ES UNA TABLA 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é son Marcos (frames)?
Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras desliz-adoras. Los navegadores que lo implementan son a partir del Netscape 2.0, y el Explore 2.0 en adelante.
Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.
Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una página con dos frames. El de la izquierda va a servir de índice de lo que veamos en el de la derecha, y en éste veremos inicialmente una página de presentación. Se podrá acceder también aquí a la página personal creada con anterioridad, si se pulsa un enlace en el frame de la izquierda.
Los frames (también llamados marcos) son usados para dividir una página web en varias partes, cargando otra página web en cada una de ellas. Por defecto se muestran con un borde que permite redimensionarlos según necesitemos.
Para crear una página web dividida en frames usaremos la etiqueta HTML <frameset>, y dentro de ella insertaremos una etiqueta <frame> por cada marco que deseemos crear, así como la etiqueta <noframes>, cuyo contenido se mostrará en los navegadores web que no soportan frames.
¿Qué es un software de 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.
¿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
- 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