Comodiseñar una pagina web

4. CREACIÓN DE MI PÁGINA WEB
Con el resultado del análisis de la información da bases para la creación de la página
web de acuerdo a las necesidades de los integrantes dl semillero de investigación y de esta
manera alcanzar el objetivo deseado.
3.2 DISEÑO Y ADMINISTRACIÓN DEL APLICATIVO WEB 2.0 3.2.1 Aplicativo WEB 2.0 Se diseñó y
administró un aplicativo WEB 2.0 para capacitar a los docentes en el manejo de las TIC,
específicamente,enel manejode programasofimáticos(Word,Excel,PowerPoint). Consistióen la
creaciónde un blogque contiene ensuestructuray almacenamientodiferentes cursos virtuales y
manuales. La secuencia para la creación del Blog se describe a continuación (ANEXO H). 3.2.1.1
Inscribirse como usuario en Google Para inscribirse como usuario se entró a la página de Google
con la dirección web www.google.com.En la página se dio clic en Gmail y se abrió una nueva
páginaendonde se dioclic en “crear una cuenta” (Figura 10). Figura 10. Página para la inscripción
como usuario en www.google.com
La página web, se crea basada en los resultaos obtenidos en la observación directa,
la encuesta realizadas durante la investigación. Con anterioridad se había diseñado el
logotipo del Semillero de Investigación Comunitario, para el fondo de la página,
Como crear una cuenta Jimdo para crear una página web gratis con dominio y jotic hoting
absoluto en vamos al buscador de palabra escribo la palabra jimdo y aparece el enlace crear
pagina web jimdo hacer clic lo traslada al sitio desde donde yo de formagratuita voy a pder
tener mi pagina web debo escoger un nombre para la pagina y una dirección de imail que
va hacer donde lleguen las novedades y con el cual yo otencga la información de la contra

seña de este que va hacer mi sitio web espera a que llegue el mensaje, ya se ve el sitio y la
contraseña para acceder desde donde voy a configurar las características de diseño y las
características básicas del sitio entoces hacer clic en iniciar s3eción ycolocar la contraseña
par configurr el geder el cuerpo cuestiones de estiolo y demás en plantillas escoger una útil,
una que muestre lo que tenga en el semillero con varias columnas se puede probar para ver
el aspecto del sitio ejemplo f255 plantilla simple estética hacer trabajar con una pagina que
me permita romocuionar la pagina con geder preditermados se coloca el tiulo escribiéndolo,
también se modifica el tañamno de letra color, titulo tambiena imagen propia con unas
dimensiones especificas en las imágenes predeterminadas subo el geder e ir a titulo borrar
y quedalimpia la imagenen titulo coloco semillero de investigación comunitarios de l
comuna olímpico y cuba, y y se ajusta el titulo luego epieso a escribir por que tengo un
procesador de texto con lo que va ahcer el cuerpo del sitio web guardar desdeabajo serrar
secion clic iniciar sección contraseña y hacer modificciones necesarias también es posile
agrar mas elementos como fotos textos videos personalizar el sitio.
Ajustes icono de corazón nuevo Jimdo activar y darle guardar
Consulta de Partidos, Movimientos políticos y Grupos significativos
2015
Colombia - 19 de abril de 2015
Digite su número de cédula
51754427

No ha sido designado como jurado para las próximas elecciones
El señor(a) YAMILE NOVA MONTAÑO con cédula 51754427 a la fecha no ha sido designado como jurado,
pero se encuentra en la base de datos en la lista de espera para ser asignado(a)
Plantillas 27 4 variaciones lugares
TABLADE CONTENIDOINTRODUCCIÓN 1.TíTULO 2. ANTECEDENTES3. DEFINICIÓN DELPROBLEMA
3.1 PREGUNTASDE INVESTIGACIÓN 4.JUSTIFICACIÓN 5.OBJETIVOS5.1 GENERAL 5.2 ESPECÍFICOS

6. LOS PERROS CALLEJEROS6.1 ORIGEN DE LOS PERROS EN LASCALLES 6.2 PORCENTAJEDE
PERROSCALLEJEROS EN LA CIUDAD DE BOGOTÁ 6.3 MALTRATO HACIA LOS PERROSCALLEJEROS
6.4 SOLUCIÓN:EDUCACIÓN,SENSIBILIZACIÓN YADOPCIÓN 7.LA INTERNET,HERRAMIENTA DE
COMUNICACIÓN 7.1 LA INTERNET7.2 LA WORLD WIDE WEB 7.2.1 La páginaweb7.2.1.1 Etapas de
una páginaweb7.2.1.2 Ventajasde unapáginaweb8. TRANSMITIRUN MENSAJEA NIÑOS,POR
MEDIO DE UNA PÁGINA WEB8.1 LOS NIÑOS+ INTERNET = APRENDIZAJE8.2LA INTERACTIVIDAD
8.3 USO QUE LE DAN LOS NIÑOSA UNA PÁGINA WEB 8.4 VISUALIZACIÓN DEUNA PÁGINA WEB
PARA NIÑOS8.5 DISEÑODE UNA PÁGINA WEBPARA NIÑOS8.5.1 Diseño+Color8.5.2
Diseño+Color+Niño
En cuanto al medioautilizar para transmitir el mensaje que se quería enviar al grupo objetivo se
pensóenutilizarlatecnologíaque esel motorde cambioen el mundoactual por lo que se analizó
el libro Internet en acción escrito por Alicia Piwonka Boizard en Chile, el cual resalta las
características importantes de la Internet y la manera más apropiada de publicar en Internet, la
importancia de Internet y cómo en la actualidad la relación entre Internet y la educación se ha
fortalecido,porlotantopara losniñosla Internetactualmente esunaherramientade aprendizaje
por medio de la imaginación de los niños y la interacción con elementos llamativos dentro de la
página web en la que se encuentren.
Pensando en la realización de una página web siempre se debe analizar como será el diseño de
ésta para el público al que será dirigida, por consiguiente en este caso se analizó un diseño que
fuerallamativoparalosniñosporlo tantoinfluye enormemente el color que se vaya a utilizar en
el diseño de ésta, no solo en la página principal sino en el tipo de letra, que elementos irán
acompañadosenla primerapáginayque coloresseránlosque serán losprimordialesenlapágina,
por loque se analizóuntexto muyimportante llamadoEl color en el arte infantil: psicología de la
percepción,escritoporSergio García, en España, el cual fue de gran importancia ya que los niños
ven los colores de una diferente manera a la de un adulto, por lo que el libro enlaza el color, la
psicologíalaniñezenunsolopuntoen el que se identifican los aspectos fundamentales para que
se entiendalaimportanciade la elección del color en cualquier elemento que vaya a ser dirigido
para u niño. Por lo que existen colores especiales para los niños que ven más atractivos y más
llamativos por lo que fue de gran ayuda este texto para realizar el diseño de la página web.
En cuanto a la creación de una página web como un producto, dirigido a niños, el cual transmite
un mensaje, fue necesario analizar el libro King comercio estrategia + diseño, escrito por Juan
Carlos Zuluaga Morales y William Ospina Toro, el cual hace un importante estudio de la relación
que existe entre el diseño y la estrategia comercial, además de la publicidad comercial artística,
por lo tanto se analizó para saber como manejar la imagen de la página web enfocándola
correctamente al grupo objetivo, además de crear una imagen que se identifique con los niños,
con un lenguaje adecuado pero a la vez atrayente y divertido para ellos y que el mensaje sea
entendidocorrectamente yrecordadoque eslomásimportante,ademásde crearun elementode
la página con el cual los niños se sientan identificados y se cree una marca con éste. Además de

