DISEO DE PAGINAS WEB EN ACTIWEB

WWW.ACTIWEB.ES

MENU

Ayuda

Colores y Estilos

Imgenes

Cdigo HTML

Archivos

Edicin de PginasCabecera, Pi y Mens Publicar y Ver

Configuraciones

Desconectar

Para ir a cada tema presionar Control + Clic sobre la imagen

ORDEN DEL PROGRAMA

1.-SESION A) DEFINICIN DE PGINA WEB, REGISTRO. B) EDICIN DE PAGINAS, PUBLICAR Y VER, DESCONECTAR.

2.-SESION C) CABECERA PIE Y MEN D) ENVI Y TRANSFORMACIN DE 3.- SESIN E) COLORES Y ESTILOS F) ENVI DE ARCHIVOS .PDF 4.- SESIN G) CDIGOS HTML.

IMGENES

H) RECURSOS WEB
5.- SESIN

Y APLICACIONES TILES DE OTROS SITIOS

I) UTILIZACIN DE PLANTILLAS. J) UTILIZACIN DE QUIZ PARA EVALUACIN EN LNEA

PAGINAS WEB Una pgina web, tambin conocida como pgina de Internet, es un documento adaptado para la Web y que normalmente forma parte de un sitio web. Su principal caracterstica son los hiperenlaces a otras pginas, siendo esto el fundamento de la Web.

Una pgina web est compuesta:

Informacin. (slo texto o multimedia) Hiperenlaces. Datos de Estilo (Especificar cmo debe visualizarse) Aplicaciones. (Programas que lo hace interactivo).

TIPO DE PGINAS

a) Pginas Web Estticas El contenido de la pgina puede ser predeterminado b) Pginas Web Dinmicas La informacin se Genera al momento de visualizarla o solicitarla a un servidor web.

MTODOS PARA CREAR PGINAS

a) Lenguajes de programacin

HTML JAVA ASP.NET Perl PHP JavaScript,

( Lenguaje de marcacin de Hipertexto) ( Desarrollado por Sun Microsystems ) ( Pgina de servidor activo) (Lenguaje Prctico para la Extraccin e Informe) (Hypertext Pre-processor)

b) Aplicaciones para el desarrollo de pginas Web

Dreamweaver FrontPage Mozilla Composer NVU

c) Editores en lnea Wanadoo Tripod Miarroba Actiweb

1.- PAGINAS WEB

Una pgina web, tambin conocida como pgina de Internet, es un documento adaptado para la Web y que normalmente forma parte de un sitio web. Su principal caracterstica son los hiperenlaces a otras pginas, siendo esto el fundamento de la Web. Una pgina web est compuesta principalmente por informacin (slo texto o multimedia) e hiperenlaces; adems puede contener o asociar datos de estilo para especificar cmo debe visualizarse, o aplicaciones embebidas para hacerla interactiva. Las pginas web son escritas en un lenguaje de marcado que provea la capacidad de insertar hiperenlaces, generalmente HTML. El contenido de la pgina puede ser predeterminado ("pgina web esttica") o generado al momento de visualizarla o solicitarla a un servidor web ("pgina web dinmica"). Las pginas dinmicas que se generan al momento de la visualizacin se hacen a travs de lenguajes interpretados, generalmente JavaScript, y la aplicacin encargada de visualizar el contenido es la que debe generarlo. La pginas dinmicas que se generan al ser solicitadas son creadas por una aplicacin en el servidor web que alberga las mismas.

DEFINICION DE ACTIWEB
Es un servicio de creacin de sitios web gratuito, orientado para pequeas empresas, negocios y profesionales. De este modo se garantiza la presencia en Internet a este tipo de empresas y sectores. A su vez Actiweb revisa y publica las pginas que han sido aprobadas para que sean indexadas por los buscadores y las promociona si su contenido lo merece.

Registro de en la Pagina Web

1.- Entrar a la pagina www.actiweb.es 2.- Poner el nombre de la pagina www.actiweb.es/ Nombre 3.- llenar datos como nombre de la empresa, categoria, pais, descripcin, y correo.

2.- EDICIN, CREACIN DE PGINAS Y ENVI DE CONTENIDOS

El men de edicin dispone de varias opciones, podr editar la pgina principal (ndex) o crear nuevas pginas. Para ello deber definir varios parmetros y entenderlos antes de empezar:

1-Nombre de la pgina Es el nombre del archivo, no debe contener espacios ni caracteres especiales. No debe repetir los nombres de las pginas. 2-Ttulo Es el texto que aparecer en la barra del explorador, tambin aparecer en los favoritos de los usuarios que hayan navegado en su pgina. No debe repetir los ttulos de las pginas. 3-Descripcin de la pgina Resumen del contenido de la pgina. Consiste de un texto corto que explica ms extensamente cual es el contenido de la pgina. Es tomada en cuenta por los motores de bsqueda e incluso favorecen la indexacin siempre y cuando est relacionado con el contenido. Debe contener unos 100 caracteres. 4-Palabras clave Son las palabras (keywords) separadas por comas. No son visibles por un visitante normal pero si son tomadas en cuenta por los buscadores. Una vez definidos stos parmetros podemos editar la pgina con el editor

Opcin Editar del Editor de Pagina

Esta opcin del editor de pgina ser el lugar en el cual se podr crear y modificar el contenido de nuestra pagina Web, es decir, podremos introducir texto, imgenes, videos, as como tambin cdigo HTML, adems de poder modificar el formato de dichos elementos. Para acceder a esta funcin ser necesario dar clic en el icono de edicin de pgina del men principal de Actiweb e inmediatamente despus se desplegara una nueva pagina de donde elegiremos la opcin editar (Ver figura de men de paginas).

Una vez elegida dicha opcin actiweb nos proporcionara la pgina del editor en la cual podremos iniciar a trabajar en el diseo del contenido de nuestra pgina, pudiendo utilizar las opciones para dar formato que se explicaran mas adelante en este documento.

Es importante sealar que una vez que terminemos de ingresar la informacin de nuestra pgina Web debemos dar clic en el botn de ENVIAR del men del editor para que los cambios sean guardados en servidor de Actiweb.

Veamos algunas de las opciones del Editor

Estilo: Permite seleccionar el tipo de texto que se est escribiendo. Normalmente es un prrafo pero puede utilizar distintos tamaos de encabezados. Fuente: Selecciona una fuente diferente a la que se emplea habitualmente. Puede seleccionar un texto y aplicar una fuente diferente. Tamao: Define el tamao de la fuente que se emplea. Tambin se puede aplicar el tamao a un texto seleccionado. Enviar: Enva el documento y guarda los cambios.

Salir sin guardar: Se sale del documento y no se guardan los cambios. Negrita: Aplica negrita a la fuente seleccionada. Cursiva: Aplica cursiva a la fuente seleccionada. Subrayado: Aplica subrayado a la fuente seleccionada. Alinear a la izquierda: Alinea el texto a la izquierda del contenedor. Centrado: Centra el texto imagen o objeto en el centro del contenedor. Alinear a la derecha: Alinea el texto a la derecha del contenedor. Justificado: El texto se alinea en ambos lados. Lnea horizontal: Inserta una lnea para separar prrafos diferentes.

Lista numerada: Crea una lista ordenada numricamente Lista: Crea una lista sin nmeros. Tabulado: Inserta un prrafo tabulado. Color del texto: Cambia el color del texto seleccionado.

Color de fondo: Cambia el color del fondo del texto o el contenedor seleccionado. Eliminar formato: Elimina el color o el formato de un texto. Insertar enlace: Crea un enlace a otra pgina web con el texto o imagen seleccionada. Insertar tabla: Inserta una tabla para distribuir el contenido de forma organizada en la pgina puede leer ms informacin en Uso de tablas Insertar Imagen: Inserta una imagen procedente de otra URL o de la lista de imgenes enviadas. Es posible alinearla en el texto. Insertar HTML: Inserta un cdigo HTML de la lista de cdigos enviados en la posicin del cursor. *Solo en el pie de pgina Insertar Email*: Inserta una direccin de correo electrnico. Insertar contador*: Inserta el contador de visitas en la posicin del cursor

10

3.- PUBLICAR Y VER PGINAS

Una vez realizadas todas las modificaciones ya podemos publicar nuestra pgina. Al publicarla podr ser visible desde cualquier equipo en la direccin http://panel3.actiweb.es/xxx donde xxx sera el nombre de usuario que se tiene asignado. La pgina inicial siempre es el ndex, y el resto de pginas sern tambin publicadas con sus respectivos nombres. Para visualizar ejemplo: http://panel3.actiweb.es/mcsolano Podr acceder a la pgina que desee directamente pulsando su enlace o en index.html y una vez dentro de la pgina podr tambin ir directamente a la funcin de edicin pulsando sobre la imagen de abajo.

