PÁGINA: 1 de 8 Nombres y Apellidos del Estudiante: Grado: 11 Docente: Área: Tecnología e informática Periodo: 1 Duración: 09 horas Asignatura: Informática ESTÁNDAR: Identifico cuál es el problema o necesidad que originó el desarrollo de una tecnología, artefacto o sistema tecnológico. Identifico las condiciones, especificaciones y restricciones de diseño, utilizadas en una solución tecnológica y puedo verificar su cumplimiento. Interpreto y represento ideas sobre diseños, innovaciones o protocolos de experimentos mediante el uso de registros, textos, diagramas, figuras, planos constructivos, maquetas, modelos y prototipos, empleando para ello (cuando sea posible) herramientas informáticas. INDICADORES DE DESEMPEÑO: Identifica cada una de las etiquetas y propiedades que tiene el lenguaje HTML para la elaboración de una página Web. EJE(S) TEMÁTICO(S): Conceptos generales de programación web. Identificación de algunas de las etiquetas de HTML MOMENTO DE REFLEXIÓN "Hazlo todo tan simple como sea posible, pero no más simple" Albert Einstein ORIENTACIONES Lectura del texto. Lecturas complementarias de otros textos. Apreciación de diapositivas con video beam. Resolución de preguntas planteadas. Pruebas orales. Pruebas escritas. Práctica frente al computador en sala de informática. EXPLORACIÓN Qué es un sitio WEB y para qué sirve? Un sitio WEB no es más que un conjunto de páginas o documentos enlazados por un menú de selección. Puede usted observar el menú de arriba, a la izquierda, que le indica "La Navegación" dentro de este sitio, es decir cómo llegar a la información de su interés. Gracias a la WEB tanto la información de su empresa, como productos y servicios pueden estar disponibles a más de 700 millones de personas en todo el mundo, que se estima que era el número de usuarios de Internet (WEB, email y otros servicios) hasta diciembre del 2002. Sus clientes pueden buscar cómodamente desde la casa u oficina toda la información sobre lo que su empresa hace o vende. Esto representa considerables ahorros desde el punto de vista de personal dentro de su empresa, dando explicaciones de todo lo que pueden hacer o vender. CONCEPTUALIZACIÓN CONCEPTOS BÁSICOS DE DISEÑO WEB Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de archivos, pueden ser de texto, audio, gráficos, etc., que está unidos mediante un lenguaje de marcas denominado HTML. Este lenguaje nos permite crear las llamadas páginas web, que no son más que archivos con la extensión htm ó html. Las mismas, se alojan en servidores web, que son computadoras adaptadas especialmente, y que están conectadas en forma permanente a Internet.
PÁGINA: 2 de 8 La ventaja del HTML es que nos deja presentar varios archivos en forma simultánea (texto junto con un video, gráficos en forma de botones, etc.) y además, cuenta con la posibilidad de crear enlaces o hipervínculos (hyperlinks en idioma inglés), que se encargan de conectar las páginas web entre sí. Esto significa que podemos "saltar" de una página web ubicada en USA, a otra que está en España o Japón en forma inmediata, haciendo que las distancias geográficas desaparezcan en la red. Para poder acceder a los sitios web utilizaremos un navegador, que es el software encargado de presentarnos esa información en forma amigable. ~- Sitio Web: conjunto de archivos ~- Página Web: archivo en formato HTML o HTM ~- Hipervínculo: objeto que se utiliza para enlazar archivos (páginas Web, imágenes, audio, etc.) ~- Servidor Web: computadora conectada a internet que aloja Sitios Web o archivos que pueden ser solicitados a través de la red PROGRAMACIÓN WEB Con el desarrollo de la web surgieron nuevos lenguajes de programación tendientes a presentar páginas que permiten mayor interacción, son más rápidas, contienen animaciones, etc. Entre ellos, podemos mencionar al asp y php, que en líneas generales, permiten generar páginas en base a los pedidos de los usuarios del sitio, es decir, buscan en una base de datos la información solicitada, y crean una página en forma instantánea. Las bases de datos más utilizadas son http://www.mysql.com/ MySQL (open source), http://www.oracle.com/ Oracle, http://www-3.ibm.com/software/data/informix Informix de IBM, y http://www.microsoft.com/sql/default.asp Microsoft SQL. El DHTML (HTML dinámico) y el CSS (hojas de estilo) sirven para hacer más interactivas las páginas HTML, por ej. botones que cambian de color, texto que agranda o disminuye su tamaño, etc.; aliados al Javascript, pueden también poner la hora y la fecha a la página, mostrar texto que se desplaza, y más. Un software que se está utilizando mucho en la web para hacer animaciones con audio, texto, imágenes, etc., es el http://www.macromedia.com/software/flash Macromedia Flash, ya que en sus últimas versiones cuenta con herramientas que hacen relativamente fácil crear una presentación web. El lenguaje Java en cambio, crea archivos ejecutables que se instalan en el ordenador del navegante y se utiliza para animaciones o para crear pequeños programas (calculadoras, juegos, etc.). Aunque cabe aclarar que cada vez se está utilizando menos. ~- ASP/PHP formatos para páginas web dinámicas ~- Bases de datos: MySQL, Oracle, Informix, y Microsoft SQL ~- DHTML/CSS lenguajes dinámicos de HTML ~- Javascript: lenguaje de programación ~- Flash: Software que sirve para hacer animaciones ~- Java: lenguaje de programación Peso de las páginas y formato de imágenes El peso de las páginas es conveniente que no exceda de los 50 Kb.; esto se debe a que todavía las conexiones a Internet son lentas, y hay estudios hechos en los EE.UU. que demuestran que los usuarios no suelen esperar más de 30 segundos para ver la información de una página. En este tema es fundamental el tratamiento de las imágenes, es decir, muchas veces se pueden acondicionar las mismas para que bajen sustancialmente de peso, manteniendo de todas formas una calidad aceptable. Los software de edición de imágenes digitales vienen ya preparados para la optimización de imágenes a montar en la web. ~- Peso de las páginas ~- Formato de imágenes Consistencia
PÁGINA: 3 de 8 Es necesario lograr que el sitio web obtenga consistencia y una imagen distintiva, mediante el uso de fondos, gráficos y logos, colores uniformes en el texto y los enlaces, barras de navegación en el mismo lugar, etc.; de la misma manera que una tienda comercial mantiene una estética única, tanto para su casa central como para sus sucursales. ~- Fondo y gráficos distintivos ~- Color de texto y enlaces ~- Barras de navegación en el mismo lugar PASOS PARA LA CREACION DE UN SITIO WEB Tres son los pasos que veremos en esta unidad didáctica, y que nos permitirán poner un sitio web en la red. Ellos son, establecer los objetivos, diseñar el sitio web, y por último, su publicación y mantenimiento. ~- Establecer los objetivos ~- Diseñar el Sitio Web ~- Publicación y mantenimiento Definir los objetivos del Sitio El primer paso a dar cuando se quiere delinear una estrategia para la web es, sin duda, definir los objetivos del sitio: va a ser un sitio dedicado al E-commerce?, queremos simplemente tener una imagen institucional de nuestra empresa o negocio en la red?, o queremos que se convierta en nuestro principal canal de ventas? Esto se logra definiendo la misión del sitio, y en segunda instancia, estableciendo los objetivos de corto y largo plazo. Para esto se deberá realizar un análisis FODA (Fortalezas, Oportunidades, Debilidades, Amenazas) que además nos permitirá seleccionar el target de usuarios o potenciales clientes al cual apuntamos. Dentro de este análisis por otra parte, evaluaremos los sitios de la competencia, lo que nos permitirá aprender de sus éxitos y fracasos. Luego deberemos determinar quiénes van a participar en este proyecto, seleccionando al personal en base a sus conocimientos y habilidades, establecer los requisitos operacionales (software, hardware, servicios, etc.); y finalmente, se tendrá que desarrollar un presupuesto económico que le dé un marco financiero a este emprendimiento. Esto es, en pocas palabras, el armado de un plan de negocios (business plan) que nos puede llegar a servir inclusive en el caso de necesitar financiamiento externo, ya que es la herramienta que se le presenta a los capitalistas de riesgo (venture capitals o VCs) para que evalúen si es factible su inversión en un proyecto. Business Plan ~- Estado actual de la empresa ~- Misión del Sitio ~- Análisis FODA ~- Descripción de productos o servicios ~- Target al que se apunta ~- Objetivos a corto plazo ~- Objetivos a largo plazo ~- Management / operaciones ~- Aspectos financieros Diseño del Sitio Web Para comenzar a desarrollar un sitio web en fundamental crear una lista de los contenidos que va a brindar el mismo, por ejemplo: noticias, el clima, una base de datos de productos, etc. Esto permitirá que luego el establecimiento de los requisitos funcionales (barras de navegación, enlaces, colores y diseño de los mismos) se realice de manera mucho más sencilla.
PÁGINA: 4 de 8 Una vez que tenemos estos dos temas resueltos, se deben definir el presupuesto económico y las herramientas disponibles, dos variables que se relacionan íntimamente. Aquí decidiremos si utilizamos http://www.macromedia.com/software/flash Flash, http://www.macromedia.com/ Dreamweaver, o nos orientamos a la programación en http://www.phpdeveloper.org/ PHP ó http://www.asptutor.com/ ASP; si hacemos el trabajo "in house" contratando personal idóneo o, si lo terciarizamos en una E-builder o un estudio de diseño, etc. ~- Crear una lista de contenidos ~- Establecer los requisitos funcionales ~- Verificar las herramientas disponibles ~- Disponer el presupuesto económico Publicación y mantenimiento El siguiente paso será la publicación del sitio en la web, para lo cual deberemos contratar un servicio de alojamiento web (hosting), que servirá para estar online las 24 horas del día, todo el año. COMO TRATAR LOS CONTENIDOS Por último, es aconsejable ir renovando los contenidos del sitio en forma periódica para que los usuarios encuentren material actualizado. Hay una regla no escrita en la red que establece armar un presupuesto similar al utilizado para la creación del sitio, y dedicarlo al mantenimiento anual del mismo. Por ej. si necesitamos $100 para el diseño inicial del sitio web, dejaremos otros $100 para usar durante el resto del año en mantenimiento y alojamiento web.'''' Es muy importante el hecho de brindar contenidos atrayentes y una navegación dentro del sitio web lo más sencilla y clara posible (a menos que nuestro negocio sea vender publicidad y queremos que los usuarios "se pierdan" dentro del sitio, viendo de esta manera muchas páginas con anuncios publicitarios). Esto hará que la gente se sienta a gusto y vuelva al sitio en reiteradas oportunidades, brindándonos a nosotros mayores posibilidades de venderles productos o servicios. Otra cosa que también se debe tener en cuenta es le hecho de brindar nuestra información de contacto en todas las páginas: dirección, teléfono, fax, E-mail, etc., junto con un aviso de confidencialidad y otro legal. Esto genera confianza en nuestro negocio y además le brinda al usuario la ventaja de tener siempre a mano un medio para contactarnos. ~- Contenido atrayente ~- Navegación sencilla ~- Información de contacto ~- Aviso legal ~- Aviso de confidencialidad Foco en el negocio Nuestro objetivo como sitio web tiene que estar en la página principal (home page) en forma simple y entendible. Debemos recordar que los usuarios cuando llegan a un sitio web que no conocen, tratan de averiguar de qué se trata, y si esa información no la encuentran en forma rápida y clara, lo más probable es que hagan clic en el botón Atrás del navegador. También es necesario, en la medida de lo posible, de revelar en los encabezados y barras de títulos de las Sub-páginas cuál es el objetivo de esa sección. Cuanto más hagamos foco en nuestro negocio, más posibilidades de transmitírselo a los usuarios tendremos, y por ende, obtendremos mayor eficacia en nuestros objetivos. Por último, es una buena idea poner una página con las preguntas más frecuentes (FAQ s), ya que hay muchas personas que las utilizan para conocer más sobre el sitio web que están visitando, o para aclarar dudas.
PÁGINA: 5 de 8 ~- Foco en el negocio simple ~- Revelado en los encabezados ~- FAQ s Credibilidad El hecho de generar credibilidad en nuestro negocio de Internet es sumamente importante, ya que por ser un nuevo medio y además tener entre sus características a la "virtualidad", los usuarios toman mayores precauciones que en el mundo físico. Un ejemplo claro, es el miedo del público a poner su número de tarjeta de crédito en la red. Es por esto que se debe brindar información acurada, ejemplos, testimonios de los compradores, garantías y tal vez, futuros upgrades (versiones mejoradas o con nuevas funcionalidades de un producto), que tiendan a fortalecer la confianza del consumidor o usuario de nuestro sitio. ~- Información ~- Ejemplos, testimonios ~- Brindar garantías ~- Futuros upgrades En http://www.webcredibility.org/ se encuentran estudios que analizan la credibilidad de los sitios web y qué variables los afectan. Beneficios adicionales También es importante brindar beneficios adicionales como pueden ser la creación de un programa de membresías para nuestros clientes, garantías de un servicio de post-venta a través del mundo real (teléfono, dirección física, etc.) o, la devolución del dinero si el cliente no está conforme con la mercadería o con nuestro servicio. ~- Programas de membresía ~- Servicio de post-venta ~- Devolución del dinero Contenidos del Sitio Que los usuarios de nuestro sitio web cuenten con opciones limitadas y bien especificadas, hará que puedan llegar hasta nuestros productos o servicios en forma sencilla. Esta es una manera más de facilitar la compra, a la cual se le pueden sumar el hecho de ofrecer regalos, establecer precios promocionales para algún producto, u ofrecer un boletín periódico de novedades. ~- Opciones limitadas ~- Guiar al cliente a nuestros productos ~- Facilitar la compra ~- Ofrecer regalos ~- Promociones ~- Boletín de novedades Priorizar beneficios El lenguaje que debemos utilizar en la web debe ser claro y conciso, no debemos olvidar que todavía hay muchísima gente que paga elevados montos por su conexión telefónica a la red, y no suelen perder mucho tiempo en textos largos o confusos. Un lenguaje directo, orientado a priorizar beneficios y no características de nuestros productos (Ejemplo: "Sienta el confort de este carro, vibre con su velocidad", en vez de "Este carro tiene XX mts. de ancho, es muy cómodo y alcanza los 180 kms. por hora"), en donde se dé importancia a la primera palabra de la oración y a remarcar en negrita las frases importantes. También es conveniente separar las ideas por párrafos, crear listas de viñetas o numeradas para presentar beneficios o características, y quitar todo el texto que no sea necesario. ~- Claros y concisos ~- Lenguaje directo
PÁGINA: 6 de 8 ~- Dar importancia a la primera palabra ~- Utilizar negrita para keywords ~- Una idea por párrafo ~- Listas y viñetas ~- Resumir texto Conseguir datos del cliente Las nuevas técnicas de Marketing nos señalan que es prioritario conocer al cliente, y la web, es una herramienta excelente para conseguir este objetivo. Lograr que nos deje sus datos personales y el permiso de contactarlo, ofreciéndole tal vez un boletín de noticias, muestras de nuestros productos, regalos, etc., es algo que se hace en casi todos los sitios web. Además se deberán realizar encuestas de opinión para descubrir sus gustos y necesidades. Esta información nos permitirá realizar campañas de marketing uno a uno, o idear nuevos productos y servicios de los cuales desconocíamos la necesidad, para satisfacer su demanda. ~- Obtener datos de clientes ~~- Ofrecer un boletín de noticias ~~- Informes, muestras, trials, etc. ~~- Encuestas de opinión ~- Permiso de contactarlos Es importante aclarar que a mayor cantidad de datos personales solicitados, menor será la cantidad de usuarios que quieran brindarlos, por lo cual es conveniente pedir solamente los datos necesarios, o ir pidiéndolos de a poco. HERRAMIENTAS DE DISEÑO WEB Los software de diseño de sitios web más conocidos son el Macromedia Dreamweaver, el Microsoft Front Page y el Adobe Go Live, aunque están también el NetObjects Fusion, y un gran número de editores shareware que cumplen muy bien su función. ~- Macromedia Dreamweaver http://www.macromedia.com/ www.macromedia.com ~- Microsoft Front Page http://www.microsoft.com/ www.microsoft.com ~- Adobe Go live http://www.adobe.com/ www.adobe.com ~- NetObjects Fusion http://www.netobjects.com/ www.netobjects.com Herramientas de diseño Web Software de diseño Es necesario contar también con algunos de los siguientes programas: El Macromedia Flash para hacer animaciones, banners o sitios enteros con esta tecnología; el Macromedia Fireworks o Adobe Illustrator para diseñar botones, logos, imágenes, etc.; y el Adobe Photoshop, para retocar fotografías y trabajar con imágenes. ~- Macromedia Flash http://www.macromedia.com/ www.macromedia.com ~- Macromedia Fireworks http://www.macromedia.com/ www.macromedia.com ~- Adobe Illustrator http://www.adobe.com/ www.adobe.com ~- Adobe Photoshop http://www.adobe.com/ www.adobe.com Herramientas de diseño Web Software de programación En programación contamos con el Macromedia Interdev y el cold Fusion (recientemente fusionados); y la suite de programas en visual Basic de Microsoft. Dos lenguajes de programación que se utilizan bastante en la web son PHP y Perl, ambos open source, por lo que se podrá conseguir más información en los sitios web mencionados más adelante. Además es interesante mencionar al Spider Cache, un software que optimiza el tiempo de respuesta de las bases de datos que actúan en la web. ~- Macromedia Interdev http://www.macromedia.com/ www.macromedia.com ~- Cold fusion http://www.allaire.com/ www.allaire.com
PÁGINA: 7 de 8 ~- Microsoft Visual Basic http://www.microsoft.com/ www.microsoft.com ~- PHP http://www.phpdeveloper.org/ www.phpdeveloper.org ~- Perl http://www.perldoc.com/ www.perldoc.com ~- Spider cache http://www.spidercache.com/ www.spidercache.com Recursos: diseño web My Fonts es un sitio web que nos vende fuentes para nuestro ordenador, las cuales pueden ser utilizadas para la web. Use It es el sitio web del "gurú" Jakob Nielsen, una de las autoridades más respetadas en cuanto a usabilidad de los sitios web se refiere. Color Voodoo tiene interesante información sobre el uso de los colores y su influencia en la web; y morecrayons, una paleta de colores web seguros (ya que no todos los colores del ordenador se ven iguales en distintos sistemas operativos). ~- http://www.myfonts.com/ http://www.myfonts.com ~- http://www.useit.com/ http://www.useit.com ~- http://www.colorvoodoo.com/ http://www.colorvoodoo.com ~- http://www.morecrayons.com/palettes/websmart/index.html Recursos: diseños web gratuitos Estos sitios, brindan en forma gratuita diseños web (templates) a los cuales solamente se debe adaptarlos a nuestras necesidades. ~- http://www.freewebtemplates.com/ http://www.freewebtemplates.com ~- http://www.guistuff.com/ http://www.guistuff.com Manual de diseño web Para las personas que saben inglés, es recomendable tener presente el manual de diseño web "Web Style Guide: Basic Design Principles for Creating Web Sites" de Patrick J. Lynch y Sarah Horton. Lo pueden encontrar en http://info.med.yale.edu/caim/manual/ http://info.med.yale.edu/caim/manual, o comprarlo a través de Amazon por Internet. Recursos: programación Algunos de los sitios web más conocidos por la cantidad de herramientas y material gratuito relacionado con la programación. ~- http://www.asptutor.com/ http://www.asptutor.com ~- http://www.programmersheaven.com/ http://www.programmersheaven.com ~- http://www.jsworld.com/ http://www.jsworld.com ~- http://www.recursoscgi.com/ http://www.recursoscgi.com Recursos: webmastering Estos sitio tienen recursos, herramientas, artículos, etc., de suma utilidad para los Webmasters. ~- http://www.webexperto.com/ http://www.webexperto.com ~- http://www.maestrosdelweb.com/ http://www.maestrosdelweb.com ~- http://www.webmasterworld.com/ http://www.webmasterworld.com ~- http://webmastersdirectory.com/ http://webmastersdirectory.com ACTIVIDADES DE APROPIACIÓN Según la guía anterior y sus propias investigaciones, resolver el siguiente cuestionario 1. Qué necesito para tener una página web? 2. Hosting o alojamiento web - Definición de hosting o alojamiento web 3. Qué es un servidor? - Definición de servidor 4. Qué es un blog o bitácora? - Definición de weblog o bitácora 5. Qué es 'posicionamiento web' (también conocido como optimización para los motores de búsqueda) y lo necesito para mi sitio web? 6. Cómo funciona un motor de búsqueda? 7. Tipos de servidores
PÁGINA: 8 de 8 8. Qué es un navegador, explorador o buscador? 9. Qué es la extensión.exe? - definición de.exe 10. Listado de exploradores 11. Qué es un dominio? - Definición de dominio 12. Qué significa optimizar un sitio web? 13. Por qué debo optimizar mi sitio web? 14. Velocidad de descarga de un sitio web 15. Qué son las extensiones de archivos o ficheros? 16. Qué significa ".jpg"? - Definición de.jpg 17. Qué significa ".gif"? - Definición de.gif 18. Qué significa ".png"? - Definición de.png 19. Qué significa "FTP"? - Definición de FTP 20. Qué significa http? - Definición de http 21. Qué es un PDA? - Definición de PDA 22. Qué es un servidor web (Web Servers)? - Definición de servidor web 23. Cuál es mi dirección IP? - Definición de IP 24. Qué es html? 25. Qué es ActiveX? - Definición 26. Qué es Flash? - Definición de Flash 27. Qué es un plug-in? - Definición de plug-in 28. Qué es un Sitio web y Página web? - Definición de Sitio web y Página web 29. Qué es un Protocolo? - Definición de Protocolo 30. Qué es un Protocolo de Aplicación? - Definición de Protocolo de Aplicación 31. Qué es el TCP/IP? - Definición de TCP/IP 32. Qué es un Host? - Definición de Host 33. Qué es JavaScript? - Definición de Javascript SOCIALIZACIÓN Mediante la revisión personalizada en la sala de informática se socializará la guía para revisar las actividades, y aclarar las dudas que se hayan encontrado en el desarrollo de los temas. COMPROMISO Realizar todas las actividades propuestas ELABORÓ REVISÓ APROBÓ NOMBRES Severo Ortiz Rivera NANCY MERCHAN CARGO Docentes de Área Jefe de Área Coordinador Académico 19 06 2013 21 06 2013 DD MM AAAA