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,
free, 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.

 Esta aplicación y otras de pago son
importantísimas para conocer los detalles sobre
los accesos a tú página web
 ¿Cómo se hace?
 1 Nos metemos en google analytics: creamos una
cuenta.
 2 Damos el nombre de la página nuestra sobre la
que queremos informes de accesos y seguimiento.
 Automáticamente analytics genera un código.
 Ese código se copia y se pega dentro del Head,
preferentemente justo al final del fin de head 
</head>  es decir antes fin de la cabecera

En caso de GOOGLE SITES es más
fácil porque basta con ir a 
ADMINISTRACIÓN DEL SITIO 
general  habilitar analytics y poner
directamente el número de referencia
que nos da analytics para esa página.

Permite a los editores obtener ingresos
mediante la colocación de anuncios en sus
sitios web, ya sean de texto, gráficos o
publicidad interactiva avanzada. Estos
anuncios son administrados y ordenados
por Google en asociación con los
anunciantes de AdWords a través de un
sistema complejo de subasta instantánea.

 Programa que ayuda a estudiar los accesos a
palabras clavese descarga desde clever stat
 Posición de su sitio web en el Tope de
Google para keywords populares y
conseguir más tráfico desde Google
focalizando mejor su trabajo de SEO. Google
Monitor envía una consulta a Google y le
muestra la posición de su sitio para sus
keywords objetivo y también qué tan bien lo
están haciendo sus competidores.

Google Trends:
 Probar instalar barra alexa.

Alexa

 Servicio de Google para
posicionar el establecimiento
en Google Maps.

 Web que nos ofrece espacio para
poder probar gratuitamente nuestra
página web.
 Usando numerosos recursos.

Diseño web

Más contenido relacionado

La actualidad más candente (6)

Similar a Diseño web (20)

Más de valenciaredsocial (20)

Diseño web