Herramientas para el diseño de paginas web

16
HERRAMIENTAS PARA EL DISEÑO DE PAGINAS WEB Integrantes: Mereldy Plaza Giiusy de Luca Octavio Viera Vianey Madera

description

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

Transcript of Herramientas para el diseño de paginas web

Page 1: Herramientas para el diseño de paginas web

HERRAMIENTAS PARA EL DISEÑO DE PAGINAS WEB

Integrantes:Mereldy PlazaGiiusy de LucaOctavio VieraVianey Madera

Page 2: Herramientas para el diseño de paginas web

HERRAMIENTAS BASICASBá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.

Page 3: Herramientas para el diseño de paginas web

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.

Page 4: Herramientas para el diseño de paginas web

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.

Page 5: Herramientas para el diseño de paginas web

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<font face=?></font>Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc. <font size=?></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.)

Page 6: Herramientas para el diseño de paginas web

Elementos Gráficos <img src="name">Incorpora una imagen <img src="name" align=?>Alinea la imagen: izquierda, derecha y centro <img src="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 <hr size=?>Tamaño de una linea horizontal <hr width=?>Ancho de linea horizontal, ya sea porcentaje o valor absoluto. <hr noshade>Linea horizontal sin sombra

Page 7: Herramientas para el diseño de paginas web

Hay muchas etiquetas y muchas paginas de internet donde puedes

encontrar mas etiquetas y te dicen como y para que funcionan.

http://www.cafetero100.com/manual-html.phphttp://crismattweb.tripod.com/guiahtml/etiqueta.htmlhttp://www.htmlquick.com/es/reference/tags.htmlhttp://www2.uca.es/manual-html/etiquet.htm

Y muchas mas…

Page 8: Herramientas para el diseño de paginas web

Servidor LocalUn 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.

Page 9: Herramientas para el diseño de paginas web

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/

Page 10: Herramientas para el diseño de paginas web

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 formatoEditor de texto con ventanas

desdobladasEditor WISIWYG

Page 11: Herramientas para el diseño de paginas web

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.

Page 12: Herramientas para el diseño de paginas web

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.

Page 13: Herramientas para el diseño de paginas web

Editor WISIWYGWISIWYG quiere decir What You See Is What You Get, 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.

Page 14: Herramientas para el diseño de paginas web

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-webhttp://www.todoprogramas.com/desarroll

oweb/editores

Page 15: Herramientas para el diseño de paginas web

Editor de ImagenesEn 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/

Page 16: Herramientas para el diseño de paginas web

Cliente FTPEn 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/