Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Comodiseñar una pagina web

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
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...
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 desd...
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 fec...
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio

Eche un vistazo a continuación

1 de 35 Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (20)

Similares a Comodiseñar una pagina web (20)

Anuncio

Comodiseñar una pagina web

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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.
  6. 6. 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. 7. 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
  8. 8. 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
  9. 9. 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ó
  10. 10. 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
  11. 11. (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.
  12. 12. 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:
  13. 13. 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.
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. ¿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:
  18. 18. 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.
  19. 19. ¡¡¡ 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.
  20. 20. ¿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:
  21. 21. 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.
  22. 22. 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: <!--Iniciael código midi html--> <noembed> <bgsound src="su_archivo.mid" loop="infinite"> </noembed> <embedsrc="su_archivo.mid " autostart="true" loop="true" hidden="true"> </embed> <!--Terminael código midi html--> 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.
  23. 23. 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. ¿Tiene alguna pregunta? 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:
  24. 24. 1. Ingrese aFORMATO. 2. Luego vaya a PROPIEDADES Y COLORES DE PAGINA. 3. Escoja la pestaña COLORES Y FONDO.
  25. 25. 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
  26. 26. 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.
  27. 27. ¿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):
  28. 28. 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
  29. 29. 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 ¿Tiene alguna pregunta? ¿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")
  30. 30. Puede contactarnos por correo electrónico, llenando la siguiente información: NOMBRE: EMAIL: EMPRESA: TELEFONO: FAX: COMENTARIOS: ENVIAR BORRAR © Copyright 1999 Secma's Software ¿Tiene alguna pregunta? FORO LECCIONES WEB
  31. 31. ¿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" ¿Tiene alguna pregunta? 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.
  32. 32. 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.
  33. 33. 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:
  34. 34. 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.
  35. 35. 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

×