Diseño web

 Aproximación a internet
 Alojamiento web y contratación de dominios.
 Diseño Web y creación de sitios web
 Generación de sitio web utilizando Google Sites.
 Dreamweaver CS 5
 Creación del sitio
 Creación de las páginas web
 Viñetas, tablas, sangrías
 Inserción de imágenes etiquetas, hipervínculos
 Photoshop nivel usuario para poder manejarse con
las fotos en internet
 Etiquetas, menús
 Spry  utilizando Javascript

Una Aproximación
a Internet

 El protocolo TCP/IP proporciona la
estructura básica del software para
la transmisión de datos entre
ordenadores, ejemplo de dirección
IP  66.34.237.94

 INTERNET EXPLORER
 MOZILLA FIREFOX

 GOOGLE CHROME

 http:// Los sitios web se alojan en servidores
que funcionan con software
especializado, llamado servidores web, y para
su funcionamiento implementan el protocolo
HTTP (hipertext transfer protocol)
 HTML (Hipertext markup languaje) Lenguaje
de programación.
 El servidor envía el código HTML de la página
y el navegador lo interpreta y lo muestra en
pantalla.
 No es necesario conocer HTML para diseñar
una página web

Ejemplos de Protocolo
 ftp  transferencia de archivos
 telnet  accesos remoto

 Es un ordenador intermediario que
intercepta las conexiones que un cliente hace
a un servidor de destino.

 Permite el acceso a internet a todos los
equipos teniendo un equipo conectado o sea,
una dirección IP, protegiendo los PC clientes.

 La gente teme ingresar información
personal como puede ser el número de la
tarjeta de crédito.

 Afortunadamente existen métodos de
encriptación de la información que se
envía:
 Secure sockets layer  SSL
 Transport Layer Security  TLS

 Permite interactuar y colaborar entre sí como
creadores de contenido generado por usuarios
en una comunidad virtual, a diferencia de
sitios web estáticos donde los usuarios se
limitan a la observación pasiva de los
contenidos .

 Ejemplos son las comunidades web,
los servicios web, las aplicaciones Web,
los servicios de red social, los servicios de
alojamiento de videos, las wikis, blogs.

 Hay miles de proveedores de dominio y
alojamiento Web.
 Ejemplo : arsys, dhapcenter

 Hacer prueba, simulacro de
contratación de dominio, en ambos
proveedores.

 LA SINTAXIS DE HTML  SINTAXIS BÁSICA:
 <HTML>
 <HEAD>
 TÍTULO Y METATAGS
 </HEAD>
 <BODY>
 Es el contenido de la web, dentro del body puede
haber decenas o cientos de líneas.
 </BODY>
 </HTML
 En todas las páginas web encontrareis esta
estructura

 Javascriptpermite realizar muchas acciones:
 Ejemplo: Menús dinámicos
desplegables, cálculos, determinadas acciones.
 En Dreamweaver se pueden implementar diversas
acciones javascript sin necesidad de tener
conocimientos. Y se pueden descargar aplicaciones
preparadas y usarlas.
 Después de este curso se recomienda curso javascript

 PHP y Mysql  Ambos lenguajes combinados
nos permite crear y actualizar bases de datos
dinámicas para el sitio web
 Ejemplo: listado de productos de la empresa, listado
de clientes.

 Flash y action script: en este curso se hace un
aintroducción a flash ya que es
recomendable tener conocimientos básicos
para hacer una web.
 Hacer toda la web en flash dificulta y
complica el posicionamiento de la página
web.
 Pero se utiliza mucho para aportar
contenidos multimedia a la web.

 Cuando normalmente decimos que hay
una página web, nos referimos a un sitio
web que es lo que contiene el conjunto de
páginas web.

 Por ejemplo cuando hacemos una página
web con Dreamweaver hacemos un sitio
web que contiene páginas web.
 Dentro del servidor el sitio web es una
carpeta.

 Como posicionar nuestro sitio Web en
los buscadores. ( Conceptos básicos)
 Colocar correctamente los metadatos del
head, de la cabecera de la página Web.
 Contenidos que cambian con frecuencia
y se actualizan.
 Publicidad por campaña o en el
momento de lanzar el sitio en Google
adwords.
 Se hará un simulacro de campaña en
google adwords

 Metatags en HTML: etiquetas
con información sobre el propio documento
web: autor, editor…
 Etiquetas META mas usuales:
 Descripción<meta name="description" content="Es
mi página " />Mediante esta etiqueta podemos
incluir como metadato una descripción de nuestra
página.
 keywords<meta name="keywords" content="mp3, f
ree, FREE, download, britney, spears" />Las
palabras clave son aquellas que resumen de forma
significativa el contenido de la página.

 Google  más  mucho más
 En la parte superior de tú página de sites tienes dos iconos que te
permiten hacer prácticamente de todo, por ejemplo nuevas páginas,
diseño de las página creación de menú .
 Modificar página Nueva página Administrador sitio
 1 Página web
 Administración del sitio
 Actividad reciente del sitio
 Páginas
 Archivos adjuntos
 Plantillas de páginas
 Dirección web
 Presentación del sitio
 2 Archivador 3 Lista
 Navegación Editar
 Desde el menú página se pueden hacer páginas y desde la opción de
menú, se puede enlazar, a la página creada.
 O se pueden hacer enlaces a páginas Web.

 TRUCO  CUANDO CREE UNA PÁGINA NUEVA
NO LA VAN A VER EN EL MENÚ DE FORMA
AUTOMÁTICA, PERO HAY UNA FORMA DE
HACERLO  Dentro de PRESENTACIÓN DEL
SITIO  HACER CLICK EN NAVEGACIÓN
(EDITAR)
 Se recomienda la opción  ORGANIZAR
AUTOMÁTICAMENTE MI NAVEGACIÓN  DE
ESA FORMA CUALQUIER PÁGINA QUE CREES
APARECERÁ EN EL MENÚ IZQUIERDO DE
FORMA AUTOMÁTICA.
 Práctica de clase Intentar hacer un sitio web dentro de
google Sites  Hacer un sitio Web en blanco y probar
a crear páginas dentro de ese sitio, y a su vez observar
si aparecen en el menú con el truco aprendido en clase.
(Preparación de sitio navegación organizar
automáticamente.

Diseño web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (8)

En vedette

En vedette (8)

Similaire à Diseño web

Similaire à Diseño web (20)

Plus de valenciaredsocial

Plus de valenciaredsocial (19)

Diseño web