Diseño Web

 Introduccion al Diseño Web

Es la actividad que consiste en la planificacion, diseño e implementacion de sitios web, paginas web requiere navegatividad, interactividad, usabilidad, arquitectura de la informacion y la interaccion de medios como el audio, texto, imagen y video.

El diseñador web comprende perfectamente que la union de un buen diseño con una jerarquia bien elaborada de contenidos aumenta la eficiencia de la web.

Conceptos Basicos

Internet: es la interaccion desentralizada de redes de computadora implementada en un conjunto de protocolos. Sus origines se remontanm a 1969, cuando se establecio la primera coneccion de computadoras llamadas ARPANET.

Funciones de la web: para la visualizacion de una pagina web se comienza tecleando URL de la pagina en el navegador, o bien siguiendo un enlace de hipertexto.

El proceso que el usuario no ve es el siguiente:

• Decodifica el nombre de la URL a una direccion IP usando la base de datos de DNS, con la direccion IP se localiza el servidor web en donde esta la informacion.
• Se envia una peticion HTTP al servidor web solicitando la inforamacion.
• Despues de recibir del servidor la informacion de la pagina segun haya sido codificada en HTML, CSS, y otros lenguajes de programacion.

La Web: es una palabra inglesa que significa red den telaraña se designa como la web del sistema de gestion de informacion mas popular para la transmision de datos por internet.

La web es el conjunto de informacion que se encuentra en una direccion determinada de internet.

Servicios que ofrece el internet:

• Comunicacion 
• Correo Electronico
• Entretenimiento
• Grupos de Noticias 
• Servicio de telefonia 
• Wordl Wide Web (WWW).

Protocolos de internet: la familia de protcolos de internet es un conjunto de protocolos de internet que se emplean para transmitir datos entre ordenadores a treves de internet. Existen mas de 100 protocolos cada uno especializado en una funcion o en un tipo de comunicacion concreta.


Un ejemplo, es el protocolo HTTP, se emplea para la transmision de las paginas web y el protocolo FTP, se emplea para la transmision de ficheros.

Navegador: es un software que permite el acceso a la web, interpretando la informacion de distintos tipos de archivos y sitios web para que estos puedan ser utilizadas.

 

Ejemplos:

• Chrome
• Opera
• Internet Explore
• Microsoft Edge
• Moxila FireFox
• Zafari

 Buscador: es un sistema informatico que busca archivos almaceandos en servidores web gracias al internet.

Ejemplos:

• Google
• Yaho
• Bing
• Altavista

Hosting: es un servicio de alojamiento para sitios web, un espacio para poder almacenar informacion, imagenes, videos o cualquier via web.

Tipos de alojamientos web:

• Gratuito
• Compartido
• De imagenes 
• Revendedor 
• Virtuales 
• Servidores dedicados 
• Colocacion 

Servidor web: es un programa que utiliza el protocolo de transferencia de hipertexto (HTTP) para servir los archivos que forman paginas web a los usuarios, las computadoras y los dispositivos dedicados tambien pueden denominarse servidores web.

HTML: es el formato estandar de las paginas web es el lenguaje con el que se define el contenido de las paginas web.

Lenguaje de marcas hipertextuales basicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondran una pagina web.

El codigo fuente de un programa informativo es un conjunto de lineas de texto con los pasos que debe seguir la computadora para ejecutar dicho porgrama.

CSS: es un lenguaje de hoja de estilo creado para controlar el aspecto o presentacion de los documentos electronicos difinidos con HTML.

RSS: facilita la gestion y la publicacion de informacion y noticias web.

Hipertexto: es un conjunto estructurado de texto, graficos, imagenes o sonidos unidos entre si por enlaces o vinculos y conexiones logicas actualmente el hipertexto esta siendo reemplezado por la hipermedia. 

Pagina Web: es un documento HTML que es accesible generalmente mediante protocolo de internet HTTP. Documento compuesto por texto, imagenes, videos o audios a los que se puede acceder a traves de WWW. 

Sitio Web: es un conjunto de paginas web que se encuentran relacionadas por el contenido y por un dominio de internet y que constituye una gran red de informacion.

Existen dos tipos de sitios web:

• Sitio web estatico 
• sitio web dinamico

Elementos de una pagina web:

• Texto
•  Imagenes
• Audio
• Animaciones
• Videos
• Continido Screpts

Un sitio web es una computadora conocida como servidor web tambien llamado HTML y se utiliza dos tecnologias para desarrollar una pagina web.

• Tecnologia del lado cliente: el cliente web por excelencia es el navegador web, existe un conjunto de estandares web definidos por el W3C que todo navegador debe implementar.
• Tecnologia del lado servidor: los estandares no son necesarios en el servidor porque cada organizacion desarrollara su servidor con la tecnologia de su eleccion.