librostambiénse analizaronartículosenlaInternet,relacionadosconlaweb,el color y su relación
con losniñoosde 7 a 12 años.Por otro ladoencuanto al maltratode losperroscallejerosnoexiste
mucha informaciónconcerniente a éste, por lo que la información obtenida es más en relación a
lasestadísticasrelacionadasporporcentajesde losperroscallejerosen la ciudad, datos dados por
Zoonosis, aunque también se han creado actividades a favor del buen trato de los animales por
parte de la alcaldía de la ciudad, pero no han tenido el resultado esperado además que son muy
pocas y todala ciudadaníano se entera,ademásestonoes dirigidoalosniñossinoesmuygeneral
por lo que no hay ningún texto, estadística o actividad que se haya realizado dirigida a los niños
para que desde pequeños entiendan la importancia de tratar bien a los perros callejeros y si se
puede ayudarlos.Finalmente se analizó un trabajo de grado realizado en el año 2007 por Ximena
López Patiño y Ángela Carolina Riaño Paipilla titulado La página web como una alternativa
didáctica, para la construcción de la lectura y el lenguaje escrito en niños de 4 a 10 años, el cual
sirvióde soporte yapoyopara larealizaciónde este trabajode grado dada la similitudes del tema
y el importante nivelinvestigativoacercade la importanciaactual de la Internet, específicamente
de la páginawebensu papel de herramientainformativayde aprendizaje enlos niños de nuestra
sociedad. Patiño y Ángela Carolina Riaño Paipilla titulado La página web como una alternativa
didáctica, para la construcción de la lectura y el lenguaje escrito en niños de 4 a 10 años, el cual
sirvióde soporte yapoyopara larealizaciónde este trabajode grado dada la similitudes del tema
y el importante nivelinvestigativoacercade la importancia actual de la Internet, específicamente
de la páginawebensu papel de herramientainformativayde aprendizaje enlos niños de nuestra
sociedad.
7. LA INTERNET, HERRAMIENTA DE COMUNICACIÓN 7.
1 LA INTERNET
En el siglo XXI la informática, la tecnología y por supuesto Internet, se han convertido en ejes
fundamentales de comunicación y desarrollo, además que “la riqueza de información técnica y
comercial que se estáencontrandoenInternet,laestáconvirtiendoenunaherramienta vital para
las comunicaciones a nivel mundial”6 . Hay que tener en cuenta que la Internet es una de las
herramientas de comunicación más importante y fuerte en la actualidad
Hasta el momento, la Internet es una herramienta un poco más selectiva que muchos otros
medios de transmisión de información, “el segmento de la población que tiene acceso a la red
mundial de información (Internet) aún no supera el 10% de la población total de Colombia”, 7
pero esto no significa que no sea una herramienta importante o que va a ir en decadencia, o
simplemente que la información que se transmite en la Internet no pueda alcanzar el grupo
objetivoal cual va dirigido,porel contrario la perspectiva por la información que se transmite en
la Internetabre laspuertasa una nuevaevoluciónde lassuperficiesde transmisiónde información
junto con el desarrollo de la tecnología y la globalización.

No solo por ser una herramienta que está a la vanguardia del mundo es importante, sino que
Internet tiene innumerables ventajas comunicacionales, una de ellas es la ventaja de poder
comunicarse conmillonesde personasenun mismo instante o la ventaja de crear “un espacio de
conocimiento abstracto que permite con facilidad adentrarse en mundos desconocidos,
accediendo de esta manera de forma inmediata y sin precedentes a formas de vida y culturas
ignoradas”8.Por otro lado,suventajamásimportante esel altogrado de potencial de aprendizaje
que puede tener Internet para el desarrollo social e individual de cualquier usuario en la red.
7.2 LA WORLD WIDE WEB
Internetse compone de varioselementosparaaccedera ésta,y el más usado es definitivamente
la Web (World Wide Web, es el universo de información accesible a través de Internet)9 .
Usando laWeb,se puede accederamilesde páginasde información,“laexploraciónen la Web se
realizapormediode unsoftware especial denominadoBrowser o Explorador. La apariencia de un
SitioWebpuede variarligeramente dependiendodel exploradorque use.Asímismo,lasversiones
más recientesdisponende unafuncionalidad mucho mayor tal como animación, realidad virtual,
sonido y música” 10.
7.2.1 La página web
La página web es la unidad básica de la World Wide Web, (la Web). Una página Web “es un
documento electrónico que contiene información específica de un tema en particular y que es
almacenado en algún sistema de cómputo que se encuentra conectado a la red mundial de
información denominada Internet” 11. Es un documento dinámico, porque permite realizar
diferentes acciones a través de textos o imágenes, que conducen al usuario a otra página web, a
otra sección dentro del documento o a un e-mail.
8 Piwonka Boizard, Alicia., Op. Cit., p. 3 9 Informática Milenium, S.A.de C.V., “Principales
definiciones de los términos más usados en Internet” (en línea), disponible en:
http://www.informaticamilenium.com.mx/Paginas/espanol/sitioweb.htm, consultado: mayo de
2008 10 Ibíd., 11 Ibíd.,
Es de suma importancia que una página web se convierta en un aporte para un usuario, (una
empresa,unainstitución,ounapersonanatural),ya que de nadasirven los colores, las imágenes,
lasanimacionesoel buendiseñode lapáginasi losusuariosque ingresen a ésta no encuentran lo
que buscan o no quedan satisfechos con ésta, la página web seria un fracaso si los usuarios
quedan defraudados con ésta.
Por lo anterior es importante realizar un proceso para realizar una página web, para que tenga
éxito, éste proceso tiene cuatro etapas.