Solamente usted podr modificarla y el resto de usuarios que vean la pgina y pulsen sobre la imagen sern redireccionados a nuestra pgina principal.

11

4.- MODIFICACIN DE LA CABECERA, Y MENS

PI

En ste men podremos configurar 3 partes fundamentales en la pgina y se repiten en todas ellas. Vamos a definir su significado y cmo podemos editarlas.

1- Cabecera de la pgina Es la parte superior y normalmente incluye el logo, el ttulo, en algunos casos muestra datos de contacto. Tambin puede consistir en una imagen grande del tamao ancho de su pgina. Es recomendable que no sea muy alta ya que restara importancia al contenido. 2- Mens de navegacin Los mens de navegacin est compuesto por varios enlaces de dirigen al usuario a diferentes pginas del sitio. Pueden ser de varios tipos. Vertical o horizontal. El men vertical se suele colocar a la izquierda de la pgina y ocupa ms espacio. Tambin puede colocar una imagen para rellenar. El men horizontal suele ir debajo de la cabecera y ocupa mucho menos espacio. Cada sitio requiere un tipo de men u otro en funcin a los colores y al contenido. Puede cambiarlo tantas veces como quiera y recuerde que puede cambiar los colores en la seccin de colores y estilos. 3- Pi de la pgina Es la parte inferior de la pgina y normalmente incluye algn enlace a otra pgina, el copyright, en algunos casos muestra datos de contacto y

12

un contador de visitas. Tambin se recomienda por esttica que no sea muy alto.

5.- ENVI Y TRANSFORMACIN DE IMGENES

Aqu es donde enviaremos todas las imgenes de nuestro sitio. Para enviar una imagen nueva debe pulsar sobre el enlace Enviar nueva imagen. Puede enviar imgenes en formato BMP, GIF, JPG o PNG con tamaos inferiores a 1 Mega. Si dispone de imgenes de mayor tamao deber comprimirlas antes de enviarlas con cualquier aplicacin para editar imgenes. Tambin puede enviar imgenes animadas en formato GIF. Antes del envo deber seleccionar una imagen de su disco duro para enviarla al servidor. Si lo desea podr ver las imgenes pulsando sobre el icono Ver Vistas en miniatura tal y como vemos en el ejemplo siguiente despus de pulsar Examinar. Ser necesario definir un texto alternativo que dar informacin sobre el contenido de la imagen. Finalmente podr seleccionar su tamao para no tener que redimensionar despus y la carga de su pgina sea ms rpida. Dispone de varios tamaos 100,200,300,400,500,600 y original. Si enva imgenes en tamao original asegrese que caben perfectamente dentro del contenido. Una vez haya rellenado todos los campos pulse sobre el botn Enviar. En algunos casos suele tardar unos minutos en funcin al tamao pero una vez enviada estar disponible para poderla utilizar. Si obtiene un error o el tiempo de envo es muy largo deber comprimirla en su ordenador antes de ser enviada. Ms adelante podr corregir solamente el texto alternativo o podr eliminar las imgenes que no utilice.

13

14

6.-DICION DE COLORES, ESTILOS Y CONTADOR DE VISITA

Esta opcin le permitir actualizar los estilos y los colores generales de su pgina de forma separada. La pgina est compuesta por varias partes y tendr una vista previa orientativa de cmo queda. Para modificar cualquier color debe pulsar en el botn que aparece junto a el para ver una paleta con los colores disponibles. Tambin puede escribir el color en la caja de texto en formato hexadecimal. Los tipos de letra tambin pueden ser modificados en fuente y tamao.

La pgina est compuesta por varias partes que detallamos a continuacin. 1- Fondo de la pgina Es posible establecer su color, anchura del contenido 750 o 900 Pixeles, establecer el fondo con una imagen y definir el tipo de esquinas que enmarcarn despus el contenido. 2- Cabecera Es la parte superior y es comn para todas las pginas. Generalmente est compuesta por el nombre de la pgina o empresa, logotipo y otros elementos que se repiten en todas ellas. Normalmente se suministra poca informacin pero es ms algo decorativo. 3- Mens Los mens son unos enlaces que dirigen a todas las pginas del sitio. Puede modificarlos de forma que sean fcilmente visibles y contrasten

