Está en la página 1de 98

CURSO DE DISEO DE PGINAS WEB

pablomonteserin.com

Objetivo:

Disear nuestra propia pgina web

pablomonteserin.com

Herramientas:

BlueFish GIMP WAMPP Firefox ...

pablomonteserin.com

html vs dreamweaver

Ver enlace

pablomonteserin.com

Pginas estticas

El cliente solicita una pgina que se encuentra en el servidor y el servidor enva al cliente la pgina tal cual la tiene alojada, sin hacerle ninguna modificacin en funcin de la peticin del cliente o de cualquier otro parmetro.

pablomonteserin.com

html es un lenguaje etiquetado

pablomonteserin.com

html no es case sensitive

pablomonteserin.com

html

VS

htm

pablomonteserin.com

Creamos una carpeta de proyecto

pablomonteserin.com

Primera pgina web:


1_holaMundo.html

Hola mundo!

Ver resuelto

pablomonteserin.com

Comentarios:

<!-- bla bla bla -->

Ver resuelto

pablomonteserin.com

URL

Uniform Resource Locator Indica dnde estn las cosas.

pablomonteserin.com

Insertar una imagen

<img src=ruta/imagen.jpg width=100px height=200px>

Nota: em y % son unidades de medida vlidas cuando trabajemos con estilos. Pueden dar problemas cuando los usemos con atributos.

Ver funcionando

pablomonteserin.com

Ejercicio
Inserta una imagen que ocupe la mitad izquierda de la pantalla. Debes utilizar px.

Ver ejercicio funcionando

pablomonteserin.com

Insertamos un hipervnculo

<a href=rutaDelHipervinculo>Enlace</a>

Ver funcionando

pablomonteserin.com

Ejercicio

Crear una enlace que sea una imagen.

Ver ejercicio resuelto

pablomonteserin.com

Estilos de texto
<b>Negrita</b> <i>Cursiva</i> <u>Subrayado</u> <strike>tachado</strike> <tt>Teletype</tt> <br/> <strong>Texto resaltado</strong>
Verlo funcionando

pablomonteserin.com

Ejercicio
Cuando bebas agua recuerda La fuente Resaltado y cursiva. Negrita. Enlace a wikipedia Subrayado. Letra teletype y subrayado.

Ver ejercicio resuelto

pablomonteserin.com

Listas
Suelen usarse para la botonera de enlaces. <p>Lista ordenada:</p> <ol> <li>Primero </li> <li>Segundo </li> </ol> <p>Lista desordenada:</p> <ul> <li>Primero </li> <li>Segundo </li> </ul>
Verlo funcionando

pablomonteserin.com

Ejercicio

Ver ejercicio resuelto

pablomonteserin.com

Tablas
<table border=1px> <tr> <th>Soy la unica celda de esta tabla </th> </tr> </table>

La etiqueta th (h de head), centra el contenido de la celda y lo pone en negrita. Es un atajo para poner encabezados.

Verlo funcionando

pablomonteserin.com

Ejercicio

<th> es una celda que agrega Negrita al texto que tiene adentro. Es til para cabeceras <td> es una celda normal que no modifica tu texto.

Ver ejercicio resuelto

pablomonteserin.com

Ejercicio

Ver ejercicio resuelto

Los siguientes parmetros se aaden a la celda, no a la fila:


colspan=2 : Une dos columnas en una sola. rowspan=2: Une dos filas en una sola pablomonteserin.com

Iframe

Verlo funcionando

El atributo target define dnde se va a cargar la informacin del enlace. En este caso, debe coincidir con el valor del atributo name del iframe. Ojo! El iframe no se cierra en la propia etiqueta (<iframe />) o puede dar problemas. Mirar ejercicio problemaIFrame.html

pablomonteserin.com

frameset
Nota: dreamwaver da problemas con el uso de frameset al tratar de abrir un archivo lo use. Lo mejor ser cerrar el archivo y volverlo a abrir.

Verlo funcionando pablomonteserin.com

Ejercicio

Ver ejercicio resuelto

pablomonteserin.com

Razones por las que no debes utilizar frames: Estn desaconsejados por el W3C. El usuario debe entrar siempre por la pgina principal, donde se encuentra la declaracin de marcos. Si accediese por otra pgina diferente se perdera elementos tales como la navegacin (el uso ms frecuente de los frames) Al no cambiar la URL en las diversas pginas, el usuario no podr aadir a sus favoritos secciones de la pgina Los botones anterior y siguiente de los navegadores pueden no funcionar adecuadamente. As mismo podemos dificultar el uso del Historial del Navegador. Si el usuario desea imprimir la pgina podemos obtener resultados no deseados. No podemos promocionar pginas interiores ya que necesitamos que los visitantes accedan por la pgina principal. Esta pgina utiliza frames pero su navegador no lo soporta

