PresentacióN Final Tecno Azte K Mobile Store

Presentación Final TecnoAzte-K Mobile Store

Comercio Electrónico (E-Commerce) Junio 2009

Presentada por:

Nallely BalderasDaniel Sierra

Secuencia 7CM1

Agenda de Presentación

- Herramienta de Comercio Electrónico empleada.- Principales características- Herramientas técnicas necesarias- Problemática planteada- Análisis de Requerimientos - Solución propuesta- Diseño y creación del sitio móvil- Estructuración y adaptación del sitio- Códigos de ejemplo- Prueba y presentación de la aplicación

Herramienta de Comercio Electrónico Empleada

osCommerce Online Merchant

www.oscommerce.com

http://www.oscommerce.com/


Introducción

osCommerce ha captado un gran crecimiento del comercio celectrónico a la comunidad que consiste en más de 206.300 propietarios y desarrolladores que se apoyan unos a otros y amplian en línea los complementos de osCommerce.


osCommerce de código abierto es una tienda online solución de comercio electrónico que está disponible de forma gratuita bajo la licencia GNU General Public License

Cuenta con un amplio conjunto fuera de caja de la cesta de la compra en línea (out-of-the-box online shopping cart) Funcionalidad que permite a los propietarios de la instalación, ejecutar y mantener las tiendas en línea con el mínimo esfuerzo y sin gastos, honorarios, o las limitaciones involucradas.

Con mas de 8 años de funcionamiento osCommerce ha construido un escaparate de más de 14.100 tiendas en línea que voluntariamente se han añadido a la sección de tiendas, y los poderes de miles de tiendas en línea de todo el mundo.

Principales Caracteristicas

http://images.google.com.mx/imgres?imgurl=http://www.enesquipulas.com/imagenes/comercio-electronico.jpg&imgrefurl=http://www.enesquipulas.com/hoteles.html&usg=__elfyXAp1EsO12aFiAuMx6559EU8=&h=400&w=382&sz=53&hl=es&start=31&tbnid=CRiLJlCfZsC1YM:&tbnh=124&tbnw=118&prev=/images?q=comercio+electronico&gbv=2&ndsp=20&hl=es&sa=N&start=20

http://images.google.com.mx/imgres?imgurl=http://web.usal.es/~jcr/mepyme/Img_Diptico_Az.jpg&imgrefurl=http://klitoysikale.wordpress.com/&usg=__sp97J3K4ly9_fo7FMOZe7e4F3pw=&h=705&w=392&sz=59&hl=es&start=23&tbnid=TJqHITmKZvaVxM:&tbnh=140&tbnw=78&prev=/images?q=comercio+electronico&gbv=2&ndsp=20&hl=es&sa=N&start=20

http://images.google.com.mx/imgres?imgurl=http://www.voie.com.ar/blog/wp-content/2008/05/comercioelectronico.jpg&imgrefurl=http://www.voie.com.ar/blog/tag/pymes/&usg=__y3YyJw8DtV4gjn3S9gMrhS5cvw0=&h=281&w=200&sz=8&hl=es&start=5&um=1&tbnid=RuTLPyDPlFg4TM:&tbnh=114&tbnw=81&prev=/images?q=comercio+electronico&hl=es&lr=&rlz=1G1GGLQ_ESMX274&sa=N&um=1

Compatible con todas las versiones de PHP 4 y 5

Todas las funciones activadas por defecto para una completa solución out-of-the-box

Orientado a objetos de fondo (3,0)

Totalmente multilenguaje con Inglés, alemán, español



Navegador web automático

Instalación Basada en procedimientos

de Actualización usando Scripts PHP

Configuración / Instalación

Configuración / Instalación



Implementación de una plantilla estructurada

Permite los cambios de diseño es adaptable, fácil y rápido de hacer (3,0)

Soporte para imágenes dinámicas

Permitir una fácil integración en un sitio existente (3,0)

Diseño / EsquemaDiseño / Esquema



Cliente / Módulo Front End

-Órdenes almacenadas en la base de datos para una rápida y eficaz recuperación.