7.2.1.1 Etapas de una páginawebLa primeraetapa es la planificación, en ésta se debe analizar el
contenido general que tendrálapresentación,lainteracciónylapersonalizaciónde la página web
que será dirigida a una audiencia objetivo. En esta etapa también se debe dividir “la audiencia
objetivo, el contenido asignado, la particularidad o diferenciación” 12 respecto a otras páginas
web del tema ya existentes en la red.
La segunda etapa que es la estructuración, como su nombre lo indica es donde se estructura la
presentación de la página web, en esta etapa se separa la información total en páginas web y se
relacionanentre sí.Ademásde estose debendefinirlosobjetivosespecíficosde cada página web,
“la arquitectura que une a estas páginas y la interconexión mediante hipertextos con la
información ya presente en otras fuentes de información” 13.
La tercera etapa es el diseño-diagramación-implementación, en esta etapa es en donde se
implementael estiloylaestructuraque ya se han determinadoenlaetapa dos, de acuerdo a esto
se realizala diagramación gráfica, se organiza la información que debe estar en cada párrafo y se
seleccionan las imágenes, figuras y demás elementos que deben incluirse en cada página.
Dependiendo de cada página web se incorporan elementos tales
12 Piwonka Boizard, Alicia. Op. Cit., p. 205 13 Ibíd., p. 205
como plantillasparaque el usuariodeje información o diga su opinión. Finalmente se organizan,
se unifican y se complementan todos los anteriores elementos para originar la página web.
La última etapa es la publicación, en esta etapa se debe tener la página web terminada y sólo
faltaría “la instalación de ésta en un servidor web para hacerla accesible a la comunidad de
Internet.’14.
7.2.1.2 Ventajasde lapáginawebUna de lasventajasque tiene lapáginawebconrespectoa otros
medios de publicación, es la interactividad, ya que simplemente con el hecho de que el usuario
ingresa a la página web, inmediatamente el usuario puede interactuar con ella directamente,
puede visitar lo que más le interese, dejar su opinión, comunicarse por medio del correo
electrónicoosimplemente ingresarinformación.Otraventajade lapáginawebeslaaccesibilidad,
ya que se encuentra disponible para todos, cualquier persona que este interesada en la página
webla puede visitar,independientemente del lugar en donde se encuentre ubicado, ésta es una
razón por lacual se podría decirque “una publicaciónwebes esencialmente democrática, ya que
ofrece informaciónmuyespecializada. No hay costos de distribución o sus costos son muy bajos.
Más aún si existe algún costo aunque sea mínimo es probable que lo asuma el visitante”15.
Adicionalmentetambién se habla de las ventajas de las páginas web que llevan al éxito de éstas
por que el usuariode éstaspuede serambivalente yaque puede serconsumidorde información16
y también se puede convertir de una manera más o menos directa en un proveedor de
información17.El usuariotambiénpuede accederasonidos,imágenes,videosydemáselementos
que han convertido a las páginas web en una herramienta de

14 PiwonkaBoizard,Alicia. Op. Cit., p. 205 15 Ibíd., p. 204 16 Machado Pérez, Ligia y Otros (2005),
Una propuestametodológicade integracióntecnológicaal currículo.Bogotá,Colombia,Capítulo3,
p. 44 17 Ibíd., p. 44
8.4 EL DISEÑO DE UNA PÁGINA WEB PARA NIÑOS
Es de suma importancia el diseño de una página web y más aún si esta dirigida a niños, ya que
puede traer beneficios, como por ejemplo, si el niño tiene que escoger entre dos sitios el más
llamativo ganará, además con un buen diseño se tendrá por un período de tiempo más largo el
interésdel usuario,igualmentefacilitael aprendizaje y tendra en cuenta la página para regresar a
visitarla y la comentará a los demás usuarios.
http://www.leccionweb.org/leccion1.html
Es importante que el diseño de la página sea legible, único, y preciso, además los colores deben
ser adecuados para el grupo objetivo, mirar la forma en que este organizada la página también
debe ser coherente y fácil de navegar.
En cuanto a la visualizaciónde lapágina,ésta tiene dos características, una de ellas es que puede
que se vea toda la página en la pantalla completa, y otra opción es utilizar barras de
desplazamientollamadasscrollbars,loscualesse utilizan para ver todo el contenido de la página.
Pero si son niños es mejor que se vea toda la página en la pantalla completa.
Es importante tener una sección dentro de la página web en donde los niños puedan dibujar,
rellenar,cambiarcolores,colocarobjetos,etc.,De estamanerase crearán oportunidadesparaque
el niño altere, repita, deshaga acciones con las cuales pueda experimentar a su propio ritmo.
En cuanto a las imágenes de la página web, es importante tener en cuenta que para los niños
resulta más divertido y sencillo realizar una tarea de la página con éxito, cuando se encuentra
relacionada con una imagen o una gráfica, y no simplemente con texto, ya que siempre intenta
hacer click a una imagen, a un grafico o a una fotografía y no al texto.
Los sonidos y las animaciones son de gran agrado y les llaman mucho la atención, la mirada del
niñoy el ratón siempre lodirigenendonde puedenencontrarestos elementos. Los niños utilizan
el ratón para recorrer la página de una manera ordenada (como cuando leen un texto), por lo
tanto esimportante tenerencuentauntamañode letralosuficientementegrande parafacilitarla
lectura y así sea agradable recorrer la página para el niño, también es fundamental tener en