pablomonteserin.com

Ejercicio

Ver el ejercicio resuelto en youtube.com Ver ejercicio resuelto

pablomonteserin.com

Pginas de consulta

www.w3schools.com

pablomonteserin.com

MULTIPLE IE
http://tredosoft.com/Multiple_IE El proyecto dej de desarrollarse en el 2006.

pablomonteserin.com

Estilos y pginas con plantillas

www.csszengarden.com www.cssplay.co.uk http://freecsstemplates.com/ http://tympanus.net/codrops/ http://metamorphozis.com/

pablomonteserin.com

Estilos en lnea
<img src=imagen.jpg width=30px height=30px> vs <img src=imagen.jpg style=width:30px; height:30px>

pablomonteserin.com

capas

Verlo funcionando

pablomonteserin.com

Ejercicio
Una capa negra con texto arial de tamao 3em alineado a la derecha y escrito en azul. Con un ancho del 50% y un alto de 5em. Con un margen exterior izquierdo de 100px y un margen interior derecho de 50px.

Ver ejercicio resuelto

font-size font-family margin-left padding-right background-color

height text-align color width

Nota: Para centrar una capa existen dos posibilidades: margin:auto y text-align:center. Margin-auto puede dar conflictos con internet explorer.

pablomonteserin.com

Usamos tbody cuando deseamos que una tabla tenga mltiples cuerpos. tbody debe usarse junto con thead y tfoot.

tbody, thead, tfoot

pablomonteserin.com

thead y tfoot dberan ser definidos antes que tbody.

Verlo funcionando

pablomonteserin.com

rules=groups hace que cada tbody se distinga claramente del resto


Cdigo con rules=group Cdigo sin rules=group

pablomonteserin.com

Usando ColGroup
Verlo funcionando

Nota: Ni Firefox ni Crome (IE, s) aceptan el estlo color aplicado a colgroup

pablomonteserin.com

Ejercicio

Ver ejercicio resuelto

pablomonteserin.com

Documento XHTML que valide por w3c


Bsicamente es un documento html bien formado. Como las etiquetas en XML distinguen entre maysculas y minsculas (casesensitive), la recomendacin XHTML ha definido todos los nombres de etiqueta en minsculas. Etiquetas en minsculas (del XML). Valores de atributos entre comillas dobles. Elementos explcitamente cerrados (<.../>). La minimizacin de atributos (como <option selected>)prohibida; en lugar de eso, se usa <option selected="selected"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> Ningn texto puede estar directamente dentro del body, sin estar situado a su vez en otro elemento (por ejemplo, un prrafo). <p>hola mundo!</p>. La etiqueta title, dendro del head, es obligatoria. Las metaetiquetas se cierran en s mismas explcitamente: <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

pablomonteserin.com

Plugins firefox
ColorZilla: Obtener los colores de una pgina. Download Helper: Descargar un video de una pgina directamente. Web developer: -validar html por w3c(tools-> web developer tools). Esto accede direcamente a la pgina de validacin: http://validator.w3.org/ -inspeccionar elementos (ctrl+shift+f), importar imgenes... -editar css (tools web developer edit CSS (ctrl + shift + e )). Luego podr pulsar sobre el diskette para salvar los cambios.

pablomonteserin.com

Firebug
facilita la inspeccin y deteccin de errores. Al seleccionar un elemento en el panel inferior, la primera de las hojas de estilo que aparecen ser la vinculada a dicho elemento.

Si pincho aqu puedo seleccionar el elemento en la pgina y se iluminar el correspondiente cdigo html.

pablomonteserin.com

Utilidades

Obtener un favicon para la pgina: http://www.favicon.cc

pablomonteserin.com

Estructura de pgina web

Todo lo que hemos estado haciendo hasta ahora, ira dentro del body.

pablomonteserin.com

Estructura de una pgina web

Las etiquetas meta contienen informacin relativa al documento web <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

pablomonteserin.com

Metaetiquetas de codificacin del texto


El atributo content="text/html define que clase de informacin contiene el documento web, lo cual determinar con qu aplicacin se debera abrir.

