memoria página web:

36
Página Web

Upload: raquel-herrerias-cabrero

Post on 22-Mar-2016

218 views

Category:

Documents


0 download

DESCRIPTION

Memoria de la página web de la cervecería La Fragua

TRANSCRIPT

Page 1: Memoria Página Web:

La FraguaLa FraguaLa FraguaLa FraguaLa FraguaLa FraguaLa FraguaLa FraguaLa FraguaCervecería RestauranteCervecería RestauranteCervecería RestauranteCervecería RestauranteCervecería RestauranteCervecería RestauranteCervecería RestauranteCervecería RestauranteCervecería Restaurante

Página Web

Page 2: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

2

Page 3: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Indice.

1.- Mapa web. 2.- Aspectos generales. 3.- Tratamiento de imágenes. 4.- Estilos CSS. 5.- Favicom. 6.- Extensiones de Dreamweaver. 7.- Botones fl ash. 8.- Incrustación de fuentes. 9.- Web.2.0. 10.- Feed11.- Sitemap12.- Google Analytics.13.- Ping. Feed.14.- Servidores de prueba.15.- Colores básicos de la web.16.- Problemas al realizar la web.17.- Add Url.

3

Page 4: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

1.- Mapa web.

Lo primero que vamos a visionar es el mapa del sitio de la página Web,para ver la raíz de ésta.

4

Page 5: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

2.- Aspectos generales.

Nuestra página web la realizamos con el pro-grama dreamweaver. Dicha página está basada en tablas, donde la index tendrá nueve columnas, y las demás páginas cinco columnas, donde se irán combi-nando las celdas según nos interese.

Todas las páginas están basadas en html 1.0 tran-sitional, tendrán un fondo blanco, ya que después de haber probado con otros fondos, como imagen de repetición o imagen llegamos a la conclusión de que el aspecto de la página es más limpio y se visualiza con más claridad, a su vez todas tendrán un ancho de body de 740 px, y un largo escalable. Cada uno de los html lleva su correspondiente título junto con sus etiquetas meta de palabras clave y de descripción.

Index.

La index está compuesta de nueve tablas, y una serie de celdas que hemos ido combinando según nos interesaba. En la parte superior tenemos una eti-queta div, la cual tiene su correspondiente clase .div.

A continuación insertamos una película fl ash, creada a partir de dos imágenes, que nos vincula a galería.html.

Justo más abajo hemos insertado una imagen de un ancho en píxeles exacto al del body y un alto que nos coincida con la combinación de celdas.

5

Page 6: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Pasamos a la inserción de los botones fl ahs, se tra-ta de una serie de seis botones en fl ash que nos vincu-lan a los correspondientes html.

Debajo de los boto-nes fl ash decidimos hacer una agrupación de celdas, donde crearemos un estilo css el cual tiene un tipo de selector compuesto al que llamamos #celda2, dicho id a su vez tiene vinculado otro css, que sería el de la incrustación de fuentes, pero esto lo veremos con posterioridad. Justo al lado vemos otro botón o pelícu-la fl ash, que nos vincula a otra página llamada imá-

genestalavera.html. Y, para fi nalizar con la index en la parte inferior de

ésta insertamos un div, con la misma clase que la su-perior comentada anteriormente, y que vinculamos al html del mapa web.

6

Page 7: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Historia.html.

Compuesta por cinco columnas en las que ire-mos combinando las celdas a conveniencia. Para esta página creamos un estilo css nuevo al que lla-

maremos estilo2.css, dentro de éste estilo css crearemos un tipo de selector compuesto al que llamaremos #cel-da3, que a su vez está vinculado al estilo css de la fuen-te incrustada, y que se lo aplicamos a la parte posterior de la página, y también dentro del estilo2.css, creamos una clase llamada .fal-

don, que la usamos para la parte inferior de la pági-na.

En esta página en la parte posterior izquierda in-cluimos un botón fl ash que nos vincula a la página de incio o index.

En la zona central después de hacer la correspon-diente combinación de celdas aplicamos la id. #cel-da2, utilizado con anterioridad en la index.

7

Page 8: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

En la parte inferior de la página insertamos una barra de navegación, que creamos a partir de imá-genes, y que vinculamos a cada una de las html crea-das y que corresponden a su vez con los botones prin-cipales de la index.

Carta

Decir, que el diseño de todas las páginas html que veremos a continuación siguen los mismos estilos css,

