Esta fue la presentación final para la tienda de comercio electronico movil de tecnoazte-k, la mejor empresa de consultoria y soporte tecnico

1. Presentación Final TecnoAzte-K Mobile Store Comercio Electrónico (E-Commerce) Junio 2009 Presentada por: Nallely Balderas Daniel Sierra Secuencia 7CM1

3. Herramientas técnicas necesarias

4. Problemática planteada

5. Análisis de Requerimientos

6. Solución propuesta

7. Diseño y creación del sitio móvil

8. Estructuración y adaptación del sitio

9. Códigos de ejemplo

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

12. 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 PublicLicense 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

13. Principales Caracteristicas 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

14. Principales Caracteristicas Navegador web automático Configuración / Instalación Instalación Basada en procedimientos de Actualización usando Scripts PHP

15. Principales Caracteristicas Implementación de una plantilla estructurada Permite los cambios de diseño es adaptable, fácil y rápido de hacer (3,0) Diseño / Esquema Permitir una fácil integración en un sitio existente (3,0) Soporte para imágenes dinámicas

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

18. Los clientes pueden mantener sus cuentas.

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

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

21. Módulo de Catalogo de Productos 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

22. Módulo de Pagos 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 fuera de línea de procesamiento (cheques, giros postales, la atención de procesamiento fuera de línea de crédito) 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) Acepta numerosos pagos en línea de procesamiento (PayPal, 2checkout, Authorize.net, iPayment) Pagos Acepta numerosos pagos en línea de procesamiento (PayPal, 2checkout, Authorize.net, iPayment) Deshabilite ciertos servicios de pago basado en una zona base Deshabilite ciertos servicios de pago basado en una zona base

23. 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 - Deshabilitación de ciertos servicios de transporte sobre una zona de base - Cotizaciones en tiempo real disponibles (UPS, USPS, FedEx, etc)

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

25. 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/ www.themegallery.com

26. Herramientas Recomendadas: Programa FTP para subida de archivos: • Filezilla: Aplicación gratuita de Licencia Open Source de FTP. http://sourceforge.net/projects/filezilla www.themegallery.com

27. 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. www.themegallery.com

28. 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 www.themegallery.com

29. 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. www.themegallery.com

30. 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. www.themegallery.com

31. Requisitos Recomendables de Instalación PHP 4.3 o superior para no requerir tener activado RegisterGlobals A partir de esta versión no se requiere RegisterGlobalson Disponibilidad 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. www.themegallery.com

32. Instalación Obtener la última versión de osCommerce OsCommerce es una aplicación Open Source con Licencia GNU General PublicLicense, y su descarga es totalmente gratuita. Se puede obtener la última versión en la pagina Oficial: http://www.oscommerce.com www.themegallery.com

34. Soporte del lenguaje de scripts PHP5 y base de datos enMYSQLpara crear webs dinámicas

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

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

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

39. 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. www.themegallery.com

40. PROBLEMÁTICA PLANTEADA: 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. www.themegallery.com

41. PROBLEMÁTICA PLANTEADA: 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. www.themegallery.com

42. PROBLEMÁTICA PLANTEADA: 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.

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

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

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

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

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

48. 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 tipoEdge, 3G, GSM, WAP/GPRS, HSDC, 3G, 3.5G o WiFi802.11 Navegadores web soportados: Apple Safari 3.1 Skyfire Mobile Opera Mini 4 Nokia Web Browser MozillaFennec Google Chrome para Android Navegadores WAP/GPRS

49. 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" />

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

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

53. Diseño de la pagina web móvil de inicio rápido.

54. Desarrollo de un sistema de autentificación de usuarios con MySQL y PHP.

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

57. 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); ?>

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

59. ACCESO APLICACIÓN ESTANDAR

60. ACCESO APLICACIÓN ESTANDAR

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

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

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

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

65. Paso 5: Selección del Producto a Comprar

66. Paso 6: Presentación de la Cesta de Productos

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

68. Paso 8: Selección de la Forma de Pago

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

70. PRUEBA Y PRESENTACION DE LA APLICACION:

71. PRUEBA Y PRESENTACION DE LA APLICACION:

72. PRUEBA Y PRESENTACION DE LA APLICACION:

73. PRUEBA Y PRESENTACION DE LA APLICACION:

74. PRUEBA Y PRESENTACION DE LA APLICACION:

75. PRUEBA Y PRESENTACION DE LA APLICACION:

76. PRUEBA Y PRESENTACION DE LA APLICACION:

77. PRUEBA Y PRESENTACION DE LA APLICACION:

78. PRUEBA Y PRESENTACION DE LA APLICACION:

79. PRUEBA Y PRESENTACION DE LA APLICACION:

80. PRUEBA Y PRESENTACION DE LA APLICACION:

81. PRUEBA Y PRESENTACION DE LA APLICACION: