Practicas 1 A 4

Comercio Electrnico
Prctica 1: Estudio de
viabilidad de un
proyecto de comercio
electrnico
Antonio Sanz
ansanz@unizar.es
Rafael del Hoyo
rdelhoyo@ita.es
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
Comercio Electrnico P1 Estudio de viabilidad
2 de 8
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.
3 de 8
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.
4 de 8
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).
5 de 8
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.).
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.
6 de 8
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-2008edicion-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.
7 de 8
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.
8 de 8
Comercio Electrnico
Prctica 2:
Arquitecturas de
informacin y
usabilidad
Antonio Sanz
ansanz@unizar.es
Rafael del Hoyo
rdelhoyo@ita.es
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.

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.

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.

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).
Comercio Electrnico P2 AI y Usabilidad
2 de 5
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/
3 de 5
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
4 de 5

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.
5 de 5
Comercio Electrnico
Practica 3:
Infraestructuras Web
Antonio Sanz
ansanz@unizar.es
Rafael del Hoyo
rdelhoyo@ita.es
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.

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.).

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.

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.
Comercio Electrnico P3 Infraestructuras Web
2 de 11
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
3 de 11
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"
4 de 11
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"
5 de 11
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 *
<VirtualHost *>
ServerName www.domain.tld
DocumentRoot /www/domain
</VirtualHost>
<VirtualHost *>
ServerName www.otherdomain.tld
DocumentRoot /www/otherdomain
</VirtualHost>
La configuracin de SSL (Secure Socket Layer) que ofrece seguridad en las
transacciones, se ver en prcticas posteriores.
6 de 11
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
7 de 11
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;
8 de 11
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/
9 de 11
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
ejecute como servicio de Windows. Bastar con seleccionar la carpeta
FileZillaFTP, y ejecutar FileZillaServer.exe, seleccionando las opciones
Instalar Servicio y Iniciar al arranque (sern necesarios privilegios
administrador, como hemos indicado con anterioridad).
se
de
de
de
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).
10 de 11
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
o
o
o
Presente un mensaje de bienvenida adecuado.

Permita el acceso nicamente desde una subred de clase C.
Guarde registros o logs de la actividad.
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.
11 de 11
Comercio Electrnico
Prctica 4: Edicin de
contenidos web
Antonio Sanz
ansanz@unizar.es
Rafael del Hoyo
rdelhoyo@ita.es
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.

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

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.
Comercio Electrnico P4 Edicin de contenidos Web
2 de 13
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 >, 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).
3 de 13
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:
<html> Indica el principio del cdigo HTML
<head> Indica la cabecera
<title> Indica el ttulo que tiene la propia web en el navegador
<body> El inicio del texto de la propia web
Un Hola Mundo!! en HTML sera algo tan sencillo como :
<html>
<head>
<title> Mi primera web</title>
</head>
<body>
Hola , mundo !!
</body>
</html>
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.
4 de 13
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:
<P> </P> Nuevo prrafo. Muy til para separar texto. (paragraph)
<BR> Salto de lnea (es uno de los pocos tags que no tiene un </ >) (break)
<B> </B> Texto en negrita (bold)
<i> </i> Texto en cursiva (italic)
<CENTER> </CENTER> Texto centrado
Es interesante el indicar que los tags de HTML no son sensibles a las maysculas
(<B> y <b> 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).
5 de 13
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:
<A HREF="http://www.unizar.es/"> Universidad de Zaragoza </A>
donde el texto que sigue a HREF es la URL y el texto entre el > y el </A> 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.
<A HREF="login.html> Inicio de Sesin </A>
<A HREF="catalogo/inicio.html> Nuestros productos </A>
Tambin es posible que un enlace apunte a una web externa a la nuestra :
<A HREF="http://www.google.es> Si lo encuentra, busque aqu </A>
<A HREF="ftp://ftp.rediris.es> Rediris FTP Server </A>
Y en algunos casos, que apunte a una direccin de correo :
<A HREF="mailto:info@miproyecto.com"> Contacte con nosotros </A>
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:

