PRACTICAS 1 A 4

Comercio Electrnico

Prctica 1: Estudio de viabilidad de un

proyecto de comercio electrnico

Antonio Sanz [email protected]

Rafael del Hoyo [email protected]

Comercio Electrnico P1 Estudio de viabilidad 2 de 8

Objetivo de la prctica Establecer las bases del proyecto de comercio electrnico que se va a desarrollar durante toda la asignatura, buscando una idea y estudiando su viabilidad tcnica y comercial.

Qu hay preparar de forma previa a la prctica? Una o varias IDEAS de proyecto de comercio electrnico. A lo largo de la prctica se estudiarn las ideas propuestas y se escoger la ms idnea en funcin a una serie de parmetros definidos.

Cul es el resultado de la prctica? Como resultado de la prctica dentro del trabajo total se debe entregar un Estudio de Viabilidad del proyecto de comercio electrnico, en el que se defienda de forma razonada la idoneidad de la idea presentada.

Qu se aprende con esta prctica? Se aprenden tcnicas de bsqueda de informacin y de anlisis de la misma mediante diversos parmetros que ayuden a verificar si una idea de proyecto es o no factible y bajo qu condiciones es ptima.

Introduccin A lo largo de todas las prcticas de la asignatura se va a desarrollar un proyecto de comercio electrnico, haciendo nfasis en la mayor cantidad de aspectos posible de la disciplina. En la primera prctica se va a empezar por la IDEA, es decir, el germen del proyecto, la base sobre la que se va a construir el resto del proyecto. Es vital que la IDEA de nuestro proyecto sea consistente. Una mala IDEA va a consumir tiempo, recursos y dinero sin dar beneficio alguno, por lo que es totalmente importante el asegurarnos que el esfuerzo a realizar merezca la pena. Para ayudarnos a decidir si la IDEA que hemos escogido es buena, vamos a emplear una herramienta muy empleada por las empresas de capital riesgo para decidir si invertir o no en un proyecto. Esta herramienta se denomina Estudio de Viabilidad. Un Estudio de Viabilidad consiste en un anlisis a nivel tcnico, comercial y econmico de una IDEA, y se obtiene como fruto del mismo una decisin de s el proyecto es o no viable, y cules son sus puntos dbiles y sus fortalezas. Un Estudio de Viabilidad se basa en analizar nuestra IDEA en funcin a una serie de factores, y estudiar qu es lo que tiene y de qu carece el mismo. A


continuacin vamos a presentar una serie de factores, que podemos emplear para realizar nuestro anlisis, ordenados por categoras.

Factores asociados al producto El factor ms importante de un proyecto de comercio electrnico es, obviamente, el producto que se desea vender (no es lo mismo vender libros por Internet que vender yates de lujo). Cada producto tiene una serie de caractersticas que deben de ser tomadas en cuenta a la hora de lanzarse a su venta. Es importante resaltar que el producto no necesariamente tiene que ser fsico. La venta de servicios y de informacin a travs de Internet es un modelo de negocio totalmente aceptable (y en algunos casos, extremadamente beneficioso). Un producto que se desee vender por Internet debera de tener varias de las siguientes cualidades: Novedoso: Debe de introducir una definitiva novedad sobre los productos

similares existentes en el mercado. Un ejemplo puede ser la posibilidad de hacerse con gadgets electrnicos importndolos directamente desde el extranjero, o con una edicin limitada de un libro antes de su puesta a la venta.

til: El producto debe de tener asociada una utilidad clara y fcil de

comprender, que permita un mercado de moderadamente a muy amplio Barato: El consumidor todava tiene una clara desconfianza a la hora de

realizar una compra de productos por Internet. Un precio menor facilita la tarea de la compra. Obviamente, es una estrategia muy recomendable que el precio del producto sea inferior al precio de compra en un establecimiento fsico (a menos que se ofrezcan otros servicios de valor aadido que justifiquen ese gasto).

Personalizado: Se desea que el producto a vender est acompaado de un

servicio personalizado orientado a ofrecer un servicio de calidad al cliente, haciendo su compra sencilla y entretenida. Un ejemplo de personalizacin es el envo de noticias de forma peridica, o la realizacin de sugerencias sobre los gustos del comprador (por ejemplo, si compras discos de un grupo te sugieran los de un grupo similar).

Diferente: En suma, el producto a vender y la forma de hacerlo tiene que

tener algo que lo haga diferente al resto de productos. Es esa especializacin, esa diferenciacin la que hace que se distinga del resto (y una buena seal de que sea un producto exitoso).

En este apartado se tiene que analizar la IDEA inicial y ver qu requisitos cumplimos. No es necesario cumplirlos todos, ni cumplirlos de sobras, pero una IDEA que no cumpla ninguno de los requisitos, probablemente deba ser reemplazada por otra mejor.


Estructura de comercio electrnico Una vez decidido el producto que se quiere vender, lo siguiente que se tiene que tener claro es COMO lo vamos a vender. Existen varias estructuras de comercio electrnico que condicionan de forma radical la forma de enfocar el proyecto (es completamente diferente vender material de oficina a un consumidor final que a una multinacional o a una administracin pblica, por ejemplo). Podemos plantear las siguientes estructuras bsicas: B2C (Business to Consumer): Venta directa de negocio a consumidor final.

El caso ms comn en proyectos de comercio electrnico. Ej: Venta de libros, camisetas, viajes.

B2B (Business to Business): Venta de negocio a negocio. Se suele realizar

a gran escala y mediante estructuras bien definidas. Ej: Venta de material de oficina, material informtico, reservas de hoteles, etc ..

A2C (Administration to Consumer): La administracin pblica es la que

vende los servicios al consumidor. Ej: Declaracin de Hacienda por Internet, peticin de hora al mdico, realizacin de trmites burocrticos mediante la ventanilla electrnica.

Se deber elegir el tipo de estructura de comercio electrnico que mejor se ajuste a nuestros parmetros (en algunos casos es posible que podamos elegir entre ambas, aunque siempre una ser la estructura primaria).

Nombre del proyecto Otro factor vital para el xito del proyecto es la eleccin de un nombre para la web del mismo. Un nombre idneo debera cumplir los siguientes requisitos: Definicin: Tiene que poder definir perfectamente el producto que se vende.

Longitud: Cuanto ms corto, ms fcil de escribir y de recordar es.

Verbalizacin: Debe de ser fcilmente transmisible verbalmente, as como

tener fcil escritura (huir de pronunciaciones extraas, smbolos de puntuacin, etc.).

Idioma: Se tendr que tener en cuenta el mercado que se quiere buscar a la hora de elegir el idioma de la web.

Originalidad: Creatividad, chispa... todo aquello que es necesario, pero que no se puede medir con palabras (bsicamente, que el nombre pegue).

Libertad: Simplemente... que no lo haya cogido alguien antes.


Factores de mercado El siguiente factor a tener en cuenta es el mercado en el que se va vender nuestro producto. Tenemos diversos factores a estudiar: Mercado consolidado: Un mercado que est consolidado tiene como

