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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Ähnlich wie Diseño web

Ähnlich wie Diseño web (20)

Mehr von valenciaredsocial

Mehr von valenciaredsocial (20)

Diseño web