ideas para pagina web Abel

Contenidos para nuestra página web:

Abel = página de fans de Jorge Lorenzo

-Biografía (desde pequeño hasta que empieza a competir)
-Palmarés (desde q comenzó a competir, qué ha logrado.... estadisticas deportivas, etc)
-Multimedia (fotos por un lado, videos por otro)
-Entrevistas (en TV, radio..... podcast ; ivoox)
-Enlaces para foro y blog

Recordar que si cogeis informacion de otras paginas web, hay que añadir al final de ese articulo, la palabra "fuente: " y la página web original.

ideas para para Ale Jiménez

Contenidos para nuestra página web:

-recomendamos usar marcos, para no tener que ir "copiando y pegando" el código del menú en TODAS LAS PÁGINAS

-conocemos las capas (div Pa) , menú de salto (para elegir de una lista lo que nos interesa ver) , sabemos como insertar videos de youtube y google maps

-podemos añadir música ("media") o SWF


En función del contenido de mi página web, puedo incluir los siguientes apartados:

Página de artes (bellas artes): pintura, escultura, arquitectura , compositores clásicos......

¿Qué puedo poner que sea interesante?

-Crearemos galerías de fotografías en base a:

-estilo (medieval, renacentista, moderno....)
-artista (sus obras y al "picar" encima de una obra, podemos ir a otra página donde nos expliquen más cosas de ese cuadro o artista)

menú izquierdo: "artistas" y "cuadros famosos"
No olvidemos un apartado de "museos famosos"

Al picar en artistas me muestra una pagina con sus obras mas conocidas y una biografia de ellos

Pasos esenciales para empezar a trabajar en DW CS5

A la hora de "colocar" (subir al servidor web) tus archivos , recuerda que:
 -fotos y ficheros HTML, DEBEN estar juntos
-si cambias la carpeta de trabajo, debes tener cuidado con los enlaces



Hay 2 tipos de enlaces: absolutos y relativos

-Absolutos: algo concreto (p.ej: www.marca.es) o bien un archivo del escritorio

-relativos:  ../hinchas.html  (dentro del menú lateral, puedo ir a ese apartado concreto)

Ahora bien, una vez que entres en hinchas, puedes ver varias opciones para elegir, de forma que tengamos celtarras.html , celestes.html ....

Lo primero, es plantear el sitio web (cuántos apartados necesito):

PRIMERO, hacer un "mapa" (es decir, saber qué necesito):

-página de bienvenida: si usáis marcos, ese marco "general", se llamará INDEX (sólo contiene una división en 2 partes de la pantalla, luego se cargan por separado el menú y lo que vaya apareciendo por la derecha)

¿cómo lo hago? primero, archivo_nuevo html. Con ese documento en blanco, puedo insertar mi primer "marco". Por eso voy a "insertar" , "html", marcos y elijo uno, p.ej: "izquierda"

Ahora la pantalla se divide en 2 partes. Una pequeña a la izquierda y otra, más grande (mainFrame).

En la parte izquierda pondré mi menú. Puedo ir creándolo, poco a poco. En la parte derecha, debería poner información adicional (que amplía lo que ya tengo en el menú) o bien un resumen de lo que podrá ver la gente, junto un pequeño mensaje de bienvenida.

Ahora debería guardar la página. En el lado izquierdo, aún no tiene nombre (pone "Untitled"). Tengo que ir a "Archivo_Guardar marco como" y le pongo el nombre deseado (menu).
No hay tildes, ni espacios, ni eñes (tampoco pongo .html)

Lo siguiente, será guardar el marco principal (el de la derecha), al que llamo "principal", siguiendo el paso anterior.

Por último, debo guardar el marco "entero" , por lo que hago clic en el marco externo o en la división entre marcos. Este marco "entero", debo llamarlo index  (en latín: índice), porque es el único archivo que cargará el servidor cuando alguien visite mi página web.

Tengo toda la estructura básica planteada. Ahora debo completar mi página web:

primero, en el menú, puedo ir situando, uno tras otro, todos los apartados que necesito tener (historia , que ver, donde comer, como llegar....). Esto, para sitios turísticos.

Si es una empresa, tendremos el típico: quienes somos, que ofrecemos, donde estamos, contacto...... ofertas.......

Todo esto me sirve de "guión". Ahora tengo que ir creando archivos separados con los nombres correspondientes, p.ej:

"quienes somos" (en el menú izq) , me llevará a quien_soy.html

"donde estamos", me podría llevar a la pag.web "situacion.html"

Cada fichero html, lo voy creando directamente en "archivo" , nuevo html. Veré que aparece en la barra superior. Puedo crear todo de un "plumazo"y luego "guardar todo", pero no tendré la seguridad de que está guardando en orden los ficheros.

Como guardar y publicar es "un coñazo", deberé asegurarme de que en la opción de Administrar Sitios, tiene marcada la casilla de "guardar y actualizar automáticamente".


Otros elementos que ya conocemos serían:

insertar _ imagen (para poner fotos)

insertar _ media (para insertar sonidos, archivos SWF o videos que ya tengamos, aunque es mejor cogerlos desde youtube).

Si quiero un video de youtube, lo busco. Justo debajo, aparece el botón "Compartir" (lo pulso). Ahora, verás una dirección web (paso de ella) y debajo, el botón "insertar".

Al darle, nos mostrará el código para ver videos de youtube directamente en mi página. P.ej:

<iframe width="420" height="315" src="http://www.youtube.com/embed/ZFVfB4Tnf-M" frameborder="0" allowfullscreen></iframe>

(recordad que la palabra width es "anchira" y "height" es la altura, podemos cambiarlo a nuestro antojo)

insertar tabla (útil para poner una foto y que esa foto sea más grande si la pantalla es grande y más pequeña si la pantalla es de un teléfono , tablet, smartphone, etc)

insertar _ objeto de diseño _ div pa (las "capas")

insertar _ formulario _ menú de salto (para poner opciones en una lista desplegable, al elegir una, nos llevará al enlace que hayamos asociado a cada palabra o frase)

Banners gratuitos, fondos y plantillas

Plantillas web curiosas, descarga el zip y busca dentro el fichero HTML (que podremos modificar en DW):

http://www.flasheezy.com/


Otras plantillas que no están mal:

http://www.flashtemplatesdesign.com/free_templates/free_wordpress_themes.php

http://www.freeflashtemplates.com/




Oye, que también podemos buscar plantillas "hechas" en Powerpoint y guardarlas como HTML, para llevarlas luego a Dreamweaver!!

http://www.sameshow.com/download/powerpoint-to-flash-ppttemp.html






Puedes probar esto:

http://www.allprofitallfree.com/3d-logo-creator.html


Y otro sitio lleno de contenidos gratuitos (o para coger ideas):

http://www.flashmo.com/


Y uno más:


http://www.freenicetemplates.com/free-flash-animation/



Otra página con cosillas gratis:

http://www.hongkiat.com/blog/30-free-flash-photo-galleries-and-tutorials/



Más plantillas gratuitas para tu web:

http://auroraflash.org/



Más efectos gratis:

http://www.dynamicfactory.com/flash-free-effects.asp



Y si te gusta crear álbumes animados (con fotos que elijas), podrías probar esto:

http://www.flash-slideshow-maker.com/flash_photo_gallery_scroll/album_em_flash_free.php



Si no "te asusta" el inglés y un día te animas a descargar Adobe Flash (no el player, si no el que Adobe te permite probar 30 días):

http://www.entheosweb.com/flash/default.asp#.T6Lufuh1Dit

Como configurar DW para que nuestra web "suba" automáticamente

A continuación, tenéis la configuración que necesitamos poner en DW, una vez que vamos a "Sitios", Administrar sitios y luego, le damos a "nuevo".

Primero, es necesario poner los datos que necesitamos, "tal que así":

Y luego, en el apartado "Servidores", hay que poner los datos correspondientes a tu cuenta. La contraseña, la que ya conocéis :_)

