Software de diseño:

Páginas web.

Introducción al Diseño Web:

1. Páginas web y sitio.

2. Conceptos básicos (dominio, URL, hosting, applets)
3. Elementos de una página web.
4. Estándares de diseño (w3c)

HTML Y CSS:

1. Estructura básica de la web: html, head, body.

2. Elementos básicos: titulo, párrafos, imágenes, hipervínculos y videos)
3. Maquetación web: tablas, divs, clases, menus.
4. Estilos básicos: tamaño, colores y fuentes.
5. Diseño y usabilidad: márgenes y posiciones de los elementos.

Diseño de página web usando software de aplicación.

Publicar sitio web.

Introducción al diseño web.

Páginas web y sitios:

Los conceptos de página web es el documento HTML que contiene toda la información ya se
textual, grafica, visual o sonora. y sitios web es un conjunto de paginas web que lo conforman

1. Conceptos básicos (dominio, URL, hosting, applets)

Dominio: Un dominio en Internet es el nombre exclusivo y único que se le da a un sitio web para
que cualquier internauta pueda visitarlo e identificarlo.

URL: significa Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más
que una dirección que es dada a un recurso único en la Web. En teoría, cada URL valida apunta a
un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imágenes, etc.

Hosting: El hosting, o alojamiento web es un servicio donde podrás alojar todos los contenidos
necesarios (textos, imágenes, bases de datos, emails…) para que tu web y correo sea accesible por
cualquier usuario en internet en cualquier momento.

Tipos de hosting

Hosting compartido: este tipo de alojamiento es el más empleado. Dentro de un mismo servidor,
compartiendo recursos de CPU y RAM se alojan múltiples hostings. Este servicio está pensado para
proyectos ligeros tanto personales como profesionales que no requieren de un uso demasiado
intensivo de los recursos del servidor.

Hosting VPS: en esta modalidad de alojamiento dispones de un servidor virtual con unos recursos
de CPU y RAM garantizados para tu alojamiento. Al tener una serie de recursos dedicados para tu
web evitas problemas de falta de recursos derivados de los hostings compartidos. Este tipo de
alojamiento es el paso intermedio entre una máquina dedicada y el hosting compartido.

Hosting dedicado: en este caso dispones de un servidor físico enteramente para tu proyecto. Esto
significa que tienes toda la potencia de CPU y RAM disponible del servidor en exclusiva para tu
web. Se recomienda este tipo de servicios para web con un alto consumo de recursos.

Hosting Cloud: es un servicio de alojamiento donde los recursos de tu máquina se adaptan al

consumo de la web. De esta forma cuando la web tenga pocas visitas, tendrá una cantidad de
recursos asignados pequeña y cuando tengas picos de visitas, la potencia de la máquina
aumentará para poder seguir ofreciendo un servicio de forma óptima. Los servicios de Cloud están
pensados para ofrecer una cantidad de recursos superior a la que puede ofrecer un servidor
dedicado y están pensados para las webs más exigentes o los eventos más importantes.

Definición de Applet: El Applet es un programa que puede incrustarse en un documento HTML

(página Web). Cuando un Navegador carga una página Web que contiene un Applet, éste se
descarga en el navegador Web y comienza a ejecutarse, lo cual nos permite crear programas que
cualquier usuario puede ejecutar. Uno de los requisitos para el applet funcione es tener instalado
Java y que esté activado a través del explorador web.
Elementos de una página web.

Cabecera o header web

El header, cabecera o encabezado, como su nombre indica, es una “franja” horizontal que está
en la parte superior de la página y ocupa el 100% del ancho. Es un elemento que tiende a
repetirse en todas las secciones de la web aunque con excepciones. Por ejemplo, la página en
la que estás leyendo este artículo tiene una clara cabecera: La cabecera se sitúa entre las
etiquetas de HTML <header></header>, que es donde verás siempre o casi siempre el menú
de navegación de la página acompañado de otros elementos: carrito de compra, logotipo de la
web, selector de idiomas, etc. Entonces, ¿qué ventajas tiene añadir un header a tu web? Pues
que aporta al site una coherencia y continuidad necesaria para el visitante.

Cuerpo o body web

El cuerpo de una web o body se ubica entre el header y el footer. Comprende todo aquel
contenido que posee la página o sección de la web y que la hace única. Es un contenedor. Para
que lo visualices: no es lo mismo el contenido que existe en una página de contacto, que en la
de un producto que está a la venta, que en una home. Es la parte más importante de la página
y la que te interesa como usuario:

Pie o footer web