Servidores son: PHP, ASP, Nade, JS, MYSQL.

Clasificacion de los sitios web:

• Sitios de entretenimiento
• Sitios comerciales
• Sitios informatrivos 
• Sitios personales 

URL: es una secuencia de caracteres que se utiliza para localizar un documento HTML en internet.

Ejemplo:

• unah.edu.hn
   ↓           ↓

Nombre  Dominio

Ejm Dominios: 

• .edu
• .hn
• .com
• .net
• .es

DNS: sistema de dominios son servidores que cuentan con la base de datos de identificacion de la IP de las computadoras que se conectan a internet y las decodifica aun nombre. 

Host: es la computadora conectada a la red que provee y utiliza los servicios. 

Diferencias entre Diseño Web y Desarrollo Web 

Estructura o Anatomia de una Pagina Web

Las paginas web estan compuestas por unos pocos elementos que se adaptan al contenido. Los prototipos de paginas web se presentan en dos o tres columnas con un encabezado pie de pagina.  Lo que distingue los sitios web es la imaginacion y variedad utilizada en su construccion generalmente 

la cabecera de un sitio web aparece en la parte superior de la pagina, el pie de pagina en la parte inferior de la misma y el contenido principal en el medio.

Las imagenes de fondo o color se utilizan para darle un lienzo ala pagina.

L a clave para conseguir un gran sitio web es vincular todos los elementos de una forma coherente y organizada.

La estructura de una pagina web es la siguiente:

Encabezado de una pagina web

Es vital que tenga el logo, el menu de navegacion y en ciertos casos una publicidad corta en imagenes y el nombre de la pagina donde se encuentra dentro del sitio.

Elemetos que lleva el encabezado de una pagina web:

• Logo
• Menu de navegacion
• Publicidad
• Nombre de la pagina donde se encuentra actualmente

Area de contenido

Esta parte de la pagina web aparce debajo del encabezado y se sub-divide, dispone de varios estilos regulados por textos, imagenes, y una repeticion del menu de navegacion.

Pie de pagina 

Se encuentra en la parte inferior ofrece informacion de contacto, enlaces y repeticion del menu de navegacion.

Las formas de organizar la informacion en una pagina web son:

• Estructura lineal ( facilita la navegacion por el sitio y el posicionamiento).
• Estructura de jerarquia (facilita la navegacion por niveles es decir menu).
• Estructura en real ( permite acceder a cualquier lugar del sitio).

Fundamentos de diseño de una pagina web 

Son aspectos en los que se basa un buen diseño como lo son el color, la forma y la tipografia. 

 

El diseñador debe saber toda la informacion posible de lo que se va transmitir para utilizar los elementos graficos adecuados, su imaginacion, y todo aquello que pueda servis para la comunicacion del mensajue. 

Color: es una sensacion que produce en respuesta a la estimulacion del ojo.

Todos los colores nos hacen persibir una reaccion fisica.

Existen dos formas basicas con positivas del color:

• Armonia: coordinar los diferentes valores que el color adquiere en una composicion.
• Contraste: se produce cuando en una composicion los colores no tienen nada en comun.

Tipografia: es el estudio del diseño y clasificacion de los diferentes familias o tipos de letra.

El texto debe ser legible y puede cambiar en grosor.

Contenido: el contenido de una pagina web debe de ser lo mas esencial, este contenido debe de llevar diseño y aplicar los fundamentos de diseño.

Logotipo: debe de tener diferentes tamaños para ser ubicados en el encabezado, pie de pagina o menu de navagacion. El logotipo lleva el enlace a la pagina inicio. 

Introducción a HTML5 Y CSS3

HTML es lo que se utiliza para crear todas las paginas web de internet. Mas concretamente, HTML5 es el lenguaje con el que se escriben la mayoría de paginas web.

Los diseñadores utilizan el lenguaje HTML para crear sus paginas web, los programas que utilizan los diseñadores generan paginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las paginas web después de leer su contenido HTML.