Es importante que copies bien todos los datos y que respetes la ruta original (/htdocs). El nombre del servidor, es el que he elegido, para poder reconocer esa página web, en caso de tener varias con el mismo nombre (xesusvazquez.loquesea.com).

Ahora, atento a vuestros datos:

1
  Username de Cpanel: mb260_10633263
              Password de Cpanel: 
              Su URL: http://iriaalonso.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633263








2
Username de Cpanel: mb260_10633302
              Password de Cpanel: 
              Su URL: http://alexandrardgez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633302




3
   Username de Cpanel: mb260_10633267
              Password de Cpanel: 
              Su URL: http://academiajb.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633267






4
           Username de Cpanel: mb260_10633271
              Password de Cpanel: 
              Su URL: http://cristinaestevez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633271






5
 Username de Cpanel: mb260_10633274
              Password de Cpanel: 
              Su URL: http://abelgonzalez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633274






6
Username de Cpanel: mb260_10633277
              Password de Cpanel: 
              Su URL: http://alejimenez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633277








7
  Username de Cpanel: mb260_10633279
              Password de Cpanel: 
              Su URL: http://tamaramartin.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633279








8
Username de Cpanel: mb260_10633280
              Password de Cpanel: 
              Su URL: http://carmenmillos.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633280








9
  Username de Cpanel: mb260_10633283
              Password de Cpanel: 
              Su URL: http://danielnanez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633283










10
Username de Cpanel: mb260_10633284
              Password de Cpanel: 
              Su URL: http://gabrielosores.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633284








11
 Username de Cpanel: mb260_10633285
              Password de Cpanel: 
              Su URL: http://marianopaz.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633285








12
Username de Cpanel: mb260_10633287
              Password de Cpanel: 
              Su URL: http://cristianpazo.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633287









13
Username de Cpanel: mb260_10633298
              Password de Cpanel: 
              Su URL: http://santiagoperez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633298






14
Username de Cpanel: mb260_10633299
              Password de Cpanel: 
              Su URL: http://diegopgonzalez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633299










Probadlo tranquilamente. Si algo falla, me avisáis.

Animaciones flash Gratuitas , ¿dónde hacerlas?

fuente:  http://www.flashvortex.com/index.php

En esta página, podremos crear una pequeña animación en formato flash (mucho más llamativa que un GIF) y obtener el código necesario, o bien el SWF que insertaremos, como siempre, yendo a:

Insertar _ Media _  SWF

 Recuerda que TODOS los archivos que uses en tu página web, deben estar en la misma carpeta (da igual que tengas una carpeta con las fotos, otras con la música, tienen que pertenecer a la misma, p.ej: mis documentos, y dentro de ahí, tu nombre).

Lo ideal es guardar la página web siempre en un sitio donde tengas controlados todos los archivos. Si Dreamweaver te pone "pegas", copia "manualmente" el archivo a tu carpeta,para evitar errores cuando la subamos a Internet.

 ¡¡¡¡No digas que no te avisé!!!!

Marcos en DW

Para poder dividir nuestra página web en dos "partes" (en una estará siempre el menú y en la otra, el contenido que deseemos), podemos insertar marcos.

Puedes hacerlo yendo a "Insertar", HTML  , Marcos y ahora, fíjate en las opciones disponibles. Ahí podemos encontrar distintas combinaciones de marcos, para que elijamos la que más se ajuste a nuestras necesidades.

Podemos empezar eligiendo el marco "izquierda", para que aparezca sólo en ese lado. Dependiendo de nuestra configuración, puede que aparezca este diálogo, donde podemos cambiar el título de los marcos.

(O sea, que donde pone "título", cambiaríamos "mainframe" por el nombre que deseamos)

Aceptamos. Ahora, comprueba que a la izquierda aparece una división nueva, con una zona en blanco.

En realidad, se ha creado un nuevo documento que contiene 2 marcos, el izquierdo y el que se conoce como principal (main), que contiene la página que estaba abierta (o sea, la "principal", la de la derecha).