La iso para Europa del Oeste (espaol): <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> La iso para Europa Central: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> Esperanto y Malts: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-3" /> Letn, Lituano y Japons: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-4" /> ... Para caracteres asiticos y de todo tipo: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

pablomonteserin.com

Otras metaetiquetas
<meta http-equiv="refresh" content="15" /> Indica al navegador el nmero de segundos antes de que la pgina sea actualizada. <meta http-equiv='refresh' content='0; URL=http://www.google.es/'> Redirecciona a la pgina indicada en la URL. <meta http-equiv="window-target" content="_top" /> Previene que la pgina se cargue en un target. <meta http-equiv="expires" content=0 /> Hace que la pgina caduque en un momento determinado.
pablomonteserin.com

Qu es el doctype?

El doctype le dice al navegador que tipo de informacin va a contener la pgina web. La ltima versin del doctype HTML es la 4.0, las siguientes sern para XHTML.

pablomonteserin.com

DOCTYPE
EL HTML 4.01 Strict no permite marcado de presentacin con el argumento de que debera usar CSS en su lugar para eso. As es como el DOCTYPE Strict luce: <!DOCTYPE HTML PUBLIC "-//W3C//DTD "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01//EN"

Las DTD transicionales (Transitional DTD) permiten algunos elementos y atributos antiguos que estn en desuso: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Adems, si est usando frames (marcos), para conseguir resultados vlidos desde el validador SGML, necesitar el frameset DOCTYPE como el que sigue: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> pablomonteserin.com

IE8 compatibility mode


IE8 mejora el renderizado de contenido para muchos estndares web (como HTML, CSS y JavaScript) de manera predeterminada. Esto hace que deje de ser compatible con con pginas que no se rijan de acuerdo a los estndares ms actuales. Para mantener la compatibilidad podemos usar la siguiente metaetiqueta:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
pablomonteserin.com

Cargar una hoja de estilos externa


<link rel="stylesheet" type="text/css" href="estilos.css"/> El atributo opcional type se usa para especificar un tipo de medio (text/css para una hoja de estlo en cascada) permitiendo a los navegadores omitir los tipos de hoja de estlo que no soportan.

rel=stylesheet indica que es la hoja de estlos preferente. rel=alternate stylesheet indica que podemos cambiar esta hoja de estlos desde el navegador. Es necesario declarar al menos una hoja de estlos preferente. pablomonteserin.com

Ejercicio
Crear una capa y asociarle una imagen de fondo utilizando una hoja de estlos externa al documento. background-image:url('ruta de la imgen');

Ver ejercicio resuelto

pablomonteserin.com

A partir de la pgina anterior, modificando la hoja de estlos, lograr que la imgen asociada a la capa cambie al pasar el cursor por encima. Para ello usaremos: div:hover{ ... }

Ejercicio

Ver ejercicio resuelto

pablomonteserin.com

Repetir el ejercicio anterior, pero para un enlace en vez de para una capa.

Es imprescindible que el enlace tenga el estlo float:left

Ver ejercicio resuelto

pablomonteserin.com

Ejercicio

10_ejercicioHover.html

Hacer el mismo ejercicio pero aadiendo un identificador de tipo id a la etiqueta a.

Ver el ejercicio resuelto

pablomonteserin.com

Id vs class

pablomonteserin.com

Uso apropiado de id y class

pablomonteserin.com

Escribir menos cdigo


Cmo no hacerlo: #content { margin-top: 10px; margin-right: 12px; margin-bottom: 0; margin-left: 15px; backgroundcolor: #000; background-repeat: no-repeat; } Cmo hacerlo: #content { margin: 10px 12px 0 15px; background: #000 no-repeat; }

pablomonteserin.com

Las fuentes web-safe vienen includas en el navegador. Por tanto, su carga est asegurada y adems ser mucho ms rpida (una tipografa externa puede pesar del rden de los 100k - 3 mb). font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: 'Bookman Old Style', serif; font-family: 'Comic Sans MS', cursive; font-family: Courier, monospace; font-family: 'Courier New', Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-family: Symbol, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Webdings, sans-serif; font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Fonts Web Safe

pablomonteserin.com

Utilizar una tipografa concreta


pagina.html
<link rel="stylesheet" type="text/css" href="estilos.css"/> <p class="estilo1">TIPO 1</p> No es recomendable subir un nivel para cargar una hoja de estilos (../) cuando dicha hoja contenga una referencia a @font-face

