DISEÑO DE PAGINA WEB

                                             MODULO 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.


Etiquetas

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.
Esquema etiqueta HTML
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>:
permite asignar un propósito a mi pagina .Se utiliza comúnmente en el desarrollo de documentos con propósitos estilísticos, en conjunto con los atributos style y class .
</p>:
permite asignar un parrafo o un texto.
<html>:
Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las etiquetas <head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por lo tanto, el aspecto básico de cualquier página web
<head>:
La etiqueta <head> contiene información sobre la página. Por ejemplo contiene etiquetas que pueden decir de qué trata la página, el título que debe de mostrar en la barra del navegador, o código javascript y estilos, que pueden estar en el propio encabezado o como enlaces a otros archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el navegador, es una etiqueta que contiene declaraciones sobre la página pero no contenido propiamente dicho como texto o imágenes.
  • <tille>:


Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".
  • <body>:


En el <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.
  • <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.
  • <CLASS>:


ASIGNA NOMBRES DE CLASES DE ELEMENTO
  • <STYLE>:


PERMITE ESPECIFICAR INFORMACIÓN A NUESTRO ELEMENTO
  • <br />:
permite un salto de linea en el texto.


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.
pagina web
Una página web, o página electrónicapágina digital, o ciberpágina12​ es un documento o información electrónica capaz de contener texto, sonidoví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 cascadaguiones (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).

paginas web dinamicas
Hasta hace no tanto tiempo, todas las páginas web eran estáticas. Eran páginas en las que se mostraba información de manera permanente. Construidas principalmente con HTML. Su aspecto puede ser muy parecido al de una web dinámica, pero no te dejes engañar. No tienes acceso fácil a actualizar el contenido de la web, necesitas ayuda de la persona que la costruyó para hacer la más mínima alteración del texto, etc. Estas páginas son sumamente simples, no tienen posibilidad de añadirles un blog o otro tipo de aplicaciones para añadirles funcionalidades. No son páginas web que puedan ser mantenidas fácilmente por una persona que no tenga conocimientos de programación.
Hoy en día la mayoría de las nuevas páginas web que se crean son dinámicas. Se construyen usando además otros lenguages de programación como PHP que permiten programar en ellas aplicaciones para todo tipo de funciones: blogs, foros, tiendas, etc. La característica principal es que el contenido es fácilmente y frecuentemente modificado.

paginas web estatica
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.

que 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 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 Google, Microsoft o incluso Mozilla se han lanzado a este terreno para llevar al público propuestas del estilo de Chrome o Internet Explorer, este último todo un nombre histórico en lo que a navegar por la red se refiere.
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.
¿Que 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 desarrolladorespueden dotar de un estilo unificado a todos los apartados y páginas de una web, consiguiendo una imagen homogénea y característica.
Además de todo esto, es de los primeros ficheros que los programadores crean a la hora de construir una nueva web. A través de él, plasman las señas de identidad de la imagen de marca de la compañía tras la página, estableciendo los parámetros esenciales con los que marcar la línea estética de la web. Una vez está hecho, puede modificarse a medida que se avanza en el desarrollo para realizar diferente ajustes con el fin de conseguir un mejor resultado.
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.
¿que es una hoja o plantilla?
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.
Vualà además incorpora algunas plantillas que permite maquetar la información en varias columnas. El número de plantillas se iran aumentando progresivamente con la evolución de la herramienta. Se pueden consultar las plantillas disponibles en la documentación de Vualà.
¿Que 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 deslizadoras. Los navegadores que lo implementan son a partir del Netscape 2.0, y el Explorer 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.
¿Què son sofware de ediciòn de sitios web?
Software es el conjunto de reglas y parámetros que utiliza el hardware para realizar sus tareas, entre otros:
  • Manual de procedimiento
  • Equipo adicional u opcional.
  • Programas como: antivirus, procesador de palabras, programa para gráficas  correo electrónico  pagina web, navegadores, trasladar archivos a Internet, música, vídeo.
 
¿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:

No hay comentarios:

Publicar un comentario

ETIQUETAS HTML

Etiquetas Las  etiquetas  (marcas)  delimitan  cada uno de los elementos que componen un documento HTML. El lenguaje HTML se basa en et...