Diseño web
Upcoming SlideShare
Loading in...5
×
 

Diseño web

on

  • 145 views

 

Statistics

Views

Total Views
145
Slideshare-icon Views on SlideShare
145
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Diseño web Diseño web Presentation Transcript

    •  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
    • <script> (function(i,s,o,g,r,a,m){i[GoogleAnalyticsObject]=r;i[r ]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g; m.parentNode.insertBefore(a,m) })(window,document,script,//www.google- analytics.com/analytics.js,ga); ga(create, UA-40169149-1, google.com); ga(send, pageview);</script>
    • En caso de GOOGLE SITES es másfácil porque basta con ir a ADMINISTRACIÓN DEL SITIO general  habilitar analytics y ponerdirectamente el número de referenciaque nos da analytics para esa página.
    • Permite a los editores obtener ingresosmediante la colocación de anuncios en sussitios web, ya sean de texto, gráficos opublicidad interactiva avanzada. Estosanuncios son administrados y ordenadospor Google en asociación con losanunciantes de AdWords a través de unsistema 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.