cuentalas palabrasque se van a utilizarenlapágina,tienenque serlo más sencillas posibles para
que no se confundan los niños y se logre el objetivo de la página.
8.4 EL DISEÑO DE UNA PÁGINA WEB PARA NIÑOS
Es de suma importancia el diseño de una página web y más aún si esta dirigida a niños, ya que
puede traer beneficios, como por ejemplo, si el niño tiene que escoger entre dos sitios el más
llamativo ganará, además con un buen diseño se tendrá por un período de tiempo más largo el
interésdel usuario,igualmentefacilitael aprendizaje y tendra en cuenta la página para regresar a
visitarla y la comentará a los demás usuarios.
Es importante que el diseño de la página sea legible, único, y preciso, además los colores deben
ser adecuados para el grupo objetivo, mirar la forma en que este organizada la página también
debe ser coherente y fácil de navegar.
En cuanto a la visualizaciónde lapágina,ésta tiene dos características, una de ellas es que puede
que se vea toda la página en la pantalla completa, y otra opción es utilizar barras de
desplazamientollamadasscrollbars,loscualesse utilizan para ver todo el contenido de la página.
Pero si son niños es mejor que se vea toda la página en la pantalla completa.
Es importante tener una sección dentro de la página web en donde los niños puedan dibujar,
rellenar,cambiarcolores,colocarobjetos,etc.,De estamanerase crearán oportunidades paraque
el niño altere, repita, deshaga acciones con las cuales pueda experimentar a su propio ritmo.
En cuanto a las imágenes de la página web, es importante tener en cuenta que para los niños
resulta más divertido y sencillo realizar una tarea de la página con éxito, cuando se encuentra
relacionada con una imagen o una gráfica, y no simplemente con texto, ya que siempre intenta
hacer click a una imagen, a un grafico o a una fotografía y no al texto.
Los sonidos y las animaciones son de gran agrado y les llaman mucho la atención, la mirada del
niñoy el ratón siempre lodirigenendonde puedenencontrarestos elementos. Los niños utilizan
el ratón para recorrer la página de una manera ordenada (como cuando leen un texto), por lo
tanto esimportante tenerencuentauntamañode letralosuficientementegrande parafacilitarla
lectura y así sea agradable recorrer la página para el niño, también es fundamental tener en
cuentalas palabrasque se van a utilizarenlapágina,tienenque serlo más sencillas posibles para
que no se confundan los niños y se logre el objetivo de la página.
10.2 CREACIÓN DE MI PÁGINA WEB Conlosresultados y el análisis posterior de la información se
pudo diseñar y crear la página web de acuerdo a los gustos del grupo objetivo y de esta manera
poder alcanzar el objetivo deseado.
La paginaweb,se creadespués de analizar y posteriormente unir los datos recolectados a través
de mi investigaciónylasencuestasrealizadas.Después de esto, se dibujaron a mano los posibles
diseños de lapáginaweb,igualmente losperritos callejeros que podrían ser elegidos como parte
de la imagen de la página, el diseño de cada perrito que iba a ser parte de la página se realizó

primeroenlápiz,despuésse digitalizóenIllustrator,yposteriormente se dibujoyse digitalizócada
página de navegación. Las imágenes de los perritos callejeros que serian parte de la página la
decidieron los mismos niños que respondieron la encuesta y después se utilizaron en la pagina
web.
Finalmenteel diseño de la página web, primero en Illustrator la homepage y posteriormente las
hojas de navegación, después se creo en Dreamweaver, hoja por hoja, con algunos cambios con
respecto a las novedades de las páginas web para niños. En esta página utilizo el contexto y la
globalidaddel espaciodisponibleparacrear unapágina que tiene el concepto de un buen diseño.
La páginawebestádiseñadaparaque losniñostrabajende formaindependiente,que explorenlas
secciones que más les llamen la atención, que descubran cosas interesantes, que tomen
decisiones,conpersonajesde característicasllamativas,concoloresbrillantes, animación, música
y sonido, de esta manera los niños disfrutarán más su tiempo de navegación y su interés durará
más tiempo.Losniñospuedenmanipularcomoquieranlapáginay sentiránque tienen el control,
es fácil de navegar, tendrán una respuesta rápida a sus órdenes y no es de difícil lectura, en
¿Qué se necesita para hacer una página WEB?
Como primera cosa, se necesita que el usuario tenga un conocimieto
avanzado en el uso de computadoras; además, el material que se necesita para la
creación de las páginas es el siguiente:
1. Computadora PC o Macintosh.
Todas nuestras lecciones están basadas en una computadora PC con
sistema operativo WINDOWS.
2. Cualquier programa editor de páginas WEB.
Aunque se puede utilizar cualquier editor de páginas, aquí en nuestras
lecciones, nos basaremos en el programa NETSCAPE
COMMUNICATOR versión 4.X ó mejor. Esto no quiere decir que otros
programas como Front Page o Dreamweaver no sean buenos, sino que
utilizaremos el COMMUNICATOR simplemente por que es gratuito, es muy
fácil de utilizar y por que de esa manera podemos estar sicronizados en los
comandos para ir haciendo nuestra primera página web.
Si usted no tiene este programa, puede bajarlo GRATIS del siguiente lugar:
NETSCAPE COMMUNICATOR 4.78

