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&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
