CREACIN DE PGINAS WEB - ASPECTOS FUNDAMENTALES -

ENRIQUE GRAU BLASCO [email protected] 654352009 www.entretente.es

DISEAR PARA WEB

-Organizacin -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 caractersticas del sistema informtico de los usuarios (velocidad de la conexin, ordenadores actuales, porttiles, navegadores, sistemas operativos, edad, sexo, experiencia)

CONCEBIR EL DISEO GRFICO

-Es necesario definir y distribuir con lgica todo lo que es importante en una pgina: imgenes, grficos, formatos, colores -Es importante tener nociones de algn editor grfico. -El lenguaje debe ser claro y conciso, dependiendo del pblico a quin va dirijido

DISEAR LA INTERFAZ
-La gente visita nuestro sitio por la informacin que contiene, no por la innovacin, diseo ni estilo. -Es prioritario la funcionalidad.

-Facilidad de uso (importante).

CONSIDERACIONES TCNICAS
-Tamao Monitor. 1990 (600x480) 2000 (840x600) 2009 (1024x700)

CAMBIOS DE URL
(Uniform Resource Locators) Localizadores de Recursos o Direccin de Pgina 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 acrnimo de What You See Is What You Get (en ingls, "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 contraposicin a otros procesadores de texto, hoy en da poco frecuentes, en los que se escriba sobre una vista que no mostraba el formato del texto, hasta la impresin del documento. En el caso de editores de HTML este concepto se aplica a los que permiten escribir la pgina sobre una vista preliminar similar a la de un procesador de textos, ocupndose en este caso el programa de generar el cdigo fuente en HTML. Ejemplos de editores HTML tipo WYSIWYG son: Dreamweaver, Frontpage.

EDITORES WYSIWYG (II)

Microsoft FrontPage
Microsoft FrontPage es una herramienta de construccin y edicin de pginas web para el sistema operativo Windows. Forma parte de la suite Microsoft Office. Muchos consideran que el cdigo HTML generado por esta aplicacin es un poco descuidado y muchas veces reiterativo, especialmente en versiones antiguas. Como un ejemplo de esto, cabe sealar que la aplicacin inserta todava 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 tecnologas ms 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 aplicacin para sitios web, considerada una versin 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 aplicacin en forma de estudio (Basada por supuesto en la forma de estudio de Adobe Flash) pero con ms parecido a un taller destinado para la construccin y edicin de sitios y aplicaciones Web basados en estndares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo ms utilizado en el sector del diseo y la programacin web, por sus funcionalidades, su integracin con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estndares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edicin de imgenes como para animacin a travs de su integracin con otras herramientas Dreamweaver ha tenido un gran xito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicacin est disponible tanto para la platafoma MAC como para Windows, aunque tambin 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 cdigo HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear pginas y sitios web fcilmente. Algunos desarrolladores web critican esta propuesta ya que crean pginas HTML ms largas de lo que solan ser al incluir mucho cdigo intil, lo cual va en detrimento de la ejecucin de las pginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicacin facilita en exceso el diseo de las pginas mediante tablas. Adems, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba cdigo que no cumpla con los estndares del consorcio Web (W3C). No obstante, Adobe ha aumentado el soporte CSS y otras maneras de disear pginas sin tablas en versiones posteriores de la aplicacin. Dreamweaver permite al usuario utilizar la mayora de los navegadores Web instalados en su ordenador para previsualizar las pginas web. Tambin dispone de herramientas de administracin de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar lneas de texto y cdigo por cualquier tipo de parmetro especificado, hasta el sitio web completo. El panel de comportamientos tambin permite crear JavaScript bsico sin conocimientos de cdigo.

EDITORES WYSIWYG (VI)

Macromedia Dreamweaver
Con la llegada de la versin MX, Macromedia incorpor herramientas de creacin de contenido dinmico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, tambin permite la conexin a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnologa de script como, por ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServer Pages),PHP sin necesidad de tener experiencia previa en programacin. Un aspecto de alta consideracin de Dreamweaver es su arquitectura extensible. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeos programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo as funcionalidades aadidas a la aplicacin. 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 mayora de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.