Etiqueta	Función
<!–…–>	Define un comentario
<!DOCTYPE>	Define el tipo de docuemento
<a>	Define un hipervínculo
<abbr>	Define una abreviación
<address>	Define la información de contacto del autor / propietario del documento
<area>	Define un área dentro de un mapa de imagen
<article>	Define un artículo
<aside>	Define el contenido lateral del contenedor de una página
<audio>	Define contenido de sonido
<b>	Define texto en negrita
<base>	Especifica la base donde se abrirán todas las URL del documento
<bdi>	Aísla una parte del texto que puede tener un formato diferente del texto externo
<bdo>	Sobreescribe la dirección del texto
<blockquote>	Define una sección que tiene otra fuente
<body>	Define el cuerpo del documento
<br>	Define un salto de línea
<button>	Define un botón clickeable
<canvas>	Se usa para dibujar gráficos en pantalla
<caption>	Define el título de una tabla
<cite>	Define el título de un trabajo
<code>	Define un trozo de código de programación
<col>	Especifica las propiedades de la columna para cada columna del elemento <colgroup>
<colgroup>	Especifica un grupo de una o más columnas de una tabla
<command>	Define un botón command al que un usuario puede invocar
<datalist>	Especifica en un input una lista pre-definida de opciones
<dd>	Define la descripción de un ítem en una lista de definición
<del>	Define un texto que ha sido definido en un Mdocument
<details>	Define detalles adicionales que el usuario puede ver o esconder
<dfn>	Define el término de una definición
<dialog>	Define una caja o ventana de dialogo
<div>	Define una sección en un documento
<dl>	Define una lista de definición
<dt>	Define un término (un ítem) en una lista de definición
<em>	Define énfasis en un texto
<embed>	Define el contenedor de una aplicación externa (no html)
<fieldset>	Grupo de elementos relacionados en un formulario
<figcaption>	Define el título para una figura <figure>
<figure>	Especifica auto-contenido
<footer>	Define el pie de página de un documento
<form>	Define un formulario html
<h1> a <h6>	Define encabezados o títulos
<head>	Define información hacerca del documento
<header>	Define la sección de encabezado del docuemnto
<hgroup>	Grupo de encabezado (<h1> a <6>)
<hr>	Define un cámbio de temática a partir de una línea dibujada
<html>	Define la raíz del documento
<i>	Define una parte del texto de modo alternativo
<iframe>	Define un frame en línea
<img>	Define una imagen
<input>	Define un control de entrada de texto
<ins>	Define texto que ha sido insertado en un documento
<kbd>	Define entrada del teclado
<keygen>	Define un campo generador de claves para formularios
<label>	Define el rótulo para un elemento <input>
<legend>	Define un título para los elementos <fieldset>, <figure>, <details>
<li>	Define un ítem de una lista
<link>	Define la relación entre un documento y un recurso externo (generalmente con hojas de estilo)
<map>	Define un mapa de imagen del cliente
<mark>	Define texto resaltado o marcado
<menu>	Define la lista de un menú
<meta>	Define un metadato de un documento
<meter>	Define una medida escalar en un rango conocido
<nav>	Define un link de navegación
<noscript>	Define un contenido alternativo para los usuarios que no soportan scripts del cliente
<objet>	Define un objeto embebido
<ol>	Define una lista ordenada
<optgroup>	Define un grupo de opciones relacionadas en una lista desplegable
<option>	Define una opción en una lista desplegable
<output>	Define el resultado de un cálculo
<p>	Define un párrafo
<param>	Define un parámetro para un objeto
<pre>	Define texto pre-formateado
<progress>	Representa el progreso de una tarea en una barra
<q>	Define una cita corta
<rp>	Define que debe mostrar en navegadores que no soportan scripts de ruby
<rt>	Define una pronunciación de caracteres
<ruby>	Define una notación de ruby
<s>	Define texto que no es correcto
<samp>	Define un ejemplo de salida de un programa
<script>	Define un script del lado cliente
<section>	Define una sección de un documento
<select>	Define un drop-down list
<small>	Define texto pequeño
<source>	Define los recursos para elementos multimedia
<span>	Define una pequeña sección de un documento
<strong>	Define un texto en negrita
<style>	Define un estilo para la información de un documento
<sub>	Define un texto que es subíndice
<summary>	Define un encabezado visible para el elemento <details>
<sup>	Define un texto que es superíndice
<table>	Define una tabla
<tbody>	Define el cuerpo de una tabla
<td>	Define una celda en una tabla
<textarea>	Define un control de entrada de múltiples líneas
<tfoot>	Agrupa los footer contenidos en una tabla
<th>	Define una celda de encabezado en una tabla
<thead>	Agrupa los encabezados de una tabla
<time>	Define fecha / hora
<title>	Define un título para el documento
<tr>	Define una fila en una tabla
<track>	Define texto de la pista para elementos multimedia (vídeo y audio)
<ul>	Define una lista desordenada
<var>	Define una variable
<video>	Define un vídeo o película
<wbr>	Define un posible salto de linea

 

El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es mas que una adaptación de HTML al lenguaje  XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML ( que a su vez, también desciende de SGML).

CSS3

 

CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos.

DreamWeaver

Adobe Dreamweaver es una aplicación informática destinada a la construcción, diseño y edición de sitios y aplicaciones Web basados en estándares. Fue creada por Macromedia y tras la desaparición de esta compañía pasó a manos de Adobe Systems.

Destacó su integración con otras herramientas como Adobe Flash y más recientemente, su soporte de los estándares del World Wide Web Consortium.

La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización, puesto que sus rutinas (como insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas de Javascript lo que permite que los programadores y los editores web hagan extensiones para el programa según sus necesidades.