Creación de una web dedicada al B2C para una pyme del sector servicios

CREACIÓN DE UNA WEB DEDICADA AL B2C PARA UNA PYME DEL SECTOR SERVICIOS Realizada por: José María Tos Miñana Dirigida por: Juan Vicente Oltra Gutiérrez ÍNDICE 1.- Objeto y Objetivos 2.- Introducción 3.- Entorno del desarrollo del proyecto 4.- Descripción teórica y práctica del proyecto 5.- Conclusión OBJETO Y OBJETIVOS El objeto del presente Proyecto de Fin de Carrera es la obtención del título de Ingeniero Técnico en Informática de Gestión, expedido por la Universidad Politécnica de Valencia. Distinguiremos los objetivos del proyecto según el punto de vista del cliente y el punto de vista de los alumnos que lo hemos realizado. El objetivo del cliente es poder presentar sus productos en una página Web para así poder mostrarlos de una manera más accesible al resto del mundo aunque más concretamente en Valencia y la Comunidad Valenciana, que es donde recae su mayor cota de mercado puesto que la empresa no se dedica a la exportación. Con esta estrategia de publicidad logrará una mayor difusión de sus productos, una mayor interacción con los clientes y una mayor facilidad de proporcionar información de la empresa y de los productos a los clientes. En cuanto a nuestro objetivo, con la realización de este proyecto buscamos una manera de entrar en contacto con una empresa real, pudiendo iniciarnos en un entorno de trabajo más próximo al mercado laboral que nos podemos encontrar al finalizar la carrera. Coincidimos en el interés por el comercio mediante herramientas Web que faciliten la publicidad y la venta de los productos de una empresa, y este proyecto nos da la oportunidad de realizar una aplicación en la que aprenderemos una parte importante para poder trabajar en un futuro próximo en un ámbito similar al desarrollado en el proyecto. Hemos tenido la oportunidad de desarrollar un trabajo teniendo en cuenta la satisfacción del cliente, lo cuál es lo más importante al realizar un proyecto pedido por un cliente. También hemos podido adentrarnos en el mundo del diseño Web, superando nuevos retos no estudiados en nuestras intensificaciones de la carrera, como es la programación en lenguajes muy comunes en el desarrollo de una WEB con base de datos como pueden ser PHP, MySql, HTML, Javascript y CSS. INTRODUCCIÓN En el presente proyecto se ha desarrollado una web que permite llevar a cabo la obtención de información de una pyme. El proyecto se ha realizado con la empresa SELECCIÓN S.L., que se dedica a la venta de productos para el hogar; iluminación, menaje, regalos y baño. La aplicación incluye todas las opciones necesarias para realizar las operaciones que nos permiten conocer con detalle la empresa, incluyendo un muestrario con los productos de los que dispone la empresa. La utilidad de esta web es obvia, puesto que hoy en día cualquier empresa necesita tener un sitio donde poder dar a conocerse. Los clientes podrán en todo momento obtener información de la empresa de manera intuitiva y sencilla, y el administrador actualizar la web según los productos nuevos que quiera ir ofertando. Como se ha comentado, la aplicación permite llevar a cabo una completa visualización de los productos por parte de los clientes. Esto incluye las operaciones de ver las noticias, el catálogo, las promociones, incluyéndose en estos todos los campos necesarios para poder disponer de una información completa en todo momento. Por otra parte, la aplicación permite al administrador tener diferentes opciones para la actualización de esta. La aplicación incluye la posibilidad de importar datos para que los clientes puedan visualizarlos mediante las opciones de administración de la web. Para la realización de esta aplicación se ha utilizado los programas Dreamweaver, photoshop, flashplayer añadiendo los lenguajes de programación como javascript, php y el gestor de la base de datos ha sido mysql. ENTORNO DEL DESARROLLO DEL PROYECTO Este proyecto se ha desarrollado en la empresa SELECCIÓN S.L. Es una empresa que se dedica a compra-venta de artículos dedicados al hogar. Para ello disponen de distintos distribuidores que les facilitarán el material, cuando sea requerido por los clientes. También disponen de una aplicación realizada por antiguos alumnos de la Universidad Politécnica de Valencia en su proyecto final de carrera, que consiste en llevar a cabo una Lista de Bodas, con todo lo que ello conlleve, no nos ha sido posible acceder a dicha aplicación por problemas técnicos que le han surgido al cliente. La empresa está en continuo funcionamiento, y siempre podemos encontrar gente en las tiendas, mirando los productos, concertando entrevistas con la persona al mando de la tienda para hacer la lista de bodas y acoplar de la mejor forma posible las necesidades del cliente con el producto que deseen. En cuanto al futuro, tienen en mente tener más presencia en Valencia, con el proyecto que nosotros vamos a desarrollar van a dar un paso más hacia el objetivo planeado. Por el momento no van a adentrarse a las ventas por internet, motivo por el cuál, esta WEB no dispondrá de esa opción y se centrará en la visualización de los productos y otras estrategias de mercado como pueden ser las promociones de los productos para atraer a la clientela a visitar la tienda y ver los productos en persona, lo que ayudará a la posibilidad de que los clientes que visiten la tienda se interesen por otros productos que no tenían en mente y por lo tanto aumentando las ventas potenciales. La empresa ha ido evolucionando de manera positiva, puesto que han conseguido expandir el bajo donde tienen la tienda con otro más. La ubicación de las dos tiendas está situada en la zona central de Valencia, al lado de la Plaza del Ayuntamiento, estas dos tiendas tienen mucha similitud en sus productos, y están separadas por apenas 80 metros. Esta circunstancia hará más fácil la comunicación, aunque por el contrario al no estar unidas se hace complicado en determinadas situaciones la localización de ciertas personas. En cuanto a la realización técnica del proyecto, el entorno de trabajo del que hemos dispuesto ha sido proporcionado por nosotros mismos, por lo que hemos trabajado en local con nuestros ordenadores personales utilizando herramientas comunes para poder trabajar en paralelo con la mayor comodidad y compatibilidad posibles. Decidimos utilizar la herramienta XAMPP para Windows, facilitándonos montar un entorno adecuado para el alojamiento de la WEB y de la base de datos en local y así poder hacer las pruebas necesarias para comprobar el correcto funcionamiento de la aplicación. DESCRIPCIÓN DEL PROYECTO Este proyecto consta de tres partes bien definidas, por un lado se encuentra el código desarrollado para mostrar la web, el código desarrollado para administrar la web y por otro lado la base de datos que se utiliza para el almacenamiento de toda la información. Para desarrollar la web se ha llevado a cabo un proceso mediante el que se ha definido por una parte las diferentes necesidades que la web debe satisfacer, y por otro la estructura que debe tener la web para que funcione correctamente. A este proceso se le llama “Proceso Software”. Existen diferentes tipos de procesos software puesto que hay muchas maneras de desarrollar software, en este caso una web. Se ha llevado a cabo el modelo de proceso “Clásico” o también llamado “En cascada”. A su vez el modelo “Clásico” tiene diferentes variantes puesto que durante el desarrollo de la web se pueden dar infinidad de circunstancias que pueden llevar a que el proceso varíe su curso. En consecuencia, para la realización de este proyecto se ha utilizado el modelo “Clásico Deformado”: La primera actividad a realizar en este “Proceso Software” es la redacción del Plan del Proyecto. La redacción de este Plan es especialmente importante puesto que es donde se definen las necesidades que la web ha de cubrir así como el proceso a llevar a cabo para que la web realice dichas funciones. En este caso, surgió la necesidad por parte de una empresa de poder realizar un control exhaustivo de sus clientes, de sus proveedores, de sus artículos así como de su facturación. A partir de estas necesidades se desarrollaron los pasos a seguir para la obtención de esta web. A medida que se han ido concertando las reuniones, se ha aclarado la situación y los requisitos del cliente, donde la facturación no tenía que entrar, y donde la prioridad era el muestrario de productos a los clientes, con ello el proceso software queda más detallado en los siguientes textos. Los pasos a seguir fueron: • Especificación. Establecimiento de las funciones que la web ha de realizar para conseguir cubrir todas las necesidades surgidas. • Diseño. Se establece la estructura que va a tener la web así como el interfaz de usuario del mismo. • Implementación. Desarrollo del código según la especificación y diseño anteriormente establecidos. • Validación. Constatar y confirmar que la web funciona correctamente y realiza las funciones determinadas en el Plan del Proyecto realizado. El equipo de desarrollo que ha llevado a cabo este proyecto está compuesto por dos personas, los cuales nos hemos encargado de establecer las funciones y el diseño conjuntamente con las peticiones del cliente y de realizar posteriormente la implementación del proyecto. A su vez, ha intervenido personal de soporte para consensuar ciertas especificaciones del proyecto así como posibles problemas o inconvenientes que se han presentado. La formación de este equipo de desarrollo se debe a las diferentes circunstancias de la empresa en la que se ha desarrollado así como la necesidad por parte de la empresa de mostrar por internet sus productos. Durante el transcurso del desarrollo de la web se ha llevado a cabo un seguimiento y control del mismo. Este seguimiento se ha realizado a través de reuniones periódicas en las que se han evaluado los avances realizados teniendo en cuenta tanto los tiempos establecidos para su desarrollo como las distintas funciones que ha de realizar la web. Fue un proceso iterativo puesto que en cada reunión establecíamos nuevas modificaciones y especificaciones que el cliente veía oportunas, lo cual nos llevó a intentar desarrollar la aplicación en vistas a una utilización más dinámica, preparada lo mejor posible para los cambios que pudieran pedirse en futuras reuniones. Para el siguiente paso en la descripción se va a explicar detalladamente cada una de las tres partes desarrollas en el proyecto, ello implicará la utilización del código necesario, y la utilización de diversas funciones y distribución de carpetas, aplicando los diversos conocimientos adquiridos tanto en la carrera como en cursos organizados por la Universidad Politécnica de Valencia. PRUEBAS Y FALLOS A lo largo del proyecto nos han surgido varios problemas e inquietudes, que hemos ido resolviendo de distintas maneras hasta obtener el producto final, la web. Para ello también vamos a mencionar las distintas reuniones que hemos realizado con el cliente, puesto que a partir de esas reuniones hemos ido elaborando las distintas fases del proyecto. REUNION 1 Se contacta con el cliente, el cual nos indica la idea de web que tiene, con algunas secciones que considera importantes y nos menciona que tiene una aplicación de “lista de bodas” que quiere que aparezca en la web La primera parte del trabajo de campo, es mirar la competencia, y ver tipos de webs que hacen lo mismo que nuestro cliente, haciendo hincapié en las secciones que aparecen den dichas webs. A partir de ese momento se elabora mediante photoshop un .psd, con el que se le enseña un posible diseño de la web. REUNION 2 El primer diseño mostrado, no fue del agrado del cliente. A partir del diseño descartado, se empieza a introducir más especificaciones de diseño del cliente, y la idea queda más nítida, nos solicita el menú principal, que lo quiere en el margen superior derecho, queriendo pestañas a modo de cuadrados. También se decide que uno de los logos de la web se coloque en el lateral. Se busca que la web use los colores corporativos de la empresa. Tras la reunión preparamos el segundo .psd, buscando distintos elementos que considera importante el cliente, y creamos unos cuadrados, a los que por medio del dreamweaver, se puede cambiar el color cuando se pasa por encima de ellos. REUNIÓN 3 El segundo diseño tampoco fue del agrado del cliente, por no mostrarse una web lo suficientemente compacta, a su entender. En esta reunión se le solicita al cliente que busque los textos que quiera introducir en la web, para que en el momento que el diseño sea el deseado, poder mostrar ejemplos de algo parecido al producto final. Cada vez vamos acercándonos más a las especificaciones del cliente, en cuanto al apartado del catálogo sobre todo. Nuestro trabajo, ahora lo enfocamos con mayor exactitud a medida que vamos mostrándoles opciones al cliente, Preparamos una plantilla cumpliendo los requisitos. REUNION 4 En esta ocasión el cliente está conforme con el diseño presentado, y con varias de las opciones que le mostramos, por tanto la parte de diseño ve la luz para continuar con el proyecto. En esta reunión surge un problema que nos retrasa más de lo esperado, el cliente nos da indicaciones que no tiene material fotográfico en formato digital para la implementación de la galería. Nos traslada la información de donde podemos encontrar las imágenes, con las empresas que trabaja. Dicha labor se hace tediosa, pues hay que ir buscando de las diferentes categorías de las distintas web y guardar las imágenes en carpetas para su posterior uso. Se genera una galería donde mostramos las fotos. Donde se amplía al clickar en ella. REUNION 5 Mostramos nuestros avances, muchas de las labores efectuadas en la parte del diseño son del agrado del cliente, Nos da a conocer que en la galería ha decidido hacer subsecciones, y que para cada foto que se muestre quiere una pequeña descripción. Empezamos a valorar mi compañero y yo sobre la organización de la base de datos, y como enfocar las distintas secciones y fotos que vamos a introducir, ya que las noticias y promociones no nos dan tantos problemas. Dicho problema lo acabamos solucionando con la opción de generar una tabla de fotos, donde se tenga que guardar la sección, y las opciones de noticias y promoción guardar las fotos en otra carpeta distinta, y así diferenciar esas fotos. Hacemos muchas pruebas con la base de datos para ver el funcionamiento de esta, y vamos corrigiendo los errores, Para probar la base de datos empezamos a generar todo el apartado de la web del administrador, PANEL CONTROL, el diseño de este apartado será sencillo, cómodo y de fácil comprensión para que nuestro cliente sepa en todo momento lo que está haciendo. Aquí vemos el mensaje que se visualiza en cada una de las inserciones de las promociones en la base de datos. 5. Siguiendo con las opciones del Panel de Control encontramos “Fotos”. Se puede apreciar los campos: •Nombre •Descripción •Sección donde se quiere guardar la foto, se ha generado un controlbox con las distintas opciones •Imagen, aquella que queremos guardar Una vez insertados los datos del formulario clicar “Insertar”. Esto nos mostrará un mensaje de Inserción correctamente guardada o de error y la opción de “volver”. La imagen elegida se guardará automáticamente en la carpeta correspondiente a la sección elegida en el controlbox, lo que servirá para recoger las fotos de la ruta de la carpeta correspondiente mostrándolas en la sección del catálogo y recogiendo de la base de datos la descripción de la foto insertada previamente. Es en esta sección donde se establece la base para poder montar y organizar las galerías de imágenes del catálogo de la Web y por tanto la base de la parte gruesa de este proyecto. En esta parte del proyecto invertimos una parte importante del tiempo y del esfuerzo pensando cómo organizar las carpetas, cómo íbamos a identificar las imágenes para mostrarlas en la galería y en resumen, cómo íbamos a desarrollar el catálogo a raíz de registrar esta información y del método elegido para almacenar las imágenes en sus respectivas ubicaciones. Tuvimos que comprobar que la información se almacena correctamente y que las imágenes se guardan en la carpeta destino con el título que se ha querido registrar en la base de datos. Más adelante, en la descripción del “Catálogo” de la WEB, explicaremos todo el proceso seguido hasta conseguir desarrollar el código adecuado para la presentación de las galerías con su respectiva paginación y la visualización de cada una de las imágenes añadiendo la descripción asociada a la imagen y recogida de la base de datos. Aquí vemos el mensaje que se visualiza en cada una de las inserciones de las fotos en la base de datos. 6. La última de las secciones corresponde al alta de las “Secciones”. Los campos a rellenar: •Curso: si es sección o si es sub-sección •Nombre: nombre que corresponda Una vez insertados los datos del formulario clicar “Insertar”. Esto nos mostrará un mensaje de Inserción correctamente guardada o de error y la opción de “volver”. Identificar una sección o una subsección nos servirá para identificar y diseñar las secciones y subsecciones del catálogo de la WEB. Hemos observado anteriormente que para insertar fotos es necesario elegir una sección, puesto que es necesario que las fotos queden identificadas por su sección para poder distinguirlas posteriormente en el montaje de la galería, por lo tanto es necesario registrar todas las secciones de las que se van a hacer uso en el catálogo para que puedan aparecer las mismas en el controlbox de la sección previamente comentada. Aquí vemos el mensaje que se visualiza en cada una de las inserciones de las secciones en la base de datos. Con estos pasos, ya hemos visto el funcionamiento del PANEL DE CONTROL, que usará el administrador de la web, para actualizar principalmente la web con los contenidos que la empresa considere oportunos. Hay que visualizar un poco el código para conocer la manera que interactúan la base de datos con el PANEL CONTROL, y así tener mayor conocimiento de la manera de pensar de los programadores. Vamos a mostrar cada una de las opciones que se han visto anteriormente desde el punto de vista mencionado en el párrafo de antes. INSERTAR NOTICIAS: Se visualiza las distintas variables, donde usamos el $_POST[‘name’], para obtener los campos introducidos en el formulario, a continuación comprobaremos si la foto elegida se inserta de la manera correcta, y una vez tenemos todas las variables accedemos a la base de datos para efectuar la inserción. MODIFICAR NOTICIAS: En caso que haya que cambiar algún campo de los introducidos en la noticia, le pasaremos el identificador de dicha noticia, y los campos modificados, puesto que esta noticia ya estaba insertada en la base de datos, en esta ocasión únicamente tendremos que hacer un UPDATE (actualización). BORRAR NOTICIA: Igual que hemos hecho en modificar noticia, si hay que borrarla, también pasaremos el identificador de la noticia elegida, y accederemos a la base de datos por medio de un DELETE, con ello será eliminada la noticia. Una vez se efectúa la llamada a la base de datos, se llamará a “aviso.php” y mostrará si se ha efectuado correctamente o no. INSERTAR PROMOCIÓN: Se visualiza las distintas variables, donde usamos el $_POST[‘name’], para obtener los campos introducidos en el formulario, a continuación comprobaremos si la foto elegida se inserta de la manera correcta, y una vez tenemos todas las variables accedemos a la base de datos para efectuar la inserción (INSERT INTO). MODIFICAR PROMOCIÓN: En caso que haya que cambiar algún campo de los introducidos en la promoción, le pasaremos el identificador de dicha promoción, y los campos modificados, puesto que esta promoción ya estaba insertada en la base de datos, en esta ocasión únicamente tendremos que hacer una actualización (UPDATE). BORRAR PROMOCIÓN: Igual que hemos hecho en modificar promoción, si hay que borrarla, también pasaremos el identificador de la promoción elegida, y accederemos a la base de datos por medio de un DELETE, con ello será eliminada la promoción. Una vez se efectúa la llamada a la base de datos, se llamará a “aviso.php” y mostrará si se ha efectuado correctamente o no. INSERTAR SECCIÓN: Se visualiza las distintas variables, donde usamos el $_POST[‘name’], para obtener los campos introducidos en el formulario, a continuación comprobaremos si la foto elegida se inserta de la manera correcta, y una vez tenemos todas las variables accedemos a la base de datos para efectuar la inserción (INSERT INTO). INSERTAR GALERÍA: Se visualiza las distintas variables, donde usamos el $_POST[‘name’], para obtener los campos introducidos en el formulario, a continuación comprobaremos si la foto elegida se inserta de la manera correcta, y una vez tenemos todas las variables accedemos a la base de datos para efectuar la inserción (INSERT INTO). BORRAR IMAGEN GALERÍA: Pasaremos el identificador de la imagen de la galería elegida, llegaremos al directorio donde están las imágenes, gracias a la ruta, se aplicará la función unlink(‘ruta’). Luego accederemos a la base de datos por medio de un DELETE, con ello será eliminada la imagen. Una vez se efectúa la llamada a la base de datos, se llamará a “aviso.php” y mostrará si se ha efectuado correctamente o no. BASE DE DATOS La base de datos ha sido realizada pensando en las distintas posibilidades que consta la web, donde poder tener toda la información almacenada correctamente. Con ello poder acceder desde la web a la base de datos con las diferentes consultas oportunas y mostrar el contenido almacenado previamente. Hay que recalcar la importancia de un buen diseño de base de datos, puesto que ésta marca la estructura de la información de la que se va a hacer uso. Un mal diseño pone en muchas dificultades la realización eficaz de un proyecto, y por tanto, es necesario pensar muy bien cómo se va a diseñar la base de datos, cuáles van a ser los identificadores de las tablas y los campos que van a relacionar unas tablas con otras en el caso que sea necesario. Debido a la importancia de esta cuestión, nos tomamos el tiempo necesario para idear y construir una base de datos que pueda dar soporte a toda la información valiosa del sistema, que tenga una estructura adecuada para el almacenamiento de la información y que esté bien preparada para la posterior manipulación de toda esa información registrada. En nuestro proyecto hemos visto necesario crear cinco tablas con sus repectivas relaciones identificadas por las claves ajenas. Estas tablas serán suficientes para dar soporte a todo el sistema de la aplicación. A continuación se muestra el esquema de la base de datos y la descripción de cada una de las tablas y sus campos: <Directory> : Los parámetros que se encuentran dentro de esta sección, sólo se aplicarán a el directorio especificado y a sus subdirectorios. <Location>: Proporciona un control de acceso de los ficheros por medio de la URL Listen 80: Se indica el puerto que va a ocupar el servidor Web, por defecto el 80. ServerName localhost:80: Proporciona el host donde se encuentra alojada la página Web. Por defecto es localhost, pero cuando la Web se hace pública es necesario sustituir “localhost” por el nombre del host o la dirección IP del host junto con el puerto, como en el ejemplo. DocumentRoot "C:/xampp/htdocs": Es el directorio raíz donde residen todos los documentos que se sirven de la aplicación. Todas las carpetas ubicadas a partir de esta ruta podrán ser accesibles vía Web al incluir esta ruta en la cláusula <Directory> explicada anteriormente. Después de esta breve descripción del Apache, vamos a comentar el servidor XAMPP, que es la principal herramienta que engloba tanto el Apache como el phpMyAdmin y la base de datos de MySql. También contiene los intérpretes de PHP y de PERL, lo que lo hace el ideal para nuestro proyecto puesto que lo hemos elaborado con todas esas herramientas. El programa está liberado bajo la licencia GNU y actúa como un servidor web libre, fácil de usar y capaz de interpretar páginas dinámicas. XAMPP se actualiza regularmente para incorporar las últimas versiones de Apache/MySQL/PHP y Perl. También incluye otros módulos como OpenSSL y phpMyAdmin. Para instalar XAMPP se requiere solamente una pequeña fracción del tiempo necesario para descargar y configurar los programas por separado. Oficialmente, los diseñadores de XAMPP sólo pretendían su uso como una herramienta de desarrollo, para permitir a los diseñadores de sitios webs y programadores testear su trabajo en sus propios ordenadores sin ningún acceso a Internet. En la práctica, sin embargo, XAMPP es utilizado actualmente como servidor de sitios Web, ya que, con algunas modificaciones, es generalmente lo suficientemente seguro para serlo. http://es.wikipedia.org/wiki/XAMPP Instalación XAMPP bajo MS Windows: Descomprimir el paquete comprimido del XAMPP en la carpeta Archivos de Programa en su disco local (por lo general suele ser en C:) Debe asegurarse que la carpeta lleve por nombre XAMPP, y que su contenido inmediato sean los componentes del servidor y no otra carpeta del mismo nombre. Luego, proceder a identificar en la carpeta XAMPP dos archivos importantes: El setup_xampp.bat, el cual hará la instalación automática de sus componentes y el xampp-control.exe, que permite el acceso al panel de control del servidor. Para su facilidad, agregar si así se desea, un acceso directo de este archivo al escritorio. El panel de control del XAMPP, presenta hasta cuatro de los módulos disponibles en el servidor. Se deben iniciar (Start en el panel de control del XAMPP) al menos los servicios Apache y MySQL para poder inicializar el sistema de información desarrollado. Luego, abrir el navegador de su preferencia e incluir en la barra de direcciones la siguiente ubicación: http://localhost/ Esta dirección equivale a la carpeta: C:Archivos de Programa xampp/htdocs/ En la cual residen los archivos de salida a web. Allí es donde habrá que crear el sitio Web que contendrá el sistema. Facilitador: Prof. Jesús Rojas http://www.slideshare.net/jesus25dite/servidor-xampp Con esta sencilla instalación del XAMPP dispusimos de todo el soporte necesario para la construcción de la página Web. MYSQL MySQL es un sistema de gestión de bases de datos relacional, multihilo y multiusuario con más de seis millones de instalaciones. MySQL AB —desde enero de 2008 una subsidiaria de Sun Microsystems y ésta a su vez de Oracle Corporation desde abril de 2009— desarrolla MySQL como software libre en un esquema de licenciamiento dual. Por un lado se ofrece bajo la GNU GPL para cualquier uso compatible con esta licencia, pero para aquellas empresas que quieran incorporarlo en productos privativos deben comprar a la empresa una licencia específica que les permita este uso. Está desarrollado en su mayor parte en ANSI C. Al contrario de proyectos como Apache, donde el software es desarrollado por una comunidad pública y los derechos de autor del código están en poder del autor individual, MySQL es patrocinado por una empresa privada, que posee el copyright de la mayor parte del código. Esto es lo que posibilita el esquema de licenciamiento anteriormente mencionado. Además de la venta de licencias privativas, la compañía ofrece soporte y servicios. Para sus operaciones contratan trabajadores alrededor del mundo que colaboran vía Internet. MySQL AB fue fundado por David Axmark, Allan Larsson y Michael Widenius. Historia del proyecto SQL (Lenguaje de Consulta Estructurado) fue comercializado por primera vez en 1981 por IBM, el cual fue presentado a ANSI y desde entonces ha sido considerado como un estándar para las bases de datos relacionales. Desde 1986, el estándar SQL ha aparecido en diferentes versiones como por ejemplo: SQL:92, SQL:99, SQL:2003. MySQL es una idea originaria de la empresa opensource MySQL AB establecida inicialmente en Suecia en 1995 y cuyos fundadores son David Axmark, Allan Larsson, y Michael "Monty" Widenius. El objetivo que persigue esta empresa consiste en que MySQL cumpla el estándar SQL, pero sin sacrificar velocidad, fiabilidad o usabilidad. Michael "Monty" Widenius en la década de los 90 trató de usar mSQL para conectar las tablas usando rutinas de bajo nivel ISAM, sin embargo, mSQL no era rápido y flexible para sus necesidades. Esto lo llevó a crear una API SQL denominada MySQL para bases de datos muy similar a la de mSQL pero más portable. El nombre de MySQL procede de la combinación de My, hija del cofundador Michael "Monty" Widenius, con el acrónimo SQL (según la documentación de la última versión en inglés2 ). Por otra parte, el directorio base y muchas de las bibliotecas usadas por los desarrolladores tenían el prefijo My. El nombre del delfín de MySQL es Sakila y fue seleccionado por los fundadores de MySQL AB en el concurso “Name the Dolphin”. Este nombre fue enviado por Ambrose Twebaze, un desarrollador de software de código abierto africano, derivado del idioma SiSwate, el idioma local de Swazilandia y corresponde al nombre de una ciudad en Arusha, Tanzania, cerca de Uganda la ciudad origen de Ambrose. Lenguajes de programación Existen varias APIs que permiten, a aplicaciones escritas en diversos lenguajes de programación, acceder a las bases de datos MySQL, incluyendo C, C++, C#, Pascal, Delphi (via dbExpress), Eiffel, Smalltalk, Java (con una implementación nativa del driver de Java), Lisp, Perl, PHP, Python, Ruby,Gambas, REALbasic (Mac y Linux), (x)Harbour (Eagle1), FreeBASIC, y Tcl; cada uno de estos utiliza una API específica. También existe una interfaz ODBC, llamado MyODBC que permite a cualquier lenguaje de programación que soporte ODBC comunicarse con las bases de datos MySQL. También se puede acceder desde el sistema SAP, lenguaje ABAP. MySQL es muy utilizado en aplicaciones web, como Drupal o phpBB, en plataformas (Linux/Windows-Apache-MySQL-PHP/Perl/Python), y por herramientas de seguimiento de errores como Bugzilla. Su popularidad como aplicación web está muy ligada a PHP, que a menudo aparece en combinación con MySQL. MySQL es una base de datos muy rápida en la lectura cuando utiliza el motor no transaccional MyISAM, pero puede provocar problemas de integridad en entornos de alta concurrencia en la modificación. En aplicaciones web hay baja concurrencia en la modificación de datos y en cambio el entorno es intensivo en lectura de datos, lo que hace a MySQL ideal para este tipo de aplicaciones. Sea cual sea el entorno en el que va a utilizar MySQL, es importante monitorizar de antemano el rendimiento para detectar y corregir errores tanto de SQL como de programación. Características (versión 4.0) Inicialmente, MySQL carecía de elementos considerados esenciales en las bases de datos relacionales, tales como integridad referencial y transacciones. A pesar de ello, atrajo a los desarrolladores de páginas web con contenido dinámico, justamente por su simplicidad. Poco a poco los elementos de los que carecía MySQL están siendo incorporados tanto por desarrollos internos, como por desarrolladores de software libre. Entre las características disponibles en las últimas versiones se puede destacar: Amplio subconjunto del lenguaje SQL. Algunas extensiones son incluidas igualmente. Disponibilidad en gran cantidad de plataformas y sistemas. Diferentes opciones de almacenamiento según si se desea velocidad en las operaciones o el mayor número de operaciones disponibles. Transacciones y claves foráneas. Conectividad segura. Replicación. Búsqueda e indexación de campos de texto. MySQL es un sistema de administración de bases de datos. Una base de datos es una colección estructurada de tablas que contienen datos. Esta puede ser desde una simple lista de compras a una galería de pinturas o el vasto volumen de información en una red corporativa. Para agregar, acceder a y procesar datos guardados en un computador, usted necesita un administrador como MySQL Server. Dado que los computadores son muy buenos manejando grandes cantidades de información, los administradores de bases de datos juegan un papel central en computación, como aplicaciones independientes o como parte de otras aplicaciones. MySQL es un sistema de administración relacional de bases de datos. Una base de datos relacional archiva datos en tablas separadas en vez de colocar todos los datos en un gran archivo. Esto permite velocidad y flexibilidad. Las tablas están conectadas por relaciones definidas que hacen posible combinar datos de diferentes tablas sobre pedido. MySQL es software de fuente abierta. Fuente abierta significa que es posible para cualquier persona usarlo y modificarlo. Cualquier persona puede bajar el código fuente de MySQL y usarlo sin pagar. Cualquier interesado puede estudiar el código fuente y ajustarlo a sus necesidades. MySQL usa el GPL (GNU General Public License) para definir que puede hacer y que no puede hacer con el software en diferentes situaciones. Si usted no se ajusta al GPL o requiere introducir código MySQL en aplicaciones comerciales, usted puede comprar una versión comercial licenciada. Mejoras futuras El mapa de ruta de MySQL 5.1 indica soporte para: Particionado de la base de datos. Backup en línea para todos los motores de almacenamiento. Replicación segura Restricciones a nivel de columna. Planificación de eventos. Funciones XML. Características distintivas Las siguientes características son implementadas únicamente por MySQL: Múltiples motores de almacenamiento (MyISAM, Merge, InnoDB, BDB, Memory/heap, MySQL Cluster, Federated, Archive, CSV, Blackhole y Example en 5.x), permitiendo al usuario escoger la que sea más adecuada para cada tabla de la base de datos. Agrupación de transacciones, reuniendo múltiples transacciones de varias conexiones para incrementar el número de transacciones por segundo. Tipos de compilación del servidor Hay tres tipos de compilación del servidor MySQL: Estándar: Los binarios estándar de MySQL son los recomendados para la mayoría de los usuarios, e incluyen el motor de almacenamiento InnoDB. Max (No se trata de MaxDB, que es una cooperación con SAP): Los binarios incluyen características adicionales que no han sido lo bastante probadas o que normalmente no son necesarias. MySQL-Debug: Son binarios que han sido compilados con información de depuración extra. No debe ser usada en sistemas en producción porque el código de depuración puede reducir el rendimiento. Especificaciones del código fuente MySQL está escrito en una mezcla de C y C++. Hay un documento que describe algunas de sus estructuras internas en http://dev.mysql.com/doc/internals/en/ (en inglés). Desarrollo del proyecto El desarrollo de MySQL se fundamenta en el trabajo de los desarrolladores contratados por la empresa MySQL AB quienes se encargan de dar soporte a los socios comerciales y usuarios de la comunidad MySQL y dar solución a los problemas encontrados por los usuarios. Los usuarios o miembros de la comunidad MySQL pueden reportar bugs revisando el manual en línea [2] que contiene las soluciones a problemas encontrados; el historial de cambios [3]; la base de datos bugs [4] que contiene bugs reportados y solucionados y en las listas de correo MySQL [5]. A través de las listas de correo los usuarios pueden enviar preguntas y éstas serán contestadas por desarrolladores brindándoles soporte. Otras funcionalidades de las listas de correo Anuncios: informan sobre nuevas versiones de MySQL y programas relacionados. MySQL: lista principal de discusión de MySQL y sql. Bugs: permite a la gente buscar y arreglar bugs. Temas internos: para gente que trabaja con el código de MySQL. Es el fórum para discutir sobre el desarrollo de MySQL. MySQLdoc: para gente que trabaja en documentación. Pruebas de rendimiento: para gente interesada en temas de rendimiento no sólo de MySQL, sino de otros motores de bases de datos. Empaquetadores: para discusiones sobre empaquetamiento y distribución de MySQL. Java: discusiones sobre MySQL Server y Java. Otras listas de correo son: MyODBC, Herramientas GUI, Cluster, Dotnet, PlusPlus y Perl. Adicional a las listas de correo, se encuentra el soporte de IRC de la comunidad MySQL. Además, hay soporte a través de foros [6] agrupados en categorías tales como: Migración, Uso de MySQL, Conectores MySQL, Tecnología MySQL y Negocios. Estructuras organizativas/asociativas o de decisión La dirección y el patrocinio de los proyectos MySQL están a cargo de la empresa MySQL AB quien posee el copyrigth del código fuente MySQL, su logo y marca registrada. MySQL, Inc. y MySQL GmbH son ejemplos de empresas subsidiarias de MySQL AB. Están establecidas en los Estados Unidos y Alemania respectivamente. MySQL AB, cuenta con más de 200 empleados en más de 20 países y funcionan bajo la estrategia de teletrabajo. En enero del 2008 Sun Microsystems anuncia su compra. En abril del 2009 Oracle anunció la compra de Sun Microsystems 11 Industria relacionada La industria radica en la venta de productos software y de algunos servicios relacionados a numerosas empresas que utilizan estos productos. MySQL AB clasifica los productos así: MySQL Enterprise: incluye MySQL Enterprise Server , Monitoreo de la red MySQL, servicios de consulta y soporte de producción MySQL. MySQL Cluster MySQL Embedded Database. MySQL Drivers: para JDBC, ODBC y .Net MySQL Tools: MySQL Administrator, MySQL Query Browser, and the MySQL Migration Toolkit. MaxDB: MaxDB es una base de datos de código abierto certificada para SAP/R3. Los ingresos de esta empresa por la venta de licencias privativas de sus productos y los servicios suma los U$12 millones. MySQL en cifras Según las cifras del fabricante, existirían más de seis millones de copias de MySQL funcionando en la actualidad, lo que supera la base instalada de cualquier otra herramienta de bases de datos. El tráfico del sitio web de MySQL AB superó en 2004 al del sitio de IBM. Licencia La licencia GNU GPL de MySQL obliga a que la distribución de cualquier producto derivado (aplicación) se haga bajo esa misma licencia. Si un desarrollador desea incorporar MySQL en su producto pero desea distribuirlo bajo otra licencia que no sea la GNU GPL, puede adquirir una licencia comercial de MySQL que le permite hacer justamente eso. http://es.wikipedia.org/wiki/MySQL Continuamos ahora con la descripción del programa con el que hemos desarrollado la mayor parte de la Web, sin duda, una de las herramientas más usadas para la elaboración de páginas Web, el Dreamweaver. DREAMWEAVER: Introducción, historia y evolución de Dreamweaver Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes. Se vende como parte de la suite Adobe Creative Suite. La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto. Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor. Dreamweaver es compatible con todas las principales tecnologías de servidor como, por ejemplo, ColdFusion, PHP, ASP, ASP.NET y JSP, para que los desarrolladores, más expertos o menos expertos, puedan dar vida a sus diseños. Historia Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine. Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código. Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C). No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código. Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para pre-visualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código. Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación. Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra. También podría decirse, que para un diseño más rápido y a la vez fácil podría complementarse con fireworks en donde podría uno diseñar un menú o para otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola, en donde ya llevara los vínculos a un dicho sitio en especifico que uno le haya dado.(MRR - U.P.C.) http://es.wikipedia.org/wiki/Adobe_Dreamweaver Proseguimos con los lenguajes de programación que hemos utilizado para la creación de la página. Optamos por el PHP mayormente, debido a su capacidad y facilidad de uso para este tipo de trabajos y también a su alta compatibilidad con cualquier sistema, además de la ayuda que ofrece XAMPP para la utilización de este lenguaje, puesto que contiene los módulos necesarios para su correcto funcionamiento. PHP: Introducción, definición y evolución de PHP Actualmente la red de Internet, compuesta por páginas web, sirve de soporte a una gran cantidad de sistemas de información y comunicaciones que engloban áreas tan importantes como la investigación, el comercio electrónico, la visualización de información, el correo electrónico. Las páginas web son textos ASCII escritos en HTML (Hypertext Markup Language), que se transfieren entre los servidores de WWW y los navegadores mediante el protocolo HTTP (Hypertext Transfer Protocol). Cuando comenzó la World Wide Web, los sitios web ofrecían páginas estáticas, es decir, que a efectos del usuario, el único proceso realizado era el de visualización de sus contenidos por parte del navegador del cliente. A medida que pasaron los años, aumentó la afluencia de público y surge la necesidad de reunir y procesar las peticiones del cliente con la finalidad de ofrecerle informaciones mejor dirigidas, escogidas y elaboradas. Es entonces, cuando surgen dos alternativas de diseño web: - Las llamadas páginas en el lado del cliente, programadas en HTML dinámico (DHTML), que se ejecutan en el navegador y son capaces de cambiar su apariencia. Utilizando DHTML podemos conseguir que los objetos aparezcan y desaparezcan, que varíen su tamaño, que se les asocie posiciones absolutas en pantalla… En definitiva, DHTML aumenta las posibilidades de visualización de las instrucciones HTML. -Las páginas del lado del servidor, permiten modificar los contenidos antes de enviarlos al cliente. Las primeras fueron CGI (Common Gateway Interface) que implementan páginas web activas en el servidor, capaces de leer lo que le enviaba un cliente al servidor a través de un formulario, o escribir en la página del cliente. PHP (Hypertext Preprocessor) es un lenguaje script (no se compila para conseguir códigos máquina si no que existe un intérprete que lee el código y se encarga de ejecutar las instrucciones que contiene éste código), para el desarrollo de páginas web dinámicas del lado del servidor, cuyos fragmentos de código se intercalan fácilmente en páginas HTML, debido a esto, y a que es de Open Source (código abierto), es el más popular y extendido en la web. PHP es capaz de realizar determinadas acciones de una forma fácil y eficaz sin tener que generar programas programados en un lenguaje distinto al HTML. Esto se debe a que PHP ofrece un extenso conjunto de funciones para la explotación de bases de datos sin complicaciones. Es por esto, que levanta un mayor interés con respecto a los lenguajes pensados para los CGI. PHP fue desarrollado originalmente por Rasmus Ledford en 1994 como un CGI escrito en Perl que permitía la interpretación de un número limitado de comandos. El sistema fue denominado Personal Home Page Tools y consiguió relativo éxito gracias a que otras personas pidieron a Rasmus que les permitiese utilizar sus programas en sus propias páginas. Cuando Rasmus tuvo la necesidad de crear páginas dinámicas que trabajasen con formularios, creó una serie de etiquetas a las que denominó “Form Interpreters”, y lo sacó al público con el nombre de PHP/FI en 1995. Luego salió la versión mejorada, llamada PHP/FI 2.0. Zeev Suraski y Andi Gutmans programaron el analizador sintáctico incluyendo nuevas funcionalidades como el soporte a nuevos protocolos de Internet y el soporte a la gran mayoría de las bases de datos comerciales, como MySQL y Postgre SQL, así como un módulo para Apache. Con estas mejoras surgió PHP3 en 1997. Este analizador define la sintaxis y semántica de la versión PHP3 y la siguiente: PHP4. PHP3 carecía del uso de sesiones, algo muy común en las páginas web de cierta complejidad. En el año 2000, PHP3 evolucionó a PHP4, que utiliza el motor Zend (desarrollado por Zeev y Andi encargado de interpretar el código fuente de los scripts de PHP), desarrollado para cubrir las necesidades actuales y solucionar algunos inconvenientes de la anterior versión. Algunas mejoras de esta nueva versión son su mayor independencia del servidor web y su rapidez, ya que primero se compila y luego se ejecuta, mientras que antes se ejecutaba a la vez que se interpretaba el código. La última versión es PHP5, que utiliza el motor Zend-2 y presenta mejoras significativas y un entorno de programación orientado a objetos mucho más completo, que permite que el PHP proporcione un alto rendimiento a las aplicaciones Web empresariales a nivel de las plataformas J2EE y .NET. Otro lenguaje de scripting para la generación dinámica de contenidos en el servidor es ASP. Aunque se parece a PHP en cuanto a potencia y dificultad, su sintaxis llega a diferir notablemente. Una diferencia sensible es que PHP ha sido desarrollado inicialmente para entornos UNIX y es en este sistema operativo donde se aprovechan mejor sus prestaciones y consigue un mayor rendimiento. ASP, que es una tecnología Microsoft, está orientado a sistemas Windows, especialmente NT. http://php.ciberaula.com/articulo/introduccion_php/ Instalación de PHP en nuestro servidor Pasos previos a la programación. Instalación del modulo PHP en distintos servidores web. Como todo lenguaje de lado servidor, PHP, requiere de la instalación de un servidor en nuestro PC para poder trabajar en local. Este modo de trabajo resulta a todas luces más práctico que colgar los archivos por FTP en el servidor y ejecutarlos desde Internet. Así pues, antes comenzar a crear nuestros programas en PHP, es necesario: •Convertir nuestro ordenador en un servidor. Esto se hace instalando uno de los varios servidores disponibles para el sistema operativo de nuestra máquina •Introducir en nuestro servidor los archivos que le permitirán la comprensión del PHP. Estos archivos pueden ser descargados, en su versión más actual, de la página oficial de PHP Para conocer la forma de instalar PHP sobre cada servidor de cada sistema operativo podemos dirigirnos al apartado de documentación de la página oficial de PHP donde disponemos de un manual en HTML de rápida consulta y un enorme manual en PDF de casi 1000 páginas traducido al castellano donde explican minuciosamente y entre otras cosas, los pasos a seguir para cada caso particular. De todos modos, nosotros vamos a ofrecer algunas ayudas para configurar PHP en los sistemas más habituales. La elección de nuestro programa servidor tendrá mucho que ver con el sistema operativo que tengamos corriendo en nuestro ordenador. Estas serían algunas posibilidades de sistemas operativos y soluciones que funcionan bien. Windows 95/98 Si estáis trabajando en Windows 95 o Windows 98 y para desarrolladores principiantes, podría ser recomendable utilizar el servidor Personal Web Ser. En este caso necesitaríais: •Personal Web Server de Microsoft como servidor el cual os sirve además para el aprendizaje en ASP. Tenéis una guía de instalación y configuración en esta misma web. •Una instalación auto-extraible de la versión más reciente de PHP que, además de tardar menos en descargarse, os guiará paso a paso en el proceso de instalación. Esta versión no incluye todas las funcionalidades de PHP, pero os servirá para aprender hasta un buen nivel. Hay que señalar que, para el caso de PHP en PWS, además de todo lo dicho en capítulo de instalación, es importante al crear el directorio virtual permitir la ejecución de scripts validando la caja correspondiente. En Windows 95/98 también podremos utilizar el servidor Apache y puede que sea una opción todavía más completa que la de utilizar PWS. A continuación explicamos más sobre ello. Windows ME y XP Home Edition No hemos probado PHP en estas plataformas, pero en principio no tienen compatibilidad con Personal Web Server, por lo que deberíamos decantarnos por otro servidor. Otra posibilidad para los usuarios de Windows en general es instalar Apache como servidor web lo cual puede resultar ventajoso con respecto al uso del PWS ya que PHP está principalmente diseñado para correr en este servidor. Esto quiere decir que, aunque en principio todo debería funcionar correctamente sobre ambos servidores, es posible que algún bug no corregido haga fallar uno de nuestros scripts si trabajamos para con un servidor cuyas actualizaciones son menos frecuentes y detalladas. Apache ha sido especialmente pensado para plataformas Unix-Linux, aunque recientemente, con la Apache 2.0, han desarrollado una versión específica para Windows. Disponemos de un artículo para aprender a configurar PHP sobre Apache en Windows, como CGI y también como módulo de Apache. Windows NT, Windows 2000 y XP en sus versiones Profesional y Server Para estos sistemas tenemos dos posibilidades muy interesantes, ya que podremos instalar PHP sobre Internet Information Server o sobre Apache con todas las garantías. Si hubiese que recomendar una de las dos opciones, nos decantaríamos por Apache debido a que, como decíamos, PHP está pensado para trabajar sobre Apache. Podría ser interesante IIS en el caso de que deseemos correr ASP y PHP sobre el mismo servidor, ya que, en principio, Apache no es compatible con ASP. Unix - Linux Hay que decir, no obstante, que las mejores prestaciones de este lenguaje son obtenidas trabajando en entorno Unix o Linux y con un servidor Apache, la combinación más corriente en la mayoría de los servidores de Internet que trabajan con PHP. Características de PHP Ventajas •Es un lenguaje multiplataforma •Capacidad de conexión con la mayoría de los manejadores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL •Capacidad de expandir su potencial utilizando la enorme cantidad de módulos (llamados ext's o extensiones). •Posee una amplia documentación en su página oficial ([2]), entre la cual se destaca que todas las funciones del sistema están explicadas y ejemplificadas en un único archivo de ayuda •Es libre, por lo que se presenta como una alternativa de fácil acceso para todos •Permite las técnicas de Programación Orientada a Objetos •Biblioteca nativa de funciones sumamente amplia e incluida •No requiere definición de tipos de variables •Tiene manejo de excepciones (desde php5) Desventajas •No posee una abstracción de base de datos estándar, sino bibliotecas especializadas para cada motor (a veces más de una para el mismo motor) •No posee adecuado manejo de internacionalización, unicode, etc •Por su diseño dinámico no puede ser compilado y es muy difícil de optimizar •Por sus características favorece la creación de código desordenado y complejo de mantener •Si bien PHP no obliga a quien lo usa a seguir una determinada metodología a la hora de programar (muchos otros lenguajes tampoco lo hacen), aún estando dirigido a alguna en particular, el programador puede aplicar en su trabajo cualquier técnica de programación y/o desarrollo que le permita escribir código ordenado, estructurado y manejable •Un ejemplo de esto son los desarrollos que en PHP se han hecho del patrón de diseño Modelo Vista Controlador (o MVC), que permiten separar el tratamiento y acceso a los datos, la lógica de control y la interfaz de usuario en tres componentes independientes. Conclusión En cualquier caso, para fines de desarrollo en local, podemos contentarnos en un principio de trabajar con cualquier sistema. Solamente en casos de programación realmente avanzada podremos confrontarnos con problemas relacionados con el sistema operativo utilizado o el servidor en el que hacemos correr nuestras páginas. Hay que pensar también que, en casos puntuales para los que nuestro PC pueda quedarse corto, podemos hacer directamente nuestras pruebas en el servidor donde alojamos nuestro sitio el cual será muy probablemente, como hemos dicho, un Unix o Linux funcionando con Apache. http://www.monografias.com/trabajos66/introduccion-php/introduccionphp2.shtml#caracteria HTML: Una idea en evolución Quisiera utilizar las siguientes líneas para contaros la historia del HTML, pero no sin antes hacer constar que detrás de unos pocos nombres y fechas hay mucho más trabajo. Concretar el inicio de algo siempre es difícil, aunque haya sido creado por el hombre. ¿Dónde está el límite entre el proyecto de idea y el resultado final? Como muchos de nosotros no hemos estado en ese proceso nos tendremos que contentar con lo establecido. Quisiera utilizar las siguientes líneas para contaros la historia del HTML, pero no sin antes hacer constar que detrás de unos pocos nombres y fechas hay mucho más trabajo, conexiones, ideas y nombres que por cuestiones de espacio, tiempo y claridad quedan exentas de este artículo. Ante todo, definir de que estamos hablando exactamente: HTML es el acrónimo de HyperText Markup Language, que traducido a nuestro idioma es Lenguaje de Marcación de Texto. Es una herramienta para que el ordenador conectado a Internet interprete como visualizar el documento. No es un lenguaje de programación y no tiene compilador alguno, así que si hay algún error que no detecta lo visualizará de la manera en la que lo ha entendido. Es un sistema de etiquetas que indica al ordenador cuando hay que señalar una cursiva, separar un párrafo o definir el color del texto. De todas maneras, tiene sus limitaciones así que a menudo se utilizan otras herramientas como las hojas de estilo, que le dan mayor libertad al diseñador. En concreto, el HTML le da las indicaciones mencionadas al programa cliente, el browser o navegador para que presente el documento en la pantalla de la manera adecuada. El HTML se hizo popular por su sencillez, era fácil de aprender y eso lo hace accesible a mayor número de personas. Estos documentos web deben estar escritos con el mismo “lenguaje” para que diferentes ordenadores puedan leerlos, si alguien utiliza un sistema diferente no podrá compartir su información con los que usan el HTML ni podrá visualizar los de los demás. Por eso la tendencia es crear un estándar que evoluciona poco a poco y que es compatible con la versión anterior. La creación El físico nuclear Tim Berners Lee definió la primera versión de HTML en el año 1989. Después evolucionaría hasta llegar a cuatro versiones más. HTML 4 fue la última en 1998. Después llegaría el lenguaje que aun utilizamos, el XHTML hijo del XML y el HTML. No caigamos en el error de pensar que uno supone la desaparición del otro pues el XHTML necesita del HTML para ser entendido por el ordenador. En otras palabras, el HTML abre las puertas y el XHTML trabaja. Pero como decía al principio de estas líneas, nada surge de la nada. Berners Lee desarrolló su idea mientras trabajaba en el CERN (Centro Europeo para la investigación Nuclear), pretendía facilitar el acceso a todos los datos del Centro independientemente del ordenador en el que se encontrara esa información, tanto si estaba en el propio centro o en los ordenadores de las diferentes instituciones que colaboraban con el CERN. El producto de su idea sería una plataforma de tipo hipertexto y un protocolo de comunicaciones que se denominó HTTP (Hyper Text Transfer Protocol). En su página web, Berners afirma que se puede inventar cualquier cosa que imagines que un ordenador pueda hacer. Y ese fue su caso, imaginó una situación de completa comunicación a partir de unas herramientas que ya existían, convenció a su equipo y superiores que se podían unir y las unió. Hablamos del concepto de Hipertexto (Conocido también como link) con el que se pueden conectar dos elementos entre si y el SGML (Standard General Markup Language) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. Antes de seguir es importante definir la función del HTTP, ya que como vemos está íntimamente relacionado con la evolución y creación del HTML. HTTP es el protocolo utilizado en las transacciones de la World Wide Web. Es el sistema mediante el cual se envían las “peticiones” para acceder a una página web y mediante el cuál ésta responde. El http envía el hipertexto (contenido de las páginas web) para ser visualizado en pantalla. Este protocolo también sirve para enviar información adicional en ambos sentidos, como formularios con mensajes y otros similares. El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html Estos documentos pueden ser mostrados por los visores o "browsers" de paginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer. También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio publicitario giratorio entre página y página. http://www.monografias.com/trabajos7/html/html.shtml#que Los Padres del HTML El Hipertexto: El primero en usar este término fue Ted Nelson en su artículo “No more teacher’s dirty looks”. Utilizaba ésta palabra para referirse a escritos no secuenciales que coordinaran la presentación de cualquier tipo de información, texto, imagen o audio. Un media donde el usuario pudiera interactuar con la información. En un inicio Nelson trabajaba con tarjetitas de papel relacionadas entre ellas por palabras clave. Con esta idea crea, en los años sesenta, la organización Xanadu con el fin de aplicar el concepto de hipertexto a otros tipos de trabajos.Tampoco debemos olvidar a Vannevar Bush, que dieciocho años antes había hablado de una idea muy similar con otro nombre, el memex. En su artículo “As we may think” publicado en la revista The Atlantic Monthly en 1945, Bush expone su idea de compartir información especializada mediante las máquinas y poco más tarde crea el memex, un dispositivo mecánico para almacenar libros y grabaciones. La genialidad del invento se basaba en la búsqueda de información que era rápida, sencilla y no-lineal. Sería ésta la idea base del que ahora conocemos hipertexto. El Hipertexto como se le conoce en nuestros días es un instrumento donde se encuentran y cruzan diversos documentos. Normalmente el hipertexto funciona con hipervínculos, así se puede acceder rápidamente a un documento relacionado con el que se ha consultado inicialmente. Cuando empezaban a popularizarse los ordenadores personales en los años ochenta IBM ideó un sistema de guía y enlace para sus PC mientras que Macintosh desarrollaba la Intermedia y la Hypercard. El SGML (Standard Generalized Markup Language) fue publicado por la Organización Internacional de Estándares el 1986. En español significa Lenguaje Estándar de Marcación General. Se trata de un sistema que organiza y etiqueta documentos. Con él se especifican las reglas de etiquetado aunque no impone ningún conjunto de etiquetas en especial. Es con estos términos que se define el HTML. Uno de sus principales usuarios es la industria de publicación de documentos. Ésta crea y mantiene documentos que luego son llevados a otros formatos, entre ellos HTML, Postscript, RTF, etc. Tendencia del HTML La idea de Berners-Lee surgió hacia el 1989 y en los dos años siguientes definía el HTML como un subconjunto del SGML al que más tarde llamaría nivel 0. Esta primera versión solamente marcaba encabezados, listas y anclas pero fue suficiente para que se creara la World Wide Web. Surgieron varias versiones de este primer HTML pero ninguna de ellas llegaría a convertirse en el estándar oficial. Lo más cercano fue el HTML 2.0, al cual se le puso el nombre para distinguirlo de la colección de estándares no oficiales que iban surgiendo. Tim Berners fundaría el W3C (World Wide Web Consotium) en 1995 y poco después surgió el borrador de la tercera versión, HTML 3.0. Éste daba mucha más libertad de creación al diseñador web. Facilitaba la creación de tablas, el texto podía fluir alrededor de las figuras y se mostraban elementos matemáticos complejos. Sus creadores pretendían que fuera compatible con la versión anterior pero era demasiado complejo como para que lo soportaran los navegadores de la época. En septiembre de ese mismo año se abandonó el proyecto debido a la falta de apoyo de los fabricantes de navegadores web. La siguiente versión tampoco llegó a ser propuesta oficialmente. Una nueva versión, el HTML 3.2 abandonaba muchos de los elementos que se habían introducido en el HTML 3.0 a cambio de acoger los elementos que habían desarrollado los fabricantes de navegadores web como Netscape y Mosaic. Por ejemplo, se abandonó la posibilidad de introducir fórmulas matemáticas complejas para delegarlo en un estándar distinto, el MathML. La última versión es el HTML 4.0, que también incluye muchos elementos específicos que habían sido desarrollados para un navegador web determinado pero que, a su vez, calificó a muchos de ellos como “desaprobados”. El camino evolutivo del HTML ha sido complejo, se ha tenido que lidiar con muchas partes y finalmente ha cesado. Pero las tecnologías continúan avanzando y su heredero ahora es el XHTML. La base y el objetivo son los mismos pero esta vez entra un elemento nuevo en escena, el XML. Otro estándar que se asemeja en funcionalidad al SGML pero que es más sencillo y más joven. Así pues de la “fusión” de estos dos estándares, XML y HTML, surge el XHTML. CSS ¿Qué es CSS? CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación. CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación. A pesar de que la recomendación oficial del grupo de trabajo de la W3C ya había alcanzado la estabilidad requerida para que fuera soportada por los principales navegadores comerciales, como Netscape e Internet Explorer, tan tempranamente como en el año 1998, la situación de entonces, comúnmente conocida como la “guerra de los navegadores”, hacía que los intereses comerciales de las dos compañías en lucha por el mercado de usuarios de Internet se interpusieran en el camino de las CSS. Netscape 4 e Internet Explorer 4 incorporaron parcialmente un soporte a esta recomendación, pero éste dejaba mucho que desear, especialmente en Netscape 4, por lo que no era plausible la incorporación de las CSS en el diseño de sitios salvo en un muy mínimo número de características, y esto aún con reservas, puesto que la manera de tratar los estándares era muy diferente y por eso ni aún así se podía asegurar una visualización correcta de la misma hoja de estilos. El uso más amplio de las posibilidades de las CSS en Netscape 4, por ejemplo, podía llegar a causar un"crash" en el browser sin explicación alguna. Internet Explorer 4 tenía una mejor implementación de la recomendación CSS nivel 1, pero, de nuevo, parcial -aunque permitía el uso de un mayor número de características, como aquéllas que exceden a la tipografía (la parte de las reglas de las CSS pensada para reemplazar al tradicional uso de tablas en el diseño de "layouts"). La situación, hoy, es muy diferente. Netscape 4 acaparaba, según estadísticas, el 80% de usuarios, al menos en Estados Unidos. Desde el lanzamiento de Internet Explorer 5 -que tuvo problemas al principio, luego solucionados mayormente con la versión 5.5-, esta situación cambió radicalmente y hoy es éste el navegador más usado. No obstante no incorporaba el soporte completo de las CSS nivel 1. Habría que esperar a las recientes versiones 6, para esto, e incluso para un soporte parcial de las CSS nivel 2. Otros navegadores, como Opera (el tercer navegador más usado), cuya última y también reciente versión es la 6, incluye el mismo soporte. A diferencia de entonces, hoy, CSS ya no es una novedad, pero ahora ya no hay pretextos para no usarla. Y es posible utilizar ciertas posibilidades más amplias de las CSS, como el control de otras características gráficas tales como imágenes y colores de fondo, márgenes exactos y bordes, para evitar el trabajoso y a veces poco gratificante diseño de tablas complejas para un "layout", que incluye frecuentemente tablas anidadas y complicados algoritmos de combinación de celdas (me refiero a la forma en la que los navegadores resuelven esto para su graficación), características que hacen al archivo muy pesado para descargar, porque inundan el código con la extensa serie de etiquetas requeridas. Y también, hoy, la "guerra de los navegadores" ha terminado, y la W3C y los estándares empiezan a liderar el camino, por lo que ya no hay tantas trabas para un uso más extendido, aunque medido, de las CSS. En vista de esta breve recapitulación, entonces, podríamos decir que los beneficios de usar CSS son dobles. Por un lado, evitamos hacer a los archivos demasiado pesados (excluyendo el largo código requerido para las tablas anidadas y el añadido de características gráficas), y definimos el "estilo visual" de un sitio entero sin necesidad de hacerlo etiqueta por etiqueta, para cada una de las páginas. Por otro, trabajamos con estándares, y separamos hasta cierto punto la estructura (vale decir, el código) de la presentación, logrando una manera más nítida de trabajar, y lo que es más: en un sencillo documento CSS, definimos lo que yo llamaría una "plantilla gráfica" para todo un sitio. Vale decir, que cualquier cambio hecho a un estilo CSS, se reflejará en todos los elementos que sean referidos a éste, automáticamente, con sólo editar un sencillo documento CSS. INICIO Será la página de inicio, que contiene un vídeo introductorio en flash, también se puede observar en la esquina superior derecha (debajo de menú) que hay un “enlace” a la Lista De Bodas, esta aplicación es externa a nuestro trabajo, pero el cliente desea que los usuarios puedan tener acceso rápido y cómodo. Se ha optado por un diseño sencillo, sin sobrecargas, lo que permite una rápida visualización de toda la página en un golpe de vista y sin retardos al cargar la página. Para la elaboración del flash hemos tenido que introducir el siguiente código en la página inicial: <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000" width="620" height="480"> <param name="movie" value="portada.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="portada.swf" width="640" height="480"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- --> <div> <h4></h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player. gif" alt="" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> Gracias a los objetos creados se visualiza de manera correcta el flash. PROMOCIONES La siguiente opción del menú será promoción, donde se hace referencia a las distintas oportunidades que ofrece la empresa, en ella existe la posibilidad de introducir una foto, para que llame más la atención a los usuarios de la web cuando accedan a ella. Hemos dado un formato a la promoción, para que al leer de la base de datos, se muestre de manera correcta la promoción, usando la tipografía empleada en la web, y quedando cuadrado todo. $promocion=$conex->sentencia("SELECT id,titulo,texto,foto from promocion order by id DESC limit 1"); De este código tenemos la consulta a la base de datos, la sentencia nos devuelve los campos de la última promoción. <td colspan="2" valign="top" align="justify"> <div id="content_inside_main"> <h3><?php echo utf8_encode($promocion[0][1]);?></h3> </div> </td> Con dicha parte del código, obtenemos el titulo de la promoción insertada en último lugar. Se ha reservado espacio para dos columnas distintas, en una estará la posible imagen de la promoción y en la otra el texto que explique la promoción, a continuación mostramos como quedará el código: <tr> <td height="450" valign="middle" width="275"> <div id="content_inside_main3"> <img src="images/promocion/<?php echo $promocion[0][3];?>" height="300" width="250"/> </div> </td> <td align="justify" valign="middle" width="275"><div id="content_inside_main3"> <p><?php echo utf8_encode($promocion[0][2]);?></p> </div> </td> </tr> En el primer acceso a la variable que guarda la consulta obtenemos la ruta donde se encuentra la imagen para poder cargarla. Y en el segundo acceso el texto de la promoción, donde aplicamos utf8_encode para solventar posibles errores al sacar la información de la consulta de la base de datos. CATÁLOGO Siguiendo por la navegación de la web, encontramos el catálogo, que va a ser el fuerte de la web, donde la gente entre para ver los productos, para ello los mostraremos en la galería con las distintas “secciones y sub-secciones”, implementadas en las dos fases anteriores. Cada sección de la galería mostrará 20 fotos por página, de acuerdo con las exigencias del cliente, contendrá además una paginación, con todas las fotos de su respectiva sección y/o sub-sección. Las imágenes de cada sección se recogen de la carpeta correspondiente y se redimensionan dinámicamente al mismo tamaño cada una mostrando 5 fotos en cada una de las 4 filas de la sección. Esta redimensión dinámica que hemos realizado mediante código php permite almacenar solamente las fotos originales sin tener que generar thumbnails en otra carpeta con el tamaño en miniatura ahorrando espacio en el sistema de archivos y haciendo muy sencillo el cambio de tamaño, puesto que tan sólo habría que modificar una propiedad en el código que se encarga de mostrar las hileras de fotos. A continuación podemos ver el código en cuestión: echo "<div style=\"float:left\"><a href=\"images/catalogo/iluminacion/ $archivos[$imagen_a_empezar]\" rel=\"lightbox-\" title=\"$descripcion\"><imgsrc=\"/prueba1/images/catalogo/iluminacion/ $archivos[$imagen_a_empezar]\" style=\"width: 120px; height: 120px; marginleft:5px;\"/></a></div> Recogemos aquí un ejemplo de la sección de iluminación en el que obtenemos una foto de la carpeta correspondiente a los productos de iluminación, le asignamos al título de la imagen la descripción correspondiente que hemos obtenido previamente de la base de datos y configuramos los valores de los parámetros que van a dar un tamaño de ancho y alto en pixels y un margen entre foto y foto como si fuera un marco alrededor de la foto. Esto se hace para cada foto que se encuentra en la carpeta y así una a una se van formando las hileras, además incluye una referencia al script encargado de hacer el efecto de zoom mostrando la foto a tamaño real al hacer click sobre ella, tal como se puede apreciar más adelante en la imagen que hemos tomado como ejemplo para que se visualice el resultado. Al pinchar en una foto se ejecutará un script para conseguir hacer el efecto de zoom mostrando la imagen al tamaño real con el que se guardó la imagen en la carpeta incluyendo las opciones de navegar de una foto a otra sin necesitar cerrarla. También se visualizará la descripción de la foto correspondiente a la base de datos y debajo de ella se verá el número de imagen en la que se encuentra el cliente sobre el número total de fotos de la sección. En cuanto a la paginación, cada 20 imágenes se genera dinámicamente una página nueva con las siguientes 20 imágenes. Se disponen de las opciones de navegar entre páginas consecutivas o ir a la primera o la última página directamente o elegir el número de página que se quiere ver. Nos hemos ceñido a las especificaciones de nuestro cliente y este es el resultado obtenido, con el que buscamos atraer a los clientes y que puedan visualizar los productos de la manera más clara y cómoda posible. Ejemplo galería A continuación vamos a mostrar el código que realiza las funciones principales de la visualización de las galerías y explicar paso a paso como se ha ido llevando a cabo este proceso. Primero vamos a ver cómo se accede a una carpeta donde se encuentran las fotos de la sección que queremos mostrar y cómo almacenamos los datos que nos interesan. // Directorio del cuál vamos a extraer las imágenes $path= $_SERVER["DOCUMENT_ROOT"]."aquí iría la ruta de la carpeta"; $dh = opendir($path); $archivos = array(); while (($file = readdir($dh)) !== false) { if($file != "." && $file != "..") { if(substr($file, -4) == '.jpg') $archivos[] = $file; } } closedir($dh); sort($archivos); Lo primero que se hace es indicar la ruta donde se encuentra la carpeta a la que queremos acceder. Se abre la carpeta y se va recorriendo cada uno de los objetos que contiene la misma comprobando que el nombre del objeto termine con la extensión “.jpg” para poder distinguir las imágenes de los demás tipos de archivos si los hubiera. De ese modo, todos los nombres de las imágenes se van almacenando en una estructura que posteriormente se ordena en el mismo orden en el que están dentro de la carpeta y como la carpeta se ordena por la fecha más reciente siempre mostraremos en la primera página de la galería las fotos más recientemente insertadas, tal como el cliente pidió en los requisitos. Vamos a ver ahora cómo se ha realizado la paginación para ir navegando en grupos de 20 fotos. $total_imagenes=count($archivos); $image_a_mostrar=19; if(isset($_GET['pag'])){ $imagen_a_empezar=($_GET['pag']-1)*$image_a_mostrar; $imagen_a_terminar=$imagen_a_empezar+$image_a_mostrar; $pag_act=$_GET['pag']; }else{ $imagen_a_empezar=0; $imagen_a_terminar=$imagen_a_empezar+$image_a_mostrar; $pag_act=1; } $pag_ant=$pag_act-1; $pag_sig=$pag_act+1; $pag_ult=$total_imagenes/$image_a_mostrar; $residuo=$total_imagenes%$image_a_mostrar; if($residuo>0) $pag_ult=floor($pag_ult)+1; echo "<a href=\"./\" onclick=\"Pagina('1')\">Primero</a> "; if($pag_act>1) echo "<a href=\"?pag=".$pag_ant."\" onclick=\"Pagina('$pag_ant')\">Anterior</a> "; echo "<strong>Pagina ".$pag_act."/".$pag_ult ."</strong>"; if($pag_act<$pag_ult) echo " <a href=\"?pag=".$pag_sig."\" onclick=\"Pagina('$pag_sig')\">Siguiente</a> "; echo "<a href=\"?pag=". $pag_ult."\" onclick=\"Pagina('$pag_ult')\">Ultimo</a>"; Primero de todo se cuenta el número total de fotos que contiene la carpeta para poder dividir el total entre 20 y así poder saber el número total de páginas que van a hacer falta componer. El funcionamiento es bastante obvio, para una misma página se van recorriendo las imágenes y se van contando de una en una comprobando que la cuenta es inferior a 20, en el momento en que se supera la cifra se crea dinámicamente una nueva página y se repite el proceso con las imágenes restantes asociando cada foto con su página correspondiente. Pasamos ahora a describir cómo se van insertando las imágenes en las hileras que forman la tabla de imágenes de la sección seleccionada en el catálogo además del acceso a la base de datos para recoger la información de la imagen. <div style="width: 632px" > <?php while($imagen_a_empezar<=$imagen_a_terminar){ if($imagen_a_empezar>=$total_imagenes) break; ?> <?php $result = mysql_query("SELECT descripcion FROM fotos WHERE nombre ='$archivos[$imagen_a_empezar]'"); if($row = mysql_fetch_array($result)){ $descripcion = $row['descripcion']; } ?> <?php echo "<div style=\"float:left\"><a href=\"images/catalogo/iluminacion/$archivos[$imagen_a_empezar]\" rel=\"lightbox-\" title=\"$descripcion\"><img src=\"/seleccion/images/catalogo/sección_correspondiente/ $archivos[$imagen_a_empezar]\" style=\"width: 120px; height: 120px; marginleft:5px;\"/></a></div> "; $imagen_a_empezar++; } ?> Primero se crea una tabla donde van a quedar encuadradas las imágenes. Ya tenemos divididas las páginas y las imágenes que corresponden a cada página así que estas instrucciones se irán repitiendo en cada una de las páginas de la sección. Lo que se hace para cada foto de la carpeta es obtener el nombre de la imagen y accediendo a la base de datos por medio de la consulta que vemos en color azul, buscamos la fila de la tabla que contiene la información de cada imagen registrada en el sistema cuyo nombre es igual al de la imagen que estamos procesando y de ese modo, obtener la descripción que se corresponde a la imagen. Una vez hemos conseguido el nombre y la descripción de la imagen se procede a insertar en la tabla la imagen en miniatura tal y como hemos descrito anteriormente. Cabe destacar que como las secciones son fijas, hemos asociado los nombres de las carpetas, y por tanto las rutas a las mismas, a cada una de las secciones del catálogo m por lo que en cada página correspondiente a cada sección las imágenes se buscarán en la carpeta asociada a la sección actual. Si estamos accediendo a la página de la sección de regalos, entonces se accederá a la ruta en la que se encuentra la caperta “regalos” y por eso, para obtener la foto tan solo nos hace falta saber el nombre de la imagen, puesto que la ruta completa la sabemos con la página que estamos mostrando en ese mismo momento. Hay que decir que esta parte del proyecto ha sido el mayor reto que hemos tenido y lo que más tiempo y esfuerzo nos ha llevado puesto que varias veces tuvimos que rehacer por completo el código dado que una vez finalizado las pruebas que realizábamos nos daban un resultado indeseado. Después de un gran esfuerzo y una gran labor de investigación se llegó a un código que parecía resolver nuestro problema pero al probarlo resultó que después de varias inserciones empezaba a fallar y había imágenes que no se insertaban y otras que desaparecían aleatoriamente, lo que nos llevó a replantearnos la estrategia de cómo lograr mostrar las fotos con el orden, la paginación, la descripción y el tamaño adecuados para las características que se estaban buscando. El esfuerzo parece haber dado sus frutos y ahora dejamos a disposición del cliente un catálogo tal como nos había pedido en sus especificaciones, lo que nos recompensa el trabajo invertido. Se ha podido observar en el código la mezcla de lenguajes utilizados, tanto php como html y cláusulas mysql para obtener la información de la base de datos. También se pueden apreciar en la imagen en la que mostramos el efecto de zoom que se utilizan algunos componentes para navegar entre foto y foto y para cerrar la ventana que contiene la imagen. Todos esos elementos, son intercambiables por otros distintos, puesto que la apariencia que se observa corresponde a imágenes almacenadas que pueden cambiarse por otras imágenes a gusto del cliente. La única restricción es que deben mantener los mismos nombres que tienen actualmente. Si, por ejemplo, se quisiera cambiar la imagen que corresponde a la etiqueta “Next” cuya función es mostrar la imagen siguiente por otra que contiene la etiqueta en Castellano, “Siguiente”, habría que almacenar en la carpeta correspondiente la imagen que corresponde a “Siguiente” y nombrarla con el mismo nombre que tenía la imagen de la etiqueta “Next”. Nos disponemos ahora a descibir la sección de las Noticias. Ciclo de vida En términos de posicionamiento planificado, el posicionamiento web contempla una fases determinadas. La tabla siguiente es una síntesis de fases y de los resultados esperable de cada una de ellas. En lo que sigue, se dar por supuesto un posicionamiento ético, es decir, se da por supuesto una campaña de posicionamiento que persigue obtener una buena posición en los resultados que se corresponda con los contenidos reales del sitio web (posicionamiento natural). Tabla 4: Ciclo de vida de una campaña de posicionamiento Fase Objetivo Herramientas Resultados 1. Análisis 1. Determinación de la(s) palabras clave para las cuales se desea optimizar el sitio. 2. Determinación de posibles partners que pueden enlazar nuestro sitio (con enlaces recíprocos, por nuestra parte, en su caso). 1. Análisis y estudio del sitio por un experto humano y/o análisis con programas específicos (p.e., IBP3, Arelis). 2. Benchmarking por comparación de la mejor competencia; realizado por un experto humano o bien un programa específico (o ambas cosas). 1. Ficha de identidad del sitio (y de cada sección principal si es el caso) incluyendo: •Título •Frase descriptiva (tagline) •MetadatosDescription •MetadatosKeywords 2. Ficha de propuesta de recomendaciones de optimización para el sitio. 3. Lista inicial de partners que pueden enlazar nuestro sitio. 2. Diseño Optimización de la página principal del sitio y/o de las secciones principales. Programas de edición de páginas web o sistemas de gestión de contenidos. Código fuente del sitio web optimizado para la campaña en los apartados de: •metadatos •contenidos •texto del sitio •navegación del sitio •enlaces internos •enlaces hacia otros sitios •enlaces desde otros sitios, •etc. 3. Implantación Desarrollo de la campaña. Formularios de alta de los distintos directorios y motores; fichas de seguimiento, etc. 1. Acciones de alta. Primero: directorios. Segundo: motores. 2. Acciones de captación de enlaces hacia el sitio. Observaciones al ciclo de vida: Prelación. Se recomienda empezar dando altas en directorios primero, dejar pasar una o dos semanas y dar de altas en motores de búsqueda después. Ritmo. Los directorios y motores de búsqueda actualizan sus índices cada mes o cada quince días. Por tanto, conviene dejar pasar al menos un mes después de una campaña de altas antes de empezar a analizar resultados. Ciclo. Dependiendo del contexto, puede ser aconsejable repetir el ciclo (análisis, diseño e implantación) entre dos y cuatro veces al año. Objetivos. Es aconsejable dar de alta el sitio en, al menos, dos o tres directorios generalistas (p.e. Yahoo y DMoz) y dos o tres motores de búsqueda genéricos (p.e. Google y AllTheWeb). Además, dependiendo de las características del sitio, convendrá darlo de alta en directorios temáticos específicos y en motores o directorios regionales. Modelos de fichas de anotación Por último, presentamos cinco modelos de fichas que han demostrado ser útiles en una campaña de posicionamiento planificado. A la presentación de cada modelo de ficha sigue una explicación de su utilidad. Ficha 1: Recomendaciones de optimización de página principal o de secciones principales del sitio Head Metadatos Texto Navegación Enlaces ... ... Explicación Ficha 1: Uno de los primeros pasos en una campaña de posicionamiento web es la optimización del código fuente de la página. En esta ficha recogeremos las recomendaciones principales. Una vez el sitio esté optimizado de acuerdo con las recomendaciones de la ficha, podremos proceder a la campaña de altas. Ficha 2: Identidad del sitio o de cada sección principal del sitio Título Tagline Descripción Palabras Clave Explicación Ficha 2: Ficha que debe rellenarse antes de empezar una campaña de altas e inmediatamente después de haber optimizado el código fuente del sitio web (ver. Ficha 1). Naturalmente, el título, la tagline (frase simple de explicación del sitio), etc., deben consensuarse con el equipo de dirección del sitio web puesto que los datos de esta ficha son un condensado de la identidad del sitio. Esta identidad no puede ser distinta de la visión que tiene del sitio la dirección del mismo. La función de esta ficha, además de disponer de una identidad eficaz, consiste en asegurarnos de entrar los mismos datos en los distintos directorios y motores donde pensemos dar de alta el sitio web. Ficha 3: Altas o Modificaciones Motor de Búsqueda/ Directorio Alta Modificación Fecha ... ... ... ... ... ... ... ... Explicación Ficha 3: Recordatorio de las acciones de alta en directorios y motores. Ficha 4: Análisis de resultados - I. Indicadores estadísticos Indicadores Resultados Fechas Traffic Rank PageRank Número de enlaces en Motor 1 Número de enlaces en Motor 2 ... ... ... Explicación Ficha 4: Mediante esta ficha podemos realizar in seguimiento cronológico de los indicadores más importantes en el posicionamiento: el traffic rank , el page rank y el número de enlaces encontrados en diversos motores. Ficha 5: Análisis - II. Indicadores de posicionamiento Motor PC1 PC2 PC3 PC4 Google AltaVista AllTheWeb MSN ... ... ... ... ... Explicación Ficha 5: Al igual que la ficha anterior, esta ficha nos permite realizar un seguimiento de la ubicación de nuestro sitio en diversos motores para cada una de las palabras clave para las cuales deseamos posicionarnos de manera óptima. http://www.hipertext.net/web/pag216.htm Comercio electrónico Las redes mundiales de información están transformando al mundo y acercando más a la gente a través de la innovación de las comunicaciones mundiales, lo cual posibilita cambios en todos los ámbitos de la actividad humana, por ejemplo la competitividad, el empleo y la calidad de vida de las naciones. Con las nuevas tecnologías, el tiempo y la distancia dejan de ser obstáculos, los contenidos pueden dirigirse a una audiencia masiva o a un pequeño grupo de expertos y buscar un alcance mundial o meramente local. Las redes mundiales de información, como Internet no conocen fronteras. Internet es un medio de comunicación global, que permite el intercambio de información entre los usuarios conectados a la red y que conecta a unos 8 millones de servidores encargados de servicios de información y de todas las operaciones de comunicación y de retransmisión; llega hasta unos 250 millones de usuarios en más de 100 países. Internet ofrece una oportunidad única, especial y decisiva a organizaciones de cualquier tamaño. La rápida difusión y el gran interés en el mundo de la informática, ha permitido la creación de tecnología Internet/ Web, una herramienta fundamental para redes de computadoras y sus usuarios. Internet ofrece un nuevo mercado que define la "economía digital". Los productores, proveedores de bienes/servicios y usuarios logran tener acceso y transmisión mundial de la información y esparcimiento en forma sencilla y económica, sean con fines comerciales o sociales. La apertura de mercados es fundamental para el rápido crecimiento del uso de nuevos servicios y la asimilación de tecnologías nuevas. En la práctica, las empresas están comenzando a usar Internet como un nuevo canal de ventas, sustituyendo las visitas personales, correo y teléfono por pedidos electrónicos, ya que gestionar un pedido por Internet cuesta 5% menos que hacerlo por vías tradicionales. Nace entonces el comercio electrónico, como una alternativa de reducción de costos y una herramienta fundamental en el desempeño empresarial. Sin embargo, la aparición del comercio electrónico obliga claramente a replantearse muchas de las cuestiones del comercio tradicional, surgiendo nuevos problemas, e incluso agudizando algunos de los ya existentes. En ese catálogo de problemas, se plantean cuestiones que van, desde la validez legal de las transacciones y contratos sin papel, la necesidad de acuerdos internacionales que armonicen las legislaciones sobre comercio, el control de las transacciones internacionales, incluido el cobro de impuestos; la protección de los derechos de propiedad intelectual, la protección de los consumidores en cuanto a publicidad engañosa o no deseada, fraude, contenidos ilegales y uso abusivo de datos personales, hasta otros provocados por la dificultad de encontrar información en Internet, comparar ofertas y evaluar la fiabilidad del vendedor y del comprador en una relación electrónica, la falta de seguridad de las transacciones y medios de pago electrónicos, la falta de estándares consolidados, la proliferación de aplicaciones y protocolos de comercio electrónico incompatibles y la congestión de Internet. Nuestro país carece al presente, de una normativa jurídica en relación al comercio electrónico y el formato digital para la celebración de actos jurídicos. En el contexto mundial, nuestro país se encuentra gravemente desactualizado. Por ello, la observación de la tendencia mundial permite considerar oportuno el tratamiento normativo siendo también necesario el dominio de los aspectos técnicos que permitan brindar una regulación que viabilice una solución para una problemática concreta y contemporánea conforme a los estándares internacionales. En el presente trabajo nos proponemos analizar los aspectos generales del comercio electrónico, prestando especial atención a la contratación informática a la luz de la normativa vigente y de la que resulte aplicable por analogía. Asimismo expondremos, dada la reciente aprobación de la ley de firma digital en nuestro país, el funcionamiento de la misma, tanto en el sector público nacional como en el ámbito privado. La finalidad de nuestro esfuerzo consiste en dilucidar si es conveniente o no sancionar legislación integral sobre el tema y, en caso afirmativo, determinar los alcances de la misma. Pondremos a continuación tres definiciones que nos parecen apropiadas al término Comercio Electrónico: "Es la aplicación de la avanzada tecnología de información para incrementar la eficacia de las relaciones empresariales entre socios comerciales". (Automotive Action Group in North America) "La disponibilidad de una visión empresarial apoyada por la avanzada tecnología de información para mejorar la eficiencia y la eficacia dentro del proceso comercial." (EC Innovation Centre) "Es el uso de las tecnologías computacional y de telecomunicaciones que se realiza entre empresas o bien entre vendedores y compradores, para apoyar el comercio de bienes y servicios." Conjugando estas definiciones podemos decir que el comercio electrónico es una metodología moderna para hacer negocios que detecta la necesidad de las empresas, comerciantes y consumidores de reducir costos, así como mejorar la calidad de los bienes y servicios, además de mejorar el tiempo de entrega de los bienes o servicios. Por lo tanto no debe seguirse contemplando el comercio electrónico como una tecnología, sino que es el uso de la tecnología para mejorar la forma de llevar a cabo las actividades empresariales. Ahora bien, el comercio electrónico se puede entender como cualquier forma de transacción comercial en la cual las partes involucradas interactúan de manera electrónica en lugar de hacerlo de la manera tradicional con intercambios físicos o trato físico directo. Actualmente la manera de comerciar se caracteriza por el mejoramiento constante en los procesos de abastecimiento, y como respuesta a ello los negocios a nivel mundial están cambiando tanto su organización como sus operaciones. El comercio electrónico es el medio de llevar a cabo dichos cambios dentro de una escala global, permitiendo a las compañías ser más eficientes y flexibles en sus operaciones internas, para así trabajar de una manera más cercana con sus proveedores y estar más pendiente de las necesidades y expectativas de sus clientes. Además permiten seleccionar a los mejores proveedores sin importar su localización geográfica para que de esa forma se pueda vender a un mercado global. VENTAJAS Ventajas para los Clientes Permite el acceso a más información. La naturaleza interactiva del Web y su entorno hipertexto permiten búsquedas profundas no lineales que son iniciadas y controladas por los clientes, por lo tanto las actividades de mercadeo mediante el Web están más impulsadas por los clientes que aquellas proporcionadas por los medios tradicionales. Facilita la investigación y comparación de mercados. La capacidad del Web para acumular, analizar y controlar grandes cantidades de datos especializados permite la compra por comparación y acelera el proceso de encontrar los artículos. Abarata los costos y precios. Conforme aumenta la capacidad de los proveedores para competir en un mercado electrónico abierto se produce una baja en los costos y precios, de hecho tal incremento en la competencia mejora la calidad y variedad de los productos y servicios. Ventajas para las empresas Mejoras en la distribución. El Web ofrece a ciertos tipos de proveedores (industria del libro, servicios de información, productos digitales) la posibilidad de participar en un mercado interactivo, en el que los costos de distribución o ventas tienden a cero. Por poner un ejemplo, los productos digitales (software) pueden entregarse de inmediato, dando fin de manera progresiva al intermediarismo. También compradores y vendedores se contactan entre sí de manera directa, eliminando así restricciones que se presentan en tales interacciones. De alguna forma esta situación puede llegar a reducir los canales de comercialización, permitiendo que la distribución sea eficiente al reducir sobrecosto derivado de la uniformidad, automatización e integración a gran escala de sus procesos de administración. De igual forma se puede disminuir el tiempo que se tardan en realizar las transacciones comerciales, incrementando la eficiencia de las empresas. Comunicaciones de mercadeo. Actualmente, la mayoría de las empresas utiliza el Web para informar a los clientes sobre la compañía, a parte de sus productos o servicios, tanto mediante comunicaciones internas como con otras empresas y clientes. Sin embargo, la naturaleza interactiva del Web ofrece otro tipo de beneficios conducentes a desarrollar las relaciones con los clientes. Este potencial para la interacción facilita las relaciones de mercadeo así como el soporte al cliente, hasta un punto que nunca hubiera sido posible con los medios tradicionales. Un sitio Web se encuentra disponible las 24 horas del día bajo demanda de los clientes. Las personas que realizan el mercadeo pueden usar el Web para retener a los clientes mediante un diálogo asincrónico que sucede a la conveniencia de ambas partes. Esta capacidad ofrece oportunidades sin precedentes para ajustar con precisión las comunicaciones a los clientes individuales, facilitando que éstos soliciten tanta información como deseen. Además, esto permite que los responsables del área de mercadeo obtengan información relevante de los clientes con el propósito de servirles de manera eficaz en las futuras relaciones comerciales. Los sitios Web más sencillos involucran a los clientes mediante botones para enviar mensajes de correo electrónico a la empresa. En otros centros más sofisticados, los clientes rellenan formularios, con el objeto de que desarrollen una relación continua con la compañía, cuyo fin es informar tanto sobre los productos y servicios como obtener información sobre las necesidades que los clientes tienen sobre los mismos. De esta manera, se obtiene publicidad, promoción y servicio al cliente a la medida. El Web también ofrece la oportunidad de competir sobre la base de la especialidad, en lugar de hacerlo mediante el precio, ya que desde el punto de vista del mercadeo, rara vez es deseable competir tan sólo en función del precio. El mercadeo intenta satisfacer las necesidades de los clientes en base a los beneficios que buscan, lo que quiere decir que el precio depende de la valorización del cliente, y no de los costos; tales oportunidades surgen cuando lo ofrecido se diferencia por elementos de mercadeo distintos al precio, lo cual produce beneficios cargados de valor, como por ejemplo, la comodidad producida por el reparto directo mediante la distribución electrónica de software. Beneficios operacionales. El uso empresarial del Web reduce errores, tiempo y sobrecostos en el tratamiento de la información. Los proveedores disminuyen sus costos al acceder de manera interactiva a las bases de datos de oportunidades de ofertas, enviar éstas por el mismo medio, y por último, revisar de igual forma las concesiones; además, se facilita la creación de mercados y segmentos nuevos, el incremento en la generación de ventajas en las ventas, la mayor facilidad para entrar en mercados nuevos, especialmente en los geográficamente remotos, y alcanzarlos con mayor rapidez. Todo esto se debe a la capacidad de contactar de manera sencilla y a un costo menor a los clientes potenciales, eliminando demoras entre las diferentes etapas de los subprocesos empresariales. CATEGORIAS El comercio electrónico puede subdividirse en cuatro categorías: La categoría compañía - compañía, se refiere a una compañía que hace uso de una red para hacer ordenes de compra a sus proveedores, recibir facturas y realizar los pagos correspondientes. Esta categoría ha sido utilizada por muchos años, particularmente haciendo uso de EDI ("Electronic Data Interchange") sobre redes privadas o redes de valor agregado ("Value added Networks-VAN"). La categoría compañía - cliente, se puede comparar con la venta al detalle de manera electrónica. Esta categoría ha tenido gran aceptación y se ha ampliado sobre manera gracias al WWW, ya que existen diversos centros comerciales (del Inglés malls) por todo Internet ofreciendo toda clase de bienes de consumo, que van desde pasteles y vinos hasta computadoras. La categoría compañía - administración, se refiere a todas las transacciones llevadas a cabo entre las compañías y las diferentes organizaciones de gobierno. Por ejemplo en Estados Unidos cuando se dan a conocer los detalles de los requerimientos de la nueva administración a través de Internet, las compañías pueden responder de manera electrónica. Se puede decir que por el momento esta categoría esta en sus inicios pero que conforme el gobierno empiece a hacer uso de sus propias operaciones, para dar auge al Comercio Electrónico, está alcanzará su mayor potencial. Cabe hacer mención que también se ofrecerán servicios de intercambio electrónico para realizar transacciones como el regreso del IVA y el pago de impuestos corporativos. La categoría cliente - administración, aún no ha nacido, sin embargo después del nacimiento de las categorías compañía - cliente y compañía - administración, el gobierno hará una extensión para efectuar interacciones electrónicas como serían pagos de asistencia social y regreso de pago de impuestos. RIESGOS Como medio comercial el Web presenta las siguientes deficiencias, derivadas tanto de su tecnología como de su naturaleza interactiva: Entorno empresarial y tecnológico cambiante. Empresas y clientes desean tener flexibilidad para cambiar, según su voluntad, de socios comerciales, plataformas y redes. No es posible evaluar el costo de esto, pues depende del nivel tecnológico de cada empresa, así como del grado deseado de participación en el comercio electrónico. Como mínimo una empresa necesitará una computadora personal con sistema operativo Windows o Machintosh, un módem, una suscripción a un proveedor de servicios de Internet, una línea telefónica. Una compañía que desee involucrarse más, deberá prepararse para introducir el comercio electrónico en sus sistemas de compras, financieros y contables, lo cual implicará el uso de un sistema para el intercambio electrónico de datos (EDI) con sus proveedores y/o una intranet con sus diversas sedes. Privacidad y seguridad. La mayoría de los usuarios no confía en el Web como canal de pago. En la actualidad, las compras se realizan utilizando el número de la tarjeta de crédito, pero aún no es seguro introducirlo en Internet sin conocimiento alguno. Cualquiera que transfiera datos de una tarjeta de crédito mediante el Web, no puede estar seguro de la identidad del vendedor. Análogamente, éste no lo está sobre la del comprador. Quien paga no puede asegurarse de que su número de tarjeta de crédito no sea recogido y sea utilizado para algún propósito malicioso; por otra parte, el vendedor no puede asegurar que el dueño de la tarjeta de crédito rechace la adquisición. Resulta irónico que ya existan y funcionen correctamente los sistemas de pago electrónico para las grandes operaciones comerciales, mientras que los problemas se centren en las operaciones pequeñas, que son mucho más frecuentes. Cuestiones legales, políticas y sociales. Existen algunos aspectos abiertos en torno al comercio electrónico: validez de la firma electrónica, no repudio, legalidad de un contrato electrónico, violaciones de marcas y derechos de autor, pérdida de derechos sobre las marcas, pérdida de derechos sobre secretos comerciales y responsabilidades. Por otra parte, deben considerarse las leyes, políticas económicas y censura gubernamentales. USOS BLIBLIOGRAFÍA XAMPP: http://es.wikipedia.org/wiki/XAMPP Facilitador: Prof. Jesús Rojas http://www.slideshare.net/jesus25dite/servidor-xampp MYSQL http://es.wikipedia.org/wiki/MySQL DREAMWEAVER http://es.wikipedia.org/wiki/Adobe_Dreamweaver PHOTOSHOP http://es.wikipedia.org/wiki/Adobe_Photoshop#Referencias PHP http://php.ciberaula.com/articulo/introduccion_php/ http://www.monografias.com/trabajos66/introduccion-php/introduccionphp2.shtml#caracteria HTML http://www.monografias.com/trabajos7/html/html.shtml#que http://www.maestrosdelweb.com/editorial/htmlhis/ http://www.miportal.edu.sv/portal/comunidad/blogs/coolkids/archive/2009/07/10/ la-historia-de-html-su-evolucion-y-los-diversos-lenguajes-emergentesdiferencias-entre-el-lenguaje-html-y-xml.aspx JAVASCRIPT http://www.maestrosdelweb.com/editorial/%C2%BFque-es-javascript/ POSICIONAMIENTO WEB http://es.wikipedia.org/wiki/Posicionamiento_en_buscadores http://www.hipertext.net/web/pag216.htm COMERCIO ELECTRONICO http://www.monografias.com/trabajos12/monogrr/monogrr.shtml