estilos.css
@font-face { font-family: "taco.ttf"; src: url(taco.ttf); } .estilo1{ font-family:"taco.ttf",arial; font-size:60px; } Verlo funcionando

Habr que usar comillas para encerrar el nombre de la fuente.

Descargar taco.ttf

pablomonteserin.com

Utilizar una tipografa concreta y que funcione siempre


http://cufon.shoqolate.com/generate/ Deberemos tener en cuenta lo siguiente: Regular typeface: Aqu es desde dnde subimos la fuente original. Los otros campos son para varianes de negrita, itlica y negrita+itlica que pudieran existir de la misma fuente. The EULAs of these fonts allow Web Embedding (without Adobe Flash): Tenemos que seleccionar que estamos autorizados a usar la fuente original para que el programa nos permita hacer la conversin. En este sentido, recordar un par de alternativas donde podeis encontrar fuentes libres. Include the following gliphs...: Aunque recomiendan marcar "All", eso hace mucho ms pesado el fichero resultante. Con Basic Latin yo obtuve unos resultados muy aceptables. De todos modos, cualquiera de los tres siguientes (Latin-1 Supplement, Latin Extended-A y Latin Extended-B) deberan demorar menos la carga, cubriendo la gran mayora de los casos. Comentar tambin aqu, que muchas fuentes son de origen no castellano, por lo que normalmente no tienen previstos los caracteres voclicos acentuados... y casi nunca la . Comprobadlo antes de poneros a hacer conversiones y os ahorrareis trabajo. Scale the font to the following size: Cuanto mayor sea el nmero, mayor fidelidad de fuente incluso en caracteres de gran tamao. Si no lo vais a utilizar para rtulos gigantes, mejor escogeis el valor mnimo (64). Esto reduce bastante el tamao del script. I acknowledge and accept these terms: Imprescindible aceptar los trminos de uso par generar el fichero. <script src="cufon-yui.js" type="text/javascript"></script><!-- Descargable desde la pgina de inicio de cufon--> <script src="http://DIRECCION/Imposiblefont_300.font.js" type="text/javascript"></script> <script type="text/javascript">Cufon.replace('h1');</script> <h1>Este texto se ver con la fuente Impossiblefont</h1> En IE en ocasiones se visualiza el texto original antes de realizar la sustitucin. Para atenuar -que no solucionar- esto, justo antes de </body> es conveniente insertar esta instruccin: <script type="text/javascript"> Cufon.now(); </script>

Verlo funcionando

pablomonteserin.com

Ejercicio Dibujar con GIMP


Crear un nuevo document: ctrl + n Crear una seleccin: r Pintar con la pluma: p Borrar: ctrl + shift + e Exportar imagen: ctrl + shift + e Ver capas: ctrl + l Mover capa: m Ver herramientas: ctrl + b
pablomonteserin.com

Ejercicio
Crear una botonera de 3 botones. Cada botn ser un elemento de una lista y habr sido diseado con Gimp. Para ello crearemos en un nico fichero xcf, dos capas, una para cuando el botn est en reposo y otra para cuando pasamos el cursor por encima del botn.

Ver el ejercicio resuelto en youtube.com Ver ejercicio resuelto

pablomonteserin.com

GIMP hacer un degradado (L)


- Ctrl + n Nuevo documento - Ctrl + g create new gradiente (si edito un gradiente del sistema no podr modificarlo) (con ctrl pulsado me ser fcil hacer un degradado perfectamente vertical). - r seleccin rectangular - Men Image crop to selection - Ctrl + shift + e Exportar imagen
pablomonteserin.com

Ejercicio

Ver el ejercicio resuelto en youtube.com Ver ejercicio resuelto

pablomonteserin.com

Ejercicio

Ver ejercicio resuelto

Nota: para que la capa interior de texto tome el margen superior necesario deberemos asignarle un estilo float o usar padding-top en la capa contenedora. Para que cuando el contenido de una capa no quepa dentro de esta aparezcan las barras de desplazamiento necesario, usaremos: overflow:auto.

Descargar foto del teatro

pablomonteserin.com

Ejercicio

Descargar foto

Ver ejercicio resuelto

pablomonteserin.com

Ejercicio

Ver ejercicio resuelto

pablomonteserin.com

GIMP recortar imgenes y opciones frecuentes