la misma barra de nave-gación, y el mismo botón fl ash que nos vincula a la index, que la página historia.html.

Así, nos centramos en los aspectos diferentes que existen entre todas ellas.

Para la página Carta.html, decir que lo primero

que debimos hacer es subir el PDF de la carta a una web 2.0 cuya dirección es http://issuu.com/. A conti-nuación pegamos el código que nos da dicha página dentro del código de nuestra página, y dentro de una tabla previamente creada. El resultado es la creación de un iframe, nos lo crea la propia página de issuu.

Dicha aplicación estéticamente es muy efi caz, pero lo cierto es que tarda bastante en cargar la pá-gina, lo que es un inconveniente.

8

Page 9: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Galería

Para la página Galería.html, hemos realizado unas fotos y posteriormente retocado de la cervecería.

Para la galería de imágenes hemos utilizado una

extensión de drea-mweaver llamada “lightbox”, dicha extensión nos ofre-ce una demo con

imágenes, donde iremos incrustando las nuestras. La extensión nos permite cambiar los colores de las ca-jas, etc...

En la página también insertamos un vinculo de texto, que nos vincula a la página panorámica.html

imágenes, donde iremos incrustando las nuestras. La imágenes, donde iremos incrustando las nuestras. La imágenes, donde iremos incrustando las nuestras. La extensión nos permite cambiar los colores de las ca-extensión nos permite cambiar los colores de las ca-

En la página también insertamos un vinculo de En la página también insertamos un vinculo de texto, que nos vincula a la página panorámica.htmltexto, que nos vincula a la página panorámica.htmltexto, que nos vincula a la página panorámica.html

9

Page 10: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Cerámica

En la página Cerámica.html no podemos decir mucho, ya que usamos la misma extensión que en la página Galería.html.

10

Page 11: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Ubicación.

En la página Ubicación.html incluimos un mapa de la situación de la cervecería “La Fragua”.

Para ello tenemos que crear una cuenta en Google Maps, y pos-teriormente crear nues-tro mapa con nuestra ubicación. Una vez nos mandan un mensaje de confi rmación, podemos coger el código que insertamos en nuestra página, incluyendo nuestro mapa, que al

pinchar en él nos vincula a google maps, por si quere-mos verlo más grande.

11

Page 12: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Como vemos en la imagen anterior, el mapa lo hemos creado en google maps, dicha Web 2.0 nos permite crear tan-tos mapas como queramos con una misma cuenta. Así mismo, dentro del mapa nos permite incluir los datos de dirección del lugar que insertamos, como una breve descripción del lugar, en este caso breve descripción de lo que más nos interesa ofrecer de la cervecería restaurante “La Fragua”.

Otra de las ventajas que encontramos a Google Maps es que a la hora de buscar nuestro sitio en la Web sale más direc-tamente, por ejemplo si ponemos en el buscador de Google “la fragua Talavera”, nos sale la primera, acción que no nos pasaba antes de incluir el mapa en google maps, como vemos en la imagen siguiente.

12

Page 13: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Enlaces

En la página Enlaces.html incluimos los enlaces de interés, compañeros de 2º de gráfi ca Publicitaria, enlace al creador de la cerámica, profesor de Pro-yectos de Gráfi ca publicitaria..., por medio de vincu-

los de texto que enlazan con sus respectivas pági-nas web. En los laterales incluimos vinculos por medio de imágenes a distintas web 2.0, como son Facebook, Flirck, mi propio Blog...

Un enlace importan-te de esta página es el de “contacte con noso-tros” que vincula por me-dio de texto a la página Formulario.html.

13

Page 14: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Formulario

La página Formulario.html tiene el mismo formato de tablas que las anteriores páginas html. Dentro de ella está insertad el formulario. Para hacer el formula-

rio hemos seguido los siguientes pasos:

Creamos una página html que se llamará formulario.html, que constará de cinco campos (nombre, apellidos, email, comentarios y sugerencias) el botón de enviar y un campo oculto que nos permite el paso de variables a un correo electró-nico sin que se per-ciba por parte del

usuario. Por otro lado tenemos otro fi chero llamado confi rmación que es el mismo formulario que el ante-rior pero añadiéndole un texto “ su mensaje ha sido enviado satisfactoriamente”. Y por último tenemos el script myform php que tiene el siguiente código:

14

Page 15: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /><title>form1</title></head>

<body><?php$fi eld_name = array_keys($_POST);$value_name = array_values($_POST);

