1. Desventajas HTML • Es un lenguaje estático que no permite manejar bases de datos. • Las páginas pueden variar su aspecto dependiendo del navegador (es un lenguaje interpretado). • Su funcionalidad es limitada, hay muchas cosas que no se pueden hacer solo con HTML. • El diseño de las páginas también está limitado aunque con HTML5 ha mejorado bastante.
2. Ventajas HTML • Es un lenguaje sencillo, fácil de aprender y fácil de leer e interpretar. • Existen numerosas aplicaciones y editores de páginas web (WYSIWYG) que generan el código automáticamente, por lo que no es necesario ser un experto informático para hacer páginas basadas en HTML. • Su sencillez hace que pueda diseñarse y desplegarse un sitio web en muy poco tiempo. • Es el lenguaje más extendido, todos los navegadores lo admiten. • Código visible e interpretable por los buscadores. • Despliegue rápido
3. Ejemplos de HTML
4. Etiquetas que van dentro del head: <style></style> Define el inicio y final de la hoja de estilo <script></script> Define el inicio y final del código script
5. Fundamento: El sitio web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la w3c y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado. La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. Por ejemplo se utilizará el elemento <P> para marcar párrafos, y <TABLE> para tabular datos (nunca para disponer de manera visual los diferentes elementos del documento). En su última instancia, esto ha supuesto una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de la visualización. De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo css para indicar como se mostrará dicha información en los diferentes medios (como por ejemplo, una monitor de computadora, un teléfono móvil, impreso en papel, leída por un sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente la accesibilidad del documento. También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de control de administración de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la misma. Fundamento:<o:p></o:p> <o:p> </o:p> El sitio web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la w3c y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.<o:p></o:p> La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. Por ejemplo se utilizará el elemento <P> para marcar párrafos, y <TABLE> para tabular datos (nunca para disponer de manera visual los diferentes elementos del documento). En su última instancia, esto ha supuesto una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de la visualización.<o:p></o:p> De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo css para indicar como se mostrará dicha información en los diferentes medios (como por ejemplo, una monitor de computadora, un teléfono móvil, impreso en papel, leída por un sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente la accesibilidad del documento.<o:p></o:p> También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de control de administración de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la misma.<o:p></o:p>
6. Historia del desarrollo web En un principio era sólo texto, pero a medida que ha evolucionado la tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusión de imágenes fue la más significativa, pero también debemos mencionar el vídeo y la animación, o los espacios 3D, lo que aporta valores estilísticos, de diseño y de interactividad jamás imaginados antes. El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 sólo había alrededor de 50 sitios web. Estadísticas (2005) nos afirmaban que la cantidad de sitios web ronda los 8000 millones de sitios, a los que diariamente se les suma a raíz de 4400 por día. Rápidamente, su importancia alcanzará las mismas cuotas que la televisión o el teléfono. Datos recientes estiman que hay alrededor de dos mil millones de páginas colgadas y se espera que en los próximos años llegue a los ocho mil millones, excediendo el número de habitantes del planeta. Sin embargo, sólo una fracción de este número es visitado habitualmente por la mayoría de los usuarios (sólo alrededor de 15 000 sitios webs, el 0,4 % del total). A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para atraer y mantener la atención de los usuarios. Junto con un desarrollo efectivo de la estructura web y del contenido, el diseño y el uso del color son la llave para atraer y ser identificado, formando vínculos en el subconsciente del usuario y generar esquemas para captar y fidelizar a nuevos visitantes. Al mismo tiempo que la evolución de los aparatos y de su introducción en los hogares, también ha aumentado la calidad de las transmisiones a través Internet y ha bajado su precio. A medida que la tecnología ha solventado estas dificultades, ya no nos encontramos con problemas de forma sino de contenido. Desarrollo web es un término que define la creación de sitio web para internet o una internet Para conseguirlo se hace uso de tecnologías de software del lado del servidor y del cliente que involucran una combinación de procesos de datos con el uso de un navegador de web a fin de realizar determinadas tareas o mostrar información. El diseño web es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web No es simplemente la implementación del diseño convencional ya que se abarcan diferentes aspectos como el diseño gráfico web, diseño de interfaz y experiencia de usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la información; interacción de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda. A menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del proceso de diseño, aunque existen algunos diseñadores independientes que trabajan solos.
7. Etapas de la web : 1. El diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de 'escribir' la página web se realice un boceto o pre diseño. Esto facilitará tener un orden claro sobre el diseño. 2. Estructura y relación jerárquica de las páginas del sitio web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipervínculos o HTML. Son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los usuarios no siempre entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio. 3. Posicionamiento en buscadores o SEO Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda.
8. Lenguaje HTML El nombre HTML proviene de las siglas en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto) HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...). La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (cursiva, negrita, o un gráfico determinado). Su funcionamiento se basa en describir, a través de etiquetas de apertura y cierre, qué es lo que queremos mostrar en una web. Siendo las etiquetas <head> y <body>, las que marcan su estructura fundamental. HTML es el lenguaje con el que se "escriben" las páginas web. Se puede resumir la filosofía del HTML con los siguientes puntos: • Es muy sencillo. • No hay variables. • No se compila. • Es un lenguaje interpretado. • A las instrucciones se les llama etiquetas o marcas • Permite escribir hipertexto El programa que interpreta este lenguaje es el navegador (Internet Explorer, Netscape, Firefox, etc).Este lenguaje es el usado por los navegadores para mostrar las páginas web.
9. Cuándo y cómo nació el lenguaje HTML? Corría el año 1989 y un joven Tim Berners (34) se disponía a crear la web tal y como la conocemos hoy día. La primera red interconectada había sido creada hacía 20 años uniendo las universidades de Stanford y UCLA bajo el nombre de Arpanet, y desde entonces no había hecho más que aumentar sus interconexiones. En 1989, el CERN era el nodo de internet más grande de Europa, pero internet era, en esencia, un sistema para enviar y recibir emails. No había páginas webs, no había buscadores, no había, en definitiva, hipertexto (hipervínculos). Así pues un equipo de físicos liderados por Tim Berners se propuso unir ambas tecnologías (el hipertexto y Arpanet), y para ello, nada mejor que usar la gran red del CERN. Basándose en un lenguaje de hipertexto llamado SGML, consiguieron crear un sistema a partir del cual podía accederse a los ficheros almacenados en los ordenadores que estuviesen en red. Esa mejora del sistema SGML, fue conocida como HTML y, tan sólo un año más tarde, ese mismo equipo creaba el WWW (Word Wide Web), el primer servidor y el primer navegador web. Había nacido la web, y Tim Berners sería considerado como el padre de la misma. Elementos HTML Los elementos son la estructura básica del HTML. Cada elemento configura una parte fundamental de la arquitectura de una web. Casi la totalidad de los elementos en HTML, deben venir definidos por una etiqueta de apertura y una de cierre. Tabla de las principales etiquetas en HTML y su función En la siguiente tabla puede ver una lista de las principales etiquetas HTML y para qué se utilizan :
10. Nombre etiqueta Cómo se muestra Función <html></html> Define el inicio y final del documento <head></head> Define la cabecera del documento <body></body> Define el cuerpo del documento
11. Desventajas Tecnología WYSIWYG Las nuevas versiones no facilitan nada respecto a las anteriores; se necesita de alta resolución para manejar todas las barras, le falta implementación de DHTML; su precio es considerable y carga muy lentamente. • Las nuevas versiones no facilitan nada respecto a las anteriores; se necesita de alta resolución para manejar todas las barras, le falta implementación de DHTML; su precio es considerable y carga muy lentamente. • Los botones de OK y CANCEL fueron cambiados por “Cool” y “No way”, esto puede generar confusión en el manejo de la aplicación. Es más flexible si se sabe lo básico de HTML para empezar. • En su mayoría ofrecen templetes o plantillas que solo requieren del rellenado por parte del usuario y como consecuencia suelen ser muy rígidos y poco originales.
12. Ventajas Tecnología WYSIWYG • evitan el costo de contratar un profesional. • no es necesario complicarse con lenguaje de programación porque el editor WYSIWYG rende riza los códigos simplificándote todo. • este editor permite ver tal como se verá en internet tu sitio web mientras lo creas y modificas. • permite insertar automáticamente etiquetas a tus actualizaciones. • tiene una completa compatibilidad entre este editor y plantillas pre formateadas, las cuales se pueden personalizar utilizando el mismo editor. • es simple y no ocupa demasiados recursos. permite muchas cosas, es muy flexible, sobre todo para el diseño. Tiene muchas opciones como botones flash, botones normales y formularios. Todas las herramientas se encuentras rápidamente
13. EJEMPLO DE WYSIWYG
14. DIFERENCIA ENTRE HTML Y WYSIWIG HTML El código HTML y el contenido del documento son editables. Mejor para usar con navegadores antiguos. Los diseños complejos (columnas de texto y ubicación de la imagen original en la página) no se conservan. HTML WYSIWYG El código HTML y el contenido del documento no son editables. Diseñado para usar con Internet Explorer 4.0 o superior y Netscape 5.0 o superior. Utiliza una nueva tecnología HTML que no es compatible con los navegadores más antiguos. Funciona con navegadores más antiguos porque vuelve al formato HTML estándar. Utiliza posicionamiento absoluto. Los diseños complejos se conservan
15. Historia de los editores WYSIWYG ¿Qué es Wysiwyg? Wysiwyg es un acrónimo proveniente de la expresión en inglés What You See Is What You Get, que en español traduce ‘lo que ves es lo que obtienes’, usada en el ámbito de la informática para designar la correspondencia entre aquello que ves en pantalla y su resultado final. Wysiwyg es una herramienta que permite a los usuarios que operan procesadores de texto, como Microsoft Word o Writer, de Open Office, reconocer en sus pantallas el formato de un documento y la que sería su versión impresa, al tiempo que lo crean. Anteriormente, los procesadores de texto no contaban con esta característica, y dificultaba al usuario tener una idea de cuál sería el resultado físico, es decir, impreso, de su documento. También te puede interesar leer sobre Word. Actualmente, su campo de aplicación se ha extendido a editores HTML o HTML5, en el desarrollo web, a programas de diseño gráfico y de diseño arquitectónico 3D. De hecho, incluso la industria del espectáculo se ha valido de la herramienta wysiwyg para planificar la iluminación de conciertos musicales. Wysiwyg, por lo tanto, surge de la necesidad de ofrecer al usuario un entorno más intuitivo para interactuar con estos programas, minimizando en lo posible las distancias entre la realidad virtual y la realidad real. Escala, colores, texturas y forma son elementos que se imitan en pantalla con la finalidad de que coincidan con las expectativas del usuario. Antes del uso masivo de los programas informáticos todo era WYSIWYG, ya que no era necesario compilar la información: cuando escribes en un papel o usas una máquina de escribir, obtienes un resultado inmediato. Fue solo a través del desarrollo de los ordenadores y los programas de escritura que se hizo necesario tratar la forma en que el usuario ve la información impresa en la pantalla. Después de que las tarjetas perforadas ya no fueran suficientes para programar, los desarrolladores de software y los ingenieros empezaron a necesitar otra forma de introducir código: un editor de texto. Los primeros programas de tratamiento de texto eran editores para programadores; sin embargo, las secuencias de caracteres que se introducían en estos programas no se crearon con la intención de publicarse como documento. WYSIWYG, es una frase aplicada a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento mostrando directamente el resultado final, frecuentemente el resultado impreso. En el caso de editores de HTML, este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar el código fuente en HTML. Se utiliza en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento. El programa de la izquierda usa un editor WYSIWYG para producir un documento. El programa de la derecha contiene el código LaTeX, que cuando se compile producirá un documento que se verá muy similar al documento de la izquierda. Compilar código de formato no es un proceso WYSIWYG. Ejemplos de editores HTML tipo WYSIWYG son Dreamweaver, NVU/Kompozer, las versiones de Composer de Netscape y Mozilla, Amaya, Writer (de OpenOffice.org y LibreOffice), Adobe Golive, Frontpage y Microsoft Word. También existen editores que se pueden integrar en formularios de páginas web como FCKeditor, TinyMCE y FreeRichTextEditor. En el área de diseño web existen también herramientas WYSIWYG, dentro de los CMS (Content Management System); aunque un CMS no tiene porqué ser WYSIWYG, es decir puede ser un gestor de contenidos cuyo panel de gestión no se corresponda con el diseño final, sino que en este caso se utiliza un backend o panel de gestión para crear o modificar los contenidos, que serán reflejados en el frontend o parte final que ven los usuarios. En el grupo de los CMS WYSIWYG hay varias aplicaciones, incluso alguna de ellas con tecnología flash, como por ejemplo Easy Site Manager.