Por último quedaría por identificar el footer o pie de página. Esta sección de la web se
encuentra situada al final de la misma. Sí, como ves, los nombres son bastante coherentes con
su posición en la web. ¿Te imaginas que no fuera así? Sería de locos.

Y como vas a adivinar, podrás localizar el contenido del footer dentro del código entre las
etiquetas <footer> y </footer>. ¡Premio si has acertado!

Al igual que ocurre con la cabecera o header, esta sección se repite en todas las subpáginas de
la web pero con excepciones (como antes, una landing page no tiene por qué añadir
elementos a su pie de página). El footer suele incluir unos elementos empleados en la mayoría
de sitios que puedas visitar, como información de contacto, botones de redes sociales, avisos
legales, secciones secundarias, etc.
Estándares de diseño (w3c) por sus siglas en ingles Wordl Wibe
web.

Creados para guiar la web a un mejor rendimiento y mejorar la

funcionalidad operativa para los navegadores y los usuarios.

Estos son algunos de los aspectos que verifica W3C

Calidad en el código: Usar correctamente las etiquetas, no usar id

repetidos, evitar errores de JavaScript, entre otros.

Accesibilidad para usuarios: Utilizar los atributos "alt" para todas

las imágenes, usar enlaces descriptivos, contraste en los colores,
entre otros.

Accesibilidad para dispositivos: Funciona en la mayoría de los navegadores y sus versiones más
antiguas, valida si funciona en dispositivos móviles y en diferentes tamaños de pantalla, entre
otros.

Gestión del sitio: No tiene enlaces rotos, usa una página 404 personalizada, usa urls amigables,
entre otros.

HTML Y CSS:

Estructura básica de la web: html, head,

body.

Para crear una página web se necesita un

documento usando 3 elementos o tags
principales, y body.

Estos tres se combinan para describir la

estructura básica de la página:

<html>: Este elemento envuelve todo el

contenido de la página (excepto la DTD)

<head>: Este elemento designa la parte de

encabezado del documento. Puede incluir
información opcional sobre la página Web, como
puede ser el título (el navegador lo muestra en la
barra de título), palabras clave de búsqueda opcionales y una hoja de estilo opcional.

<body>: Este elemento alberga el contenido de su página Web, es decir, aquello que queremos
que aparezca en el área de navegación del navegador..

Sólo hay una manera correcta de combinar estos tres elementos. He aquí su colocación exacta,
con el doctype al comienzo de la página:
Toda página Web requiere un elemento <title> en la sección del encabezado. A continuación,
deberá crear un contenedor para el texto en la sección del cuerpo de texto (<body>).

Un elemento contenedor de texto multiuso es <p>, que representa un párrafo. Veamos con más
detalle los elementos que hay que agregar:

<title>: Establece el título de la página Web, el cual tiene varias funciones. Primero, los
navegadores lo muestran en la parte superior de la ventana. Segundo, cuando un visitante crea un
marcador para la página, el navegador emplea el título para etiquetarlo en el menú Marcadores (o
favoritos). tercero, cuando la página aparece en una búsqueda Web, el motor de búsqueda suele
enseñar este título como primera línea en los resultados, seguido de un fragmento del contenido
de la página.

<p>: Indica un párrafo. Los navegadores no los sangran pero añaden un pequeño espacio entre
varios consecutivos para mantenerlos separados.

Elementos básicos: titulo, párrafos, imágenes, hipervínculos y videos

El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la
Web fundamentalmente en busca de información expresada en hipertexto.

NOTA:

Los textos han convertido el inglés en el idioma universal de la red. En su objetivo por alcanzar la
mayor audiencia posible, muchos sitios ofrecen su información y sus servicios en su idioma natal y
en otros idiomas, fundamentalmente en inglés.

IMÁGENES

Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por lo
tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer
información visual del contenido y mostrar un diseño atractivo y personal.

ESPACIO WEB

Espacio Servidor de páginas Web

Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor.

UN NOMBRE DE DOMINIO

El nombre de dominio es la primera parte de una dirección Web que identifica al servidor que
almacena y sirve su sitio.

HIPERVÍNCULOS

Enlaces, hipervínculos en HTML

Por sí misma, una página Web no puede hacer mucho. La magia de verdad comienza cuando
relaciona varias páginas mediante enlaces.

VIDEO

Vídeo en Sitio Web

Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de video
se hacen más cercanos a los usuarios.

Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara
incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.

ANIMACIONES EN FLASH

Animación Web con reproductor Flash Player

Es una imagen animada, fácil de crear y sobre todo que ocupa poca memoria. Tiene diferentes
usos, desde la creación de dibujos animados hasta el despliegue de dibujos interactivos.

SONIDOS

Sonido en páginas Web

Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales

móviles como el iPhone ha potencializado este elemento.

Además de incorporar sonido en la página Web puede descargar de ellas archivos de audio para
sus dispositivos móviles.

El formato MP3 es el más conocido y usado por su calidad y nivel de compresión.

Maquetación web: tablas, divs, clases, menus.

La maquetación web es la distribución de los elementos de nuestra página. Consiste en

transformar el diseño de una web en un conjunto de archivos (html, css y javascipt) para que los
navegadore web puedan interpretarlos y reproducirlos correctamente en diferentes dispositivos.

Tablas se usan principalmente para mostrar datos tabulados y aunque se suelen usar también
para maquetar la pagina web se recomienda usar la etiqueta <div> para ello.

Para crear una tabla se utiliza la etiqueta <table>, con <tr> y con <td>

La maquetación con css y Divs:

. Sirve para crear secciones o agrupar contenidos.

Sus etiquetas son: <div> y </div> (ambas obligatorias).

atributo descripción valor

Genéricos

Texto informativo o título del elemento. Suele Texto legible por personas. Sensible a M/m.. Por
title 
mostrarse a modo de "tool tip". defecto: Lo fija el navegador.

Le da un nombre al elemento que lo diferencia Un nombre único. Sensible a M/m. Por defecto: Lo

id 
de todos los demás del documento. fija el navegador.

Asigna nombres de clases al elemento. Por Lista de clases separadas por espacio en blanco.
class 
defecto, clases CSS. Sensible a M/m. Por defecto: Lo fija el navegador.

Permite especificar información de estilo. Por Declaraciones de estilo. Por defecto: Lo fija el

style 
defecto, estilos CSS. navegador.

Información sobre el idioma del contenido del Un código de idioma. Por defecto: "desconocido".
lang 
elemento y del valor de sus atributos. Lo fija el navegador.

Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En

dir  Indica la dirección de texto y tablas.
castellano 'ltr'. Lo fija el navegador.

Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,

onkeydown, onkeyup.

Específicos

Enlaza a una fuente de datos externa (individual

datasrc Una dirección URI. Por defecto: Lo fija el navegador.
o tabular). Reservado para posibles usos futuros.

El nombre de una propiedad o columna

datafld de datasrc. Reservado para posibles usos Por defecto: Lo fija el navegador.
futuros.
 Indica como deben ser tratados los datos
dataformata Uno de los siguientes: 'paintext' o 'html'. Por
obtenidos de datasrc. Reservado para posibles
s defecto: 'plaintext'
usos futuros.

De transición

Uno de los siguientes: "left", "center", "right", o

align Alineación del texto.
"justify". Por defecto: 'left', lo fija el navegador

Clases:
Las clases son "funciones especiales", Declaración de clases
Una manera de definir una clase es mediante una declaración de clase. Para declarar
una clase, se utiliza la palabra reservada class y un nombre para la clase "Rectángulo".

MENU

El elemento menu (directorio) es un elemento desaprobado. En su origen fue

pensado para crear menús, en la actualidad es inutil.

Sus etiquetas son: <menu> y </menu> (ambas obligatorias).

Estilos básicos: tamaño, colores y fuentes.

Esto se hace a partir de la etiqueta <font> y su cierre correspondiente, </font>.

Dentro de esta etiqueta deberemos especificar los atributos correspondientes a
cada uno de estos parámetros que deseamos definir. 

 Atributo face define el tipo de letra

 Atributo size define el tamaño de la letra. Existen 7 niveles donde 1 e sel

mas pequeño. size=2

 Atributo color El color del texto puede ser definido mediante el atributo
color. Cada color es a su vez definido por un número hexadecimal que
está compuesto a su vez de tres partes.

 Valo Des
 r
N hexa crip
deci ción
mal

#00
FFF
Cyan F  

#808
Gray 080  

#000
Navy 080  

#C0
C0C
Silver 0  

#000
Black 000  

#008
Green 000  

#808
Olive 000  

#008
Teal 080  

#000
Blue 0FF  

#00
FF0
Lime 0  

#800
Purple 080  

#FF
FFF
White F  

#FF
Fuchsi 00F
a F  

Maroo #800
n 000  

Red #FF  
 0000

#FF
Yello FF0
w 0  

Diseño y usabilidad: márgenes y posiciones de los elementos.

La usabilidad es la facilidad con las que las personas interactúan con una herramienta
con el fin de alcanzar un objetivo concreto. ... El Diseño Centrado en el Usuario(DCU) no
es otra que diseñar pensando en mejorar la usabilidad, la accesibilidad y la satisfacción
que obtienes al interactuar con una interface.