EDITORES WYSIWYG (VII)

Macromedia Dreamweaver
Tambin podra decirse, que para un diseo mas rpido y a la vez fcil podra complementarse con fireworks en donde podra uno disear un men o para otras creaciones de imgenes (gif web, gif websnap, gif adaptable,jpeg calidad superior, jpeg archivo mas pequeo, gif animado websnap) para un sitio web y despus exportar la imagen creada y as utilizarla como una sola, en donde ya llevara los vnculos a un dicho sitio en especifico que uno le haya dado.(MRR U.P.C.) Dato Curioso: Su nombre en espaol significa "tejesueos o tejedor de sueos"

NAVEGADORES
Un navegador, navegador red o navegador web (del ingls, web browser) es un programa que permite visualizar la informacin que contiene una pgina 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), comnmente abreviado como IE, es un navegador web producido por Microsoft para el sistema operativo Windows desde 1995 y ms tarde para Sun Solaris y Apple Macintosh, estas dos ltimas discontinuadas en el 2002 y 2006 respectivamente. Ha sido el navegador web ms utilizado desde 1999, con un pico sostenido de cuota de utilizacin 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 ms de 100 millones de dlares (USD) al ao en el decenio de 1990, con ms de 1000 personas trabajando en IE para 1999.

NAVEGADORES (III)
MOZILLA FIREFOX
Mozilla Firefox es un navegador de Internet libre y de cdigo abierto descendiente de Mozilla Application Suite, desarrollado por la Corporacin Mozilla, la Fundacin Mozilla y un gran nmero de voluntarios externos. Cuenta con el 22,48% del mercado de navegadores web en abril del 2009, por lo que es el segundo navegador ms popular en todo el mundo, despus 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 cdigo 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 especficas. El nombre del navegador deriva del trmino usado para el marco de la interfaz grfica de usuario ("chrome"). El 2 de septiembre de 2008 sali a la luz la primera versin al mercado, siendo esta una versin preliminar (beta). Finalmente, el 11 de diciembre de 2008 se lanz una versin estable al pblico 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 aplicacin es gratuita desde su versin 8.50, habiendo sido previamente shareware o adware y, antes de su versin 5.0, nicamente de pago. Es reconocido por su gran velocidad, seguridad, soporte de estndares (especialmente CSS), tamao reducido, internacionalidad y constante innovacin. Implement ya desde sus primeras versiones la navegacin por pestaas, el Speed Dial, los movimientos del ratn en la navegacin, personalizacin por sitio, y la vista en miniatura por pestaa En 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 compaa 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 UrbanaChampaign. Netscape fue el primer navegador comercial.

NAVEGADORES (VIII)
MOZILLA
Mozilla Application Suite es un navegador web y una plataforma de desarrollo libre y de cdigo abierto para la WWW. A este hojeador se le denomina habitualmente navegador, aunque se est criticando bastante por prohibir a ciertos pases como Cuba y Afganistn de usar el cdigo Mozilla, aunque eso se debe a la antigua licencia de Netscape. Por decisin de la Fundacin 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 construccin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML tambin 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 tambin es usado para referirse al contenido del text/html o todava ms ampliamente como un trmino genrico 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 convencin, los archivos de formato HTML usan la extensin .htm o .html.

A RECORDAR:
NO USAR MAYUSCULAS EN LOS ARCHIVOS, , TILDES NI CARACTERES EXTRAOS. NO USAR ESPACIOS EN BLANCO LA PGINA PRINCIPAL, SE DEBE LLAMAR INDEX.HTM O HOME.HTM FOTOGRAFAS PEQUEAS QUE PESEN SOBRE 2KB, LAS MEDIANAS SOBRE 10-30KB Y LAS GRANDES MXIMO 100KB. PROBAR MUCHOS NAVEGADORES PROBAR EN LOS NAVEGADORES ANTES DE SUBIR LAS PGINAS WEB. MANTENER LAS PGINAS WEB.

FIN