-Los clientes pueden ver su historial de pedidos y el estado de la orden.

-Los clientes pueden mantener sus cuentas.

-Addressbook para múltiples envíos y facturación.

-Cesta de compra temporal para los huéspedes y cesta de compra permanente para los clientes.

- Rápida y amigable búsqueda y funciones de búsqueda avanzadas.

Relación dinámica de atributos del producto

HTML basado en las descripciones de los productos

Visualización Automatizada para productos especiales

Control de punto de stock para mostrar productos disponibles

Los clientes pueden suscribirse a los boletines para recibir correos electrónicos relacionados con el producto

Módulo de Catalogo de Productos


Acepta numerosos pagos fuera de línea de procesamiento (cheques, giros postales,

la atención de procesamiento fuera de línea de crédito)

Acepta numerosos pagos en línea de procesamiento

(PayPal, 2checkout, Authorize.net, iPayment)Pagos

Módulo de Pagos

Deshabilite ciertos servicios de pago basado en una zona base




(PayPal, 2checkout, Authorize.net, iPayment)

Deshabilite ciertos servicios de pago basado en una zona base




(PayPal, 2checkout, Authorize.net, iPayment)


Módulo de Envío

- Peso, precio y destino basados en módulos de

envío

Envío

- Envío gratuito basado en la

cantidad y destino

- Cotizaciones en tiempo real

disponibles (UPS, USPS, FedEx, etc)

- Deshabilitación de ciertos servicios de

transporte sobre una zona de base


Requisitos de Instalación:

• La instalación de osCommerce se realiza mediante un script que incluye el instalador de osCommerce.

• El proceso se realiza en cuatro sencillos pasos desde el propio navegador web, en parte es automático y en parte requiere que introduzca datos de configuración de la base de datos y del administrador del catalogo.

www.themegallery.com


Herramientas Recomendadas:

• Aplicación de compresión / descompresión de archivos ZIP:

• • WinZip: (Shareware) http://www.winzip.com/es

• • WinRAR: (Shareware) http://www.rarlab.com/

• • 7-zip: gratuito Licencia Open Source. http://www.7-zip.org/


http://www.winzip.com/es

http://www.rarlab.com/

http://www.7-zip.org/


Herramientas Recomendadas:

• Programa FTP para subida de archivos:

• • Filezilla: Aplicación gratuita de Licencia Open Source de FTP.

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


http://sourceforge.net/projects/filezilla


Herramientas Recomendadas:• Editor de texto plano:

• • Notepad: con el bloc de notas de Windows puede realizar las tareas de edición de

• código que sean necesarias.

• Supervisar cuando se utilice Notepad para editar código de archivos PHP, HTML o cualquier otro, no tenga seleccionado la opción• “Ajuste de Linea”, en el menú Formato.



Herramientas Recomendadas:• En el caso de Linux cualquiera de las

disponibles, Emacs, Vi, Kate.

• Notepad++: versión Open Source mas completa para la edición de código para Windows

• http://notepad-plus.sourceforge.net/es/site.htm


http://notepad-plus.sourceforge.net/es/site.htm

http://notepad-plus.sourceforge.net/es/site.htm


Requisitos de Instalación• OsCommerce puede instalarse en cualquier

servidor web que tenga instalado PHP y disponga de acceso a base de datos MySQL.

• Esto incluye servidores compartidos, servidores dedicados, e incluso localmente en la computadora personal que utilicé y tenga una ambiente relacionado con Linux, Unix, Mac OS X, y sistemas operativos Microsoft Windows.



Herramientas técnicas de instalación

• Se debe tener gran cuidado de asegurarse de que el servidor cumplan los siguientes requisitos mínimos:

• PHP versión 4.1 o superior:• Necesario versión de PHP 4.1 o superior.• MySQL: Disponer de base de datos MySQL versión 4 ó 5.• Servidor Apache:• Servidor web Apache.• Recomendable: administrador de base de datos MySQL,

como phpMyAdmin.



Requisitos Recomendables de Instalación

• PHP 4.3 o superior para no requerir tener activado Register Globals