En la parte inferior, a la derecha, tenemos un "mapa" , con los 2 marcos que estamos usando ahora. Puedes cambiar de una a otra, pulsando en la zona deseada.

Ahora, comprueba que en la parte inferior y a la izquierda, podemos cambiar las propiedades del borde del marco seleccionado (que forma parte de algo llamado "frameset", conjunto de marcos).

En general, cuando un documento se divide en 2 marcos y uno de ellos contiene el menú, es preferible que el tamaño del menú lo dejemos en píxeles (o sea, fijo) y la otra parte será "relativa" (proporcional al tamaño disponible).

Podemos cambiar el tamaño de los marcos (las divisiones, para que nos entendamos), moviendo "manualmente" esos límites, como haríamos con una tabla.

En la parte inferior, ha cambiado el "mapa" , reflejando ese cambio. Compruébalo.

Para establecer otras propiedades diferentes de los marcos, podemos utilizar el panel "Marcos", buscándolo en el menú "ventana" (o pulsando "mayúsc" y F2).

Recuerda que en "origen", podemos especificar "qué archivo debe figurar". Por tanto, a la izquierda, ten listo tu menú. Y a la derecha, la parte "principal", donde figure la información genérica (que luego cambiará, según lo que vayamos eligiendo en el menú de la izquierda).

Justo en esa zona, la opción "Desplaz.", nos sirve para indicar si aparecerán las barras de desplazamiento, cuando no pueda visualizarse completamente.

(vamos, que si quieres que salgan barras de "subir y bajar", aunque la página no las necesite y además, evitas que la persona que vea nuestra página cambie el tamaño del marco)

Si la opción "mismo tamaño" está activada, indica que los usuarios no podrán variar las medidas del marco desde el navegador.

En estas dos casillas (ancho y alto del margen), especificamos la separación que habrá entre el contenido del marco y sus bordes "izquierdo-derecho" y "superior-inferior"). Prueba con diferentes valores y observa el cambio que se ha producido.

En "bordes", como podrás imaginar, elegiremos si aparecerá o no una línea separando cada marco, para poder apreciar mejor el espacio disponible. Puedes elegir entre "predeterminado" (o sea, que decida DW), "sí" o "no" (todo bien clarito).

Si usas la opción de "bordes", podrás elegir también el color. Compruébalo.

Si quieres un tono concreto, busca en google "código color html" y en la primera página que aparezca, puedes elegir otros tonos y copiar ese código alfanumérico (letras y números), directamente en la casilla de "color de borde".

La gran ventaja de trabajar con marcos, es que podemos editar los archivos que veremos en cada marco sin mayor problema (es cómodo, rápido y relativamente sencillo).


Ahora, dentro del menú que hemos situado en la parte izquierda, podemos especificar "dónde" ha de verse esa información (en la parte derecha -marco principal- o en una nueva ventana, por ejemplo).

Como hemos probado en clase, "Destino", es para elegir de qué manera se mostrará esa información. "Mainframe" nos enseñará el contenido de esa otra página web (la que elegimos hace un momento en el menú izquierdo), en la parte derecha de la pantalla. Justo lo que queríamos!

Tenemos que hacer lo mismo con cada enlace (es obvio). Cuando quieras, guarda el proyecto y pulsa "F12", para ir viendo que tal queda antes de subirlo a Internet.

En la ventana "marcos" (o sea, menú "Ventana" y luego "Marcos") , selecciona el contorno externo (para marcar todo el conjunto) y guárdalo con la opción "Archivo - Guardar conjunto de marcos como....". De esa forma, podrás aprovechar tu trabajo para cualquier otra página web que vayas haciendo en el futuro.

Lo habitual es  como vengo recordando últimamente, el poner un nombre "básico" como puede ser index.html  .  Cuando subamos el proyecto de página web que estamos haciendo a Internet, veremos que es la primera página que se cargará siempre que alguien nos visite.

(Recuerda: las fotos y otros elementos, si no están en la misma carpeta de nuestra página web, DW te pedirá que las guardes -basta con aceptar ese proceso, no hay que hacer nada más-)