CREACIÓN DE PÁGINAS WEB

- ASPECTOS FUNDAMENTALES -

DISEÑAR PARA WEB

-Organización

-Objetivos

Por qué se crea un sitio.

Qué se espera lograr de él.

-Organizar y reflejar en papel en blanco

-Hay que asumir el mantenimiento del sitio Web.

IDENTIFICAR A LA AUDIENCIA

-Situarse en el lugar de los futuros usuarios

-Navegar por sitios parecidos y reflexionar sobre lo que hacen bien. Ser diferentes y aportar cosas nuevas.

-Tener idea de las características del sistema informático de los usuarios (velocidad de la conexión, ordenadores actuales, portátiles, navegadores, sistemas operativos, edad, sexo, experiencia…)

CONCEBIR EL DISEÑO GRÁFICO

-Es necesario definir y distribuir con lógica todo lo que es importante en una página: imágenes, gráficos, formatos, colores…

-Es importante tener nociones de algún editor gráfico.

-El lenguaje debe ser claro y conciso, dependiendo del público a quién va dirijido

DISEÑAR LA INTERFAZ

-La gente visita nuestro sitio por la información que contiene, no por la innovación, diseño ni estilo.

-Es prioritario la funcionalidad.

-Facilidad de uso (importante).

CONSIDERACIONES TÉCNICAS

-Tamaño Monitor.

1990 (600x480)

2000 (840x600)

2009 (1024x700)

CAMBIOS DE URL

(Uniform Resource Locators) – Localizadores de Recursos o Dirección de Página Web

- Evitarlo porque puedo provocar cierta incertidumbre por los usuarios (Favoritos / Marcadores).

EDITORES

BLOC DE NOTAS

- Notepad o Bloc de notas es un editor de texto simple incluido en los sistemas operativos de Microsoft desde 1985. Su funcionalidad es muy sencilla.

EDITORES WYSIWYG

WYSIWYG es el acrónimo de What You See Is What You Get (en inglés, "lo que ves es lo que obtienes"). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso. Se dice 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. 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.Ejemplos de editores HTML tipo WYSIWYG son: Dreamweaver, Frontpage.

EDITORES WYSIWYG (II)

Microsoft FrontPage

Microsoft FrontPage es una herramienta de construcción y edición de páginas web para el sistema operativo Windows. Forma parte de la suite Microsoft Office. Muchos consideran que el código HTML generado por esta aplicación es un poco descuidado y muchas veces reiterativo, especialmente en versiones antiguas. Como un ejemplo de esto, cabe señalar que la aplicación inserta todavía la etiqueta font, que ya está obsoleta ante W3C. Otro ejemplo es que posee funciones que solo funcionan en Internet Ex plorer.Microsoft ha dejado de producir FrontPage en 2006, y ofrece actualmente dos productos alternativos, con tecnologías más actualizadas: SharePoint Designer —parte de Microsoft Office— y Expression Web. Este último puede considerarse el sucesor directo de FrontPage.

EDITORES WYSIWYG (III)

Expression Web

Expression Web, es un editor Wysiwyg Html desarrollado por Microsoft como una aplicación para sitios web, considerada una versión superior de FrontPage 2003 por su semejanza en aspectos a este ultimo.(Expression Web) - Lanzada el 12 de Enero del 2007 (Expression Web 2) - Lanzada el 08 de Julio del 2008

EDITORES WYSIWYG (IV)

Macromedia Dreamweaver

Adobe Dreamweaver® (Dw) Es una aplicación en forma de estudio (Basada por supuesto en la forma de estudio de Adobe Flash®) pero con más parecido a un taller destinado para la construcción y edición de sitios y aplicaciones Web

basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras herramientasDreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.

EDITORES WYSIWYG (V)

Macromedia Dreamweaver

Como editor WYSIWYG que es, Dreamweaver oculta el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente.Algunos desarrolladores web critican esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C). No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación.Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.

EDITORES WYSIWYG (VI)

Macromedia Dreamweaver

Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServer Pages),PHP sin necesidad de tener experiencia previa en programación.Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.

EDITORES WYSIWYG (VII)

Macromedia Dreamweaver

También podría decirse, que para un diseño mas rápido y a la vez fácil podría complementarse con fireworks en donde podría uno diseñar un menú o para otras creaciones de imágenes (gif web, gif websnap, gif adaptable,jpeg calidad superior, jpeg archivo mas pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola, en donde ya llevara los vínculos a un dicho sitio en especifico que uno le haya dado.(MRR - U.P.C.)Dato Curioso: Su nombre en español significa "tejesueños o tejedor de sueños"

NAVEGADORES

Un navegador, navegador red o navegador web (del inglés, web browser) es un programa que permite visualizar la información que contiene una página web (ya esté esta alojada en un servidor dentro de la World Wide Web o en uno local).

-INTERNET EXPLORER

-MOZILLA

-MOZILLA FIREFOX

-GOOGLE CHROME

-NETSCAPE NAVIGATOR

-SAFARI

-OPERA

NAVEGADORES (II)

INTERNET EXPLORER

Windows Internet Explorer (anteriormente Microsoft Internet Explorer; abreviado MSIE), comúnmente abreviado como IE, es un navegador web producido por Microsoft para el sistema operativo Windows desde 1995 y más tarde para Sun Solaris y Apple Macintosh, estas dos últimas discontinuadas en el 2002 y 2006 respectivamente. Ha sido el navegador web más utilizado desde 1999, con un pico sostenido de cuota de utilización durante el 2002 y 2003 del 95% en sus versiones 5 y 6. Esa cuota de mercado ha disminuido paulatinamente debido a una renovada competencia por parte de otros navegadores, principalmente Mozilla Firefox. Microsoft gastó más de 100 millones de dólares (USD) al año en el decenio de 1990, con más de 1000 personas trabajando en IE para 1999.

NAVEGADORES (III)

MOZILLA FIREFOX

Mozilla Firefox es un navegador de Internet libre y de código abierto descendiente de Mozilla Application Suite, desarrollado por la Corporación Mozilla, la Fundación Mozilla y un gran número de voluntarios externos.Cuenta con el 22,48% del mercado de navegadores web en abril del 2009, por lo que es el segundo navegador más popular en todo el mundo, después de Internet Explorer.

NAVEGADORES (IV)

SAFARI

Safari es un navegador web desarrollado por Apple Inc.. Es el navegador incluido en Mac OS X y recientemente se han desarrollado versiones ejecutables para Microsoft Windows.

NAVEGADORES (V)

GOOGLE CHROME

Google Chrome es un navegador web desarrollado por Google y compilado con base en componentes de código abierto como el motor de renderizado de WebKit y su estructura de desarrollo de aplicaciones (Framework). Actualmente posee una cuota de mercado del 1,42% y está disponible gratuitamente bajo condiciones de servicio específicas. El nombre del navegador deriva del término usado para el marco de la interfaz gráfica de usuario ("chrome").El 2 de septiembre de 2008 salió a la luz la primera versión al mercado, siendo esta una versión preliminar (beta). Finalmente, el 11 de diciembre de 2008 se lanzó una versión estable al público en general. De momento, el navegador está disponible para la plataforma Microsoft Windows en 43 idiomas.

NAVEGADORES (VI)

OPERA

Opera es un navegador web y suite de Internet creado por la empresa noruega Opera Software. La aplicación es gratuita desde su versión 8.50, habiendo sido previamente shareware o adware y, antes de su versión 5.0, únicamente de pago.Es reconocido por su gran velocidad, seguridad, soporte de estándares (especialmente CSS), tamaño reducido, internacionalidad y constante innovación. Implementó ya desde sus primeras versiones la navegación por pestañas, el Speed Dial, los movimientos del ratón en la navegación, personalización por sitio, y la vista en miniatura por pestañaEn abril de 2009 alcanzó un porcentaje del 0,68% de uso en el mercado global de navegadores web.

NAVEGADORES (VII)

NETSCAPE NAVIGATOR

Netscape Navigator es un navegador web y el primer resultado comercial de la compañía Netscape Communications, creada por Marc Andreessen, uno de los autores de Mosaic, cuando se encontraba en el NCSA (Centro Nacional de Aplicaciones para Supercomputadores) de la Universidad de Illinois en Urbana-Champaign. Netscape fue el primer navegador comercial.

NAVEGADORES (VIII)

MOZILLA

Mozilla Application Suite es un navegador web y una plataforma de desarrollo libre y de código abierto para la WWW. A este hojeador se le denomina habitualmente navegador, aunque se está criticando bastante por prohibir a ciertos países como Cuba y Afganistán de usar el código Mozilla, aunque eso se debe a la antigua licencia de Netscape. Por decisión de la Fundación Mozilla esta suite ha dejado de ser desarrollada siendo actualmente su sucesor SeaMonkey.

LENGUAJES DE PROGRAMACION

-HTML

-XML

-SGML

-XHTML

-CSS

-JAVA

-JAVASCRIPT

-JSP

-ASP.NET

-ASP

-PHP

-………

HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.HTML también es usado para referirse al contenido del text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).Por convención, los archivos de formato HTML usan la extensión .htm o .html.

A RECORDAR:

• NO USAR MAYUSCULAS EN LOS ARCHIVOS, “Ñ”, TILDES NI CARACTERES EXTRAÑOS.

• NO USAR ESPACIOS EN BLANCO

• LA PÁGINA PRINCIPAL, SE DEBE LLAMAR “INDEX.HTM” O “HOME.HTM”

• FOTOGRAFÍAS PEQUEÑAS QUE “PESEN” SOBRE 2KB, LAS MEDIANAS SOBRE 10-30KB Y LAS GRANDES MÁXIMO 100KB.

• PROBAR MUCHOS NAVEGADORES

• PROBAR EN LOS NAVEGADORES ANTES DE SUBIR LAS PÁGINAS WEB.

• MANTENER LAS PÁGINAS WEB.

FIN