ctrl + o Abrir una imgen. ctrl + s Salvar una imgen ctrl + b ver barra de herramientas f free select tool Shift aadir a la seleccin Ctrl sustraer de la seleccin Shift + ctrl coger la interseccin de la seleccin shit + t escalar shift + r rotar Men image scale image Men colors bright/contrast Men filters
pablomonteserin.com

Ejercicio

Descarga imagen arriba Descarga imagen abajo

Ver ejercicio resuelto

pablomonteserin.com

Ejercicio

Ver ejercicio resuelto

Nota: habitualmente, es conveniente agrupar la informacin en bloques que formen columnas en vez de en bloques que formen filas. Por tanto, lo apropiado en este ejercicio es que los tres elementos centrales (barra horizontal verde, rectangulo azul y barra horizontal roja) esten contenidos dentro de una capa llamada columna central y que a su vez toda la ventana est contenida dentro de una capa llamada ventana Ver tutorial del ejercicio resuelto en youtube.com

pablomonteserin.com

Ejercicio

Repetir el ejercicio anterior haciendo que cuando pase el cursor por encima de las capas (ahora enlaces), cambien de color.

Ver ejercicio resuelto

pablomonteserin.com

Ejercicio

Descargar imagen

Ver ejercicio resuelto

pablomonteserin.com

Ejercicio - Background Centrado

Descargar fotografa

Ver ejercicio resuelto

pablomonteserin.com

Opacidades

Verlo funcionando

pablomonteserin.com

Ejercicio

Ver ejercicio resuelto

A partir de la teora anterior, lograr que el texto aparezca sin transparencia (perfectamente opaco). Para ello, sacaremos el texto de dentro de la capa roja, le asignaremos el estilo position:relative y jugando con margin-left y margin-top lo colocaremos dentro de la capa, en la posicin deseada. Para que todo est bien organizado, tanto la capa roja como el prrafo con el texto deberan de ir dentro de una capa contenedora. pablomonteserin.com

Imagen que se adapta a las dimensiones de la pantalla.

Ver ejercicio resuelto

pablomonteserin.com

Ejercicio
Colocar una capa semitransparente en una pgina con un background que se redimensione para ajustarse a las dimensiones de la pgina. La capa estar a 300 px del borde izquierdo de la pgina y a 50 px del borde superior de la pgina. Posicionaremos la capa utilizando los estilos position:absolute, left y top.

Ver ejercicio resuelto

pablomonteserin.com

Popups con css

Verlo funcionando

pablomonteserin.com

Ejercicio
Al hacer hover sobre el enlace aparece la fotografa.

Verlo funcionando

pablomonteserin.com

Hacer una botonera

Ver archivo 1_enFirefox.html

pablomonteserin.com

Hacer una botonera

Ver archivo 2_enIE.html

pablomonteserin.com

Ejercicio
Descargar botones

Ver ejercicio resuelto

pablomonteserin.com

Botonera horizontal

Para cambiar una lista vertical a horizontal, basta con adjudicar a cada li de la lista: float:left Ver archivo 4_horizontal.html

pablomonteserin.com

Pginas de sonidos gratuitas

http://www.freesound.org/ http://www.sounddogs.com/ http://www.soundsnap.com/

pablomonteserin.com

Crear una pgina de error 404 personalizada


Creamos un fichero .htacces.txt con el siguiente cdigo y lo copiamos en la raz de nuestro dominio: ErrorDocument 404 http://www.dominio/error404.html Al copiarlo al servidor lo renombraremos a: .htaccess Adems, crearemos la siguiente pgina web que ubicaremos tambin en la raz de nuestro dominio: error404.html

pablomonteserin.com

Aadir el botn Me gusta de facebook


http://developers.facebook.com/docs/plugins/ Necesitaremos conocer nuestra id de facebook. Nos logueamos en facebook perfil (profile) fotos seleccionamos una foto cualquiera en la url nuestra id de facebook es fbid

pablomonteserin.com

Crear y personalizar una pgina de fan en facebook


Crear una pgina de fan http://www.facebook.com/pages/create.php Definir la pgina de inicio de nuestra pgina de fan Editar perfil Crear una landing page para nuestra pgina de fans http://apps.facebook.com/tab-maker -> allow -> pinchamos en el botn tab1 -> pinchamos en el botn choose your page y seleccionamos la pgina -> escribimos el cdigo html -> Add Sub-Tab 1 To Your Selected Page
pablomonteserin.com

Insertar un archivo PDF


No ser necesario que el usuario tenga instalado ningn plug-in