(ver. Español)
Ha salido una versión mejorada del NETSCAPE COMPOSER, éste ha sido
hecho por la empresa NVU y el cual se mira muy bueno, yo estoy
comenzando a utilizarlo, es posible que en un futuro muy cercano esté
modificando mis lecciones hacia este nuevo editor. Si usted quiere tener
una copia puede bajarla directamente de este enlace:
EDITOR NVU (ver 0.90)
(ver. Inglés)
3. Espacio en un servidor en donde se guardará la página creada.
Usted necesita de un espacio en un servidor para poder subir sus páginas
WEB; hay de muchos tipos y de todos los precios desde gratuitos hasta
pagados.
MEJOR VALOR: Entre los pagados y como una contribución a fortalecer a
todos los principiantes de "Cómo hacer páginas WEB", SecmasNET nos ha
dado una oferta que no se puede conseguir en ningún otro lado, para mayor
información visite:
PROYECTO WEB
Si usted busca espacio gratuito, asegúrese primero que su proveedor de
servicio de Internet pueda asignarle ese espacio. Si su proveedor no le
facilita este espacio entonces usted puede encontrar en el Internet muchos
sitios donde otorgan espacio gratuito para poner páginas WEB. Lea
la LECCION 5 donde damos direcciones de espacios gratuitos.
4. Cualquier programa editor de archivos gráficos.
Entre ellos pueden estar COREL DRAW, FREE HAND, PAGE MAKER. En
mis lecciones todo ha sido creado utilizando el COREL DRAW 7.0.
5. Cualquier programa editor de TEXTOS en formato ASCII.
En la PC con el programa WORDPAD es más que suficiente.
Así que, manos a la obra y continuemos con la LECCION 2.

LECCION 2: ¿Cómo se crea el TEXTO?
Una vez usted ya tenga instalado el NETSCAPE COMMUNICATOR en su
computadora, ejecútelo y entré al NETSCAPE COMPOSER (este es el programa
que sirve para la creación de páginas web) y elijamos la opción del
menú: NUEVA. Esto hará que nos aparezca una página en blanco que es donde
comenzaremos a trabajar.
Como usted ya se habrá dado cuenta NETSCAPE COMPOSER tiene un
panel de control igual o similar a este:
Pues bien, estos íconos son los que nos van a ayudar a ir poniendo el
TEXTO o IMAGENES en los lugares que lo deseemos.
Como primer punto escribamos el TITULO de la hoja que vamos a crear.
Ahora, justifiquémosla al centro de la página:

Ahora, hagámosla NEGRITA y con un valor de 18 puntos, tiene que
quedar así:
Ahora, vamos a crear el cuerpo de la página WEB, para ello escriba el
siguiente párrafo por abajo del título que acaba de crear. Tiene que quedar así:
Como puede ver, es muy parecido a trabajar con un procesador de palabras
común y corriente. Ahora le toca a usted escribir cualquier párrafo, trate de usar
las NEGRILLAS, las ITALICAS y el SUBRAYADO.

LECCION 3: ¿Cómo se inserta ungráfico?
El insertar gráficos en este editor es la tarea mas emocionante, ya que debemos tener
una foto o un dibujo arreglado para nuestros fines. Para efectos de nuestra lección copie los
siguientes archivos a su computadora:
FOTO DE HOT DOG:
hotdog.gif
DIBUJO DE HOT DOG:
hotdogd.gif
Después de copiar estos archivos a su computadora, presione el ícono que
dice IMAGEN, como usted verá aparecerá una ventana en la cuál se le pide que ingrese el
nombre del archivo que quiere poner, presione en donde dice SELECCIONAR
ARCHIVO... y busque la foto del HOT DOG que acabamos de copiar a su computador.
Luego de seleccionarla, presione ACEPTAR y luego verá algo así
La posición de la foto va a depender de donde usted la quiera, para nuestro ejercicio

la vamos a justificar hacia la izquierda y vamos a poner un texto al lado derecho de la foto.
Tiene que quedar así:
Las imágenes o gráficos también se pueden hacer mas grandes o pequeños, para ello
se necesita únicamente dar 2 clicks sobre la imagen y aparecerá una ventana en donde
podemos decirle cuanto queremos hacer grande o pequeña la imagen. Pruébelo... En esta
ventana también puede ver como es que el texto se va a escribir a la par de la imagen.
Si usted utiliza alguna de estas opciones no olvide que en la hoja que está trabajando

probablemente usted no va a ver como está quedando; pero para ver como va la hoja que
usted está haciendo presione el ícono que dice PRELIMINAR .
Ahora, le toca su turno y al finalizar debe quedar una página igual a la que sigue al
hacer PRELIMINAR:
¿Tiene alguna pregunta?
FORO LECCIONES WEB

¿Quéhago para publicarla páginaqueacabodehacer?
Al terminarde hacertodas lasLECCIONESanteriores,ustedyaestarálistopara
poderpublicarsupáginaen el INTERNET.Publicarunapáginase entiende porsubiro
montar supáginaa unservidor;y,para ellodebe estarseguroque ustedyatiene un
espaciodisponible.Si todavíanolotiene diríjase asu proveedorde serviciode Internety
pidael espacioque necesita.Si suproveedornole dáeste
espacioGRATUITAMENTEentoncesbusque dentro del INTERNETlugaresendonde se
otorga gratuitamente este espacio. Algunosdeloslugaresmascomunesson:
EN ESPAÑOL: GEOCIETIES, TRIPOD, ESPACIO.YA, MIARROBA
EN INGLES: GEOCITIES, ANGEL FIRE, XOOM, FORTUNE CITY
Al obtener su espacio, su proveedor le dará un NOMBRE DE
USUARIO (LOGIN) y una CONTRASEÑA (PASSWORD) necesarios para
ingresar esta información dentro del servidor de páginas WEB. Según el lugar en
donde usted guarde su página WEB, deberá seguir algunas reglas generales ya que
algunos ISP tienen otras disposiciones.
Si usted ya tiene definido un NOMBRE DE USUARIO y
una CONTRASEÑA entonces ya puede publicar su página en ese servidor; pero,
independientemente de ello, como primera opción deberá guardar la página en la
que ha estado trabajando a su disco duro, así que
presione ARCHIVO (FILE) y GUARDAR COMO (SAVE AS) y póngale el
siguiente nombre (todo en minúsculas): index.html. El nombre index.html es
como se define en todos los servidores a la página principal de un sitio, si no le
ponemos este nombre a la hora de entrar a ver nuestra página, ésta no se mostrará.
Luego le preguntará que nombre desea ponerle a esta página, esta
información servirá para que cuando alguien haga un AGREGAR A
FAVORITOS (ADD TO BOOKMARK) en el navegador, este nombre aparezca
allí.
Ahora, conéctese al INTERNET y después presione el
ícono PUBLICAR (PUBLISH), aquí aparecerá la siguiente ventana:

y deberá llenar todos los campos que se necesitan de la siguiente manera:
TITULO DE LA PAGINA: Nombre con el que se conocerá a este sitio,
puede ser cualquier cosa, como por ejemplo: DESEOS DE UN HOTDOG.
NOMBREDEL ARCHIVO HTML: Aquí pondremos el nombre del archivo
que recién acabamos de guardar: index.html. Tengamos en cuenta que todos los
nombres de las páginas deben estar en minúsculas.
DIRECCION HTML O FTP EN LA QUE PUBLICAR: Aquí deberemos
escribir la dirección que nos dió nuestro proveedor del espacio, como por
ejemplo:ftp://www.geocities.com/Area51/Cavern1706.
NOMBREDEL USUARIO: Aquí deberemos poner el nombre que nos asignó
nuestro proveedor del espacio.
CONTRASEÑA: Escribamos aquí la contraseña que nos asignó nuestro
proveedor.
OTROS ARCHIVOS A INCLUIR: Para nuestro ejemplo seleccionemos la
opción que dice "Archivos asociados a esta página" ya que de esta manera el
programa automáticamente subirá las imágenes utilizadas en la elaboración de
nuestra página.

¡¡¡ LISTO !!!
Ahora presione ACEPTAR y todo lo que usted ha hecho, inmediatamente
será enviado al servidor para que cualquier otra persona pueda ver lo que usted ha
creado.
Feliz creación de páginas...
NOTA: Si la forma de publicar anteriormente descrita NO funciona con el
servicio donde está guardando su página, por favor vaya a la siguiente dirección
de mi FORO:
http://www.leccionweb.org/foro/viewtopic.php?t=1147
endonde estáexplicadopasoapaso comohacerlopor mediode FTP.

¿Necesita más información?
Si tiene algunadudaadicional sobre loque aquíse ha expuesto, porfavorbusque
en:
FORO DE PREGUNTAS Y RESPUESTAS A MIS LECCIONES
si su preguntano aparece,agréguelaenel Foroycon mucho gustola contestaremos
para usted.
Además, le agradecería mucho, si usted cree que esta página le ha sido de
ayuda para iniciarse en el campo de la creación de páginas WEB que coloque
un ENLACE (LINK)hacia mi página para que mas usuarios también tengan la
oportunidad de iniciarse en este campo. Este es el código HTML:
<Copie y Pegue todo lo que está después de esta
línea>
<a href="http://www.leccionweb.org"
target="_self">
Tutorial de Cómohacer PáginasWEB por Sergio
Cabrera.
</a><br>
O si lo desea, únicamente, escriba un comentario sobre estas lecciones en:

LECCION 6a: ¿Cómopuedoagregaruncontadora mi página?
Muchas personas,incluyéndome entreellas,nosgustasaberque cantidadde
gente visitanuestraspáginas.ParaelloexistenlosCONTADORES,éstossonprogramas
especialesque nosllevanunregistrode lasvecesque hanvisitadoorevisitadonuestras
páginas.
Otros contadores también nos dan la oportunidad de saber información
sobre la persona que visitó nuestra página, esta información es de gran ayuda para
los diseñadores de páginas ya que nos permite saber por ejemplo, que tipo de
navegador es el mas usado, que cantidad de colores se usan mas, que sistema DOS
es el mas usado, etc. Todo esto sirve para que podamos hacer una página WEB de
acuerdo a nuestros visitantes.
Los contadores pueden ser de dos tipos PAGADOS y GRATIS, yo prefiero
los segundos. Y entre los que yo recomiendo están:
WebTracker, ExTreme
Para instalar el CONTADOR en su página, lo primero que tiene que hacer
es ir a alguno de estos sitios y obtener una cuenta, para ello siga las indicaciones
que allí aparezcan. Luego de haber creado su cuenta, ellos le darán algunos
comandos que usted tiene que agregar a su página. Para agregar estos comandos,
usted puede utilizar la opción, Etiqueta HTML que se encuentra en Insertar:
al entrar allí aparecerá la siguiente ventana, en donde se deberán ingresar los
nuevos comandos. Si sale un error al ingresar estos comandos en este cuadro,
entonces deberá utilizar un programa como WORDPAD de Windows en donde
podrá modificar su código HTML directamente.

LECCION 6b: ¿Cómopuedoponerle música a mi página?
Ponerle músicaauna páginaes de lomás sencillo,solamente hagalosiguiente:
1. Abra INSERTARy luegoETIQUETA HTML.
2. Luegoescribalossiguientescomandosdentrode esaventana:

<noembed>
<bgsound src="su_archivo.mid" loop="infinite">
</noembed>
<embedsrc="su_archivo.mid " autostart="true" loop="true" hidden="true">
</embed>

3. En donde dice su_archivo.midponga el nombre de suarchivode música.
La ventanade NETSCAPECOMPOSERdeberíahaberquedadoasí:
Si todavía no tiene archivosde músicabusque enel internet,allíencontrará
milesde archivos.Loúnicoesque debe de estarseguroque son con extensión
MID, sinono funcionaráel comandoanterior.

4. Listo,ahora su páginaya tendrámúsica.
LECCION 6c: ¿Cómo puedo ganar dinero con mi página?
Dentro del internet hay empresas que ofrecen dinero a todas aquellas
personas que tengan páginas WEB y que estén dispuestas a colocar un BANNER
(rótulo) dentro de ésta. La forma en que estas empresas trabajan es que por cada
persona que visite el anuncio que allí está puesto, el dueño del sitio recibe un pago
el cual puede variar entre us$0.01 hasta us$0.25 dependiendo del anunciante, y al
llegar una cierta cantidad (usualmente us$100) la compañía envía un cheque al
dueño del sitio.
Una de estas empresas es GOOGLE con su programa AdSense el cual pone un
BANNER igual a los que aparecen en la parte de arriba de mis páginas. Para
ingresar a este programa, haga CLICK aquí:
Espero que estos pequeños trucos les sean de gran utilidad. Suerte.
FORO LECCIONES WEB
LECCION 7: ¿Cómo puedo agregar imágenes de fondo a mi página?
Poner una imágen de fondo a una página WEB es muy sencillo.
Unicamente seleccione un dibujo GIF o JPG y defínalo en el NETSCAPE
COMPOSER de la siguiente manera:

1. Ingrese aFORMATO.
2. Luego vaya a PROPIEDADES Y COLORES DE PAGINA.
3. Escoja la pestaña COLORES Y FONDO.

4. Escriba en donde dice: UTILIZAR IMAGEN el nombre del archivo que desea
utilizar de fondo de su página.
5. Presione aceptar y listo.
Tenga presente que el dibujo que seleccione como fondo deberá ser de
entre 1kb y 5kb para que cuando su página se esté abriendo en el navegador no
tome demasiado tiempo en hacerlo.
Además, recuerde que cuando uno escoje una imágen de fondo
o BACKGROUND, se debe de tener en cuenta que este dibujo se va a repetir
automáticamente en toda la página, por ejemplo, si tenemos el siguiente dibujo:
La imagen se va a repetir a lo largo de su página y aparecerá algo similar al
siguiente ejemplo:
EL FONDO APARECERA COMO

EN ESTE EJEMPLO.
Otro ejemplo sería el de esta imágen:
CON LA IMAGENANTERIOR, NUESTRA PAGINATENDRA UN
BORDE IGUALA ESTE.
Para obtener imágenes de fondo puede ir a la siguiente dirección:
ALBUM DE IMAGENES
Allí encontrará variedad de imágenes que estoy seguro le van a ayudar en
el diseño de su página WEB. A este álbum se irán agregando poco a poco
imágenes de todo tipo para que usted pueda utilizarlas libremente. Si usted
tiene imágenes que deseé compartir conla comunidad internauta no dude en
enviármelas para poder ir agregándolas a este nuevo servicio.

¿Cómo puedoponerunformulatioenmi página?
¡¡¡ NECESARIO SABER HTML !!!
Muchas páginas necesitan tener una relación mas directa con las personas
que las visitan y para ello se hace necesario el uso de formularios o 'FORMAS'.
Las FORMAS no son mas que campos en donde pedimos que el visitante
ponga los datos que nos interesan, por ejemplo: el nombre, correo electrónico,
dirección postal, fecha de nacimiento, etc. etc. Pero debido a que en una página
WEB no queda grabada la información que los usuarios escriben, debemos
recurrir a nuestro correo electrónico para recibir la información que los usuarios
nos llenan en las FORMAS.
Ahora bien, para que esto funcione necesitamos tener un programa que se
llama "FORM MAIL" el cual está hecho en lenguaje CGI (no todos los servidores
dan acceso a programas CGI, pregunte con el administrador del servidor en donde
usted tiene puesta su página si ellos tienen este programa disponible). Además,
deberemos aprender algunos comandos de HTML.
Un ejemplo de una forma en donde pidamos el nombre y el correo
electrónico sería:
<FORM METHOD="Post" ACTION="http://www.ejemplo.com/cgi-
bin/formmail">
< INPUT TYPE="hidden" NAME="recipient" value="su dirección email va
aquí!">
< INPUT TYPE="hidden" NAME="subject" value="ASUNTO que ud.
recibirá">
< INPUT TYPE="hidden" NAME="redirect" value=" URL a donde va a
regresar">
Ingrese su Nombre:
< INPUT TYPE="text" NAME="nombre" size="30" maxlength="40">
Ingrese su E-mail:
< INPUT TYPE="text" NAME="email" size="30" maxlength="40">
< INPUT TYPE="submit" VALUE="ENVIAR">
< INPUT TYPE="reset" VALUE="BORRAR">
</FORM>
Lo anteriorse vería de esta forma(no oprima enviarya queesta forma no está
funcionando):

Nombre:
E-mail:
Submit Borrar
Cada una de las líneas HTML anteriores se debe de entender de la siguiente
manera:
<FORM METHOD="Post" ACTION="http://www.ejemplo.com/cgi-
bin/formmail">
Aquí estamos definiendo que vamos a utilizar una FORMA, el METODO a
utlizar es POST, y la ACCION que vamos a ejecutar es un programa FormMail
que se encuentra en la dirección: http://www.ejemplo.com/cgi-bin/formmail (este
es un programa verdadero de FormMail, si su proveedor de espacio no le da el
programa CGI para FORMAS, puede utilizar este).
<INPUT TYPE="hidden" NAME="recipient" value=" su dirección
email va aquí!">
En esta línea le estamos indicando al programa CGI anterior cual es la
dirección de correo en donde deseamos recibir la información que el usuario está
llenando. Cuando se declara HIDDEN la información quiere decir que el usuario
no va a ver esta línea en nuestra página WEB.
<INPUT TYPE="hidden" NAME="subject" value=" subject que ud.
recibirá">
Como es un correo el que vamos a recibir desde nuestra página, deberemos
indicarle al programa CGI que nos envie el ASUNTO o SUBJECT del correo.
Aquí usted puede escribir cualquier cosa, por ejemplo "Datos enviados desde mi
página..." y el nombre de la página. Esto se hace por aquello de que tengamos
varias páginas desde donde vamos a recibir información, sepamos de cual de ellas
vienen los datos.
<INPUT TYPE="hidden" NAME="redirect" value=" URL a donde va
a regresar">
Aquí le estamos indicando al programa CGI que al terminar de recibir la
información, lleve al usuario a una página WEB. Por lo general se envia al usuario
a una página de agradecimiento por haber llenado la FORMA.
<INPUT TYPE="text" NAME="nombre" size="30" maxlength="40">
En esta instrucción estamos diciendo al programa CGI que tenemos una
variable que se llama NOMBRE, la cual tiene un largo de 30 caracteres visibles y
un máximo de 40. Si nos fijamos la siguiente línea HTML lo único que cambia es
el nombre de la variable que se llama "email". Esto nos indica que podemos poner

