2. 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.
3. 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…)
4. 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
5. 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).
7. 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).
8. 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.
9. 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.
10. 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.
11. 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
12. 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 herramientas
Dreamweaver 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.
13. 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.
14. 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.
15. 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"
16. 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
17. 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.
18. 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.
19. 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.
20. 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.
21. 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ña
En abril de 2009 alcanzó un porcentaje del 0,68% de uso en el mercado global
de navegadores web.
22. 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.
23. 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.
25. 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.
26. 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.