ventajas la existencia de una base de consumidores estable y el conocimiento tanto del xito del producto como de la competencia existente. Las desventajas parten de que el mercado suele estar ya copado y hay que abrirse camino, lo cual puede ser difcil y costoso.

Nuevo mercado: Abrir un nuevo mercado tiene un cierto riesgo, ya que a priori no se conoce el xito de la idea y la cantidad de consumidores que puedan ser captados. Como ventaja principal podemos comentar que el ser los primeros en explotar un nuevo mercado nos posicionan de forma ventajosa en la carrera (as como nos dan unos importantes beneficios).

Fidelizacin de los consumidores: Es importante estudiar el comportamiento de los consumidores, y ver hasta qu punto son fieles a los productos que compran. Una baja fidelizacin implica que ser fcil para nosotros el captar clientes, pero tambin perderlos, mientras que una alta fidelizacin hace complicado conseguir clientes pero hace sencillo retenerlos.

Existencia de competencia: Est claro que salvo que creemos un nuevo mercado, vamos a tener otras empresas que ofrezcan productos y servicios de forma similar a la nuestra. Podemos distinguir tanto a la competencia directa (la que ya ofrece el mismo producto que nosotros) como a la competencia indirecta (la que podra ofrecer el mismo producto con una inversin pequea). Se deber estudiar tanto a unas como a otras para ver cmo hacer que nuestra IDEA sea mejor que la de la competencia.

Factores sociales Los factores sociales son aquellos que se desean encontrar en el producto para hacerlo diferente y original a ojos del comprador final. Para ello, se debe prestar gran atencin al pblico final que va a comprar nuestro producto. Este anlisis se denomina segmentacin de mercado, y en l se examina el impacto de nuestro producto en distintos segmentos del mercado (tambin denominado penetracin del producto). Algunos de estos segmentos pueden ser: Edad (no es lo mismo vender bebidas refrescantes a nios que a personas

ancianas). Sexo (es muy diferente vender cosmticos a hombres que a mujeres). Poder adquisitivo (por mucho que un coche deportivo sea un producto muy

deseado, no todos van a poder comprarlo). Nivel cultural (un disco de OT tiene un pblico final mucho ms amplio que

una pera de Wagner). Idioma (un libro en cataln puede tener mucha aceptacin en Catalua...

aunque no tanta en el resto de Espaa).


Factores econmicos Otro factor muy importante es la valoracin econmica de la IDEA. Dado que esperamos que nuestro proyecto tenga beneficios, es necesario decidir dos factores principales: el precio del producto y los costes del proyecto (y obviamente se tiene que producir un beneficio para que el proyecto sea viable). Coste del producto: Se deber elegir un coste adecuado para el producto a

vender. Es necesario tener en cuenta que, aunque podamos ahorrar algunos costes (tiendas comerciales, distribuidores, etc.), aparecen otros (transporte, por ejemplo), siendo obligatorio que el precio sea competitivo con los de una tienda.

Costes del proyecto: Los costes del proyecto se dividen en dos bloques

principales: Puesta en marcha y mantenimiento.

o Puesta en marcha: Los asociados al inicio del proyecto, se aplican como inversin inicial (compra de material informtico, de oficina, etc.).

o Mantenimiento: Los costes mensuales que acarrea el desarrollo de la empresa (alquiler de locales, personal, publicidad, etc.).

Es muy importante detallar al mximo las previsiones de costes (tanto en gastos como en ingresos), as como realizarlas de forma racional y realista. El xito de un proyecto depende en buena manera de un pronstico acertado de estas previsiones.


Herramientas de las que disponemos A la hora de realizar el estudio de viabilidad disponemos de Internet como fuente principal de recopilacin de informacin y anlisis. Vamos a presentar algunas herramientas que pueden ayudarnos en esta fase del estudio.

Informacin sobre la situacin del Comercio Electrnico

La sociedad de la informacin en Espaa 2008 Telefnica

http://www.telefonica.es/sociedaddelainformacion/html/informes_home.shtml

Observatorio Aragons de la Sociedad de la Informacin

http://www.observatorioaragones.org/

Informe anual sobre la sociedad en red 2009 - ONTSI

http://www.ontsi.red.es/informes-anuales/articles/id/3779/informe-anual-2008-edicion-2009.html

Asociacin Espaola de Comercio Electrnico y Marketing Relacional CE 2008

http://www.aecem.org/emailing/2008/docs/B2C08.pdf

Alexa http://www.alexa.com/ Alexa es una empresa dedicada a ofrecer una especie de lo ms visitado en Internet. Tiene una barra de herramientas toma nota de las visitas realizadas por sus usuarios (como si fuera un monitor de audiencia de los que se colocan en las televisiones de las casas para hacer encuestas). Ofrece una muy completa visin de las empresas mejores situadas en cada sector. Ideal para estudiar a la competencia.