<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
Lista numerada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
6 de 13
Imgenes
El insertar imgenes dentro de una pgina web es algo extremadamente sencillo. El
tag HTML es el siguiente:
<IMG SRC="imagen.gif" ALT="descripcion" ALIGN=TOP WIDTH=200
HEIGHT=115>
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:
<A HREF="ejemplo.html"><IMG SRC="imagen.gif" BORDER=0></A>
(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:
<TABLE BORDER>
<TR>
<TD>Fila 1 - Celda 1</TD>
</TR>
<TR>
</TR>

<TR>
</TR>
</TABLE>
donde
TABLE = Indicador de principio y fin de tabla
7 de 13
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 <DIV>. 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:
Ej2:
p {font-family: "sans serif"}

p {text-align:center;color:red}
8 de 13
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:
<p class="right">
Este parrafo ira alineado a la derecha.
</p>
<p class="left">
Este prrafo ira alineado a la izquierda .
</p>
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:
<p class="centrado">
Este parrafo ira centrado
</p>
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:
<head>
<link rel="stylesheet" type="text/css" href="mihoja.css" />
</head>
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
9 de 13
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 <DIV> 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Web de prueba</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div class="header">cabecera</div>
<div class="container">
<div class="menu">menu</div>
<div class="contenido">
Aqui va el contenido
</div>
<div class="cleaner"> </div>
</div>
<div class="footer">datos personales</div>
</body>
</html>
10 de 13
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:
11 de 13
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;
font-family: Vernada, Arial, Times;
font-size: 11px;
color: #666;
margin: 5px;
}
/*
/*
/*
/*
/*
Color de fondo */
Tipo de letra a usar */
Tamao de la letra */
Color de la letra */
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 ).
12 de 13
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/

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/
13 de 13

Practicas 1 A 4

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Practicas 1 A 4

Caricato da

Copyright:

Formati disponibili

Comercio Electrnico

Qu hay preparar de forma previa a la prctica?

Cul es el resultado de la prctica?

Qu se aprende con esta prctica?

Comercio Electrnico P1 Estudio de viabilidad

Factores asociados al producto

Novedoso: Debe de introducir una definitiva novedad sobre los productos

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

Barato: El consumidor todava tiene una clara desconfianza a la hora de

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

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

En este apartado se tiene que analizar la IDEA inicial y ver qu requisitos

Comercio Electrnico P1 Estudio de viabilidad

Estructura de comercio electrnico

B2C (Business to Consumer): Venta directa de negocio a consumidor final.

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

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

Se deber elegir el tipo de estructura de comercio electrnico que mejor se ajuste

Nombre del proyecto

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

Idioma: Se tendr que tener en cuenta el mercado que se quiere buscar a la

Originalidad: Creatividad, chispa... todo aquello que es necesario, pero que

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

Comercio Electrnico P1 Estudio de viabilidad

Mercado consolidado: Un mercado que est consolidado tiene como

Nuevo mercado: Abrir un nuevo mercado tiene un cierto riesgo, ya que a

Fidelizacin de los consumidores: Es importante estudiar el

Existencia de competencia: Est claro que salvo que creemos un nuevo

Edad (no es lo mismo vender bebidas refrescantes a nios que a personas

Sexo (es muy diferente vender cosmticos a hombres que a mujeres).

Idioma (un libro en cataln puede tener mucha aceptacin en Catalua...

Comercio Electrnico P1 Estudio de viabilidad

Coste del producto: Se deber elegir un coste adecuado para el producto a

Puesta en marcha: Los asociados al inicio del proyecto, se aplican

Mantenimiento: Los costes mensuales que acarrea el desarrollo de la

Es muy importante detallar al mximo las previsiones de costes (tanto en gastos

Comercio Electrnico P1 Estudio de viabilidad

Herramientas de las que disponemos

Informacin sobre la situacin del Comercio Electrnico

Froogle (http://froogle.google.com): Buscador de productos en Internet, con

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

Comercio Electrnico P1 Estudio de viabilidad

Trabajo a realizar durante la prctica

Descripcin completa del producto y sus caractersticas.

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

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

Comercio Electrnico P1 Estudio de viabilidad

Qu hay preparar de forma previa a la prctica?

Cul es el resultado de la prctica?

Qu se aprende con esta prctica?

Comercio Electrnico P2 AI y Usabilidad

Se muestran a continuacin una serie de enlaces que pueden servir de ayuda e

Comercio Electrnico P2 AI y Usabilidad

Comercio Electrnico P2 AI y Usabilidad

Trabajo a realizar durante la prctica

Arquitectura de contenidos del proyecto de comercio electrnico.