• A partir de esta versión no se requiere Register GlobalsonDisponibilidad de uso de archivos .htaccess• Esta opción le permitirá proteger directorios con contraseña mediante Apache

y para• otras funciones

mod_rewrite activado:

• Necesario para usar direcciones amigables optimizadas para buscadores necesitara mod_rewrite activado. Contribuciones como Ultimate Seo URL´s lo usan.



Instalación

• Obtener la última versión de osCommerce

• OsCommerce es una aplicación Open Source con Licencia GNU General Public License, y su descarga es totalmente gratuita.

Se puede obtener la última versión en la pagina Oficial:• http://www.oscommerce.com




HOSTING UTILIZADO http://hosting.miarroba.com/

Características del espacio web

Espacio de 100.00 MB

•Transferencia ilimitada•Soporte del lenguaje de scripts PHP5 y base de datos enMYSQLpara crear webs dinámicas

• Acceso a los ficheros del Espacio, usando un cliente FTP normal

•Herramienta phpMyAdmin en servidor seguro SSL para administrar tu base de datos.

•Potente administrador WEB con el que podrás subir, actualizar, renombrar y borrar archivos y directorios de tu Espacio WEB desde cualquier ordenador que tenga acceso a internet y sin necesidad de FTP.

•URL corta y atractiva para acceder a tu WEB, http://tecnoazte-k.webcindario.com

Proceso de Instalación de la aplicación osCommerce en el servidor web

• Para seguir con el proceso de instalación continué con los pasos siguientes:

• Abra una ventana del navegador:• Y escriba la dirección web de su sitio• Ejemplo: http://www.sudominio.com• Si tiene los archivos de osCommerce en un directorio vaya a

ese directorio• Ejemplo: http://www.sudominio.com/catalogo/



PROBLEMÁTICA PLANTEADA:

• ¿Por qué diseñar un sitio móvil?

• La cantidad de usuarios que utilizan los dispositivos móviles para navegar por internet se incrementa cada día. Por ello, el diseño de los sitios web más actuales debe contemplar este tipo de plataformas para hacer un sitio accesible y usable para dichos dispositivos.




• La versión de los sitios web para móviles, permite a los usuarios de teléfonos móviles y PDA´s ingresar a la información de forma accesible. Por ello debemos tomar en cuenta qué tipo de usuarios será el grupo objetivo de dicha versión.




• La mayoría de los dispositivos, incluyen la tecnología WAP, la cual no soporta imágenes y estilos. Mientras que la tecnología WAP2 soporta imágenes, XHTML y CSS. Además, algunos ofrecen pantalla monocromática o pantallas de alta resolución, soportando CSS y JAVA.




• Por lo tanto hoy en día los usuarios más modernos de internet tales como los jóvenes y emprendedores, tienden a acceder a sus servicios de internet mediante sus dispositivos móviles, tales como PDA´s, celulares, y dispositivos electrónicos con interfaces de navegación móviles.

• Ante esta creciente necesidad la empresa TecnoAzte-K S.A. se plantea el diseño y la creación del sitio específicamente para este tipo de plataformas y dispositivos para así aumentar sus ventas y lograr establecer el mejor servicio con excelente amplitud a todos los niveles.


ANÁLISIS DE REQUERIMIENTOS:

• Diseño y creación de una página específica para navegadores en dispositivos móviles, para facilitar y ofrecer a los clientes más exigentes o modernos una alta disponibilidad de acceso para realizar sus compras en el sitio y aumentar las ventas para la empresa.


SOLUCION PROPUESTA:

• CARACTERISTICAS DE LA TIENDA VIRTUAL DE TECNOAZTE-K PARA DISPOSITIVOS MOVILES

• Para poder desarrollar la aplicación con éxito es necesaria la implementación de los siguientes puntos:

• - Accesibilidad al usuario (el usuario podrá acceder en cualquier momento a la tienda virtual de TecnoAzte-K siempre y cuando cuente con acceso a internet móvil o de base).


SOLUCION PROPUESTA:

• Facilidad de acceso a la tienda virtual de TecnoAzte-K (el usuario conserva sus perfiles de usuario y su acceso, mientras no cierre su sesión, esto recordando sus datos de acceso a través del navegador web usado).

• Navegación Rápida y sencilla (la tienda virtual de TecnoAzte-K no será pesada logrando así que el usuario gaste menos al navegar en redes 3G, y 3.5G)

• -Seguridad del Sitio (el sitio contara con contraseñas de acceso predefinidas por la empresa de modo que se evite el phishing o sitios fraudulentos durante las compras).

• No se hará uso de la tecnología flash para evitar incompatibilidades con el navegador y se harán menús con acceso fácil para que el usuario pueda teclear las opciones introduciendo la tecla 1, 2, 3 o la opción deseada en su teclado para navegar en su dispositivo


SOLUCION PROPUESTA:

• Facilidad de acceso a la tienda virtual de TecnoAzte-K (el usuario conserva sus perfiles de usuario y su acceso, mientras no cierre su sesión, esto recordando sus datos de acceso a través del navegador web usado).

• Navegación Rápida y sencilla (la tienda virtual de TecnoAzte-K no será pesada logrando así que el usuario gaste menos al navegar en redes 3G, y 3.5G)

• -Seguridad del Sitio (el sitio contara con contraseñas de acceso predefinidas por la empresa de modo que se evite el phishing o sitios fraudulentos durante las compras).

• No se hará uso de la tecnología flash para evitar incompatibilidades con el navegador y se harán menús con acceso fácil para que el usuario pueda teclear las opciones introduciendo la tecla 1, 2, 3 o la opción deseada en su teclado para navegar en su dispositivo, evitando la saturación de la memoria cache del equipo


SOLUCION PROPUESTA:

• REQUERIMIENTOS DE LOS DISPOSITIVOS MÓVILES QUE DEBERÁN TENER PARA VISUALIZAR LA TIENDA VIRTUAL DE TECNOAZTE-K

• Contar con un equipo de soporte redes tipo Edge, 3G, GSM, WAP/GPRS, HSDC, 3G, 3.5G o WiFi 802.11

• Navegadores web soportados:• Apple Safari 3.1• Skyfire Mobile• Opera Mini 4• Nokia Web Browser• Mozilla Fennec• Google Chrome para Android• Navegadores WAP/GPRS


DISEÑO Y CREACIÓN DEL SITIO MÓVIL:• La realización de la versión móvil de la tienda requiere de ciertos aspectos fundamentales para nuestra aplicación como

los son:

• Utilización de Header CSS en HTML para distinguir un usuario con navegador móvil a uno de navegador standard:

• <?php /* Variables a rellenar */ • $favicon = ''; • /* URI del favicon de la página ej: http://www.tecnoazte-k.webcindario.com/favicon.ico .mobile*/ • $logo = ''; • /* URI del logo de la página (tamaño máximo recomendado para el logo 60x60px) • ej: http://www.tecnoazte-k.webcindario.com/logo.png*/ • $destacados =; /* Número de la categoría a destacar (los números aparecen en el menú de administración en

Inicio>>Categorías>>Registro>>Log_In*/ $titulo=''; • /* Nombre con el que referirse a las ultimas moficaciones de la url seleccionada, por ejemplo • "Ultimas ofertas" */ ?>>

• Carga de hoja de estilos CSS

• link href="moviles.css" rel="stylesheet" type="text/css" media="handheld" />

• <link href="moviles.css" rel="stylesheet" type="text/css" media="handheld,all" />


DISEÑO Y CREACIÓN DEL SITIO MÓVIL:

Raiz del sitio: www.tecnoazte-

k.webcindario.com

Index Home Page

Versión Standard

Conocenos Productos Tienda Soporte Promociones Contacto

Versión Móvil

Inicio Sesión Registro de Usuarios Tienda Promociones

del Mes

ESTRUCTURACION Y ADAPTACION DEL SITIO:

La planeación del sitio móvil se encuentra estructurada de la siguiente forma:

- Índex: Pagina de inicio, solo incluye información básica y de rápida visualización