15

perfectamente con el resto del contenido para que el usuario pueda encontrar fcilmente lo que busca.

4- Contenido El contenido es la parte ms importante de la pgina, en el se redacta la informacin de cada una de ellas y se incluyen imgenes, textos y otros objetos. Los colores deben adaptarse a su pgina y debe ser fcil de leer. 6- Pi de pgina Es la parte inferior de la pgina y comn para todas ellas. En l normalmente se incluyen datos de contacto y el contador de visitas. Debe ser tambin fcilmente accesible. 7- Contador de visitas Puede seleccionar el estilo del contador de vistas segn el tema de su pgina, le permitir llevar un conteo del nmero de personas que han entrado a su pgina.

7.- ENVIO DE

ARCHIVOS .PDF

Los archivos PDF son documentos en formato porttil. Pueden ser ledos fcilmente y son tambin fciles de imprimir. Pueden utilizarse para enviar tarifas de precios, libros electrnicos y otros documentos. Pueden generarse con aplicaciones que emulan una impresora e imprimen el contenido en un documento. Aqu es donde enviaremos todos los archivos PDF de nuestro sitio. Para enviar un nuevo archivo debe pulsar sobre el enlace Enviar nuevo documento PDF. Debe enviar documentos con tamaos inferiores a 1 Mega. Antes del envo deber seleccionar una documento de su disco duro para enviarlo al servidor con el botn Examinar. Y seguidamente Enviar. El archivo estar en la lista de los documentos disponibles. Ms adelante deber insertar un enlace en el editor de textos de la pgina para poder acceder al documento.
16

8.- CODIGOS HTML, MUSICA, VIDEOS Y OBJETOS PARA INSERTAR

sta es una de las opciones ms interesantes. Con ella podremos insertar fragmentos de cdigo procedentes de otras pginas que aaden todava mucha ms funcionalidad. Estos fragmentos deberemos definirlos antes para poder disponer de ellos de forma rpida cuando sea necesario. En sta seccin podr ver un ejemplo para definir un Video de Youtube Msica de Goear y un Mapa de Google. Tambin es posible insertar cdigos procedentes de otros sitios y el funcionamiento es bsicamente el mismo. Ejemplo de insercin de un video de youtube Pulsar sobre el enlace de Enviar nuevo cdigo en el men HTML. Deber navegar dentro de la pgina de Youtube y encontrar el video que desea insertar y seleccionar la casilla donde pone Insertar. A continuacin deber copiar el texto pulsando Control+C y pegarlo en la casilla de cdigo pulsando Control+V. Tambin es posible mediante el men editar de su explorador en la parte superior.

17

Una vez pegado el cdigo deber definir una descripcin para poder identificarlo fcilmente.

Al final pulse sobre el botn Enviar HTML y aparecer en la lista de cdigos para poder utilizarlo ms adelante. Si lo desea puede ver el resultado del cdigo concreto con el enlace Ver o puede eliminarlo si no lo necesita con el enlace Borrar.

Ejemplo de insercin de una cancin de Goear

http://www.goear.com/ Pulsar sobre el enlace de Enviar nuevo cdigo en el men HTML. Deber navegar dentro de la pgina de Goear y encontrar la cancin que desea insertar y seleccionar la casilla donde pone This song in your site. A continuacin deber copiar el texto pulsando Control+C y pegarlo en la casilla de cdigo pulsando Control+V. Tambin es posible mediante el men editar de su explorador en la parte superior.

18

Una vez pegado el cdigo deber definir una descripcin para poder identificarlo fcilmente.

Al final pulse sobre el botn Enviar HTML y aparecer en la lista de cdigos para poder utilizarlo ms adelante. Si lo desea puede ver el resultado del cdigo concreto con el enlace Ver o puede eliminarlo si no lo necesita con el enlace Borrar.

Codigo para la Hora

<script src="http://h1.flashvortex.com/display.php? id=3_1265853734_45484_252_0_177_71_8_5" type="text/javascript"></script>

Cdigo para video

<object width="500" height="405"><param name="movie" value="http://www.youtubenocookie.com/v/yqK-7fcJ11k&hl=es_MX&fs=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/yqK-7fcJ11k&hl=es_MX&fs=1&border=1" type="application/xshockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="405"></embed></object>

Codigo para musica

