1 / 16

Herramientas para el diseño de paginas web

Herramientas para el diseño de paginas web. Integrantes:. Mereldy Plaza Giiusy de Luca Octavio Viera Vianey Madera. HERRAMIENTAS BASICAS.

chet
Download Presentation

Herramientas para el diseño de paginas web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Herramientas para el diseño de paginas web Integrantes: Mereldy Plaza Giiusy de Luca Octavio Viera Vianey Madera

  2. HERRAMIENTAS BASICAS Básicamente una página web puede construirse con un simple editor de texto (como puede ser el bloc de notas de windows) siempre que se tenga un profundo conocimiento del pseudo lenguaje HTML, o al menos seamos capaz de memorizar todas sus etiquetas. Es lo que se conoce como crear las páginas web a sangre. Pero esto no es fácil y además un sitio de internet está compuesto de multitud de páginas web enlazadas entre ellas, imágenes, archivos de scripts y un sinfín de elementos que debemos controlar. Por ello es conveniente disponer de algunos programas básicos que nos faciliten la tarea.

  3. Etiquetas HTML para crear una pagina web. Estas son unas de las etiquetas mas utilizadas en una pagina web. <html></html> Abre y cierra un documento HTML <head></head> Encabezado de la página - aquí se coloca titulo, metatags, e informacion para buscadores entre otras cosas. <body></body> Dentro de esta etiqueta va toda la parte visible de la página web. Etiquetas del Encabezado <title></title> El título de la página web.

  4. Atributos de la etiqueta Body <body bgcolor=?> Configura el color de fondo de la página, usando el valor del código de color hexadecimal. <body tex=?> Configura el color por defecto del texto, usando el valor del código de color hexadecimal. <body link=?> Configura el color de las ligas, usando el valor del código de color hexadecimal. <body vlink=?> Configura el color de las ligas visitadas, usando el valor del código de color hexadecimal <body alink=?> Configura el color de las ligas al darle clic, usando el valor del código hexadecimal.

  5. Etiquetas HTML de Texto <pre></pre>Texto pre-formateado <hl></hl>Título más grande <h6></h6>Título más pequeño <b></b>Negritas <u></u>Subrayado <i></i>Cursivas <tt></tt>Tipo máquina de escribir <cite></cite>Cita, en cursiva <em></em>Resalta una palabra, negrita o cursiva <strong></strong>Resalta una palabra o grupo de palabras<fontface=?></font>Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc. <fontsize=?></font>Coloca tamaño de letra, de 1 a 7 <font color=?></font>Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.)

  6. Elementos Gráficos <imgsrc="name"> Incorpora una imagen <imgsrc="name" align=?> Alinea la imagen: izquierda, derecha y centro <imgsrc="name" border=?> Determina el contorno de la imagen. Un valor 0 no tendrá contorno <map></map> Mapa de imágenes <body background="URL o ruta de archivo"></body> Coloca la imagen como fondo de la página <hr> Linea horizontal <hrsize=?> Tamaño de una linea horizontal <hrwidth=?> Ancho de linea horizontal, ya sea porcentaje o valor absoluto. <hrnoshade> Linea horizontal sin sombra

  7. http://www.cafetero100.com/manual-html.php http://crismattweb.tripod.com/guiahtml/etiqueta.html http://www.htmlquick.com/es/reference/tags.html http://www2.uca.es/manual-html/etiquet.htm Y muchas mas… Hay muchas etiquetas y muchas paginas de internet donde puedes encontrar mas etiquetas y te dicen como y para que funcionan.

  8. Servidor Local Un Servidor Web Local es aquel Servidor Web que reside en una red local al equipo de referencia. El Servidor web Local puede estar instalado en cualquiera de los equipos que forman parte de una red local. Es por tanto obvio, que todos los Servidores Web, son locales a la red local en la que se encuentran, o como mínimo, locales al sistema en el que están instalados.

  9. No es necesario pero un servidor local permitirá que podamos acceder a nuestro sitio en forma local (en nuestro ordenador) pero como si estuviéramos accediendo a él a través de internet, es decir, con una dirección tipo http://misitio/paginas.htm. Si además vas a desarrollar páginas con PHP el servidor local es imprescindible. Aunque en el mercado existen muchos programas para montar tu servidor local, el más extendido es el Apache, y también es el más barato: es gratis. No te va a ocupar mucho espacio ni te va a pedir complicadas operaciones de instalación y configuración. Además la amplia comunidad de usuarios va a permitirte encontrar soluciones a los problemas que se te puedan plantear. Otra opción es el Personal Web Server que viene con Windows 98, o incluso el IIS que viene con el servidor Windows 2000…En esta pagina puedes descargar el servidor local Apache que es gratis…  http://www.apache.org/

  10. Editor de paginas web. Es una aplicación diseñada con el fin de facilitar la creación de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM. Hay tres tipos de editores que son : Editor de texto sin formato Editor de texto con ventanas desdobladas Editor WISIWYG

  11. Editor de texto sin formato También llamado editor de texto plano. Este tipo de editor suele ser muy sencillo. Dos ejemplos son Notepad (incluido en Windows) y Kate (GNU/Linux). Con cualquiera de los dos bastaría para escribir las líneas de código necesarias para diseñar una página Web. Existen editores de texto específicamente diseñados para la edición Web, que como Kate, incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto. Dichos editores incluyen una serie de botones para insertar rápidamente las etiquetas, o combinaciones de estas, más corrientes, salvar el documento con un clic y visionarlo posteriormente en una nueva ventana.

  12. Editor de texto con ventanas desdobladas Es una versión ligeramente más sofisticada que la anterior. Suelen constar de un par de ventanas. Una de trabajo, donde se teclea el código HTML y el texto que se quiere incluir en la página, y en la otra se visualiza el resultado en tiempo real. En otras palabras se obtiene una pre visualización del documento generado. Lo que significa que no se tiene que guardar el documento, previamente, antes de volver a abrirlo con el navegador para comprobar el resultado.

  13. Editor WISIWYG WISIWYG quiere decir WhatYouSeeIsWhatYouGet, que traducido al castellano quiere decir: "lo que ves es lo que obtienes", en los que de manera visual se pueden colocar distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML. La manera de trabajar en este tipo de editores, es muy similar a la que se usa cuando se trabaja con un procesador de texto. Esto quiere decir que un usuario no tiene por qué teclear las etiquetas del lenguaje de marcado. En lugar de eso, el usuario escribe el texto, lo formatea, e inserta las imágenes en los lugares deseados, trabajando igual a como lo haría con Writer, (el procesador incluido en la suite ofimática OpenOffice.org), o Word. Posteriormente el editor transforma la vista por pantalla en código HTML perfectamente configurado.

  14. Ejemplos claros de editores de páginas web son KompoZer (antes llamado NVU), Mozilla Composer, Amaya, Dreamweaver o Microsoft Frontpage, entre otros. En esta pagina puedes descargar algunos de ellos que son muy buenos. http://www.softonic.com/s/editor-paginas-web http://www.todoprogramas.com/desarroll oweb/editores

  15. Editor de Imagenes En otro apartado de esta guía se dice que las imágenes son prácticamente imprescindibles en las páginas web, razón por la cual no está de más disponer de un editor de imágenes. Con él podrás optimizar las imágenes, cambiar su formato o crear imágenes propias para botones o barras de navegación. Existen muchos programas que pueden serte útiles en este apartado, como por ejemplo Fireworks (Macromedia), Photo Shop (de Adobe) Photo Paint(deCorel). Dentro de este apartado si vas a usar imágenes en formato gif animado deberás disponer de un programa al efecto, el más adecuado quizás sea el Ulead Gif Animator. Los programas de Adobe como Photoshop y Corel Draw puedes bajar una prueba de 30 días directamente desde la pagina de Adobe con solo crear una cuenta en dicha pagina. http://www.adobe.com/

  16. Cliente FTP En una conexión FTP, el cliente FTP es la computadora que inicia la conexión a un servidor FTP. Para esto la computadora debe tener un software cliente FTP, que permitirá conectarse y acceder a los archivos en el servidor FTP. Algunos navegadores soportan FTP y, por lo tanto, funcionan como clientes FTP. Algunas aplicaciones más populares usadas como clientes FTP son: FileZilla, Cute FTP y WS_FTP. Este programa te permita enviar las páginas que hayas creado a donde hayas alojado tu sitio web. Habitualmente es un programa que te conecta a tu alojamiento mostrándote lo que allí tienes almacenado (directorio remoto), al mismo tiempo te muestra lo que tienes en tu sitio local. Mediante algún botón o comando sencillo te permite como mínimo enviar ficheros a tu directorio remoto o recogerlos para traerlos a tu disco local. Puedes descargar Cute FTP y FileZilla aquí. http://www.coffeecup.com/ http://filezilla-project.org/

More Related