- Inicio de Sesión: Para usuarios ya registrados- Registro de Usuarios: Para usuarios no registrados- Tienda: Permite al cliente re direccionar su navegador a la versión móvil de

la tienda- Promociones del Mes: Links y banners sin contenido flash para que

visualicen los clientes las ultimas promociones


ESTRUCTURACION Y ADAPTACION DEL SITIO:

Las adaptaciones y modificaciones que se le hicieron al sitio web fueron las siguientes:

- Incrustación de header en HTML y PHP para distinguir a usuarios móviles y usuarios estándar.

- Diseño de la pagina web móvil de inicio rápido.- Desarrollo de un sistema de autentificación de usuarios con MySQL y PHP.- Re-direccionamiento automático a las versiones móviles de los

patrocinadores y medios publicitarios, para conocer las ofertas del mes.


CODIGOS DE EJEMPLO:

Código de ejemplificación utilizado para la autentificación de usuarios en PHP para la aplicación móvil:

Lo primero sería abrir una conexión con la base de datos y seleccionar la base con la que hemos de trabajar.

//conecto con la base de datos $conn = mysql_connect("servidor","usuario","password"); //selecciono la BBDD mysql_select_db("nombre_bbdd",$conn);


CODIGOS DE EJEMPLO:

Un segundo paso es construir una sentencia SQL que nos permita comprobar si existe o no un usuario con los datos de autentificación introducidos. Utilizamos una simple sentencia SELECT, sobre la tabla de usuarios, donde se extraen usuarios que tengan el mismo nombre de usuario y la contraseña introducidos en la página de acceso.

//Sentencia SQL para buscar un usuario con esos datos $ssql = "SELECT * FROM usuario WHERE nombre_usuario='$usuario' and clave_usuario='$contrasena'";

//Ejecuto la sentencia $rs = mysql_query($ssql,$conn);


CODIGOS DE EJEMPLO:El código completo del ejemplo sería el siguiente.

<? //conecto con la base de datos $conn = mysql_connect("servidor","usuario","password"); //selecciono la BBDD mysql_select_db("nombre_bbdd",$conn);

//Sentencia SQL para buscar un usuario con esos datos $ssql = "SELECT * FROM usuario WHERE nombre_usuario='$usuario' and clave_usuario='$contrasena'";

//Ejecuto la sentencia $rs = mysql_query($ssql,$conn);

//vemos si el usuario y contraseña es váildo //si la ejecución de la sentencia SQL nos da algún resultado //es que si que existe esa conbinación usuario/contraseña if (mysql_num_rows($rs)!=0){ //usuario y contraseña válidos //defino una sesion y guardo datos session_start(); session_register("autentificado"); $autentificado = "SI"; header ("Location: aplicacion.php"); }else { //si no existe le mando otra vez a la portada header("Location: index.php?errorusuario=si"); } mysql_free_result($rs); mysql_close($conn); ?>


PRUEBA Y PRESENTACION DE LA APLICACION:

La prueba de la aplicación se llevó a cabo en el dispositivo movil Apple iPod 1G con tecnología de conectividad Wi-Fi 802.11 la cual nos permitio conectarnos al sitio desde el navegador safari incluido ya en este gadget. Se muestra la aplicación estándar y el sitio movil


ACCESO APLICACIÓN ESTANDAR

Paso 1: Creación de una cuenta de usuario para acceder a la tienda

Paso 2: Acceso a la Online Store de TecnoAzte-K

Paso 3: Llenado de información personal y de facturación

Paso 4: Finalización Creación de Cuenta de Usuario

Paso 5: Selección del Producto a Comprar

Paso 6: Presentación de la Cesta de Productos

Paso 7: Selección del Envío del Producto y Su Costo

Paso 8: Selección de la Forma de Pago

Paso 9: Método de pago Tarjeta de Crédito forma PayPal™

PRUEBA Y PRESENTACION DE LA APLICACION:

PresentacióN Final Tecno Azte K Mobile Store

Technology

Transcript of PresentacióN Final Tecno Azte K Mobile Store