for ($i=0;$i<count($fi eld_name);$i++){$msg .= “”.$fi eld_name[$i].”: “.$value_name[$i].”\n\n”;}

$recipient = “[email protected]”; // el correo donde desea reci-bir elcontenido del formulario$subject = “Contacto”; // el asunto del correo que usted recibirá y que pue-de ser “petición” o “consulta” o algo por el estilo

$headers = “From: lafragua.260mb.com <http://lafragua.260mb.com>\n”; // quien lo manda y el dominio$headers .= “Cc: [email protected]\r\n”; // (opcional) dirección de quien recibirá una copia del formulario

mail($recipient, $subject, $msg, $headers);// mandamos el mail con los todos los datosheader(‘location:confi rmacion.html’); //(opcional) así vamos a la página de confi rmación tras haber mandado el formulario (debe haberse creado una página denominada confi rmacion.html o si no, esta línea debe eliminarse).?>

En el formulario debe aparecer la línea en el encabezado del formulario de la siguiente forma:

<form action=”miformulario.php” method=”post”>

</body></html>

15

Page 16: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Lo siguiente que haremos será validar el formula-rio, para ello teniendo seleccionada la etiqueta form del formulario le asignamos el comportamiento validar formulario, con esto conseguimos que en los campos mencionados anteriormente sean obligatorios o no re-llenar por el usuario. Una forma de advertir a los usua-rios que ese campo es obligatorio es poniendo en el panel de propiedades el valor inicial por ejemplo “requerido” o “deje aquí sus sugerencias”. Otro com-portamiento que le podemos aplicar es en cada uno de sus campos es el de establecer texto -- defi nir texto de campo de texto --, y el nuevo texto lo dejamos en vacío, y si cambiamos el evento a onfocus consegui-mos que cuando hacemos click en los campos estos se queden vacios.

En nuestro formulario hemos utilizado todos estos comportamientos, muy fáciles de manejar.

Una vez terminados todos estos pasos y termina-do el formulario lo subimos al servidor en este caso a 260mb y una vez tengamos la dirección insertamos el formulario por medio de iframe en la página Formula-rio.html

16

Page 17: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Una vez subidos los archivos al servidor lo único que nos faltaría es comprobar que función y que nos llega el mensaje al correo electrónico que asignamos en el archivo php, y que hemos creado para la web

La siguiente imagen demuestra que si funciona

17

Page 18: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

18

Imágenes Talavera.

La página Imágenestalavera.html, que nos vin-cula desde la Index está creada a partir de tablas donde hemos ido creando sus correspondientes cel-

das para insertar las imágenes corres-pondientes. Dicha galería está creada con dreamweaver, para ello utilizamos los comportamientos de intercambiar ima-gen, donde a la ima-gen central(grande), le damos la id de contenedor y a las demás sus respec-tivos nombres, y el comportamiento de aparecer desvane-cer.

Para la creación de esta galería ha sido muy necesario el recorte y optimi-

zación de las imágenes, así como en algunas de ellas su propio retoque fotográfi co. Todas las imágenes van renombradas con su correspondiente alt.

Page 19: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

3.- Tratamiento Imágenes

Todas las imágenes están optimizadas para la web con photoshop.

Para las páginas Galería.html y Cerámica.html las imágenes han sido realizadas por nosotros mismos, retocadas y retocadas.

Para la página Imágenestalavera.html las imá-genes también han sido retocadas y recortadas a los mismos píxeles que su correspondiente celda, para que estas se insertaran correctamente.

4.- Estilos CSS.

Para la creación de la Web nos hemos ayudado de distintos estilos css, para ello lo que hemos hecho es crearnos estilos css que hemos movido o guarda-do para poder utilizarlos con posterioridad en nuestra creación de html.

Para nuestra web, hemos creado para el diseño de las tablas unos estilos css, que llamamos:

Estilo2.css. Utilizado en el diseño de las tablas.Enlaces.css. Utilizado para enlaces.Div.css. Utilizado para los div de la index.

19

Page 20: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

20

Caligra.css. y Stylesheet.css. Estilos css que vienen en el paquete de la fuente calligraphy que incrusta-mos en nuestra web.

Lightbox.css. Estilo que vine junto a la extensión para dreamweaver, para la creación de galerías de imágenes.

5.- Favicom.

Favicon.ico es un icono, una pequeña imagen, que aparece en algunos navegadores junto a la di-rección de una página web.

