Presentación post
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
271
On Slideshare
271
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ¿Qué es una Página Web?Una página web es el nombre de un documento o información electrónica adaptadapara la World Wide Web y que puede ser accedida mediante un navegador paramostrarse en un monitor de computadora o dispositivo móvil. Esta información seencuentra generalmente en formato HTML o XHTML, y puede proporcionarnavegación a otras páginas web mediante enlaces de hipertexto. Las páginas webfrecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones(scripts) e imágenes digitales, entre otros.Las páginas web pueden estar almacenadas en un equipo local o un servidor webremoto. El servidor web puede restringir el acceso únicamente para redes privadas, p.ej., en una intranet corporativa, o puede publicar las páginas en la World Wide Web. Elacceso a las páginas web es realizado mediante su transferencia desde servidoresutilizando el protocolo de transferencia de hipertexto (HTTP).
  • 2. ¿Cuáles fueron las primeras Páginas Web que existieron?La primera página que se creó en Internet corresponde a esta dirección:http: //info.cern.ch/hypertext/WWW/TheProject.html, perteneciendo aldominiohttp://info.cern.ch.El 17 de mayo 1991, el Centro Europeo de Investigaciones Nucleares(CERN) inauguraba la primera página web en http://info.cern.ch/, siendo laprimera dirección web y dominio creado. Este sitio estaba albergado en elmismo centro, y corría bajo el primer servidor web que se desarrolló. Abajovemos una imagen de ese mítico ordenador que actualmente se encuentraen la exhibición “Microcosm” del CERN (Centro Europeo deInvestigaciones Nucleares).La primera página web según tim bemers-lee quien creo la world wide webfue estahttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlOtros historiadores afirman que la primera en publicarse fue estahttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html
  • 3. Captura de http://info.cern.ch/ en 1993, donde ya se ven los grandesavances en cuanto a exploradores, similares a los actuales.
  • 4. ¿Cuáles son los programas más utilizados para crear una Pagina Web?GeneralesSon programas que su utilidad es del interés general, no exclusivos para programadores odesarrolladores. Entre los programas más representativos se encuentran: Mozilla, XenuLink, Opera (Navegador), FileZilla (Cliente FTP), Open Office, Picasa2, Skype, PDFill, 7-Zip, etc.Programas de DiseñoProgramas que son útiles en el diseño de páginas Web en general. Entre esta categoría deprogramas se encuentran: PhotoShop Elements 3.0, Flash, Dreamweaver, Corel Ventura10, Adobe PhotoShop, Photo Impact, Xara X1, Deep Paint 3D, solo por mencionar algunos.ProgramaciónEstán enfocados a desarrolladores y programadores, es una serie de programas especializadosque le ayudaran a desarrollar su página Web de forma estructurada y confiable, algunos de estosprogramas son MED, Ultra Edit, HomeSite, Zend Studio, Edit2web, phpDesigner, KomodoIDE, HTML-Kit., Visual Web Developer, Style Master Editor, XML Soy 5, y ASP.NET WebMatrix, por solo nombrar algunos.Editores HTMLEstos programas son para la edición de código HTML, cuentan con tutoriales específicos, comoeditores WYSIWYG. (What You See Is What You Get, lo que ves es lo que obtienes. Se aplica alos procesadores de texto y otros editores de texto con formato, como los editores de HTML quepermiten escribir un documento viendo directamente el resultado final, frecuentemente elresultado impreso). Algunos ejemplos de estos programas son: Dreamweaver, AdobeGoLive, HTMLKit. Komposer, TsWebEditor, Edit plus, Arachnophilia, Coffee Cup free y Front page.
  • 5. ¿Cómo crear una Pagina Web en Front Page? IntroducciónFrontPage es un programa desarrollado y registrado por la compañía Microsoft, el cual te permitecrear, editar, y manejar páginas para ser luego publicadas en el web. ¿Qué puedes hacer con FrontPage? Escribir y editar textoAñadir y editar imágenes Crear tablas Crear listados Crear enlaces Crear “Frames” Crear Formularios Publicar páginas en el Web ¿Cómo planificar un Website?• Primero establece el tema y los objetivos de tu website • Esto te permite dibujar la imagen que mejor representa las ideas que resultan del tema y losobjetivos. • Manten un escrito que ordene y estructure tu página. Esto facilitará el trabajo.• Recopila toda la información a utilizar • Recuerda respetar los derechos de autor, tanto en los escritos citados, trabajo intelectual de un compañero y en las ilustraciones presentadas. Es una buena opción.• Divide el contenido en asuntos o secciones • Cada uno de estos asuntos se convertirán en una página dentro de tu web.
  • 6. Elaboración: Algunos trucos:  Elabora un diagrama de tu website en papel para que te sirva de guía (Site Map).  Manten en papel detalles de tu website como las cantidades de las páginas, su contenido, tipo de letra utilizada, colores, etc.  Coloca una breve descripción de tu website.  Destaca la información más relevante.  No olvides desarrollar una barra de navegación. Esta debe ser manejable para toda persona que visite tu website. ¿Qué debes considerar en el momento de diseñar tu Website?• Proveer información relevante• Crear una Barra de Navegación en todas las páginas• Respetar y especificar las disposiciones de derecho de autor (copyright) tanto en el contenido escrito como enla utilización de láminas. Para las láminas, unas veces es necesario pedir permiso al autor sobre su uso y seguirlas instrucciones del mismo para permitir la publicación.• Incluir información de contacto• Facilitar la transferencia de la información: mantener el tamaño (file size) de las imágenes y las páginas lo másbajo posible (<30kb)• Actualizar la información constantemente• Proveer un listado de “FAQ” (Frequently Asked Questions) [Según el objetivo de tu página]• Ten en cuenta cuál será el objetivo para crear la página y trabaja hacia ellos• Sobre Diseño:  Utiliza estilos de letra claros y sencillos (Arial, Courier, NewTimes Roman)  Si vas a utilizar una imagen de fondo (background) ésta no debe intervenir con el texto  Cuida los colores de tu página, si usas colores claros para el fondo usa colores oscuros para las letras  No debes hacer páginas demasiado largas, organiza la información distribuyéndola en varias páginas enlazadas  No uses imágenes demasiado grandes que ocupen todo el espacio del monitor y/o que opaquen de alguna forma la información
  • 7. InicioAccesando FrontPagePresiona el icono que representa el programa en la pantalla de tu computadora obúscalo en la opción de Start/Programs/Microsorft Front PageUna vez entras al programa aparece una página vacía donde puedes comenzar acrear tu website. Pero antes te recomendamos lo siguiente:Crear una carpeta para tu website Presiona en el menú File/New. Escoge la opción Page or Web...
  • 8. En esta versión del programa, la mayoría de los casos leaparecerá una pantalla a la extrema derecha de la pantallaque se titula New Page or Web. En esta seleccionarás laopción Empty Web. TIP: En algunas versiones aparece una opción de One PageWeb Site. Cuando le des clic a la opción podrás escoger Empty Web. En esa misma sección seleccionarás la localidad donde grabarás el mismo. Empty Web
  • 9. Automáticamente el programa direcciona tu web en el directorio “My Document” y le asigna unnombre “Web1”: C:My DocumentMy WebWeb1Si quieres cambiar de directorio y asignarle otro nombre a tu “Website” puedes hacerlo bajo laopción “Specify the location of the new web”:Ejemplo, A:nombre o C:My DocumentMy WebnombreTIP: No uses acentos, letras mayúsculas, ni espacios entre palabras o letras para ponerle nombrea tus archivos pues algunos sistemas de computadora tienen dificultades para leer este tipos denombres. [Evita también la letra ñ] Ahora, presiona en el menú “View” y escoge la opción “Views Bar”, aparecerá la barra de “View” al extremo izquierdo de la ventana del programa. [En la mayoría de los casos esta opción está dada] Presiona en la opción “Folders” y verás a la derecha el listado de “folders” (carpetas) que te creó FrontPage: _private, images. En la carpeta llamada _private tendrás las extensiones necesarios para que funcione el programa (no puedes editarlas) y en la carpeta llamada Image podrás guardar imágenes.
  • 10. Escoger un TemaEste manual en particular le facilitará el trabajo llevándole a través de las utilidades más prácticas delprograma. Esto no significa que no existan diversas maneras de empezar. El tema o Theme se refiere a motivos ya establecidos por Front Page. El programa te permite hacer cambios a estos temas y grabar los mismos de forma personalizada. Presiona en Format/ Theme. En Theme procura escoger la opción de All Pages para serciorarte de que se repita en cada página.Para hacer cambios en el tema escogido da un click en la opción Modify y tu escoges qué cambiar: elcolor, las gráficas o el texto. Si haces algún cambio procura presionar en Save as y así personalizaráslos cambios.
  • 11. Crear un bordeLa opción de Shared Borders te facilita el trabajo en grandes cantidades. Al escoger un borde evitastener que repetir el mismo patrón por cada página de tu website. Dentro de estos bordes trabajaráscon tablas que te permitan manejar mejor el espacio. Da click en Format/ Shared Borders. En Shared Borders escogerás las opciones que mejor representen la organización que deseas para tu website. Una sugerencia sería seleccionar: All Pages/Top/Left; Include navigation buttons/Botton TIP: Si no aparece activa la opción, dirígete a Tools/ Page Options/ Authoring y procura que la opción de Share Borders esté seleccionada. Seleccionado tu borde ya tienes una idea de la imagen que empieza a organizar tu website. Hacer tablas Lo primero que se te recomienda es trabajar sobre una estructura para que puedas tener mayor control sobre la página. Para hacerlo, selecciona en la barra de herramientas la opción Table/Insert/Table o ve directamente al icono de tables
  • 12. Puedes escoger la cantidad de líneas y columnas, escoger el porcentaje, el alineamiento, la definición de los tamaños de los bordes, espacios de los espacios. El Set as default for new table te permite mantener el mismo orden para las demás tablas.Nota: Ve a la sección “Editar Tablas” más adelante, para detalles sobre como cambiar los colores delas celdas y la tabla si así lo prefieres.Con estas instrucciones ya has creado tu plantilla [template] para tu website. El grabar esta páginacomo tu index sería tu próximo paso.Crear la página inicial (Home Page)A ésta primera página le llamarás index.html . El archivo llamado index.html será siempre la páginaprincipal que se despliega cuando las personas accesen a tu website. También se le conoce como“home page”. Ve a File/ Save as. En el área de file name escribe index.html. El HTML sólo lo utilizarás con el index y automáticamente el programa grabará las demás páginas como htm. En la opción Change se te ofrece el poder cambiar el nombre de la página. Si seleccionaras un Banner para tu página, será este nombre el que se reflejará. En esta opción puedes escribir con todo tipo de regla gramatical. Para crear la siguiente página repite los pasos uno y dos de ésta sección.
  • 13. ¿Cómo editar texto?Procurando iniciar un texto dentro de los márgenes de una tabla, escribirás como lo hacesnormalmente en un programa de edición de texto. Puedes usar la barra de herramientas paradiseñar el formato del texto: estilo, tamaño, color, ennegrecer, itálicas, subrayado y demás.¿Cómo añadir imágenes? • ClipArt - Insert/Picture/ClipArt o puedes localizar el icono en tu barra de herramientas. • Importar imágenes ya creadas - Insert/Picture/From FileAñadir imágenes de Internet que tengan permiso de "copyright".1. Buscas la imagen en Internet2. Sobre la imagen, presionas con el botón derecho del mouse3. Escoges la opción “copy” y la grabas en un disco externo o interno en tu computadora.4. Regresas a FrontPage5. Ubicas el cursor donde quieras colocar la imagen6. Presionas en Paste
  • 14. ¿Cómo editar Imágenes?Presiona sobre la imagen y aparecerá una barra de herramientas como la siguiente: • Añadir texto dentro de la imagen • Herramienta Thumbnail: minimiza la imagen pero la misma puede luego ser vista en su tamaño original en la Internet con sólo presionar sobre ella • Posición absoluta: te permite mover la imagen a donde la quieras mover • Rotación de la imagen • Brillantes y contraste • Cortar (crop) • Eliminar un color (transparencia) • Blanco y negro • Efecto de Bevel • Hostpot (añadir enlaces dentro de imágenes) Nota: Recuerda salvar lo editado dando un clic en el ícono correspondiente.Creando la Barra de NavegaciónLa barra de navegación establece una estructura para navegar por todas las páginas quecomponen tu "website" . El programa ofrece varias formas para diseñar esta estructura. Entreéstas se encuentran la opción Navigation BarPaso #1• Asigna orden presionando sobre la opción View y seleccionando Navigation.• Cuando estés en esta vista, arrastrarás las página deseada desde el Folder list y suéltala hasta el área de trabajo para enlazarla con la página principal (index) [index se identifica con el dibujo de una casa en la parte inferior izquierda, así que no debes arrastrarla]
  • 15. • Cuando usamos el Navigation Bar, FrontPage usa la etiqueta (label) que aparece en la vista denavegación (Navigation View) como texto para los enlaces. Para cambiarlo presiona con el botón derecho delmouse sobre la página que deseas cambiar y escoges la opción Rename.Paso #2Asignar posición a la Barra de Navegación en la página dentro de las celdas de los bordes [ShareBorders] para que la misma se repita automáticamente en cada página creada. Aparecerá una pantallacomo la que sigue: En esta pantalla verificarás si la opción Link Bars está seleccionada en la extrema
  • 16. izquierda del recuadro. En la extrema derecha debe estar seleccionada la opción Bar based onnavigation estructure. Al finalizar presiona sobre el botón de Next.En esta pantalla seleccionarás la opción de Use Pages Theme. Esto significa que permanecerás conlas imágenes ofrecidas por el tema de tu página. Al finalizar presiona en Next. En esta pantalla seleccionarás la posición de la barra de navegación. Escoge la que mejor corresponda a tus necesidades. Al terminar seleccionarás la opción Finish.
  • 17. Para las propiedades de la Barra de navegación sería pertinente escoger las opciones de Childpages under home, Home page y Parent page. Estas opciones amplían los enlaces de tu navegador.¿Cómo crear enlaces?
  • 18. Enlaces Internos: Enlaces hacia páginas que perteneces a tu “website” 1. Selecciona la palabra o imagen que quieras utilizar de entrada al enlace 2. Presiona con el botón derecho del mouse 3. Escoges la opción“Hyperlink” 4. Luego presionas sobre el archivo hacia donde se dirigirás el enlaceEnlaces Externos: Enlaces hacia otras páginas web fuera de tu “website”. 1. Sigues los primeros tres pasos 2. Escribes la dirección de la página que quieres enlazar en la sección URLEnlaces hacia un email: escribes la dirección de email, una vez presionas enter automáticamente secreará el vínculo hacia el email.Enlaces hacia un email desde una imagen: • Seleccionas la imagen que deseas enlazar • Presionas sobre el botón hyperlink • Presionas sobre el icono “mail to” • Escribes el email y presionas en ok.
  • 19. Enlaces dentro de una misma página: 1. Primero tienes que insertar un bookmark donde deseas enlazar • Colocas el cursor donde deseas que llegue el vínculo • Escoges en el menú Insert la opción bookmark • Asigna un nombre al bookmark en el espacio provisto • Presionas en ok y listo • Aparecerá una banderita indicando que allí colocaste un bookmark. 2. Ahora crea el vínculo siguiendo los primeros tres pasos de los enlaces internos • Utilizarás la sección Optional/Bookmark seleccionas el nombre que le pusiste al bookmark y listo.
  • 20. Crear una tabla Para insertar una tabla, busca la opción de Table en la barra de navegación, Table/Insert/Table En la pantalla de Insert Table seleccionarás las opciones que mejor dibujen la tabla que necesitas. Puede escoger la cantidad de columnas y líneas, el ancho de los bordes, el abarque de la tabla (Specify width). Editar la tabla • Añadir filas o columnas 1. Presiona con el botón derecho del mouse 2. Escoges la opción de Split Cell 3. Defines en la misma la cantidad de celdas que deseas organizar Nota: Si quieres controlar donde exactamente se colocará la fila o columna activa la función por medio del menú de tablas: Table/Insert/Row or Columns
  • 21. Guardando la página webDesde un inicio estás guardando tu página. Si deseas grabarla en un discotransportable, busca el archivo en la computadora y cópialo o arrástralo hacia tudisco.Nota: si deseas cambiar el título a la página: das clic en “Change” te aparecerá unaventana como la que sigue donde colocarás el título deseado, luego das clic en OK.El título de la página es importante porque entre otras cosas, es lo que aparecerá entu barra de navegación y banner, si es que colocas alguno.Nota: Es importante que te asegures que guardas las imágenes en la misma carpetadonde esta tu “Website”, preferiblemente en la carpeta “image”.