Google www.google.com Google es el buscador por excelencia. Si buscas algo, Google es el primer lugar en el que buscar. Aunque empleemos en nuestras bsquedas herramientas ms dirigidas, Google es una herramienta de utilidad inestimable. Dos herramientas de su toolbox van a sernos de gran utilidad, como reseamos a continuacin. Froogle (http://froogle.google.com): Buscador de productos en Internet, con

precios incluidos. Muy interesante tanto para detectar a la competencia como para ver sus precios.

Google Sets (http://labs.google.com/sets): Creador de grupos asociativos.

En funcin de un conjunto de palabras busca en Internet y sugiere palabras similares. Muy til para buscar marcas de un producto.


Eleccin de un nombre Para saber si nuestra idea de nombre est libre, podemos acudir a los siguientes lugares encargados de la gestin de dominios web: Network Solutions ( para dominios .com .net y .org entre otros ) http://www.networksolutions.com ESNIC (para dominios .es) http://www.nic.es

Trabajo a realizar durante la prctica A lo largo de toda la prctica se deber realizar un Estudio de Viabilidad del proyecto de comercio electrnico elegido. Dicho informe deber constituir un alegato a favor del proyecto, y debera incluir al menos los siguientes elementos: Descripcin completa del producto y sus caractersticas.

Motivo de su eleccin.

Ventajas y desventajas del producto.

Estructura de comercio electrnico adoptada.

Nombre de la web del proyecto.

Estudio del mercado del producto, as como de la competencia (puntos a

favor y en contra de la misma, experiencia obtenible).

Segmento de mercado al que se dirige el producto.

Estudio de costes asociados al proyecto. El Estudio deber dar la mayor cantidad de detalles y de argumentos positivos para la adopcin del proyecto, y constar como primer captulo del Informe Final de todas las prcticas.

Comercio Electrnico

Prctica 2: Arquitecturas de

informacin y usabilidad



Comercio Electrnico P2 AI y Usabilidad 2 de 5

Objetivo de la prctica Una vez definida en la prctica anterior la idea principal del proyecto de comercio electrnico, se va a pasar a la creacin y posicionamiento de la informacin dentro de nuestro proyecto de comercio electrnico. Los puntos ms importantes de la prctica sern la arquitectura de los contenidos y la usabilidad.

Qu hay preparar de forma previa a la prctica? Es necesario haber pensado en la idea de proyecto a realizar, as como en las posibles secciones y elementos que van a estar incluidos en la misma.

Cul es el resultado de la prctica? El resultado de la prctica es un esquema de nuestro proyecto de comercio electrnico en el que la informacin est dispuesta de forma ptima, a la vez que se han tenido en cuenta las directrices necesarias para maximizar la usabilidad del mismo.

Qu se aprende con esta prctica? Se aprenden los conceptos bsicos de arquitecturas de informacin que permiten organizar y distribuir la informacin de nuestro proyecto de comercio electrnico de forma inteligente y ptima. Dentro de la usabilidad, se establecen las bases para que el alumno pueda definir sus propias directrices de usabilidad, aplicables tanto a su proyecto como a cualquier otro que desarrolle.

Introduccin Los conceptos que se van a desarrollar en la prctica ya estn descritos en la teora, por lo que en este guin se plantean una serie de enlaces adicionales en los que el alumno puede encontrar ms informacin til para realizar la prctica.

Arquitecturas de Informacin En esta parte de la prctica se deber desarrollar sobre el papel todos y cada uno de los elementos de los que va a estar compuesto nuestro proyecto. Ser necesario hacer un listado de todos los componentes que van a formar nuestro proyecto, para luego poder proceder a su clasificacin, etiquetado y ordenacin. Se requiere tambin no slo pensar en la parte pblica del proyecto, sino pensar tambin en las herramientas necesarias para la administracin del mismo (gestin de pedidos, anlisis de visitas de usuarios, etc).


Se muestran a continuacin una serie de enlaces que pueden servir de ayuda e ilustrar varios de los conceptos vistos en la teora (se recomienda tambin tomar como base el ejemplo de Aragourmet.com, disponible en la web).

Clasificacin alfabtica http://www.azlyrics.com/ Clasificacin geogrfica http://www.pcbox.com/mapa/default.asp?lan=es&cnt=es&seccion=4 Clasificacin por audiencia http://www.uco.es/ Clasificacin por tarea http://www.paypal.com/ Clasificacin por categora http://es.wikipedia.org/wiki/Plantilla:Categor%C3%ADas Mens desplegables http://i3a.unizar.es Mens de servicios http://www.elmundo.es Pie de pgina http://www.amazon.com Miguitas de pan http://www.alexa.com Botones de Inicio http://barrapunto.com/ Mapa web de Correos http://www.correos.es/contenido/00-MenuRec1/mapaweb.asp Mapa web del Ayuntamiento de Zaragoza http://www.zaragoza.es/ciudad/servicios/mapaweb.htm Motor de bsqueda http://www.google.es Asilomar Institute for Information Architecture http://iainstitute.org/ IASlash.org AI Blog http://www.iaslash.org/


Requisitos de programacin Como parte de la planificacin del proyecto de negocio electrnico, ser necesario definir los requisitos funcionales de programacin que vamos a necesitar para el desarrollo de la misma. El objetivo principal es programar todas las funcionalidades que necesitemos para que todo el proyecto pueda ser gestionado por personal que posea conocimientos bsicos de informtica. Ejemplo: Funcin de gestin de bases de datos: Conjunto de funciones necesarias para conectarnos a la base de datos y poder introducir informacin y modificarla.

Usabilidad Como se vio en teora, ser necesario analizar la estructura del proyecto, y crear un documento con las directrices de usabilidad necesarias para facilitar y mejorar el uso del proyecto por parte de nuestros clientes. Estas directrices sern plasmadas en DOS bocetos de diseo, que sern la base para su diseo en prcticas posteriores. Se muestran a continuacin una serie de enlaces de inters relacionados con la usabilidad: Excelentes consejos sobre creacin de proyectos Web

http://www.webdesignfromscratch.com/web_design_process.cfm WebDesignPractices Conceptos de usabilidad y diseo web muy bien explicados http://www.webdesignpractices.com

Usability.gov Muy buenas guas y checklist de usabilidad http://usability.gov Usable web Recursos de Usabilidad http://instone.org Blog de diseo y usabilidad http://www.alzado.org http://usalo.es WebSchools Estadsticas de uso de navegadores y resoluciones http://www.w3schools.com/browsers/browsers_stats.asp Artculos sobre la importancia del color http://www.coolhomepages.com/cda/color http://desktoppub.about.com/cs/color/a/symbolism.htm http://www.sibagraphics.com/colour.php

WAI Web Accesibility Initiative http://www.w3.org/WAI/ Diseo Centrado en usuario http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html


Trabajo a realizar durante la prctica Como resultado de la prctica dentro del trabajo total se deben entregar los siguientes documentos:

Arquitectura de contenidos del proyecto de comercio electrnico. Requisitos de programacin del proyecto. Dos bocetos de diseo del proyecto. Directrices de usabilidad del proyecto.

Estudio de usabilidad de dos web que puedan ser competencia.

[Opcional]: Preparar un test de usuario en el que se presente tanto la

estructura de contenidos como el diseo de la pgina. Realizar dicho test de usuario con al menos DOS personas con conocimientos de informtica a nivel de usuario, en el que recoger los comentarios de los usuarios, analizarlos y extraer conclusiones.

Comercio Electrnico

Practica 3: Infraestructuras Web



Comercio Electrnico P3 Infraestructuras Web 2 de 11

Objetivo de la prctica Definir los diversos elementos de una infraestructura de comercio electrnico, y familiarizarse con los aspectos bsicos de configuracin y manejo. Se tratarn aspectos como servidores web, bases de datos y servidores de FTP.

Qu hay preparar de forma previa a la prctica? En un principio no hay que llevar nada previo a la prctica, pero sera recomendable el tener frescos algunos conceptos de protocolos de comunicaciones. Saber lo que es una direccin IP, un puerto, y cmo se establece una conexin TCP ser importante para la comprensin total de la misma. Dado que gran parte de la prctica se va a realizar en un shell de Windows, sera interesante el saber cmo manejarse en este entorno (cambiar de directorio, copiar y renombrar archivos, etc.).

Cul es el resultado de la prctica? El resultado final es una infraestructura completa sobre la cual podemos empezar a desarrollar de forma real el proyecto de comercio electrnico. Dentro del trabajo total se debern entregar de forma electrnica los ficheros que se requieren en cada apartado.

Qu se aprende con esta prctica? Se aprende a instalar y configurar de forma funcional los diversos elementos que puede tener un proyecto de comercio electrnico a nivel de infraestructura bsica, es decir: servidor web, bases de datos y transferencia de la informacin.

Introduccin Una vez definidos en la prctica anterior todos los aspectos de diseo de nuestra proyecto de comercio electrnico se plantea la necesidad de comenzar la implementacin del proyecto. Todas los proyectos de comercio electrnico estn compuestas de al menos cuatro elementos bsicos:

Una forma de presentar la informacin.

Una forma de almacenar la informacin.

Una forma de tratar la informacin.

Una forma de transferir informacin.


La forma ms comn de presentar la informacin es mediante un Servidor Web. Dicho servidor tiene unos contenidos (o pginas) en su interior que muestra mediante el protocolo HTTP. Dicho protocolo es interpretado por los navegadores para mostrar la informacin al usuario. Los servidores web ms empleados actualmente son Apache (disponible en http://httpd.apache.org/) e IIS (Internet Information Server), disponible con cualquier versin de servidor de Windows. El almacenamiento de la informacin es otro factor crucial de la infraestructura tcnica. El mtodo ms usual de almacenar la informacin se realiza a travs de una Base de Datos. Una base de datos almacena la informacin deseada y la entrega de forma rpida y coherente, evitando prdidas de informacin y ofreciendo una serie de servicios adicionales al desarrollador). Algunas de las bases de datos ms empleadas son MySQL (http://www.mysql.com/), Oracle (http://www.oracle.com/) y SQL Server, disponible para Windows en http://www.microsoft.com/spain/sql/downloads/default.mspx (es posible descargar una versin reducida pero gratuita de SQL Server desde la siguiente URL: http://www.microsoft.com/sql/downloads/default.mspx). Teniendo ya un medio para almacenar la informacin y para mostrarla, lo nico que hace falta es disponer de un medio de tratar la informacin de forma que podamos mostrarla a nuestro antojo (por ejemplo, mediante un motor de bsquedas). Dichos servicios se realizan mediante un Lenguaje de Programacin. Actualmente existen muchos lenguajes de programacin, pero si nos centramos en los orientados a web (con grandes facilidades de acceso a bases de datos y de generacin de cdigo HTML), los dos ms importantes son PHP (http://www.php.net) y (para Windows) ASP (http://msdn.microsoft.com/asp.net). El lenguaje PHP se ver con ms detenimiento en prcticas posteriores. Estos tres puntos forman el soporte principal de una infraestructura de comercio electrnico. Sin embargo, existen otros muchos Servicios de Apoyo que ofrecen funcionalidades muy interesantes, como pueden ser:

Servicios de transferencia de ficheros (para mover contenidos en nuestra pgina web).

Clientes grficos de bases de datos (para acceder de forma remota a

nuestra base de datos).

Servicios de correo electrnico (para enviar correos electrnicos a nuestros usuarios).

Durante la prctica se va a emplear un paquete integrado denominado XAMPP (Windows, Apache, MySQL, Perl y PHP) que puede ser descargado de forma gratuita desde: http://www.apachefriends.org/en/xampp-windows.html


Servidor Web: Apache El servidor web Apache es a da de hoy el ms empleado para servir pginas web en todo el mundo (pueden verse las estadsticas de cuota de mercado de los principales servidores en Netcraft) :

http://news.netcraft.com/archives/web_server_survey.html

Una de las ventajas principales de Apache (aparte de ser open source, por lo que su coste es nulo, y se dispone de su cdigo fuente para realizar modificaciones al gusto) es su disponibilidad tanto para entornos Linux como Windows. La estructura de directorios es la misma, y los ficheros de configuracin solo difieren en los path empleados (C:\xampp\apache\datos frente a /opt/apache/datos, por ejemplo). La instalacin de XAMPP no tiene misterio alguno (tan solo se tendr que tener cuidado de no instalar los componentes como servicios, ya que no disponemos de privilegios de administrador en el equipo). XAMPP tiene un cmodo panel de control que nos permite arrancar de forma manual los diversos componentes disponibles. Una vez est arrancado de forma exitosa, puede ser accedido mediante un navegador en la direccin: http://localhost La estructura de directorios de Apache es la siguiente:

Bin: Almacena los binarios del programa. Conf: Localiza los ficheros de configuracin del Apache. Error: En este directorio se guardan las respuestas a los distintos mensajes

de error (como por ejemplo, el tpico Error 404: Not Found que aparece cuando una pgina web concreta no existe).

Icons: Centraliza los iconos e imgenes del programa Logs: Almacena los logs de acceso y error del Apache. Modules: Guarda los distintos mdulos que Apache carga al arrancar. Htdocs: En este directorio se guardan de forma inicial las pginas web que

muestra nuestro servidor (situado en un nivel superior). Cgi-bin: Directorio utilizado para guardar los programas que tengan que

tener permisos de ejecucin (tpicamente, los cgi escritos en C u otros programas). Situado en un nivel superior.

Configuracin de Apache: httpd.conf Todos los aspectos de configuracin de Apache son controlados por un fichero de configuracin denominado httpd.conf. Vamos a tratar las opciones ms interesantes del mismo:

Server Root Indica el directorio raiz del que colgarn el resto de directorios del fichero de configuracin ServerRoot "D:/xampp/apache"


Listen Especifica los puertos en los que va a estar escuchando el Apache. El puerto estndar es el 80, pero es posible colocarlo en el que deseemos (8080 es una posibilidad que se usa por problemas de permisos frecuentemente). Listen 80

Configuracin del PHP dentro del Apache Esta lnea indica que todos los ficheros con dichas extensiones sean pasados al intrprete de PHP en lugar de al navegador (es decir, que sean ejecutados). AddType application/x-httpd-php .php .php4 .php3 .phtml

Alias Especifican atajos para acceder a un directorio Alias /phpmyadmin "D:/xampp/phpmyadmin/"

ServerAdmin Especifica la direccin de correo electrnico a usar en caso de querer contactar con el administrador de la pgina ServerAdmin admin@localhost

ServerName Especifica el nombre DNS de la pgina web ServerName localhost

DocumentRoot Especifica el directorio inicial de nuestras pginas web. Un consejo es localizarlo fuera del mbito del servidor web (para tener una separacin clara entre pginas y programa, y que una actualizacin del software no borre sin querer nuestra web...). DocumentRoot "D:/web/htdocs"


Logs La primera directiva indica el nivel de log que se toma de la actividad del servidor, mientras que las dos siguientes indican la localizacin del log de errores y del de acceso a la web (este ltimo se usa para generar las estadsticas del servidor). LogLevel error ErrorLog logs/error.log CustomLog logs/access.log common

Virtual Hosts Es frecuente que se emplee un nico equipo para dar servicio a ms de un proyecto de comercio electrnico o pgina web. Para ofrecer esa multiplicidad de servicio se recurre a lo que se denominan hosts virtuales. En la configuracin de Apache ser necesario crear una seccin diferente para cada nombre de dominio (tambin puede hacerse por direcciones IP, pero es ms complicado). NameVirtualHost * ServerName www.domain.tld DocumentRoot /www/domain ServerName www.otherdomain.tld DocumentRoot /www/otherdomain La configuracin de SSL (Secure Socket Layer) que ofrece seguridad en las transacciones, se ver en prcticas posteriores.


Bases de datos: MySQL + SQL + PHPMyAdmin Mysql es una base de datos potente y de gran rapidez, muy empleada en entornos orientados a pginas web al integrarse con facilidad con Apache y PHP. Una de las ventajas inherentes es que est disponible tanto en entornos Windows como Linux/Unix, siendo la configuracin altamente parecida. La informacin en MySQL est almacenada en tres niveles:

Base de datos: El conjunto global de la informacin. Es posible tener una base de datos para cada empresa o departamento.

Tabla: Dentro de una base de datos propia, existen varias tablas, cada una

con informacin relacionada (personal, ventas, discos, etc.).

Campo: Cada tabla tiene una serie de campos que almacenan la informacin necesaria (nombre, DNI, telfono, etc.).

Es muy importante el realizar un diseo adecuado de la informacin para que las bsquedas sean lo ms rpidas posibles (es decir, poner los datos que se tengan que recoger de una sola vez en una tabla, para no tener que realizar bsquedas mltiples). La estructura de directorios de MySQL es la siguiente (dentro de %XAMPP% ): /bin: Contiene los binarios de cliente y administrador de la base de datos, as

como un script que lanza el servicio. /lib: Contiene las libreras dinmicas de MySQL (que son necesarias para el

PHP). /data: Contiene tanto los mensajes de error como las propias bases de datos de

MySQL. MySQL puede arrancarse y detenerse mediante los scripts existentes en el directorio de %XAMPP%, aunque tambin puede instalarse como servicio de Windows mediante el script mysql_installservice.bat situado en el directorio mysql. Es MUY importante detener MySQL mediante los scripts, o mediante el comando mysqladmin shutdown para evitar la prdida de datos de nuestra base. Es posible acceder a la base de datos en modo texto mediante el comando mysql (para ello previamente accederemos a InicioEjecutarcmd para lanzar una ventana de DOS, y nos coloraremos en %XAMPP%\mysql\bin). Algunas de las rdenes ms bsicas del cliente son las siguientes:

Show databases: Muestra las bases de datos disponibles. Use database: Selecciona una base de datos para su uso posterior. Drop database: Borra una base de datos, eliminando toda la informacin. Show tables: Muestra las tablas de una base de datos. Describe tabla: Describe los campos de una tabla. Quit: Sale del programa


SQL 101 El SQL (Simple Query Language) es un lenguaje de bases de datos adoptado por prcticamente todas las bases de datos actuales. Aunque cada base de datos tiene sus propias particularidades y funcionalidades propias, el conjunto de rdenes bsicas se sigue manteniendo como un estndar. Algunos de los comandos bsicos de SQL son: Query o consulta estndar: comando SELECT

SELECT * FROM table ; SELECT * FROM table WHERE nombre=Juan; SELECT nombre, telefono FROM table ;

Crear tablas o bases de datos : comando CREATE CREATE database nombre; CREATE TABLE clientes (name VARCHAR(64), empresa

VARCHAR(64), mail VARCHAR(20) ); Borrar tables o bases de datos: comando DROP DROP database nombre; DROP table nombre ; Insertar datos en una base de datos: comando INSERT

INSERT INTO tabla (nombre, ciudad) VALUES(jose, zaragoza);

Borrar datos de una base de datos: comando DELETE DELETE FROM tabla where campo=dato; Modificar datos: comando UPDATE UPDATE tabla SET campoa= dato1 WHERE campob='dato2'; Permisos sobre la base de datos: comando GRANT y REVOKE GRANT ALL ON database.* TO username; REVOKE ALL ON database.* FROM username; FLUSH PRIVILEGES; (para aplicar los cambios) Pueden encontrarse ms comandos y ms detalles en la referencia del lenguaje, en:

http://dev.mysql.com/doc/ Algunas de las tareas de administracin ms comunes pueden ser: Cambiar la contrasea de root:

UPDATE user SET Password= PASSWORD('new_password') WHERE user='root'; FLUSH PRIVILEGES;


Aadir un Nuevo usuario a la BBDD:

INSERT INTO user VALUES ('localhost','USUARIO','','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y');

Cargar datos a partir de un fichero: Insertar los datos a razn de una entrada

por lnea, en el mismo orden el que se cre la tabla y separados por tabuladores. En el caso de que un campo sea nulo, se simboliza con \N (tambin tabulado):

LOAD DATA LOCAL INFILE "datos.txt" INTO TABLE clientes;

Ejecutar conjuntos de comandos: Un comando por lnea, terminado en ;,

grabado en un fichero de texto. Se ejecuta el comando mediante: C:\ mysql < fichero_comandos Realizar copias de seguridad: Cada base de datos tiene un directorio con todos

sus ficheros, bajo el subdirectorio %XAMPP%\mysql\data. La copia de seguridad es tan sencilla como copiar ese directorio.

PHPMyAdmin Dado que gran parte de las tareas de administracin son costosas de realizar mediante lnea de comandos, existe la posibilidad de emplear un interface va web para realizar la gestin de una base de datos (solo si tenemos un servidor web en la misma mquina). Dicho interface se denomina PHPMyAdmin, y puede ser accedido mediante:

http://localhost/phpmyadmin

Mantenimiento de contenidos: Servicio FTP Una vez establecida la pgina web, es necesario definir un mecanismo mediante el cual se puedan modificar los contenidos de la infraestructura de comercio electrnico (introducir productos en el catlogo, poner nuevas noticias, etc ... ). El mecanismo ms empleado para dicha tarea es el servicio de transferencia de ficheros o FTP (File Transfer Protocol), aunque hay otras formas de transferir informacin (como puede ser directamente mediante HTTP o mediante la funcin de copia segura de SSH empleando SCP). FTP es un protocolo cliente/servidor, por lo que para poder emplearlo necesitaremos en el equipo cuyos contenidos queramos gestionar un servidor de FTP. El que vamos a emplear bajo Windows en este caso es el FileZilla FTP Server, un servidor de FTP open source que aunque est incluido en XAMPP puede ser descargado de forma independiente desde :

http://sourceforge.net/projects/filezilla/


Bajo entornos Linux puede ser usado el ProFTPD (http://www.proftpd.org/) con caractersticas muy similares. Para instalar de forma exitosa el FileZilla, tan solo ser necesario hacer que se ejecute como servicio de Windows. Bastar con seleccionar la carpeta de FileZillaFTP, y ejecutar FileZillaServer.exe, seleccionando las opciones de Instalar Servicio y Iniciar al arranque (sern necesarios privilegios de administrador, como hemos indicado con anterioridad). Para arrancarlo pulsaremos sobre la tarea FileZillaFTP_start.bat, y para apagarlo sobre FileZillaFTP_stop.bat. Una vez arrancado el servicio, podemos hacer pruebas con cualquier cliente de FTP para verificar su correcto funcionamiento. Se arrancar un cliente de FTP de Windows en modo texto mediante Inicio Ejecutar cmd, y tecleando: ftp localhost Ser necesario introducir un nombre de usuario y una contrasea. FTP permite un modo de acceso denominado anonymous FTP, por el cual es posible acceder a una parte muy restringida del servidor sin introducir una contrasea (muy til para establecer una zona de descargas pblica). Se introducir pues anonymous como nombre de usuario, y contrasea en blanco. Algunos comandos bsicos del FTP son los siguientes:

ls: Lista los ficheros de un directorio cd directorio: Permite acceder al directorio cd..: Subimos un directorio hacia arriba pwd: Especifica la ruta de directorios !ls: Lista los ficheros del directorio de la mquina cliente BIN: Activa el modo de transferencia binario HASH: Se muestra el proceso de descarga mediante una barra de # GET fichero: Descarga el fichero indicado del servidor PUT fichero: Coloca el fichero indicado en el servidor QUIT: Cierra la sesin

Puede verse que es posible descargar ficheros del servidor, pero no se puede escribir ms que en el directorio incoming, debido a la estructura de permisos del servidor. De la misma forma, por mucho que subamos en la estructura de directorios, no vamos a poder ver el resto de ficheros del sistema. Esto es debido a que el servidor de FTP enjaula al usuario dentro de una estructura acotada para que no pueda salir de ella (mediante lo que se llama chrooting, tcnica muy til y empleada con frecuencia en los servidores de FTP). Para cambiar la configuracin del servidor de FTP accederemos al programa FileZilla Server Interface, a la seccin de Edit Settings/Users/Groups, que nos permitir modificar varios parmetros de la configuracin del mismo (as como ver la actividad de nuestro servidor de FTP).


Trabajo a realizar durante la prctica Entregar un fichero de configuracin httpd.conf en el que se resalten los

cambios en la configuracin para nuestro proyecto de comercio electrnico. Disear la estructura de datos de al menos dos tablas de datos del proyecto,

teniendo en cuenta el nombre y el tipo de dato de cada variable.

Se deber entregar el resultado en forma de fichero que pueda ser cargado de forma automtica en la base de datos (es decir, una concatenacin de sentencias SQL).

Modificar la configuracin del servidor de FTP para que:

o Presente un mensaje de bienvenida adecuado. o Permita el acceso nicamente desde una subred de clase C. o Guarde registros o logs de la actividad. o Existan dos usuarios: imgenes y ftp. El primero slo tiene derechos sobre

las carpetas de imgenes, y el resto sobre todos los ficheros. Los directorios de entrada y los permisos debern estar ajustados al mximo posible.

Se debern entregar los ficheros FileZilla Server.xml y \Logs\ FileZilla Server.log junto con la explicacin de la configuracin del servidor.

Comercio Electrnico

Prctica 4: Edicin de contenidos web



Comercio Electrnico P4 Edicin de contenidos Web 2 de 13

Objetivo de la prctica En esta prctica se pretende realizar una introduccin a las tecnologas existentes para la creacin de contenidos web tanto estticos como dinmicos. Se proporcionar al alumno unos conocimientos bsicos de HTML y CSS para que pueda aplicarlos al proyecto de comercio electrnico.

Qu hay que preparar de forma previa a la prctica? Dado que en esta prctica se va a empezar a trabajar con el servidor web y con el servidor de FTP instalados en la prctica anterior, es necesario repasar dicha prctica y asegurarse de que ambos servicios se estn ejecutando correctamente. Ser de especial importancia el tener bien configurado tanto la directiva Document Root del Apache como el usuario y contrasea (junto con sus permisos de acceso) del servidor de FTP para que el acceso a la web por FTP sea correcto.

Cul es el resultado de la prctica? El resultado es un boceto de diseo de la pgina principal del proyecto de comercio electrnico, empleado HTML y CSS.

Qu se aprende con esta prctica? Se aprenden unos principios de diseo y construccin de pginas web empleando las tecnologas ms usadas en la actualidad y empleando un entorno de desarrollo totalmente libre y configurable.

Introduccin Una vez tenida la idea y habiendo pensado y organizado toda la informacin que vamos a ofrecer en nuestro proyecto de comercio electrnico, llega el momento de plasmar todos esos contenidos en la creacin de la propia pgina web. Para ello se va a emplear el lenguaje HTML (HyperText Markup Language, o Lenguaje de Marcas de HiperTexto), que en su versin 4.0 ya empieza a tener una acepcin casi total por todos los programas de diseo de pginas web (y mucho ms importante, por los navegadores). Despus de ver los rudimentos de HTML pasaremos a las hojas de estilo (tambin llamadas CSS o Cascading Style Sheets), que permiten definir propiedades a nivel de un sitio web completo, ahorrando una importante cantidad de trabajo a la hora de definir el aspecto global de un sitio web.


HTML (HyperText Markup Language) HTML es un lenguaje interpretado, no compilado. Cuando un cliente se conecta a nuestro servidor y pide que se le entregue una pgina web mediante el protocolo HTTP, el servidor busca la pgina y la entrega al navegador. Es tarea entonces del navegador empleado el interpretar dicha pgina y mostrarla por pantalla al cliente (es por eso que una pgina web se puede ver de diferentes formas en funcin de los navegadores y las caractersticas de los ordenadores empleados). El lenguaje HTML es lo que se denomina un lenguaje de marcas. Todos los comandos de HTML estn regidos por lo que se llaman tags o etiquetas, de forma que un ejemplo de tag HTML podra ser: < COMANDO> Texto a tratar < / COMANDO > Los comandos van entre los caracteres , y se distingue el inicio del comando del fin del mismo mediante el carcter /. A continuacin vamos a ver los Tags HTML ms empleados en el diseo de pginas web.

Editor Web - PHP DESIGNER Aunque es posible disear pginas completas con un editor de textos totalmente bsico (como el Bloc de Notas de Windows o el vi de Linux), siempre es recomendable el tener un entorno de desarrollo lo ms amigable posible para que nos facilite el desarrollo de la pgina web. Dentro del desarrollo de pginas web es muy interesante el encontrar editores que tengan al menos las siguientes caractersticas:

Ser WYSIWYG (What you see is what you get o Lo que ves es lo que hay): Estos editores permiten ver el aspecto de la web que estamos construyendo en el propio programa sin tener que subir el contenido a la pgina web.

Tener la capacidad de soportar visores externos: Al poder ver el aspecto de

nuestra web en nuestro navegador local, podemos estudiar la compatibilidad con los navegadores (as como ver el aspecto definitivo de la web).

Tener clientes integrados de FTP/SSH: De esta forma desde el propio

programa podemos conectarnos al servidor y actualizar nuestra web. A lo largo de la prctica se va a emplear el editor PHP Designer (que usaremos tanto para el HTML como para el PHP), que tiene las caractersticas indicadas anteriormente. La instalacin del programa no tiene misterio alguno (aunque s que ser necesario instalarlo en un directorio diferente para cada grupo de prcticas). Una vez instalado el PHP Designer, lo primero que se tendr que hacer es crear un sitio web dentro del programa (un directorio bajo el cual estn guardadas todas las pginas que se vayan creando).


En primer lugar, tendremos que asegurarnos de que tanto el servidor web como el servidor de FTP estn arrancados correctamente (son necesarios para el desarrollo de la prctica). A continuacin arrancaremos el PHP Designer y accederemos al botn de FTP, dentro de la pestaa de Task Panels. Una vez all pulsaremos sobre Connect to Server, indicando los parmetros necesarios para la conexin:

Site Name: El nombre que le queramos dar a nuestro sitio web. Hostname: El nombre o direccin IP de nuestro servidor FTP. UserName: Usuario definido en el servidor web Password: Contrasea de dicho usuario Port: El puerto en el que est escuchando el servidor FTP (21 por defecto).

Una vez introducidos los datos, se pulsar sobre New Site para que lo cree. Si todo ha ido bien en la pestaa de la izquierda aparecer nuestro sitio web definido con la estructura de carpetas del XAMPP (que deberemos borrar para dejar nuestro sitio web totalmente limpio y listo para usar).

Estructura bsica de una web Los tags HTML bsicos (el esqueleto mnimo que tiene que tener toda pgina web) son los siguientes:

Indica el principio del cdigo HTML Indica la cabecera Indica el ttulo que tiene la propia web en el navegador El inicio del texto de la propia web

Un Hola Mundo!! en HTML sera algo tan sencillo como :

Mi primera web

Hola , mundo !!

Una vez hayamos depurado este cdigo, se tendr que guardar dicha pgina en local (crear un directorio en D:\ que tenga vuestro nombre y grupo de prctica) antes de poder subirlo al servidor. Para poder publicar (o subir en la jerga) vuestra web tan solo ser necesario pulsar en la pestaa de FTP de los Task Panels del PHP Designer, seleccionando la opcin de Upload Files (es necesario haber configurado y probado la conexin por FTP con anterioridad). Nota: En este caso concreto tanto el programa con el que se crea la web como el propio servidor estn en el mismo equipo, siendo los ficheros que tengamos en el servidor web y en nuestra carpeta local exactamente los mismos. Se podra plantear la solucin de copiar de un directorio a otro, pero dicha solucin solo valdra para este caso, ya que lo normal es que el servidor web est en otro equipo remoto, siendo necesario el uso de FTP para la publicacin de contenidos.


Tratamiento de texto en HTML Como se ha podido comprobar en el ejemplo anterior HTML deja escribir texto tal cual, sin ponerle pega alguna (pero tambin sin ponerle formato). Los siguientes tags HTML permiten actuar sobre el texto: Nuevo prrafo. Muy til para separar texto. (paragraph) Salto de lnea (es uno de los pocos tags que no tiene un ) (break) Texto en negrita (bold) Texto en cursiva (italic) Texto centrado Es interesante el indicar que los tags de HTML no son sensibles a las maysculas ( y producirn el mismo resultado).

Caracteres especiales Como ya veremos en la parte de formularios, hay ciertos caracteres especiales que se muestren correctamente tienen que ser codificados de forma previa. Algunos de estos caracteres pueden ser los siguientes:

& & " " (espacio en blanco, se usa mucho como separador en tablas)

Afortunadamente PHP Designer nos realiza la codificacin de forma automtica para este tipo de caracteres.

Comentarios Es recomendable el introducir de cuando en cuando comentarios dentro del cdigo HTML para hacerlo ms legible (y facilitar las posibles modificaciones). Se considera como comentario todo lo que est entre estas cadenas:

Estos comentarios obviamente no saldrn reflejados en la pantalla. Se recomienda encarecidamente realizar un comentado inteligente del cdigo generado (redundar de forma positiva en el desarrollo y mantenimiento del sitio web).


Enlaces La forma principal de conducir a los usuarios por nuestra pgina web se realiza a travs de los enlaces. Un enlace puede tener la forma siguiente:

Universidad de Zaragoza donde el texto que sigue a HREF es la URL y el texto entre el > y el es la representacin de ese enlace en la web (se pueden poner ambos textos iguales sin mucho problema). Un enlace puede apuntar a otra pgina web dentro de nuestro sitio web. En este caso, es muy importante el establecer la ruta o path relativo de forma correcta.

Nuestros productos

Tambin es posible que un enlace apunte a una web externa a la nuestra :

Rediris FTP Server

Y en algunos casos, que apunte a una direccin de correo :

Contacte con nosotros

Listas de elementos Una forma de presentar informacin ordenada en HTML puede conseguirse mediante el uso de listas ordenadas (con o sin numeracin). La sintaxis es la siguiente:

Lista sin numerar:

Uno Dos Tres

Lista numerada

Uno Dos Tres


Imgenes El insertar imgenes dentro de una pgina web es algo extremadamente sencillo. El tag HTML es el siguiente:

con los siguientes parmetros:

SRC = Imagen a incluir (con una ruta relativa, recordad) ALT = En caso de que la imagen no exista o no se pueda mostrar, texto que

se muestra como alternativa a la imagen. Recomendable ponerlo para mejorar la usabilidad y accesibilidad a la web.

ALIGN = Alineacin de la foto con respecto al texto WIDTH & HEIGHT = Altura y anchura de la imagen. Si la imagen es ms

grande que esos parmetros se ver empequeecida, y si es ms pequea se ver estirada. Se recomienda el emplear programas de retoque fotogrfico para dejar la imagen al tamao exacto necesitado.

Es muy fcil hacer que una imagen tenga insertado un enlace. Para ello unimos ambos tags HTML de la forma siguiente:

(el BORDER=0 se pone para que la imagen no tenga un borde azul, verificadlo)

Tablas Una de las formas ms comunes de presentar informacin en una web es a travs del uso de tablas (ya veremos en la prctica siguiente su fcil integracin con PHP). La sintaxis bsica de una tabla es la siguiente:

Fila 1 - Celda 1 Fila 1 - Celda 2



donde

TABLE = Indicador de principio y fin de tabla


TR = Nueva fila TD = Nueva columna

Se recomienda encarecidamente el ser muy cuidadosos con la sintaxis de las tablas, as como indexar el cdigo correctamente (es muy fcil tener tablas anidadas, y en esos casos seguir la legibilidad sin un cdigo indexado es altamente complicado).

Capas En los principios del diseo de pginas web se empleaba para la creacin de zonas de contenido lo que se denominaban frames o marcos. Aun cuando eran sencillos de crear, presentaban inconvenientes de cara al usuario (algunos navegadores no los entendan bien, otros los separaban en ficheros diferentes, etc.). La creacin de zonas de contenido se realiza en la actualidad mediante lo que se denominan capas o bloques de informacin mediante el tag . Lo fundamental de las capas es que pueden tener estilos (que permiten definir perfectamente todas las caractersticas del HTML generando un cdigo muy limpio).

CSS Hojas de Estilo Cuando se estn diseando sitios web complejos con una gran cantidad de pginas, es fcil ver que un cambio en el aspecto del sitio (por ejemplo, cambiar de color el fondo) obliga al diseador a cambiar todas las pginas del sitio, una tarea laboriosa y repetitiva. El tener que realizar esta labor a mano est causado por la unidad entre la estructura de la pgina y el aspecto de la misma, por lo que sera interesante el disponer de una herramienta que permitiera realmente separar el estilo de la estructura. Esta herramienta son las hojas de estilo o Cascading Style Sheets. Las caractersticas principales de una CSS son las siguientes:

Definen COMO mostrar elementos HTML. Se guardan en un fichero individual (no tienen porqu formar parte del

cdigo). Son parte del estndar HTML 4.0. Son apilables.

La sintaxis base de una CSS es la siguiente:

selector {propiedad: valor} Ej: body {color: black}

Si el valor tiene ms de una palabra, hay que ponerlo entre comillas, y si queremos poner ms de una propiedad, tenemos que usar punto y coma. Es tambin razonable para estilos complejos el reescribir cada propiedad en una lnea:

Ej1: p {font-family: "sans serif"} Ej2: p {text-align:center;color:red}


Ej3: p { text-align: center; color: black; font-family: arial }

Si queremos tratar varios elementos de un mismo tipo de forma diferente (por ejemplo, un prrafo alineado a la derecha y otro a la izquierda) podemos emplear el selector class de la forma siguiente:

Ej4: p.right {text-align: right} p.center {text-align: center}

Y aadir en nuestro HTML la etiqueta class para saber dnde aplicar cada estilo de la CSS:

Este parrafo ira alineado a la derecha. Este prrafo ira alineado a la izquierda .

Otra opcin muy til es la de crear estilos que no estn atados a elementos HTML (para poder emplearlos donde nosotros queramos). Estos estilos se crean empleando solamente el selector class de la forma siguiente:

Ej5: En la CSS: .centrado {text-align: center} En el HTML:

Este parrafo ira centrado

Tambin es posible el introducir comentarios dentro de la propia CSS (algo que se recomienda para la legibilidad de la misma).

Ej6: /* Esto es un comentario en una CSS */ La prctica ms comn en la actualidad para manejar hojas de estilo o CSS es tener todos los estilos en un fichero dentro de nuestro sitio web y hacer referencia al mismo dentro de nuestro cdigo HTML. Esta llamada se puede realizar de la forma siguiente:

Ej7:

Las hojas de estilo son anidables, es decir, podemos tener varias CSS que se aplican sobre un mismo documento (de ah viene la C de Cascading o en


cascada). El orden de prioridades ser el siguiente (de menos importante a ms importante):

- Las indicadas por el navegador - Hoja de estilos externa al HTML - Hoja de estilos interna al HTML - Estilo definido dentro de la propia etiqueta HTML

Otro concepto muy importante es el de validacin. Si nuestra CSS cumple con los estndares establecidos por el W3C ser un paso ms para que nuestra web sea visible en todos los navegadores y sistemas operativos. Podemos validar una CSS si usamos el validador del W3C, disponible en:

http://jigsaw.w3.org/css-validator/

Creacin de pginas web usando CSS Una de las ventajas principales de la creacin de pginas web empleando hojas de estilo es la posibilidad de separar en gran medida el texto de la presentacin del mismo. Dejando en el cdigo HTML una estructura de capas mediante la aplicacin de las etiquetas y aplicando clases a dichas etiquetas podemos conseguir pginas web muy limpias y con una facilidad de modificacin inmejorable. La estructura de una pgina de inicio empleando este sistema sera la siguiente:

Web de prueba cabecera menu Aqui va el contenido datos personales


Como se puede ver, se han creado varios bloques de contenido, asignando a cada uno de ellos una clase que definiremos a posteriori en la hoja de estilos. Podemos hacer dos comentarios adicionales:

- La definicin del DOCTYPE es una etiqueta necesaria para la correcta

interpretacin del texto por parte de algunos navegadores. - Es posible insertar bloques de contenido dentro de otros bloques de

contenido (como podemos ver, la capa con la clase container tiene dentro dos capas con clases men y contenido).

Como puede verse, en este cdigo HTML no se hace referencia alguna a la posicin de las capas, ni a los diferentes tipos de letra que puedan tener. Tan solo ser necesario especificar algunas caractersticas peculiares (algn texto en negrita, por ejemplo) porque el resto de caractersticas irn especificadas en la CSS, que podemos ver a continuacin:


Contenidos del fichero style.css /* Body: Cuerpo del texto, lo que se aplica si no hay ningn otro estilo que lo modifique */ body { background-color: #ddd; /* Color de fondo */ font-family: Vernada, Arial, Times; /* Tipo de letra a usar */ font-size: 11px; /* Tamao de la letra */ color: #666; /* Color de la letra */ margin: 5px; /* Margen con respecto a la capa */ } /* Header : Zona de contenido que se emplea como cabecera */ .header { margin: auto; /* Se emplea para que la capa se redimensione de forma automtica */ width: 740px; /* Tamao de la capa Escogido para 800x600 */ background-color: #ccc; padding: 8px; /* Zona de margen interior de la capa, se aplica en todos los bordes */ border: 2px solid #999; /* Zona de margen externo de la capa, con un color aplicado */ font-size: 15pt; font-weight: bold; text-align: right; /* Justificado del texto a la derecha */ /* 740 + 8x2 + 2x2 = 760 = espacio dejado para el navegador */ } /* Container : Contenedor que engloba al men y a la zona de contenido central */ .container { margin: auto; width: 760px; background-color: #FFF; margin-top: 2px; /* el margen se puede aplicar solo a un borde */ } /* Menu: Zona de contenido a la izquierda que contiene el men de navegacin */ .menu { background-color: #ccc; width: 150px; /* Un tamao recomendable para un menu */ float: left; /* Para que se apile a la izquierda */ } /* Contenido : Zona de contenido principal */ .contenido { width: 590px; /* 590 + 150 + 10 + 10 = 760 . Voil */ background-color: #eee; float: left; /* Se apila a la izda pero despus de la OTRA */ padding: 10px 10px 10px 10px; text-align: justify; color: #000; } /* Aadido especial para que el Firefox coopere */ .cleaner { clear: both; /* Esto impide que ninguna capa se acople a izda o dcha pone orden */ font-size: 1px; /* Firefox descarta las capas sin contenido, por eso ponemos un pixel */ } /* Pie de pagina : Para informacion de contacto u otras cosas */ .footer { clear: both; width: 760px; margin:auto; background-color: #FFF; margin-top: 2px; text-align: center; } Como puede verse, la capacidad de generar y modificar el cdigo es muy potente a la par que sencilla (puede consultarse toda la sintaxis completa de las CSS en http://www.w3.org/TR/REC-CSS2 ).


La eleccin de colores puede realizarse de una forma rudimentaria (lo profesional sera desde la paleta del Gimp, por ejemplo) escogiendo el cdigo HTML para cada color desde la siguiente URL:

http://www.visibone.com/colorlab/

Trabajo a realizar durante la prctica Se tiene que entregar como resultado de la prctica un boceto en HTML de lo que podra ser la pgina de inicio del proyecto de comercio electrnico. No tiene que ser en caso alguno una pgina web totalmente hecha y depurada, sino una aplicacin prctica de todas las tecnologas vistas a lo largo de la prctica, en concreto:

Ejemplos de todas las etiquetas HTML vistas en la prctica. Uso de una hoja de estilos.

Enlaces de inters Tutoriales sobre HTML CSS JavaScript PHP http://www.webestilo.com/ http://www.w3schools.com/default.asp Tutoriales sobre CSS http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/css_examples.asp Especificacin de CSS2 del W3C http://www.w3.org/TR/REC-CSS2 Herramienta de validacin online de CSS del W3C http://jigsaw.w3.org/css-validator/ W3Schools - Formularios http://www.w3schools.com/html/html_examples.asp Web Developers Handbook http://www.alvit.de/handbook/

p1_comelec.pdfcom_elec_p2_0809.pdfp3_comelec.pdfp4_comelec.pdf

PRACTICAS 1 A 4

Documents

Transcript of PRACTICAS 1 A 4