GÉNESIS DISEÑOS WEB: MÓDULO DE DISEÑOS DE PÁGINAS WEB

Módulo de Diseño y Desarrollo Web

Resultado de imagen para 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.

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>: Sirve para crear secciones o agrupar contenidos.
</p> : Permite asignar un texto.
<html> : Texto informativo o titulo del elemento.
<head> : Contiene información sobre la pagina.
<body> :Representa el contenido de un documento HTML.
<h1> :Texto muy grande.
<h2>Texto grande.
<h3>Texto algo más grande de lo normal.
<h4>Texto normal.
<h5>Texto pequeño.
<h6>Texto muy pequeño.
<style> : Permite especificar información de estilo. Por defecto, estilos CSS.
<title> : Texto informativo o título del elemento. Suele mostrarse a modo de "tool .tip" .
<class> :Asigna nombres de clases al elemento. Por defecto, clases CSS.
<strong>: Para poner una palabra en negrita.
<img>: Para insertar una imagen.
<br>: Permite un salto de linea en el texto .

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

Resultado de imagen para que es una pagina web

Estas se dividen en:

PÁGINAS WEB DINÁMICAS
PÁGINAS WEB ESTÁTICAS

Resultado de imagen para que es una pagina web estatica

PÁGINAS WEB DINÁMICAS

Los sitios web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia web, otorgando una mayor interactividad con el navegante.

paginas web dinamicas, paginas web dinamicas en bogota, diseÃ±o de paginas web dinamicas, pagina web dinamica

EJEMPLOS:

YOUTUBE

FACEBOOK

GOOGLE

PÁGINAS WEB ESTÁTICAS

Los sitios Web estáticos 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.

EJEMPLOS:

WEB QUEST

BLOC O BITÁCORA

Resultado de imagen para BLOC O BITACORA

WEB INFORMATIVA

Resultado de imagen para WEB INFORMATIVA

¿QUÉ ES EL 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.

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

EJEMPLOS:

MICROSOFT EDGE

MOZILLA FIREFOX

MAXTHON

¿QUÉ SON NAVEGADORES WEB?

Un navegador web 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.

EJEMPLOS:

Navegador web de opera

Navegador web safari.

Google Chrome.

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

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.

¿QUÈ ES UNA TABLA O PLANTILLA?

Una tabla es una forma de representar mucha información de manera esquematizada, ordenada y compacta. Aunque Wikipedia acepta el código HTML para la creación de tablas como en cualquier página web, posee también un código propio, cuya sintaxis basada en barras verticales resulta bastante más limpia y compacta.

Resultado de imagen para tabla o plantilla en diseÃ±os web

¿QUÈ SON MARCOS ( FRAMES )?

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>

Resultado de imagen para frames en diseÃ±os web

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

También tenemos el editor de texto sin formato. 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.

Existen editores de texto específicamente diseñados para la edición Web, que como Kate, incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto. Dichos editores incluyen una serie de botones para insertar rápidamente las etiquetas, o combinaciones de estas, más corrientes, salvar el documento con un clic y visionarlo posteriormente en una nueva ventana. el paquete

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

¿QUÈ ES UN SERVIDOR WEB?

Un servidor web o servidor HTTP es un programa informático que procesa una aplicación del lado del servidor, realizando conexiones bidireccionales o unidireccionales y síncronas o asíncronas con el cliente y generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente. El código recibido por el cliente es renderizado por un navegador web. Para la transmisión de todos estos datos suele utilizarse algún protocolo. Generalmente se usa el protocolo HTTP para estas comunicaciones, perteneciente a la capa de aplicación del modelo OSI. El término también se emplea para referirse al ordenador.