Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diseño web

183 views

Published on

  • Be the first to comment

  • Be the first to like this

Diseño web

  1. 1.  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 conlas fotos en internet Etiquetas, menús Spry  utilizando Javascript
  2. 2. Una Aproximacióna Internet
  3. 3.  El protocolo TCP/IP proporciona laestructura básica del software parala transmisión de datos entreordenadores, ejemplo de direcciónIP  66.34.237.94
  4. 4.  INTERNET EXPLORER MOZILLA FIREFOX GOOGLE CHROME
  5. 5.  http:// Los sitios web se alojan en servidoresque funcionan con software especializado,llamado servidores web, y para sufuncionamiento implementan el protocoloHTTP (hipertext transfer protocol) HTML (Hipertext markup languaje) Lenguajede programación. El servidor envía el código HTML de la páginay el navegador lo interpreta y lo muestra enpantalla. No es necesario conocer HTML para diseñaruna página web
  6. 6. Ejemplos de Protocolo ftp  transferencia de archivos telnet  accesos remoto
  7. 7.  Es un ordenador intermediario queintercepta las conexiones que un cliente hacea un servidor de destino. Permite el acceso a internet a todos losequipos teniendo un equipo conectado osea, una dirección IP, protegiendo los PCclientes.
  8. 8.  La gente teme ingresar informaciónpersonal como puede ser el número de latarjeta de crédito. Afortunadamente existen métodos deencriptación de la información que seenvía: Secure sockets layer  SSL Transport Layer Security  TLS
  9. 9.  Permite interactuar y colaborar entre sí comocreadores de contenido generado por usuariosen una comunidad virtual, a diferencia desitios web estáticos donde los usuarios selimitan a la observación pasiva de loscontenidos . Ejemplos son las comunidadesweb, los servicios web, las aplicacionesWeb, los servicios de red social, los serviciosde alojamiento de videos, las wikis, blogs.
  10. 10.  Hay miles de proveedores de dominio yalojamiento Web. Ejemplo : arsys, dhapcenter Hacer prueba, simulacro decontratación de dominio, en ambosproveedores.
  11. 11.  LA SINTAXIS DE HTML  SINTAXIS BÁSICA: <HTML> <HEAD> TÍTULO Y METATAGS </HEAD> <BODY> Es el contenido de la web, dentro del body puedehaber decenas o cientos de líneas. </BODY> </HTML En todas las páginas web encontrareis estaestructura
  12. 12.  Javascriptpermite realizar muchas acciones: Ejemplo: Menús dinámicosdesplegables, cálculos, determinadas acciones. En Dreamweaver se pueden implementar diversasacciones javascript sin necesidad de tenerconocimientos. Y se pueden descargar aplicacionespreparadas y usarlas. Después de este curso se recomienda curso javascript PHP y Mysql  Ambos lenguajes combinadosnos permite crear y actualizar bases de datosdinámicas para el sitio web Ejemplo: listado de productos de la empresa, listadode clientes.
  13. 13.  Flash y action script: en este curso se hace unaintroducción a flash ya que esrecomendable tener conocimientos básicospara hacer una web. Hacer toda la web en flash dificulta ycomplica el posicionamiento de la páginaweb. Pero se utiliza mucho para aportarcontenidos multimedia a la web.
  14. 14.  Cuando normalmente decimos que hayuna página web, nos referimos a un sitioweb que es lo que contiene el conjunto depáginas web. Por ejemplo cuando hacemos una páginaweb con Dreamweaver hacemos un sitioweb que contiene páginas web. Dentro del servidor el sitio web es unacarpeta.
  15. 15.  Como posicionar nuestro sitio Web enlos buscadores. ( Conceptos básicos) Colocar correctamente los metadatos delhead, de la cabecera de la página Web. Contenidos que cambian con frecuenciay se actualizan. Publicidad por campaña o en elmomento de lanzar el sitio en Googleadwords. Se hará un simulacro de campaña engoogle adwords
  16. 16.  Metatags en HTML: etiquetascon información sobre el propio documentoweb: autor, editor… Etiquetas META mas usuales: Descripción<meta name="description" content="Esmi página " />Mediante esta etiqueta podemosincluir como metadato una descripción de nuestrapágina. keywords<meta name="keywords" content="mp3,free, FREE, download, britney, spears" />Laspalabras clave son aquellas que resumen de formasignificativa el contenido de la página.
  17. 17.  Google  más  mucho más En la parte superior de tú página de sites tienes dos iconos que tepermiten hacer prácticamente de todo, por ejemplo nuevaspá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 demenú, se puede enlazar, a la página creada. O se pueden hacer enlaces a páginas Web.
  18. 18.  TRUCO  CUANDO CREE UNA PÁGINA NUEVANO LA VAN A VER EN EL MENÚ DE FORMAAUTOMÁTICA, PERO HAY UNA FORMA DEHACERLO  Dentro de PRESENTACIÓN DELSITIO  HACER CLICK EN NAVEGACIÓN(EDITAR) Se recomienda la opción  ORGANIZARAUTOMÁTICAMENTE MI NAVEGACIÓN  DEESA FORMA CUALQUIER PÁGINA QUE CREESAPARECERÁ EN EL MENÚ IZQUIERDO DEFORMA AUTOMÁTICA. Práctica de clase Intentar hacer un sitio web dentro degoogle Sites  Hacer un sitio Web en blanco y probara crear páginas dentro de ese sitio, y a su vez observarsi aparecen en el menú con el truco aprendido en clase.(Preparación de sitio navegación organizarautomáticamente.
  19. 19.  Esta aplicación y otras de pago sonimportantísimas para conocer los detalles sobrelos accesos a tú página web ¿Cómo se hace? 1 Nos metemos en google analytics: creamos unacuenta. 2 Damos el nombre de la página nuestra sobre laque 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
  20. 20. <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*newDate();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>
  21. 21. 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.
  22. 22. 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.
  23. 23.  Programa que ayuda a estudiar los accesos apalabras clavese descarga desde clever stat Posición de su sitio web en el Tope deGoogle para keywords populares yconseguir más tráfico desde Googlefocalizando mejor su trabajo de SEO. GoogleMonitor envía una consulta a Google y lemuestra la posición de su sitio para suskeywords objetivo y también qué tan bien loestán haciendo sus competidores.
  24. 24. Google Trends: Probar instalar barra alexa.Alexa
  25. 25.  Servicio de Google paraposicionar el establecimientoen Google Maps.
  26. 26.  Web que nos ofrece espacio parapoder probar gratuitamente nuestrapágina web. Usando numerosos recursos.

×