REPBLICA BOLIVARIANA DE VENEZUELAINSTITUTO UNIVERSITARIO DE
TECNOLOGA ANTONIO JOS DE SUCREEXTENSIN-ANACO
HERRAMIENTAS PARA EL diseo de pginas web
Rosibel Gonzlez
Anaco, Abril 2015
INDICE Pg.
Introduccin3
Principios bsicos para crear una pgina web. 4
Herramientas para disear pginas web.. 6
Macromedia Dreamweaver 11
Wamp server12
Conclusiones.. 15
Referencias Bibliogrficas16
INTRODUCCIN
El diseo de pginas Web ha tenido en los ltimos aos una difusin a
nivel mundial porque las empresas, instituciones, universidades,
entre otros, requieren brindar informacin a los distintos
usuarios.Antes de disear una pgina Web, se debe pensar cmo debe
organizarse la informacin y lo ms importante no olvidar que la
finalidad es que llegue al lector.Como diseadores debemos ponernos
en el lugar de los dems, en este caso los usuarios que visitarn la
Web tendrn en cuenta lo siguiente:Se debe crear una interfaz clara
y amigableLa informacin debe ser clara y precisaDebe presentarse
informacin importante y relevanteEl diseo de una pgina Web es
importante para ofrecer esa primera buena impresin a sus clientes,
pero no es lo nico. Una Web de calidad necesita de otros requisitos
para aumentar el xito de su servicio: Claridad, Facilidad de Uso,
Velocidad de carga, etc., son factores determinantes en la captacin
de las personas.Para la realizacin de una pgina Web se deben de
tener en cuenta un conjunto de elementos en el diseo para poder
lograr principalmente una interfaz amigable.
PRINCIPIOS BSICOS PARA CREAR UNA PAGINA WEB.Existen muchas
herramientas tools que le permitirn crear, de una forma fcil y
sencilla pginas web eficientes. No obstante, si es principiante en
el diseo de pginas web, se debe tomar en cuenta lo siguiente:
Comprender las pginas web eficaces Ajustar su idea al proceso de
diseo. Disfrutar con el diseo de su pgina web
Existen 4 formas de crear una pgina web:
HTML: a standard or sistema de edicin de textos con "tags" que
dan formato a la pgina. Se puede ensear como el lenguaje de
programacin de Internet.
Editor HTML: HomeSite y BBEdit ofrecen herramientas y
"shortcuts" para editar y formatear pginas web usando el formato
HTML.
Un sistema de gestin de contenidos (en ingls Content Management
System, abreviado CMS) es un programa que permite crear una
estructura de soporte para la creacin y administracin de
contenidos, principalmente en pginas web, por parte de los
participantes (Wikipedia)
WYSIWYG (What you see is what you get): Editor que usa la
tecnologa "Lo que usted ve es lo que obtiene" como Expression Web o
Pagemill que cran pginas/sitios web sin conocer el lenguaje
HTML--ventaja de trabajar directamente sobre el servidor (no
necesita transferir los archivos una vez acabados)
Sumario de diseo:
Determine a quin est destinada su pgina motive a su audiencia:
trtelos con respeto y ofrzcales la posibilidad de comunicacin con
usted Establezca unos claros objetivos de diseo y cuantificables.
Incluya contestaciones, agradecimientos, reacciones y comentarios
sobre esfuerzo y el xito de su pgina, e incluya textos de ayuda
para aquellos que no obtienen la informacin que esperaban.
Contenido Defina y centre el contenido de su pgina web Emplee un
lenguaje simple y comprensible para los destinatarios
internacionales Fomente el scanning de conceptos importantes
Incorpore espacios en blanco priorice su informacin, como en un
resumen.
Navegacin: Simple Clara layered (site maps) organizada (piense
en los "resmenes" )
Inclusin de imgenes:El desarrollo de una pgina Web empieza por
su texto y la estructura.Despus de desarrollar la estructura bsica,
se debe analizar el contenido de tal forma que podamos decidir qu
tipo de ilustracin queda mejor, si un grfico o una foto.
Principios: Elija un fondo y un color de texto de gran contrasteUse
la opcin "safe palette" del navegador para que haya coherencia
entre la plataforma y el navegador.
sea coherente con el formato del texto: Evite los cambios de
colorEvite cursivas (dificultad de lectura)Cambios de
color,Subrayado (se confunde con los links)Evite textos demasiado
largosLos fondos con texturas que no permitan una fcil lectura;Use
imgenes simples, simbitica, reducidas (pequeas) e inmviles para
ilustrar el contenidoEvite los grficos "dancing dogs" que no hacen
ms que moverse pero que no aportan ningn contenidoLos formatos de
archivos grficos son: comprimidos (.jpg) fotografas y dibujos
(.gif)
1.- HERRAMIENTAS PARA DISEAR UNA PAGINA WEB
1. Wix: cada vez surgen ms sitiosque te permiten crear tu pgina
web usando editores visuales sin necesidad de escribir ni una sola
etiqueta de cdigo. Wix es uno de esos sitios. Es tan fcil de
utilizar que cualquier usuario medio podra crearse una pgina web
sencilla en poco tiempo. Su editor visual es muy intuitivo y te
permite crear bloques y arrastrar elementos para que los ubiques
justo en el sitio que t quieras. La desventaja es que la versin
gratuita tiene opciones limitadas, por lo que si quieres disfrutar
detodas las ventajas de Wix vas a tener que contratar una cuenta
Premium. Pero si no necesitas una pgina web demasiado compleja
puede ser una buena opcin.
2. Weebly: Weebly es un editor similar a Wix. Su interfaz se
parece ms a un editor clsico de pginas web, aunque tambin permite
modificar los elementos de una forma sencilla, pinchando y
arrastrando o modificando directamente los contenidos dentro del
editor visual.
Editores HTML3. Adobe Dreamweaver: Dreamweaver es el editor web
ms conocido y ms utilizado por los diseadores. Forma parte de la
suite Creative Cloud de Adobe y, por tanto, es perfectamente
compatible con otras herramientas de diseo grfico de la misma
suite, comoPhotoshop o Illustrator, lo que convierte a Dreamweaver
en una opcin ms que recomendable. Dreamweaver es una herramienta de
perfil avanzado ideada para profesionales del diseo
4. Kompozer: Kompozer es un editor de HTML gratuito. Es una
herramienta muy verstil que es ideal si la utilizas como
complemento de otras aplicaciones, aunque si quieres tambin puedes
utilizarla para desarrollar un sitio web en HTML. Es un editor
ideal para empezar a sumergirte enHTML5, CSS3 o PHP.
Sistemas CMSLos sistemas CMS se han ganado un puesto de honor
entre las herramientas de desarrollo de pginas web. Desde su
explosin a mediadosde la dcada del 2000, cambiaron por completo el
concepto de diseo que exista hasta entonces, en el que por lo
general para poder crear un sitio web era necesario confeccionarlo
en un editor tradicional a base de introducir cdigo y ms cdigo. Los
sistemas CMS permiten separar diseo y contenido, de formaque
ahorran mucho tiempoy esfuerzo al usuario. De hecho, con ellos
puedes confeccionar sitios web aparentemente complejossin necesidad
de utilizarcdigo, pues ellos generan el cdigo por ti de manera
automtica. A continuacin, se expresa los tres sistemas CMS ms
populares segn los datos estadsticos del W3C: Joomla, Drupal y
WordPress.
Sistemas CMS ms utilizados (Fuente: W3C). En gris, el porcentaje
de usuarios. En verde, la cuota de mercado.
5. Joomla: Joomla es un CMS gratuito basado en PHP que permite
generar sitios web dinmicos. Su panel de administracin te permite,
entre otras cosas, instalar plantillas y personalizar tu sitio web
por mdulos,as que con poco vas a poder conseguir resultados muy
buenos. Es una herramienta muy utilizada sobre todo para
desarrollar sitios web de comercio electrnico, aunque en realidad
se puede utilizar para fines muy diversos (plataforma de blogging,
web personal, TPV, sitio de e-learning, etc.). No obstante, no
considero que sea un CMS accesible para un usuario de perfil
medio/bajo, dado que su panel de administracin no es tan intuitivo
como el de otros CMS.
6. Drupal: Drupal es otro sistema CMS basado en PHP y combinable
con MySQL (al igual que Joomla y WordPress), que puede utilizarse
para mltiples propsitos, aunque curiosamente se ha estandarizado
para desarrollarcomunidades y sitios web participativos. Permite
confeccionar sitios web utilizando plantillas y mdulos (hay miles
disponibles). No obstante, su curva de aprendizaje es bastante
alta, dado que es una herramienta creada por programadores y para
programadores, por tanto si buscas un sistema CMS fcil de usar e
intuitivo quiz Drupal no sea la mejor opcin (aunque eso no
significa que no puedas aprender a utilizarlo).
7. WordPress: WordPress es el sistema CMS ms utilizado por los
usuarios deInternet y el que tiene una mayor cuota de mercado. Al
contrario de lo que ocurre con Drupal y Joomla, su interfaz es
mucho ms intuitiva, por lo que la mayora de usuarios medios que
quieren utilizar un CMS para desarrollar un sitio web suelen
recurrir a esta herramienta. WordPress surgi inicialmente como
plataforma de blogging,pero poco a poco fue evolucionando hasta el
punto de que ahora puede utilizarse para crear cualquier tipo de
pgina web. Hay miles de plantillas disponibles y miles de widgets y
plugins que permiten a los usuarios potenciar sus pginas web sin
necesidad de introducir cdigo.
2.- Macromedia dreamweaver
Adobe Dreamweaver es una aplicacin en forma de suite (basada en
la forma de estudio de Adobe Flash) que est destinada a la
construccin, diseo y edicin de sitios y aplicaciones Web basados en
estndares. Creado inicialmente por Macromedia (actualmente
producido por Adobe Systems) es el programa 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 MALVERDE'S Hasta la versin MX, fue duramente
criticado por su escaso soporte de los estndares de la web, ya que
el cdigo que generaba era con frecuencia slo vlido para Internet
Explorer y no validaba como HTML estndar. Esto se ha ido
corrigiendo en las versiones recientes.
Ventajas de usar el programa Dreamweaver
Trabajar sin necesidad de tener conocimientos de programacin
HTML. Con el mismo editor puedes trabajar tanto pginas estticas
como dinmicas. Permite conectividad con base de datos. Ahorro de
tiempo en desarrollo de proyectos. Herramientas de comprobacin de
errores en compatibilidad. Tiene integrado el Protocolo de
Transferencia de Archivos (FTP), es decir, permite transferir los
archivos al servidor cuando el diseo del sitio web est listo. Uso
de hojas de estilo en cascada (CSS, Cascading Style Sheets), el
cual es un lenguaje usado para definir la presentacin de un
documento estructurado escrito en HTML o XML.
3- Wamp serverWAMP acrnimo usado para describir un sistema de
infraestructura de internet que usa las siguientes herramientas:
Windows, como sistema operativo; Apache, como Servidor web; MySQL,
como gestor de bases de datos; PHP (generalmente), Perl, o Pyton,
como lenguaje de programacin.El uso de un WAMP permite servir
pginas html a internet, adems de poder gestionar datos en ellas, al
mismo tiempo un WAMP, proporciona lenguajes de programacin para
desarrollar aplicaciones web.
WampServer es un entorno de desarrollo web para Windows con el
que se puede crear aplicaciones web con Apache, PHP y bases de
datos MySQL database. Tambin incluye PHPMyAdmin y SQLiteManager
para manejar tus bases de datos de manera ms sencilla.
CARACTERSTICASProvee a los desarrolladores con los cuatro
elementos necesarios para un servidor web: un Sistema Operativo
(Window), un manejador de base de datos (MySQL), un software para
servidor web (Apache) y un software de programacin script Web (PHP
(generalmente), Python o PERL), debiendo su nombre a dichas
herramientas. Lo mejor de todo es que WAMPServer es completamente
gratuito. WAMP incluye, adems de las ltimas versiones de Apache,
PHP Y MySQL, versiones anteriores de las mismas, para el caso de
que se quiera testear en un entorno de desarrollo particular.
UTILIDADEl uso de WAMP permite servir pginas HTML a internet,
adems de poder gestionar datos en ellas, al mismo tiempo WAMP,
proporciona lenguajes de programacin para desarrollar aplicaciones
Web.
REQUERIRIENTOS DE WAMP SERVER CON PHPServidor web con soporte a
PHP y base de datos (MySQL o PostgreSQL) GNULinux: LAMPserver,
Apache + PHP 5 + MySQL . Windows: WAMPserver: XAMPP o WOSDel lado
del servidor: Apache (servidor de aplicaciones) PHP (lenguaje de
programacin web) WAMP SERVER MySql (Base de datos)Del Lado del
cliente Navegador de internetFUNCIONALIDADES DE
WAMPSERVERWampServer tiene funcionalidades que lo hacen muy
completo y fcil de usar.Con un clic izquierdo sobre el icono de
Wampserver, ser capaz de: Gestionar sus servicios de Apache y MySQL
cambiar a modo en lnea / fuera de lnea (accesible a todos, estar
limitado a localhost) Instalar y cambiar la versin de Apache, MySQL
y PHP Administrar la configuracin de los servidores Acceder a los
registros El acceso a los archivos de configuracin Crear alias y
mucho ms ..Con un clic derecho: WampServer cambiar el idioma de men
Acceder a la pgina principal
CONCLUSIONES
La interfaz web, la navegacin entre pginas y la usabilidad son
los elementos ms importantes para el triunfo de un sitio web,
porque son los elementos que ms valora el usuario final, y el
usuario es el rey.
El Diseo web es un tema complejo, en el que no slo intervienen
procesos de Diseo grfico, sino que tambin son imprescindibles
aspectos como arquitectura de la informacin, navegacin, usabilidad,
funcionalidad, programacin en cliente, etc.
El profesional adecuado para esta labor no es el programador, ni
el diseador grfico, ni el jefe de proyecto; es el diseador web, la
persona que es capaz de combinar todos los ingredientes necesarios
para producir un sitio web equilibrado, usable, funcional y
til.
El trabajo del diseador web es uno de los ms importantes en la
concepcin y desarrollo de una aplicacin web, tanto como el del
programador.
REFERENCIAS BIBLIOGRFICAS
Creative Commons (2015). Adobe Dreamweaver. Disponible en:
http://es.wikipedia.org/wiki/Adobe_Dreamweaver
Creative Commons (2015). HTML Dinmico. Disponible en:
http://es.wikipedia.org/wiki/DHTML
Sappiens.com (2015). Pginas Web Estticas vs Pginas Web Dinmicas.
Disponible
enhttp://www.sappiens.com/castellano/articulos.nsf/Marketing/P%C3%A1ginas_Web_est%C3%A1ticas_vs_din%C3%A1micas/992EF9270B53D545C12573D900169C4F!opendocument
Vasconcelos, R. (2015). Resea sobre Dreamweaver/ Raul
Vasconcelos Moreno. Disponible
en:http://multimedia.uoc.edu/~usuaris/wiki/index.php/Rese%C3%B1a_sobre_Dreamweaver/_Raul_Vasconcelos_Moreno
16