tantas variables como querramos, los largos visibles y máximos pueden ser
cualquier tamaño. Al declarar a estas variables como tipo "TEXT" lo estamos
dejando abierto para que el usuario pueda escribir cualquier cosa.
<INPUT TYPE="submit" VALUE="ENVIAR">
Este comando sirve para enviar toda la información que se acaba de llenar al
programa CGI y este a su vez nos lo enviará a la dirección de correo que se
definió anteriormente.
<INPUT TYPE="reset" VALUE="BORRAR">
Este comando nos permite borrar toda la FORMA y poder volver a meter la
información nuevamente.
</FORM>
Esto le indicará al código HTML que nuestra definición de la FORMA ya
terminó. Este comando es muy importante ya que si no lo agregamos nuestra
página contendrá errores.
Como ve, el crear FORMAS no es tan difícil. Lo único es tener un poco de
experiencia con código HTML para saber donde poner esta información.
Si desea ver ejemplos de una FORMA vaya a las siguientes direcciones:
EJEMPLO DE FORMAS #1
EJEMPLO DE FORMAS #2
¿COMO SE HACE UNA PAGINA WEB?
LECCION 8
EJEMPLO DE UNA FORMA #2
(para ver como está hecha esta página presione el botón derecho de su mouse y presione en donde dice:
"VER CODIGO FUENTE")

¿Cómo ponerunlibrode visitas enmi página?
¡¡¡ NECESARIO SABER HTML !!!
A veces deseamos tener una página en donde nuestros visitantes puedan
poner sus impresiones, a esto es lo que llamamos "Libro de Visitas".
Para instalar el "Libro de Visitas" podemos hacerlo de varias formas, si
nuestro servidor soporta CGI, o PHP (muchos servidores gratuitos no ofrecen
estas opciones), podemos utilizar un SCRIPT ya desarrollado por otra persona y
que sea de forma gratuita, y lo único que deberíamos hacer es montarlo en nuestro
servidor, hacer algunas modificacicones y crear un LINK hacia esta nueva página.
Hay varios SCRIPTS de este tipo y el que yo he utilizado en algunas
páginas requiere de PHP y MySQL para que funcione. Este se puede bajar de:
http://www.smartisoft.com/products.php?product=phpBook
Otro forma de incluir un libro de visitas en nuestra página, si no se cuenta
con CGI o PHP, es utilizar un libro que esté alojado en otro lugar y desde nuestra
página únicamente crear un LINK hacia ese sitio. En nuestra sección de
recursos http://recursos.secmas.net hay direcciones de donde se puede conseguir
este tipo de "Libros de Visitas"
Si desea ver un ejemplo de un Libro de Visitas vaya a la siguiente
direccione:
LIBRO DE VISITAS DE "COMO HACER PÁGINAS WEB"
FORO LECCIONES WEB
¿Cómo poner mi página en un buscador?
Luego de pasarnos horas haciendo nuestra página, deseamos que todo
mundo pueda acceder a ella, entonces se hace necesario poder ponerla en un
buscador como GOOGLE,ALTAVISTA, etc. Esto se hace para que toda la gente
que busca información relacionada con nuestra página pueda encontrarla y ver lo
que tanto nos ha costado hacer..
Pues bien, contrario a lo que mucha gente cree, el incluir una página en un
buscador es una tarea muy sencilla, lo único que hay que hacer es saber hacerlo.
He aquí, una forma de hacerlo para lo que es el buscador llamado ALTAVISTA.

El ingresar una página aquí es muy similar a ingresarla en cualquier otro
buscador. Es por ello que este ejemplo nos dará una idea de como hacerlo en
cualquier otro:
1. Deberemos ingresar al buscador en donde queremos poner nuestra página, para
este ejemplo, entremos a:
http://www.altavista.com
2. Estando allí busquemos lo siguiente:
3. Entremos a ese LINK y nos aparecerá una página donde deberemos seleccionar
"ENVIO BASICO" que es la forma gratuita de poner nuestra página:
4. Listo, ahora solamente siga los pasos que allí se detallan para que el servidor
de ALTAVISTA verifique si la página cumple son sus requisitos y, si los
cumple, deberemos esperar de 2 a 4 semanas para ver que aparezca en los
resultados de sus búsquedas.

Si desea ver otro ejemplo de como ingresar datos a un buscador, vaya a la
siguiente direccion:
DIRECTORIO DE PAGINAS WEB
¿Cómo subir mi página al servidor de SecmasNET?
Para subir la página que acabamos de hacer al servidor de SecmasNET o a
cualquier otro servidor, se puede hacer de dos maneras utilizando un programa
FTP o bien utilizando nuestro Panel de Control en la función "FILE
MANAGER".
El programa FTP puede ser cualquier programa que nos permita hacer
transferencia de archivos de nuestra máquina hacia un servidor. El que
normalmente se usa es uno que se llama WS_FTP LE el cual se puede conseguir
gratuitamente desde:
http://www.download.com
La forma de utilizar el FTP es muy sencilla, luego de haber pagado tu
espacio en SecmasNET (para una oferta especial en los precios de alojamiento de
SecmasNET visitaProyectoWEB) deberás recibir un correo electrónico en donde
se te dan los datos como: NOMBRE DE USUARIO, CONTRASEÑA y la
dirección hacia donde debe de apuntar el FTP para subir tus archivos. Lo bueno
de los programas FTP es que te permiten de un modo muy simple y seguro crear
directorios en el servidor, subir archivos hacia diferentes lugares, eliminar
archivos o directorios, poner las propiedades de los archivos (CHMOD), etc. etc.
Esta es una imagen del programa WS_FTP LE:

Ahora bien si ya tenemos nuestra cuenta con SecmasNET también
podemos utilizar el programa de "MANEJO DE ARCHIVOS (file manager)" que
se encuentra en el Panel de Control. Esta es una vista del Panel de Control y del
lugar donde se encuentra el "FILE MANAGER":
Una vez colocada nuestra página dentro de nuestro servidor, todo mundo
podrá entrar a verla. Lo bueno de tener uno su propio servidor es que desde allí
podemos crear cuentas de correo, hacer backups de nuestros datos y páginas,
podemos manejar nuestras bases de datos, etc. etc. cosas que no son posibles con
un servicio gratuito de alojamiento.

Además, contamos con la oferta de SecmasNET de que todos los usuarios
de mis páginas pueden tener su propio servidor, su propio nombre de dominio y a
un excelente precio. Para mas información por favor vaya a:
PROYECTO WEB por Sergio Cabrera

Comodiseñar una pagina web

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Comodiseñar una pagina web

Semelhante a Comodiseñar una pagina web (20)

Comodiseñar una pagina web