Sitio con ayudas, guas y enlaces tiles para crear sitios Web Estar en el Ciberespacio

Alguna vez se ha preguntado para qu es bueno un sitio Web?. Para mucho, para mucho. odo depende de su inters para dar a concer! in"ormaci#n pro"esional, "amiliar, institucional $%o empresarial. Cada vez e&iste la necesidad de darse a conocer en la red, en este sitio compartiremos a$udas, gu'as $ sitios de inters que le servir(n de mucha a$uda a la hora de crear su propio sitio Web. Por "ortuna ha$ "ormas cada vez m(s sencillas $ r(pidas de montar un sitio Web.

)*sted mismo puede crearlo+ ),anos a la obra+

Algunos Consejos para Crear el sitio Web

- rate de utilizar la misma plantilla en todo su sitio - Es conveniente que cada p(gina se e&tienda solo a lo largo de la pantalla, que se pueda visualizar de un solo vistazo. - *tilice al menos una im(gen en cada p(gina para re"orzar las ideas. - Evite utlizar muchos colores en una sola p(gina. rate de buscar la armon'a $ la esttica. - *tilice im(genes $ "otos de tama.o /00 & /00 pi&eles por pulgadas. Esto permitir( que las p(ginas se carguen r(pidamente.

Puede leer ms: Conse1os generales para el dise.o de p(ginas Web 23r al sitio4 Conse1os para armar un sitio Web 23r al sitio4

Pasos a seguir para elaborar una pgina WEB

5a realizaci#n $ creaci#n de p(ginas WE6 es una labor que requiere de una cierta estructura $ plani"icaci#n al comienzo de su elaboraci#n. El resultado "inal de nuestro traba1o depender( de la organizaci#n, la originalidad $ los elementos utilizados en las p(ginas que se creen. 7ebe tenerse siempre presente, a quien va dirigida nuestra WE6, para adecuar los contenidos $ el estilo en "unci#n del colectivo que va a leer nuestras p(ginas. Cuide que el lector no se pierda en la navegaci#n, por lo que se debe estructurar de una "orma clara la relaci#n de unas p(ginas con otras.
1.

! "e#inici$n de los objeti%os! El primer paso, para la creaci#n de p(ginas WE6 bien estructuradas, es saber de antemano el mensa1e que se desea transmitir. 5as im(genes $ los elementos a utilizar ser(n distintos si se plantea una WE6 para vender un producto, o para dar in"ormaci#n o para publicar un traba1o cient'"ico. En este 8ltimo caso, la p(gina debe dar una imagen m(s "ormal.

2. &! Per#ilar una lnea de dise'o!

9a$ que tener en cuenta que los WE6s pro"esionales tienen una apariencia m(s "ormal, $ que su dise.o es tan importante como el de la imagen de una instituci#n. En un plano m(s pro"esional, se debe cuidar la presentaci#n, manteniendo siempre una imagen corporativa a lo largo de todas las p(ginas $ un estilo adecuado al per"il de la instituci#n. Esto te permitir( recopilar los materiales que incluir(s en ella! im(genes, gr("icas, impresos, "ormularios, logotipos, etc. 5a l'nea de dise.o debe ser coherente $ homognea, que mantenga una apariencia visual com8n! los mismos colores o motivos de "ondo, el mismo estilo de l'neas divisorias horizontales $ verticales, los mismos iconos o vi.etas o los mismos logotipos gr("icos siempre en la misma posici#n de la p(gina. :u aspecto pro"esional con elementos comunes har( que los usuarios visiten las p(ginas con orden $ no se pierdan pensando que est(n en otra Web.
3. (! Crear el organigrama de na%egaci$n!

A continuaci#n debes plani"icar c#mo van a desplazarse los usuarios por ellas. :e debe realizar un diagrama de "lu1o claro para de"inir los 'ndices principales, las p(ginas secundarias $ las rami"icaciones de todos los documentos. :i utilizas una sola p(gina WE6 $ esta es mu$ e&tensa deber(s poner enlaces a las di"erentes partes del documento al principio $ al "inal de tu p(gina $ de esta "orma "acilitar la lectura de la misma, sin tener que depender tanto de las barras de desplazamiento.

4. )! "e#inici$n de estilo

*na vez creada la estructura b(sica del WE6, se debe de"inir el estilo de las p(ginas. ;esulta pr(ctico crearse una p(gina de estilo para aplicar a todas las p(ginas que va$amos generando, inclu$endo los logotipos, encabezados $ pies.
2Pasos a seguir para elaborar una p(gina WE64

*eglas para estructurar y dise'ar pginas WEB

3gual que cualquier otro medio, el Web tiene ciertas idiosincracias que el buen dise.ador debe tener en cuenta. 7ado que el Web es un medio estrictamente para computadoras, el resultado que querramos obtener se ver( condicionado al hard<are con el que se visualice =la tar1eta de video, el monitor, $ las con"iguraciones> $ el e&plorador <eb que se utilice para la visualizaci#n de nuestras p(ginas. Definir el contenido de las pginas! *se gr("icos $ colores $ var'e el tama.o de la letra para realzar la p(gina, pero aseg8rese que la p(gina tambin "uncione cuando se vea como te&to normal. 3nclu$a siempre una alternativa de te&to a los elementos gr("icos, pues algunos usuarios desactivan su presentaci#n para lograr una descarga de la p(gina mucho m(s r(pida.. ;eduzca el te&to al m'nimo, es decir no es conveniente presentar te&tos mu$ largos, $a que el usuario no los lee. ;eduzca al m'nimo los estilos de encabezamientos $ subt'tulos cuando organice el contenido $ utilice los estilos de "orma coherente. Puede insertar l'neas horizontales para separar visualmente las secciones del documento. Combinacin de fondos con el texto!

El "ondo puede hacer que la lectura de los documentos en pantalla sea m(s atractiva. :in embargo, los colores e im(genes oscuras pueden inter"erir con los colores del te&to, di"icultando su lectura. Es conveniente aplicar al te&to un color de contraste, por e1emplo! un color claro para te&to sobre "ondo oscuro $ viceversa. Pero, trate de evitar la utilizaci#n de te&tos de color blanco, pues algunas impresoras no escriben en dicho color. Establecer la longitud de la pgina ! *na gran parte de los monitores de los equipos personales actuales presentan la in"ormaci#n en una resoluci#n de ?@0 & @A0 pi&els en pantallas de B/ a BC pulgadas =tambin en A00 & ?00>. 7ise.e las p(ginas de "orma que la in"ormaci#n se presente en partes cortas $ claramente segmentadas, a "in de mantener las p(ginas concisas. *na buena regla general para escribir una p(gina que se leer( en la pantalla es que su longitud no sea ma$or que dos o tres pantallas de in"ormaci#n de ?@0 & @A0, incluidos los enlaces de navegaci#n locales, al principio $ "inal de la p(gina. :i la in"ormaci#n es mu$ e&tensa, divida la in"ormaci#n en p(ginas separadas o proporcione un enlace con un archivo di"erente que contenga el te&to en una sola p(gina. Esto permitir( que la descarga de la in"ormaci#n $ la navegaci#n a lo largo de los di"erentes temas se haga m(s r(pida para los visitantes del Web. Reducir el tamao de los archivos de imgenes y vdeos en las pginas Web! 5as im(genes son un elemento importante en un sitio Web. Estas vienen en dos "ormatos b(sicos! D3E $ FPED. Cada "ormato tiene sus venta1as e inconvenientes. 5as im(genes D3E son pre"eribles cuando la imagen va a contener menos de GC? colores. 5os D3E son tambin apropiados para animaciones sencillas. 5as im(genes FPED se utilizan en imagenes con m(s de GC? colores, como son las "otogra"'as escaneadas. 5as im(genes gr("icas $ los videos pueden dar un aspecto m(s atractivo a sus p(ginas Web. :in embargo, los archivos de dichos elementos pueden llegar a ser de gran tama.o e incrementar el tiempo necesario para descargar las p(ginas, sobretodo para los lectores que tienen acceso v'a ,H7E,. El tiempo de descarga es mu$ importante en el World Wide Web, $a que algunos usuarios abonan la cuota en "unci#n de las horas de cone&i#n, otros simplemente no son tan pacientes como para esperar mucho tiempo por la carga de la p(gina. :i *d. plani"ica la cantidad de im(genes que utilizar( en su pagina Web $ su tama.o, puede reducir por consiguiente el tama.o de los archivos $ el tiempo de descarga de los gr("icos $ videos. Para reducir el tama.o de un archivo gr("ico, utilice menos colores, reduzca el alto $ el ancho del gr("ico o rec#rtelo.

so de tablas como herramientas de diseo ! Puede utilizar las tablas como una herramienta de dise.o, pero tambin para organizar la in"ormaci#n. 5as columnas, los gr("icos $ el te&to pueden organizarse de "orma que aparezcan alineados en los navegadores Web. :i no se utilizan tablas, es complicado mantener los gr("icos $ el te&to alineados en 9 ,5 ="ormato de las p(ginas Web>. so de distintos navegadores! :u p(gina Web puede tener un aspecto en su pantalla $ otro di"erente para los usuarios que la vean, en especial si lo hacen en el Word Wide Web. 5os usuarios ven las p(ginas con distintos e&ploradores de Web =E1! 3nternet E&plorer o Ietscape Iavigator> que, por lo general, se encuentra en sistemas operativos di"erentes. :e recomienda utilizar un dise.o que sea legible en todas o en la ma$or'a de las circunstancias. Aunque todos los navegadores admiten un 8nico lengua1e 9 ,5, e&isten algunas di"erencias entre ellos.

6ibliogra"'a!

1. 2.

Ca.izares EC. Creaci#n de p(ginas Web con H""ice JK. Ediciones AIALA ,ultimedia, ,adrid, BJJJ! GC-// ,atthe<s ,:, Poulsen E6. Eront Page JA. ,anual de ;e"erencia. ,cD;AW-9355%3nteramericana de Espa.a, ,adrid, BJJJ! BG-GK

*esumen
Recuerda que una pgina web es un documento que puede estar conformado por texto, imgenes, audio, video y por otros documentos a los que se accede a travs de enlaces. En cambio un sitio web es un conjunto de pginas web, generalmente referentes a un tema en particular, que incluye una pgina inicial denominada home page, con un nombre de dominio y direccin en Internet especficos. Sigue esta gua para saber cmo construirlo y qu debes tener en cuenta para lograrlo.

Pasos

Decide sobre qu tema/s se tratar tu sitio y cules son tus objetivos al respecto. Quieres dar a conocer tu barrio, vender palos de golf, crear un lugar de encuentro entre fanticos del atletismo?

&
Elige un nombre para tu sitio y registra el dominio a nivel local y/o internacional, segn tu preferencia. Puedes registrar dominios .com en: www.godaddy.com

(
Contrata un servidor donde alojar tu sitio. Este paso te permitir verlo online. Hay mucha oferta y precios accesibles.

)
Elije un servicio de publicacin de pginas. Los servicios de publicacin de pginas te brindarn varias herramientas sencillas de utilizar. Generalmente encontrars una especie de "pgina en blanco" donde podrs comenzar a escribir, y una serie de botones, a travs de los cuales se pueden agregar fotos, justificar texto, tipo de letra, colores o incluso algunos simples efectos especiales. Podrs actualizar los contenidos en forma muy simple. Muchos de los servicios de publicacin de pginas Web son editables, para ello es importante conocer bsicamente el lenguaje de programacin HTML. El HTML, Hiper Text Markup Language, es el lenguaje de programacin bsico de Internet y est basado en tags o etiquetas que permiten indicarle a la PC dnde y cmo debe ir cada elemento de la pgina web. Los principales servicios de publicacin son: Google Pages Creator Google ofrece unos 100 MB para crear sencillas pginas web. Una vez suscripto, puedes elegir entre ms de 40 plantillas para crear tu pgina propia. Una de las grandes ventajas en que, al ser un servicio de Google, las pginas creadas con esta herramienta estarn indexadas en el poderoso buscador. MSN Spaces Para crear una pgina web con esta herramienta de Microsoft, slo es necesario poseer una direccin de correo electrnico de Hotmail o suscribirse a .NET Passport. Posteriormente, debers establecer un titulo que defina a la pgina. Tendrs luego a tu disposicin, una pgina con las herramientas que Spaces pone a disposicin de los navegantes para que armen su pgina. Con la opcin "Personalizar", podrs definir el diseo y las reas en donde integrars tus contenidos. En Configuracin, podrs agregar el ttulo e indicar, entre otras cosas, la fecha y hora. Podrs descargar hasta 500 fotos. Geocities Permite construir sitios en forma rpida y sencilla. Geocities ofrece alojamiento gratuito, pero para sostener eso, debers aceptar que se publiciten avisos publicitarios en su sitio. Blogger Accediendo a la pgina principal, podrs crearlo fcilmente siguiendo las indicaciones. Podrs contar con ms informacin en estas notas Cmo se crea un blog personal? y Consejos para que tu blog sea popular

+
Visita sitios de todas partes del mundo sobre el mismo tema y evala los siguientes puntos: cmo organizan la informacin, cmo la presentan visualmente y cmo se dirigen a los usuarios.

,
Piensa qu personas te gustara que visiten tu sitio y de qu forma te conviene ms hablarles. Investiga sobre todas las culturas a las que quieres dirigirte para ser preciso en la informacin y en el lenguaje que utilizars para comunicar tus contenidos.

Elabora una lista de secciones que quieres que tu sitio incluya. A la hora de concebirlas, busca que se relacionen entre s para generar fluidez entre las distintas reas del sitio.

.
Ten en cuenta pautas bsicas de diseo Para disear, es fundamental utilizar estilos de letras claros y sencillos (Arial, Times New Roman) Si vas a utilizar una imagen de fondo, es importante que no interfiera con el texto. Presta atencin a los colores de la pgina. Si utilizas colores claros para el fondo, debers elegir oscuros para las letras y viceversa. Las pginas no tienen que ser muy largas. Se puede dividir la informacin en distintas pginas, enlazndolas. No utilices imgenes muy grandes, porque pueden ocupar todo el espacio de la pantalla o no dejar ver el texto. Disea la pgina principal de tu sitio o homepage, de manera atractiva, recuerda que es lo que primero que vern aquellas personas que ingresen.

/
Escribe, por lo menos, un boceto de los contenidos de dos secciones para poder mostrarle el proyecto a posibles interesados.

0
Convoca a un diseador y, si no conoces a ninguno o quieres ahorrar en ese rubro, puedes bajarte desde Internet plantillas .html prediseadas.

Cuando el sitio est online, envale un e-mail a todos tus contactos para avisarles. Procura tambin que, quienes participan del sitio, hagan lo mismo.

&
Establece contactos con otros sitios e internautas para intercambiar links y armar una red de difusin virtual.

1mportante
No esperes a tener el sitio en todo su potencial para mostrarlo. Un proyecto virtual es un objeto en desarrollo constante y, por mnimos que sean, los cambios son percibidos por los usuarios como seales de vida del sitio.

Dlosario

P(gina Web!

es una "uente de in"ormaci#n adaptada para la World Wide Web =WWW> $ accesible mediante un navegador de 3nternet. Esta in"ormaci#n se presenta generalmente en "ormato 9 ,5 $ puede contener hiperenlaces a otras p(ginas <eb, constitu$endo la red enlazada de la World Wide Web. Euente! WiMipedia

:itio Web! =en ingls! 2ebsite> es un con1unto de p(ginas <eb, t'picamente comunes a un dominio de 3nternet o
subdominio en la World Wide Web en 3nternet. Euente! WiMipedia

Enlace =9iperv'culo>!

es un elemento de un documento electr#nico que hace re"erencia a otro recurso, por e1emplo, otro documento o un punto espec'"ico del mismo o de otro documento. Combinado con una red de datos $ un protocolo de acceso, un hiperenlace permite acceder al recurso re"erenciado en di"erentes "ormas, como visitarlo con un agente de navegaci#n, mostrarlo como parte del documento re"erenciador o guardarlo localmente.Euente! WiMipedia

9 ,5! , sigla de 3yper4e5t 6ar7up 8anguage =Lenguaje de Etiquetas de Hipertexto>, es el lengua1e de marcado
predominante para la construcci#n de p(ginas <eb. Es usado para describir la estructura $ el contenido en "orma de te&to, as' como para complementar el te&to con ob1etos tales como im(genes. Euente! WiMipedia

7irectorio de ;ecursos para crear p(ginas <eb

Compartir,ver $ descargar im(genes de calidad de modo totalmente libre $ gratuito! pi&alia.net 3m(genes de 7ominio P8blico http!%%<<<.<pclipart.co 6anco de 3m(genes http!%%victorcuevas.es%educadoresGB%archives%BCA Almacenamiento $ N! http!%%<<<.es.diino.com Eotos de dominio publicoO http!%%public-domain-photos.com 6anco de "otos libreO http!%%<<<.s&c.hu% Crear 6anners http!%%<<<.banner.de%