El icono debe tener las siguientes características:Dimensiones 16 píxeles x 16 píxeles;16 colores (4 bits);Formato ICO, no BMP, no GIF, no JPG.

F

Page 21: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

6.- Extensiones de Dreamweaver

Las extensiones para dreamweaver nos las pode-mos descarar directamente del programa de drea-mwever, solo tenemos que irnos a la opción comando que nos redirecciona a la página de Adobe, teniendo cuidado de descargar extensiones compatibles para nuestra versión. Sabiendo esto, nos hemos descarga-do y utilizado las siguientes extensiones:

- Lorem and More. Esta extensión nos crea un tex-to falso que nos muestra como quedaría el texto en la tabla.

- Lightbox Gallery, que nos crea una galería de imágenes basada en estilos css.

7.- Botones Flash

Los botones que hemos utilizado en toda la Web los hemos realizado con Flash 10.0.2, con action script 2.0, pero al la hora de guardar la película la hemos guardado en Flash 8, ya que algunos buscadores to-davía no reconoces la versión 10, y podíamos correr el riesgo de que no los reconocieran.

Los botones principales están situados en la index como ya explicamos anteriormente.

21

Page 22: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

22

8.- Incrustación de Fuentes.

Para poder incrustar una fuente en nuestra pági-na lo primero que tenemos que hacer es descargarla de internet, para ello recurrimos a la página http://www.fontsquirrel.com/, donde encontraremos mu-chas fuentes, aumque en verdad lo que a nosotros nos interesa son las font-face kits, donde dentro de ellos están todos los formatos de las fuentes (ttf, eot. svg, woff), el estilo css de la fuente y un archivo html demo para previsualizar la fuente.

En nuestra página web incrustamos la fuente “Ca-llygrafy” con sus correspondientes formatos:

CalligrafyFLF.eot.CalligrfyFLF.svg.CalligrafyFLF.ttf.CalligrafyFLF.woff.y, con sus correspondientes estilos css.Caligra.css.Stylsheet.css.Para incrustar la fuente en cada una de las pági-

nas que hemos creado debemos de vincular los estilos css de la fuente, tanto el caligra.css como el stylsheet.css, al estilo donde queremos que se incruste la fuen-te, en nuestro caso al estilo2.css. y al style.css, y más especialmente a las id. #celda2 y #celda3.

Page 23: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

9.- Web 2.0

Las aplicaciones Web 2.0 que emos utilizado en la página Web son las siguientes

Blogger.

Google calendar.

Super Cook.

Cork´d.

Issuu.

Facebook.

Google Maps.

Fliclkr.

23

Page 24: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

10.- Feed o RSS.

Los feeds de noticias están, por norma general, escritos en un lenguaje llamado XML. Este lenguaje ofrece muchas libertades, hay muy pocas normas establecidas y con el fi n de lograr un resultado unifor-me surgieron algunas iniciativas para estandarizar la estructura de los feeds que dieron como resultado dos estándares, RSS y Atom.

RSS es actualmente la versión más extentida, nor-malmente representada por los típicos iconos naranjas con las siglas RSS o XML.

Atom, una alternativa similar, está bastante exten-dida también y aporta diferencias mínimas respecto a los rss.

El feed es un alimentador en el que una web se sirve de otra web.

Para crear los feeds para nuestra página web, lo haremos a partir de un archivo xml, que tendrá el siguiente código:

<?xml version=”1.0” encoding=”utf-8”?>

<rss version=”2.0” xmlns:atom=”http://www.w3.org/2005/Atom”><channel> <title>Cerveceria Restaurante La Fragua</title> <link>http://lafragua.webcindario.com/</link> <description>pagina de la cerveceria restaurante la fragua</descrip-tion> <language>es</language> <lastBuildDate>Tue, 09 Feb 2010 00:00:00 GMT</lastBuildDate> <atom:link href=”http://lafragua.webcindario.com/rssfragua.xml” rel=”self” type=”application/rss+xml” />

24

Page 25: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

<item><title>Carta</title><pubDate>Tue, 09 Feb 2010 00:00:00 GMT</pubDate><guid>http://lafragua.webcindario.com/carta.html</guid><description>Carta con todos los alimentos que se pueden degustar en la cerveceria restaurante la fragua</description></item>

<item><title>imagenes antiguas de Talavera de la Reina</title><pubDate>Tue, 09 Feb 2010 00:00:00 GMT</pubDate><guid>http://lafragua.webcindario.com/imagenestalavera.html</guid><description>galeria de imagenes antiguas de talavera de la reina.</des-cription></item>

