Download Diseño web - Fisica y algo mas

Universidad de Carabobo
Facultad de Ciencias de la Educación
Departamento de Matemática y Física
Diseño
PAGINA WEB, WEBNODE
Tutor: Reina Sequera
Autores: López Yannira
Ruiz Laumarys
Vásquez Yudith
Valencia, 2012
Ferreira José
La web
Requiere:
Interacción
Navegabilidad.
medios:
Interactividad.
Audio.
Usabilidad.
Texto.
Arquitectura
la información.
de
de
Imagen.
Enlaces y video.
En 1997
• David Siegel en técnicas avanzadas para el diseño
web.
•Estructura lineal.
•Eventual inserción
de fotografías y
líneas de separación.
•Baja definición
(proyectados para
terminales ASCII en
blanco y negro)
•Iconos en vez de
palabras subrayadas
con azul.
•Menú de opciones.
•Fondo coloreados o
con imágenes.
•Bordes azules
alrededor de las
figuras interactivas.
•Hegemonía del
diseño sobre la
tecnología.
•Utilización de
metáforas.
•Estructura entrada
– área central –
salida.
Francisco Tósete Herranz en la experiencia del usuario.
Arquitectura de
la información
Programación y
tecnología
Diseño de la
interacción
Diseño de la
información
Usabilidad
Accesibilidad
Sectores comerciales de Internet especialmente en
la World Wide Web.
la web se utiliza como medio de expresión
plástica en sí.
un medio más para ofrecer sus producciones y
utilizarlas como un canal más de difusión de su
obra.
Diseño web aplicado
Documento con
información
hiperenlazado
Una pantalla de
computador,en un
teléfono móvil
Estos documentos o páginas web
pueden ser creados:
•Creando archivos de texto en HTML, PHP, Asp,
Aspx, JavaScript,JSP, Python, Ruby.
•Utilizando
un
programa
WYSIWYG
o
WYSIWYM de creación de páginas.
•Utilizando lenguajes de programación del lado
servidor para generar la página web.
Etapas
para el diseño de páginas
web debemos tener en cuenta
tres etapas:
1. Es el diseño visual de la información que se desea editar.
2. Es la estructura y relación jerárquica de las páginas del sitio
web, una vez que se tiene este boceto se pasa a 'escribir' la
página web.
3. Consiste en el posicionamiento en buscadores.
Fundamentos
La
web
semántica,
por que
otra
Este
navegador
permite
parte,
aboga
por uncerrar
uso lógico
no sea
necesario
las
Seetiquetas
utiliza
documento
HTMLel
de
los el
elementos
según
del
marcado,
únicamente
para
contener,
significado
para
elpropietario,
que fueron
utiliza
código
organizar
estructurar
concebidas.
Por
ejemplo
etc.
Esto yimpide
que laesese
información
y las
hojas
utilizará
el elemento
<P>de
para
documento
web
sea
estilo
CSS
para
indicar
como
marcar
párrafos,
y <TABLE>
universal
e independiente
sedel
mostrará
dicha
para
tabularque
datos
(nuncapara
para
medio
se información
utilice
en los diferentes
disponer
de maneramedios.
visual los
ser mostrado.
diferentes
elementos
del
documento).
Accesibilidad
Para
conseguir
estos
objetivos de accesibilidad
se han desarrollado pautas
como las del W3C Pautas
de
accesibilidad
al
contenido Web 1.0 WCAG.
EJEMPLOS:
HISTORIA
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 8.000 millones de sitios, a los que
diariamente se les suma a raíz de 4400 por día.
Se puede entender la necesidad de
concentrar los esfuerzos para atraer y
mantener la atención de los usuarios.
HTML 5
Se introducen nuevos elementos
que mejoran la navegación y la
usabilidad de los sitios web en
los distintos navegadores.
<canvas>, <video> o <footer>.
Ventajas:
•Fácil de usar, casi como usar Word; no se necesita saber
de HTML.
•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.
•La inclusión de html editor y también de WYSIWYG.
Desventajas:
•Es muy básico, no ofrece demasiadas opciones; al realizar
acciones complejas se complica todo.
•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”.
•Es más flexible si se sabe lo básico de HTML para
empezar.
Las páginas web estáticas son
aquellas realizadas en HTML que
pueden mostrar en alguna parte de la
página objetos en movimiento.
Portal. Es un sitio
web que en su página
principal permite el
acceso a múltiples
secciones.
Tipos de
Pagina
Web
Las páginas web
animadas son aquellas
que se realizan con la
tecnología FLASH.
Página Web Dinámica. Existen muchos
lenguajes de programación que son la base
para la mayoría de páginas web
dinámicas. Las que destacamos aquí son
los lenguajes PHP y ASP.
Dos tipos
diferenciados
de portal:
Portal Horizontal, se
reconoce por su
temática variada con el
fin de captar el mayor
tráfico de internautas
posible.
Portal Vertical, que se
centra en ofrecer
contenido de una
temática en particular,
de este modo podemos
hablar de Portal
Inmobiliario, Portal de
Comercio, Portal
Laboral, etc.
Septiembre de 2006
2008
A fines de 2008 Webnode tuvo vas de
200.000 usuario en mas de 80 países
alrededor del mundo.
En 2010 supero mas de 2 millones de usuario
y tuvo mas de 12 versiones lingüísticas.
WEBNODE
características
Webnode es un sitio
web de arrastrar y
soltar constructor de
sitios en línea con 3
soluciones diferentes.
El sistema puede estar bajo los
navegadores de Internet más
comunes, tales como:
Es la capacidad de crear y editar su sitio web desde un teléfono
inteligente con conexión a Internet.
EJEMPLOS
PASO A PASO 1
Vamos a la página del navegador
EJEMPLOS
Ahora, nos crearemos una cuenta. Lo primero es elegir el nombre de nuestro Proyecto, es
importante elegirlo bien porque luego, la dirección de nuestra web y que daremos a todo el
mundo será http://NOMBRE_ELEGIDO.webnode.com. El nombre lo introduciremos en
Project Adress, introduciremos también una dirección de correo y una contraseña (no tiene
que
ser
la
misma
del
correo).
Ahora deberemos ir a
nuestro correo y aceptar
el enlace que nos llega.
EJEMPLOS
Al aceptar el enlace,
iremos a otra pantalla
donde pulsaremos en
Start here.
En la siguiente pantalla, pondremos
un slogan que aparecerá en la
cabecera de nuestra web y
elegiremos también el idioma de la
web. Pulsamos Next.
EJEMPLOS
Ahora elegiremos una
plantilla para la web de
entre las que nos ofrece.
Esta plantilla puede
cambiarse más adelante si
queremos.
Por último, Webnode, nos
ofrece la posibilidad de crear
por nosotros algunas páginas.
La mejor opción, sin
embargo, es borrar todas las
páginas y luego crear sólo las
que nos interesen.
EJEMPLOS
Pulsaremos Finish para terminar y ya
tenemos nuestra web, si vamos a la dirección
http://NOMBRE_ELEGIDO.webnode.com ve
remos nuestra primera web, vacía, eso sí.