<object width="353" height="132"><embed src="http://www.goear.com/files/external.swf?file=fc1abf0" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="353" height="132"></embed></object>

19

9.-OPCIONES DE SEGURIDAD

sta opcin permite realizar cambios sobre su cuenta, realizar copias de seguridad de los datos y cambiar el tamao del editor de texto. Copias de seguridad Crea un archivo que debe descargar a su PC para utilizarlo en caso de perder algn dato. Se podr restaurar envindolo de nuevo. Tamao del editor Establece un tamao para que el editor se ajuste a su pantalla al editar las pginas. Datos de la cuenta Tiene la posibilidad de cambiar la direccin de correo de su cuenta. Es muy importante tenerlo actualizado ya que nos permite recibir la contrasea en caso de no recordarla. Para poder cambiarlo deber escribir la contrasea por motivos de seguridad. Tambin es posible cambiar la contrasea, es recomendable cambiarla peridicamente e intente que no sea fcil de descubrir.

20

10.- RECURSOS Y APLICACIONES TILES DE OTROS SITIOS WEB

Esta es una lista de sitios que no tienen relacin con Actiweb, pero nos pueden ayudar a ampliar y dar mas funcionalidad a nuestras pginas. Registro de dominios .com .es. .org etc...

http://sered.net
Texturas ( deben descargarse a su pc y enviarlas )

http://www.allfreebackgrounds.com/
http://www.grsites.com/textures/
*Situarse sobre la imagen y con el botn derecho del ratn "guardar como" Al enviarla debe ser en formato Original.

Cdigos HTML funcionales para pegar Sonido y msica

http://www.goear.com/
Videos

http://www.youtube.com/ http://www.vimeo.com/
Mapas

http://maps.google.com/
Alojamiento de imagenes

http://imageshack.us/ http://tinypic.com/
Galerias de imagenes

http://www.slide.com/ http://www.picturetrail.com/
Presentaciones PPS

http://www.slideshare.net/
Optimizar imagenes (reducir su tamao)

21

http://www.imageoptimizer.net/ http://freshpixels.net
Archivos PDF (alojar y compartir documentos online)

http://www.scribd.com/
Salas de chat

http://xat.com/ http://www.spinchat.com/
Chat (servicio tcnico)

http://www.meebome.com/
Formularios

http://spanish.jotform.com/
Disponiblidad para hoteles y alojamientos

http://www.avaibook.com
Estadisticas de visitas

http://www.statcounter.com/
Creacin de logotipos

http://cooltext.com
Mens, banners y elementos flash

http://www.flashvortex.com/
Libros de visitas

http://www.tagboardgratis.com/ http://www.smartgb.com/ http://cbox.ws/

22

11.- TEMPLATES, ESTILOS Y CONTADOR DE VISITAS.

Antes de nada, para poder utilizar los templates o temas profesionales debe haber seleccionado en el men opciones Utilizar templates profesionales.

A partir de este momento dispondremos de un men diferente en colores y estilos. Tal y como vemos a continuacin.

1-Seleccionar plantilla
Nos muestra una lista de plantillas compatibles. Al seleccionar una plantilla, todos los parmetros de colores, estilos tomarn como referencia los datos de esa plantilla.

23

2- Editar plantilla
Esta opcin nos permitir editar y personalizar la plantilla hasta el mas mnimo detalle. Tal y como vemos a continuacin cada zona se muestra con un contorno rojo al pasar el ratn sobre ella. Al hacer click nos muestra una ventana con todos los parmetros disponibles.

Arriba a la izquierda tenemos dos iconos, para acceso rpido a todas las acciones o elementos que no estn disponibles y tambin para salir.

3- Editar cabecera
Una vez tenemos la plantilla a nuestro gusto deberemos editar el ttulo y el subttulo en la seccin de cabecera, pi y mens. ( Los usuarios de la versin 3 debern editarla de nuevo y no estar disponible la cabecera antigua por problemas de compatiblidad)

4- Editar el men Antes de nada deberemos tener varias pginas. Debe crearlas y editarlas en edicin de pginas. Tendremos disponible el men superior y el lateral. Si no hay datos los mens no aparecern en la pgina. Los marcadores sociales permiten compartir nuestra pgina en las redes sociales mas importantes. El cdigo html activar una area de widgets, donde podremos colocar componentes comunes para todas

24

las pginas.

25

26