<item><title>Galeria</title><pubDate>Tue, 09 Feb 2010 00:00:00 GMT</pubDate><guid>http://lafragua.webcindario.com/galeria.html</guid><description>secuencia de imagenes donde se muestra el interior de la cerveceria restaurante la fragua.</description></item>

<item><title>Ceramica</title><pubDate>Tue, 09 Feb 2010 00:00:00 GMT</pubDate><guid>http://lafragua.webcindario.com/ceramica.html</guid><description>Galeria de imagenes donde se muestra cuadros de ceramica artistica del pintor ceramista Antonio Garcia Cerro que sirven de decora-cion para la cerveceria restaurante la fragua.</description></item>

<item><title>Ubicacion</title><pubDate>Tue, 09 Feb 2010 00:00:00 GMT</pubDate><guid>http://lafragua.webcindario.com/ubicacion.html</guid><description>Ubicacion en el mapa de google de la cerveceria restaurante la fragua.</description></item>

</channel>

25

Page 26: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Como vemos en el código, cada -item- corres-ponde a cada html al que queremos introducir un feed. En -guid- debemos de poner nuestra dirección url de la página web más el título del html correspon-diente. Otro dato muy importante es tener cuidado con las fechas y la hora que ponemos, que deben de estar actualizadas.

Una vez tenemos el archivo xml terminado lo subi-mos al servidor.

Otra cuestión que debemos hacer es introducir un código en cada uno de los html que irá dentro de la etiqueta (head) y nunca dentro de la etiqueta (body), por ejemplo, justo por debajo de los códigos css. Dicho código es el siguiente:

<link rel=”alternate” type=”application/rss+xml”title=”galeria de fotos interior de la cerveceria restaurante la fragua” href=”http://lafragua.webcindario.com/rssfragua.xml” />

Por supuesto, debemos de volver a subir las pági-nas html, para que se guarde dicho código.

Si hemos hecho todos los pasos bien cuando abramos nuestra página en el navegador nos debe de aparecer este símbolo:

26

Page 27: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

El siguiente paso será el de validar los feed, para comprobar que funciona bien, para ello lo que debe-mos hacer es irnos a una página llamada http://feed-validator.org/, que se encargará de certifi carnos que el feed no tiene ningún fallo en el código.

Como vemos en la imagen dicha aplicación nos felicita por que el feed es correcto y nos ivita a des-cargarnos para nuestra web el icono de feed valido, que si lo incluimos en nuestra web nos vincula direc-tamente a la página de Feed Validator igual que la imagen superior.

Por último nos faltaría incluir un icono del fed en nuestra web, que sería una imagen optimizada para

la web, como la imagen de al lado y que nos vincula a la página de los feed.

27

Page 28: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

11.- Sitemap

El sitemap, y no confundir con el mapa del sitio, es un archivo xlm, que nos indica la relación de todas las páginas de mi sitio. El código es el siguiente:

<?xml version=”1.0” encoding=”UTF-8”?><urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=”http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd”>

<url> <loc>http://lafragua.webcindario.com/</loc> <priority>0.95</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

<url> <loc>http://lafragua.webcindario.com/mapa.htm</loc> <priority>0.98</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

<url> <loc>http://lafragua.webcindario.com/carta.htm</loc> <priority>0.95</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

<url> <loc>http://lafragua.webcindario.com/ceramica.htm</loc> <priority>0.90</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

28

Page 29: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

<url> <loc>http://lafragua.webcindario.com/galeria.htm</loc> <priority>0.72</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

<url> <loc>http://lafragua.webcindario.com/historia.htm</loc> <priority>0.70</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

<url> <loc>http://lafragua.webcindario.com/imagenestalavera.htm</loc> <priority>0.92</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

<url> <loc>http://lafragua.webcindario.com/enlaces.htm</loc> <priority>0.95</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

<url> <loc>http://lafragua.webcindario.com/ubicacion.htm</loc> <priority>0.72</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

<url> <loc>http://lafragua.webcindario.com/panoramica.htm</loc> <priority>0.70</priority> <lastmod>2010-02-09T10:51:44+00:00</lastmod> <changefreq>monthly</changefreq></url>

</urlset>

29

Page 30: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

