1
Download Estilo de una página Web - EEA-3roARTE-2010
Document related concepts
Transcript
-1- Trabajo práctico nº 1. Fecha: 30/3/11 Colegio: EEA Curso: 3ºA Materia: TIC Integrantes: Valentini, Domenech, Ferro, Rombouts y Suarez. Grupo: “El Incógnito” Trabajo Práctico nº1 -2- Cómo construir una página Web. Planteamiento de objetivos para tu página web Esta etapa es muy importante. Se trabaja en el papel para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La planificación de tu web debe incluir: Breve descripción de los contenidos de la página, su título principal, etc. Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.) Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc. Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente. Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas físicos, etc. para adaptar la página a sus características. Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc Finalidad de una página Web Lo primero que debes pensar es la finalidad que tendrá tu sitio web y a quién ira dirigida para determinar en base a ello cómo se armará y si será para vender, mostrar, informar, brindar un servicio a la comunidad. etc. Esta información es básica y ayudará a un mejor asesoramiento y saber que productos brindarte. Estructura de la página: Árbol: En esta estructura existe una página principal desde la que se puede llegar a otras páginas de la Web. Estas otras páginas a su vez son un nodo para llegar a otro grupo de páginas. De esta manera llegaremos a tener las páginas agrupadas en niveles, de manera que para llegar desde el primero al último se deben atravesar los intermedios. Es una estructura algo compleja y difícil para navegar. Puede ser útil para estructurar nuestro sitio en canales o grupos de páginas independientes. En cualquier caso no conviene que el número de niveles sea excesivo, nunca más de 3. Listas: Esta forma de organizar el sitio es totalmente opuesto al anterior. Realmente no existe una página raíz o principal, lo que tenemos es una especie de lista de páginas donde cada una tiene dos vecinas: una a la izquierda y otra a la derecha, excepto las páginas de los extremos. Esta forma de organizar un sitio es muy parecida a un libro donde cada página sería un capítulo del mismo. Pasamos del primer al último capítulo a través de los intermedios. Es una implementación muy adecuada para Trabajo Práctico nº1 -3manuales o para procesos donde el usuario deba recorrer forzosamente una serie de páginas. Mixta: Esta estructura aprovecha las ventajas de las dos anteriores. Las páginas están jerarquizadas en niveles, pero dentro de cada nivel se organizan como listas, de forma que podemos recorrer todas las páginas de un mismo nivel sin tener que salir de él. Red: Las páginas del sitio también pueden estar totalmente interconectadas, es decir, desde cada página podemos ir a cualquier otra del sitio. Realmente la interconexión de absolutamente todas las páginas sería un caso extremo. Es una estructura de apariencia algo anárquica en la que hay que cuidar mucho de no dejar enlaces abiertos, es decir, apuntando a una página inexistente. Además debemos evitar que el usuario se pierda en una maraña de enlaces. Por todo esto ello es necesario planificarla muy bien. Textos que se incluirán: Es importante tener los textos de tu sitio completos antes de comenzar con el proceso del diseño. La estética del sitio debe trabajar en conjunto con lo que se dice en los textos. Además, ayuda a calcular el tiempo necesario para el desarrollo de tu sitio. Mientras más texto uses, más posibilidades tienes de informar mejor a tus visitantes y de que buscadores listen tu página en los resultados de búsquedas siempre y cuando procures poner temas interesantes y no repetir ninguno. El texto en las páginas Leer en una pantalla de computadora no es demasiado cómodo ni recomendable para nuestros ojos. Hay que procurar repartirlo en páginas con cierta coherencia. En la web las secciones podrían ser páginas o grupos de páginas. Pero si se tiene mucho texto se puede intercalarlo con elementos que rompan la continuidad que pueden ser simples líneas o pequeños gráficos que tengan relación con lo escrito. Y es importante hacer párrafos cortos donde destaque claramente la idea que quieras transmitir. Para esto hay dos métodos que permiten que el texto en la Web esté ordenado: Tablas: Las tablas son quizás el mejor método que tenemos para ordenar el texto, y los demás elementos, en una página web. Una tabla básicamente es una colección de celdas organizadas en filas y columnas, pero esta organización tan cuadriculada puede romperse combinando varias celdas en una sola o dividiendo una celda en varias filas o columnas. Esto convierte a la tabla en un elemento tremendamente versátil para repartir texto, e imágenes, en la página. Trabajo Práctico nº1 -4Capas: Las capas son casi como pequeñas páginas y pueden contener cualquier componente HTML: texto, tablas, imágenes, formularios... Estas capas son también muy útiles para crear animaciones en las páginas o para crear páginas con contenidos a varios niveles (como si tuvieras varias páginas en un mismo sitio). Las imágenes Las imágenes dan peso a las páginas y por tanto las hacen más lentas, usarlas equilibradamente y con moderación es la regla. Usar imágenes como simples adornos debe ser la excepción al igual que pasa con videos o archivos muy pesados que lo único que logran es alentar la página. Los exploradores soportan varios tipos de imágenes y es conveniente conocer las ventajas e inconvenientes de cada formato para que las imágenes en nuestro sitio rindan al máximo. Plantillas Web Las plantillas web son páginas web funcionales, con todo el código e imágenes ya listos, que pueden ser personalizadas a gusto del usuario para adaptarlas a sus necesidades: Añadiendo textos e información Modificando los colores Sustituyendo o añadiendo imágenes Adaptando el logotipo Agregando enlaces. Para editar las plantillas web puede usar cualquier programa editor: desde el notepad hasta Dreamweaver, GoLive... Las plantillas web se entregan en formato zip e incluyen todo el HTML y los archivos fuentes originales. La mayoría de ellas contienen llamatvios efectos rollover en los enlaces. Se pueden añadir efectos a medida. Las plantillas web son el punto de partida ideal para para diseñar sitios webs complejos sin invertir grandes cantidades de dinero y tiempo. Links entre las páginas Son fundamentales dentro de un sitio Web ya que cumplen diversas funciones: activan alguna instrucción, nos proveen de información extra o nos permiten acceder a sitios relacionados con el cual nos encontramos trabajando. Sin embargo, hay que tener en cuenta que se debe utilizarlos de la manera adecuada. Nunca abusar de ellos y que siempre estén señalados de modo claro para el visitante. Empleo del principio del contraste en el diseño Uno de los principios de diseño web que pueden emplearse para la creación de un orden entre los elementos de una página, es el principio del contraste. Cuando un visitante llega a una página web, se encuentra con una gran cantidad de información visual, la cual debe ser clasificada por su cerebro para poder acceder a los diferentes elementos. Trabajo Práctico nº1 -5La utilización de contrastes hace posible diferenciar los elementos principales de los secundarios y a estos del campo de fondo. Los visitantes tienen tendencia a seguir una secuencia lógica en la visualización de los elementos. En una primera instancia se visualizan los elementos gráficos (imágenes, videos, animaciones, etc.), para luego ver los textos. Estilo de una página Web Cada diseño debe tener un estilo propio. El estilo del diseño Web debe ser simple (no carente de estilo) para que los usuarios no encuentren dificultades con el contenido. La simplicidad no quiere decir que se deba tener un diseño con una estética pobre, sino que debe ser de sencilla interpretación, aún cuando presente elementos de diseño complejos y llamativos. Música en las páginas Para ponerle música a una página web, seleccionado el tipo, hay que corroborar que estén con extensión MID para luego utilizar las etiquetas HTML que a continuación se indican y así la Web tendrá música: <!--Inicia el código midi html--> <noembed> <bgsound src="su_archivo.mid " loop="infinite"> </noembed> <embed src="su_archivo.mid " autostart="true" loop="true" hidden="true"> </embed> <!--Termina el código midi html--> Trabajo Práctico nº1 -6- Etiquetas HTML. Etiqueta: <title> <meta> /> Función: Indica el nombre de la web Añade informacion sobre el documento, para ello hace uso de diferentes atributos, ver ejemplo: Etiqueta: Función: Atributos: Texto: <b> <i> <u> <del> <Blink> <marquee> <sup> <sub> <small> <big> <code> <pre> Texto en negrita Texto en cursiva o italica Texto en subrallado Texto tachado Texto parpadeante A. comunes A. comunes A. comunes A. comunes A. comunes A. comunes width height behavior Texto en movimiento bgcolor direction scrollamount scrolldelay Texto en sup-índice A. comunes Texto en sub-índice A. comunes Muestra el texto en letra pequeña. A. comunes Muestra el texto en letra grande. A. comunes Representa texto de computadora A. comunes Muestra el texto tal y como lo hemos escrito, respetando todos los A. comunes espacios y tabulaciones. Parrafos y titulos: <p> <br> Trabajo Práctico nº1 Permite definir párrafos que se A. comunes separaran entre si con un pequeño espacio. Fuerza un quiebre de línea permitiendo partir un párrafo o línea de texto por la mitad y que continúe en la parte de abajo. También se puede usar para insertar líneas de espacio. ¡Esta etiqueta no tiene etiqueta de cierre! -7- <blockquote> <font> <h1> <h2> <h3> <h4> <h5> <h6> Sirve para citar párrafos, el texto que se encuentre en su interior aparecerá desplazado ligeramente a la derecha y tendrá unos ligeros márgenes de espacio en su parte superior e inferior. Esta etiqueta con la ayuda de varios atributos nos permite cambiar el estilo del texto, ver ejemplo: La etiqueta h más un número del 1 al 6, nos permite introducir un titulo en la pagina, siendo 1 el tamaño más grande/importante y 6 el más pequeño o con menor importancia. Además de cambiar el tamaño del texto también cambia el espaciado proporcionalmente. A. comunes A. comunes face size color A. comunes align Enlaces e imagenes: <a> <img> <a> <img> Código <map> Código <area> Trabajo Práctico nº1 Esta etiqueta más sus correspondientes atributos nos permite crear hipervínculos a nuestra propia página a modo de índice, a subpáginas, a páginas externas, etc. A. comunes href target shape coords Permite insertar imágenes, el enlace lo introduciremos con el atributo src A. comunes src usemap width height La combinación de las etiquetas <a> y <img> permite que una imagen sea el propio enlace, para ello sólo hay que colocar el código correspondiente a la imagen entre las etiquetas <a> y </a> Esta etiqueta permite hacer divisiones en una imagen y que al hacer clic en cada división te abra una página diferente, ver ejemplo y A. comunes código: Para su funcionamiento hay que usar la etiqueta <area> en su interior. (+info) A. comunes Permite diferenciar zonas de una href imagen. target -8rel shape coords Listas: <ul> <ol> <li> <dl> <dt> <dd> Esta etiqueta inicia una lista con símbolos, en su interior se encuentra la etiqueta <li> Permite introducir una lista ordenada por números, usa también la etiqueta <li> para definir las líneas de la lista. La etiqueta <li> añade una línea a la lista, deberemos de usar tantas etiquetas de apertura y cierre como puntos en la lista queramos poner. Sirve para iniciar una lista de definición. En su interior se usan las etiquetas <dt> y <dd> Nos permite poner el titulo o palabra a definir. Añade la definición de la palabra anterior. A. comunes A. comunes A. comunes type value A. comunes A. comunes A. comunes Tablas: <table> Código <tr> <td> <caption> Trabajo Práctico nº1 Esta etiqueta inicia una tabla, dentro deberemos de usar las etiquetas <tr> y <td> Introduce una fila en la tabla, dentro deberemos de usar la etiqueta <td> por cada celda que queramos dibujar. Esta etiqueta va dentro de <tr>, y deberemos de colocar tantas como columnas queramos mostrar, el primer <td> hará referencia a la primera celda de la fila, el segundo <td>, a la segunda celda de la fila, y así sucesivamente. Ver código de ejemplo. Permite introducir un titulo o texto sobre la tabla, esta etiqueta esta dentro de las etiquetas table de apertura y cierre. A. comunes border cellspacing width A. comunes A. comunes align valign width rowspan colspan bgcolor A. comunes align -9- Frames: Permite dividir la página en varias partes, de forma que en cada una se cargue un html distinto, esto nos puede servir para poner un titulo en la parte superior y un menú a un lado, después el contenido se mostrara en el centro. <frameset> Código <frame> <noframes> Trabajo Práctico nº1 La etiqueta <frameset> hace una división, esta etiqueta siempre ha de contener el atributo rows o cols para indicarle si ha de hacer la división en horizontal o vertical, además deberán de tener un valor que variara según el número de A. comunes divisiones, este valor puede ser un rows número de pixeles, un porcentaje o cols un asterisco (*) para indicarle que use el resto de pantalla, estos valores irán separados por una coma y cada uno de ellos hará referencia a una división en concreto, el valor que se encuentre primero será el que hará referencia a la primera división, el segundo valor con la segunda división, y sucesivamente. En su interior se encuentra la etiqueta <frame>, que es la encargada de mostrar el contenido en cada división. Se encuentra en el interior de <frameset> y sirve para cargar el contenido en las diferentes divisiones. Tendremos que usar tantos <frames> como divisiones tengamos, además, si lo necesitamos podemos hacer más divisiones dentro del <frameset> principal, de forma que la primera división se dividirá de nuevo. Esta etiqueta no tiene etiqueta de cierre Si el navegador de internet usado en el ordenador o móvil no supiera mostrar contenidos con <frameset> podremos usar esta A. comunes src noresize scrolling frameborder marginwidth marginheight - 10 etiqueta para, en esos casos, ofrecer un contenido alternativo para mostrar. Esta etiqueta nos permite crear un frame (marco/ventana) en la que podremos cargar el contenido de un html. Es parecido al <frameset> pero en este caso el frame se muestra con el resto de la web. <iframe> Etiqueta: <!-- --> A. comunes src scrolling frameborder width height marginwidth marginheight Función: Atributos: Permite insertar comentarios ocultos. En ocasiones no se pueden introducir comentarios dentro de algunas etiquetas o estas no hacen su función correctamente, por ejemplo esto sucede con la etiqueta <script> Dibuja una línea o regla color horizontal, no tiene etiqueta de cierre. Nos permite colocar una imagen como fondo de la página web, se coloca dentro del body. Esta etiqueta aunque esta orientada A. comunes para formularios nos puede ser útil para mostrar el contenido que queramos con un ligero borde alrededor. El contenido del enlace permite cambiar los colores de la barra de scroll, no en todos los navegadores funciona. Se coloca dentro de head. <hr> Background <fieldset> Código Atributo: Función: Atributos comunes: Id Title Class Style Trabajo Práctico nº1 Permite dar un nombre unico a cada elemento para poder hacer referencia a él. Permite agregar una pequeña descripción para que al pasar el ratón por encima se muestre. Asigna un nombre de clase. Define un estilo visual para el elemento. - 11 - Atributos específicos: Atributo: Align Behavior Bicolor Border Cellspacing Color Cols Colspan Coords Direction Face Frameborder Height Href Marginheight Marginwidth Noresize Rel Rows Rowspan Scrollamount Scrolldelay scrolling Trabajo Práctico nº1 Función: Permite alinear el texto a la izquierda, centro o derecha Permite definir que efecto de movimiento ha de tener el texto. Permite cambiar el color del fondo, podemos usar el nombre en ingles o el código hexadecimal correspondiente. Permite elegir el grosor del borde, 0 seria sin borde. Define el espacio entre celdas Permite cambiar el color del texto o de <hr> Hace la división del <frameset> en columnas. Indica el número de columnas que ocupará la celda. Son un grupo de valores que determinan las coordenadas de un objeto, se usa en los mapas de imágenes. Sirve para definir la dirección del movimiento Permite cambiar el tipo de letra que se usara. Permite elegir el grosor del borde, 0 seria sin borde. Indica la altura del elemento. En el introduciremos el enlace a una página web o a una zona de nuestra página haciendo referencia con el id. Define el margen vertical que queramos que haya dentro del frame. Define el margen horizontal que queramos que haya dentro del frame. Hace que el visitante no pueda cambiar el tamaño de las divisiones a través del ratón. Describe la relación que existe entre el documento actual y el recurso de destino. Hace la división del <frameset> en filas. Indica el número de filas que ocupará la celda. Especifica la cantidad de pixeles que queramos que se desplace el texto en cada movimiento. Especifica la velocidad a la que queramos que se desplace el texto, mientras menor sea el número más rapido ira. Especifica si queremos que aparezcan las barras - 12 - Shape Size Src Target Type Usemap Valign Value Width Caracter: espacio < > & © ª « » µ º € ☺ ☻ ● ☏ ← ↑ → ↓ ↖ ↗ ↘ ↙ Codigo: < > & © ª « » µ º € ☺ ☻ ● ☏ ← ↑ → ↓ ↖ ↗ ↘ ↙ Trabajo Práctico nº1 de scroll, podemos elegir tres valores. Especifica la forma de la figura a delimitar para la etiqueta <area>. Permite cambiar el tamaño del texto Define la ruta en la que se encuentre el elemento Especifica en que zona de la pantalla se ha de abrir el enlace, si no lo ponemos por defecto se abrirá a pantalla completa, si lo usamos podemos elegir en un determinado frame o en una ventana nueva. Indica el símbolo a mostrar Especifica el mapa de imagen al cual este elemento esta relacionado. Especifica la alineación vertical. Indica el número por el que ha de empezar a numerar. Indica la anchura del elemento. Nombre: Black Green Silver Lime Gray Olive White Yellow Maroon Navy Red Blue Purple Teal Fuchsia Aqua Orange Codigo: #000000 #008000 #C0C0C0 #00FF00 #808080 #808000 #FFFFFF #FFFF00 #800000 #000080 #FF0000 #0000FF #800080 #008080 #FF00FF #00FFF #FFA500 - 13 - Tema página Web: Revelación de mitos. Trabajo Práctico nº1