http://docs.google.com/viewer http://www.slideshare.net/
pablomonteserin.com

Hacer que un video de youtube se vea a pantalla completa


La siguiente url... http://www.youtube.com/watch?v=TP_ttKbnSvE

debe convertirse en esta

http://www.youtube.com/v/TP_ttKbnSvE&amp;autoplay=1

pablomonteserin.com

Mail Chimp
Para correo masivo. Hasta cierta cantidad de emails al mes es gratuito. No activar las opciones de facebook y twitter que son un rollo. Despus de registrarme me crea una lista por defecto, podr crear ms. Un lista es una lista de personas a las que le enviar el mismo mail. Lists view list create form create embed code for small form no tocamos nada y copiamos el cdigo que nos da Luego podr ir a list view list suscribers view all para ver todos los suscriptores. Mandar correo masivo desde la pgina de mail chimp cada vez que el contenido rss de la misma se actualice para materializar esta opcin la web debe estar publicada en internet. Campaigns create campaign RSS driven campaign le paso el enlace a mi canal rss: http://pablomonteserin.com/index.php?format=feed&type=rss pablomonteserin.com

Ejercicio

Coger el men de esta direccin: http://www.cssplay.co.uk/menus/dd_valid.html y aislarlo del resto.

pablomonteserin.com

Botones Comprar ahora y Donaciones:


Un botn Comprar ahora se puede utilizar para vender un solo CD de Mozart por 15 euros o, si lo prefiere, le puede permitir comprar a la vez varias copias del mismo CD. Sin embargo, si desea vender un CD de Mozart y uno de Beethoven, deber crear botones Comprar ahora diferentes para cada artculo o utilizar el Carro de la compra de PayPal. Tras loguearnos, podremos crear un botn de donacin en el siguiente enlace: https://www.paypal.com/es/cgi-bin/webscr?cmd=_donate-intro Para entrar en el servicio sandbox, que nos permite hacer pruebas sin que se materialice un desembolso econmico real, tendremos que crear una cuenta como paypal developer, que es independiente de la de usuario : https://developer.paypal.com/ Nos logueamos como developers test accounts Create a preconfigured account Buyer Repetimos el proceso para crear una fake seller account. Deberemos crear la cuenta con un nombre de usuario distinto. Nos vamos al men Test Accounts Payment Review debe estar deshabilitado para ambas cuentas. Creacin del botn de compra en modo sandbox: Pulsamos en el botn Enter SandBox Test Site Vender en su web Pago estandar (donate) copia el cdigo fuente del botn y lo pego en una pgina. Accedo a la pgina usando el navegador y me logueo con mi cuenta de fake buyer.

pablomonteserin.com

Botn carrito compra

https://www.paypal.com/es/cgi-bin/webscr? cmd=_shoppingcart-intro

pablomonteserin.com

Ejecicio - Proyecto.
Hacer una pgina web de temtica libre que cuente con los siguientes elementos: Una pgina principal de bienvenida. Una botonera hecha a partir de una lista. Una galera de fotos. Una seccin de links favoritos, estructurados con una tabla. Una seccin de texto, estructurada con al menos 3 tablas. Los cambios de una pgina a otra se harn usando iframes. Raz index.html css pages images
pablomonteserin.com

Un dominio no es ms que un nombre nico que identifica a un sitio web en Internet. La direccin IP es como el nmero de la seguridad social o el nmero de telfono que nos identifica en Internet. Pero, como puedes comprobar, este nmero ni es fcil de recordar ni nos da informacin sobre el sitio web al que corresponde. Aqu es donde entra lo que hoy conocemos como dominio, en este caso este nmero corresponde al dominio intermonoxfam.org. El sistema de nombres de dominio, se cre para facilitar la manera de localizar maquinas en la web y por lo tanto para nombrar y encontrar sitios web alojados en esas mquinas. En realidad, un dominio es un nombre que apunta hacia una mquina que esta conectada a Internet, identificada mediante una direccin IP y en la cual estn guardados unos archivos que conforman una pgina web.
pablomonteserin.com

Dominio

Insertar un captcha
Marcando la check podr usar el captcha en cualquier dominio http://www.google.com/recaptcha ada

http://www.google.com/recaptcha

pablomonteserin.com

Subir una pgina web a un servidor de forma gratuita

http://web.iespana.es/ http://www.freehostia.com/ http://www.000webhost.com/ http://www.freewebhostingarea.com/ http://www.zobyhost.com/

pablomonteserin.com