Cuando tenemos terminado el archivo lo subimos al servidor, y después nos vamos a herramientas para webmasters de Google, le agregamos nuestro site-map, que se llama sitemapfragua.xml, y esperamos hasta que nos salga un panel como el de la imagen que signifi ca que nos ha verifi cado nuestro sitemap.

Una vez verifi cado el sitemat otro archivo que debemos de subir al servidor es el robots.txt, que es un archivo de texto sin formato, que notifi ca que car-petas están permitdas revisar y cuales no, como por ejemplo las carpetas de los fl ash, que van a ser fi jas las pondríamos en dissalow, como lo siguiente:User-agent:*Disallow:/Flahs/Disallow:/Fotosfraguaweb/Disallow:/Imagenes/Disallow:/Imagenestalavera/Disallow:/Navegacion/Disallow:/Scripts/Disallow:/Spryassets/

sitemap: http://lafragua.webcindario.com/sitemapfra-gua.xml

30

Page 31: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

12.- Google Analytics

Google Analytics es un servicio gratuito de esta-dísticas de sitios web. Con esta aplicación, se pueden obtener informes como el seguimiento de usuarios ex-clusivos, el rendimiento del segmento de usuarios, los resultados de la campaña de marketing, el marketing de motores de búsqueda, las pruebas de versión de anuncios, el rendimiento del contenido, el análisis de navegación, los objetivos y proceso de redirecciona-miento o los parámetros de diseño web.

Lo primero que debemos de hacer para hacer uso de esta aplicación es darnos de alta y después in-troducimos la url de nuestra página Web. Automática-mente Google analytics nos analiza la página siendo capaz de darnos todo tipo de información, las visitas que recibimos, desde donde nos visitan, la fecha en la que se reciben más visitas, los usuarios únicos absolu-tos (persona individual con un id diferente), ver las pá-ginas más visitadas, con que palabras clave buscan nuestra página (algo muy útil porque nos sirve para poder cambiar las palabras clave de nuestra web)...

31

Page 32: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

13.- Ping. Feed.

FeedBurner es la herramienta más utilizada para medir el número se suscriptores a un feed. Una de sus principales características está en las grandes varia-ciones en el número de suscriptores que muestra de un día para otro.

para ingresar el feed de nuestra Web al Feed burner, primero, como siempre nos damos de alta, y después introducimos la dirección url del nuestro feed y nos creará el ping.Cuando hayamos fi nalizado tendremos acceso a un panel como el de la imagen donde vemos la dirección del feed burner, que debe-mos incluir como vínculo de nuestra página.

http://feeds.feedburner.comcerveceriarestauran-telafragua

32

Page 33: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

14.- Servidores de prueba.

Nuestra página Web ha sido probada en estos servidores; Internet Explorer, Opera, Safari, Google Chrome y Firefox.

El único servidor que nos respeta la página tal cual la hemos creado es Internet Explorer, los demás navegadores nos mueven hacia la izquierda algunos elementos como la barra de navegación de la parte inferior de la Web.

15.- Colores básicos de la web.

#fc9

#630

#666

33

Page 34: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

16.- Problemas al realizar la web.

El primer problema que tuvimos al realizar la web fueron los botones realizados en fl ash, ya que al traba-jar con la versión fl ash.10. algunos navegadores no los reconocían y no funcionaban, porque son versiones que no los reconocen. La solución fue guardar las peli-culas fl ash en la ersión fl ash.8.

Por otra parte, otro problema fue la visualizacón de nuestra página en los distintos navegadores, que algunos elementos no se mueven igual de un navega-dor a otro. Esto, no tiene solución, solo podemos inten-tar buscar un equilibrio .

Otro inconveniente de nuestra página lo encon-tramos en la página Carta.html, que contiene el ifra-me que vincula con la aplicación Issuu, dicho iframe tarda mucho en cargarse lo que incomoda al usuario de la página.

Para fi nalizar, no hemos tenido mayores proble-mas para realizar la Web, alguno normal en algún fi chero con los códigos, pero que se resuelven con paciencia.

34

Page 35: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

35

17.- Add Url.

Para fi nalizar, decir que la dirección de nuestra página web, la hemos ingesado en Add Url de Goo-gle, para dar a conocer a un buscador la existencia de nuestras páginas web con el fi n de que las analice y revise.

Page 36: Memoria Página Web:

Página Web Cervecería Restaurante La Fragua

36

Memoria relizada por:Raquel Herrerías Cabrero. Curso:2º Gráfi ca Publicitaria. Programa utizado para maquetar:Indesing