miércoles, 13 de febrero de 2013

Ya tengo la plantilla y como se hace un carrito de compras?????


Ok amigos ya tenemos nuestra plantilla cortada ya sabemos como se va a ver la pagina Web, ahora debemos saber como es que va a funcionar, planteamientos deben existir mucho en SGICORP nosotros usamos un planteamiento sencillo que les explicare presten mucha atención pues uno puede marearse un poco con el tema de los algoritmos y las lógicas de estos, primero explicare la lógica y después crearemos las bases de datos y el código, así que manos a la obra.

Lo primero que necesitamos es tener los servidores para poder trabajar necesitamos un servidor web que soporte php y un servidor de bases de datos para poder hacer nuestras pruebas lo que les recomiendo es que usen el XAMPP si es que trabajan en Windows y una versión equivalente para Linux si es que trabajan en este SO, para MAC lo mismo, como manejador o cliente de bases de datos personalmente uso Heidisql pueden buscarlos en Google ambos paquetes son gratuitos y funcionan perfectamente, podríamos usar el phpmyadmin que viene con el XAMPP pero mas rápido es el Heidisql.



Para que nuestro cliente tenga donde comprar nosotros debemos de tener un catalogo de productos, en este catalogo de productos debemos guardar nuestros productos con sus descripciones fotos y precios para que el cliente pueda elegir entre la variedad de productos que tengamos y pueda agregarlos al carrito, 


Para un correcto ordenamiento debemos categorizar nuestros productos de tal manera que sean fácil de ubicar, supongamos que vamos  a hacer una pagina web de comercio electrónico para un empresa de ventas de partes y piezas de computadores u ordenadores como quieran llamarlos entonces debemos categorizar los productos de tal manera que sean mas fáciles de ubicar por ejemplo en la categoría de almacenamiento deberíamos poner los lectores cd CD, DVD, Blue Ray, los Discos Duros etc. en la categoría de Procesadores, los diferentes tipos de procesadores que existen, para tal fin debemos entonces crear una estructura que me permita categorizar los productos a continuación les doy una idea de la base de datos para este caso, y dejo una copia de la base de datos para descargar

Empecemos creando una base de datos llamada master, ustedes pueden ponerle el nombre que deseen, a continuación debemos crear una tabla llamada categoría, esta tabla categoría tiene dos columnas importantes, la primera idcategoria, que es una llave primaria con autoincremento, lo que me permitirá que en cada inserción esta columna guarde un numero de registro que ira auto incrementándose de 1 en 1 (se puede modificar los pasos de autoincremento 2 en 2 10 en 10 etc.), y la segunda columna se llama nombre, este es el nombre de la categoría, por ejemplo mainboards, Almacenamiento etc.

Analizando el diagrama, si yo creo una categoría llamada Almacenamiento el idproducto seria el nro. 1, si yo creo ahora un producto llamado disco duro dentro de la categoría Almacenamiento, el idproducto seria 1, el idcategoria seria 1 y el nombre seria Disco Duro cuando yo busque todos los productos con idcategoria=1 me saldría el disco duro y todos los que tendrían el índice de idcategoria = 1

Otros campos que podemos agregar son la fecha la hora, las rutas de las imágenes, descripciones  etc., pueden descargar el archivo SQL para que vean la estructura de las tablas.
Desacargar archivo 

El la siguiente parte iremos creando cada script que necesitamos para que este catálogo de productos funcione.

Vistanos en 

lunes, 4 de febrero de 2013

Cortando la Plantilla


Ahora que ya tenemos nuestra plantilla bien revisada y aprobada por nuestros clientes o nos gusta a nosotros vamos convertirla en una pagina Web para esto lo que debemos de hacer es cargar tu Adobe Fireworks y a continuación cargar el archivo, una vez tenemos todo procedemos a seleccionar la herramienta llamada Dividir (Slice).

Con esta herramienta lo que procederemos a hacer es cortar las diferentes partes de la Web, recuerdan en el artículo anterior cuando definíamos el esquema de la Web, lo que haremos es ahora cortar con ese esquema separaremos primero la parte superior donde van a ir la marca de la Web o nombre de la web y también algunos imágenes.








separaremos la botonera pues debemos darle algún efecto, y separaremos el cuerpo de la pagina Web, una vez completada estas marcas lo que hacemos es proceder a exportar pero esta vez seleccionamos exportar como HTML, vamos a ponerle índex, aceptamos y guardamos el archivo.


 

Cuando revisamos el directorio veremos que hay un archivo llamado index.html y una serie de imágenes que son las partes de la platilla que nosotros hemos cortado, si revisamos el código de la pagina index.html con el Dreamweaver, veremos que ha creado una tabla donde están ubicadas cada una de las partes que hemos cortado de la Web.
Ahora podemos crear varias imágenes para la parte superior y luego hacerlas cargar con un jquery para que tenga movimiento, en la botonera podemos crear diferentes imágenes para que cuando pasemos el mouse encima cambie de color y cuando hagamos clic tome otro color, y en el cuerpo podemos poner diferentes contenidos para hacer todas las páginas de la Web.








En el siguiente articulo diseñaremos la lógica de nuestro programa para entender como es que lograr seleccionar productos, como es que puede ponerlos en un carrito de compras y como finalmente podemos vendérselo a un usuario especifico.

Visitanos en

jueves, 17 de enero de 2013

Empezando la Web!!! manos a la obra


Es hora de empezar ya tenemos bien definido que tipo de web queremos hacer  en este caso es una web catálogo de productos con un carrito de compras, para hacer esta web la haremos  en PHP, con motor de bases de datos MySql, y para los efectos y animaciones utilizaremos Jquery, por que no Flash??? porque flash no carga en todos los dispositivos, por ejemplo no carga en los ipad, no carga en algunas versiones de Android o si tu dispositivo es de poca potencia no lo trae instalado y no podrás instalarlo, finalmente y los mas importante del asunto es que al terminar  de armar una película esta la compila en un archivo swf que no es posible ser indexado por los buscadores como google, así que si pones fotos con referencia a tu empresa y con el nombre de tu empresa no serán indexadas, y aunque le pongas al archivo en flash miempresa.swf, tampoco será tomada en cuanta por el buscador.



Ahora si, para desarrollar una web, un entorno de desarrollo muy recomendado el Dreamweaver, puedes descargarte una versión de prueba desde la Web de Adobe, el Dreamweaver es un programa que te ofrece muchos recursos para el desarrollo de una web así como la capacidad de manejar bases de datos y diferentes lenguajes de programación, para el desarrollo de la parte gráfica es muy recomendable usar Adobe Photoshop o Adobe Fireworks, Photoshop te da acabados y herramientas muy profesionales para un diseño detallado de la Web, pero Fireworks esta diseñado para trabajar imágenes para entornos web, lo que significa que podrás usar herramientas especificas y resoluciones apropiadas para un entorno Web.




Cual es el truco?? como se diseña un Web?? como hago para que me salga bonita, Un buen punto de partida es revisar web del mismo tenor o tema que quieres hacer, ver todas las que puedas, una vez realizado esto voy eligiendo entre ellas cuales son las que mas me gustan, de todas esas hago mi "Frankestein", si me gusta la parte superior de una, la botonera de otra, el cuerpo de otra y el pie de pagina de alguna mas todo eso lo juntan en una web, con  su Photoshop o Fireworks empiecen a copiar esos pedazos y vayan armándolos, después que tiene ese borrador, ahora piensen que colores son los correctos o les gustan a ustedes, y cambien los colores de estas partes y hagan un nuevo esquema teniendo cada uno de los elementos como ejemplo de como deberían verse.

Los esquemas de las paginas Web son pocos la gran mayoría de Web están en estos esquemas, en el siguiente gráfico les muestro cuales son los esquemas mas comunes.



Una vez que tenemos establecida y desarrollada nuestra plantilla en Photoshho o Fireworks, como una imagen plana un jpg o psd y se ve como a nosotros nos gusta se la presentamos a nuestros clientes o si es para mostros mismos, la revisaremos cuidadosamente a ver si es lo que queríamos.

Algunos parámetros una Pagina web tiene en este momento con las pantallas anchas Wide screen un promedio de 1024 Pixel de ancho, cuanto de alto, no sabemos porque eso depende de la cantidad de información que deseen poner si es mucha información en una sola pagina va a ser una gran sabana y nadie la querrá leer, debemos trata de presentar toda la información en la pantalla sin necesidad de que hagamos scroll (correr la barra hacia abajo o arriba) para continuar leyendo, muchas personas no lo hacen y simplemente se van de la web.


En el siguiente artículo les mostrare como convertir una imágen plana en una página Web


Vistanos en 
www.sgicorp.com

martes, 15 de enero de 2013

Identificando que Web Necesito (o necesita mi cliente),




Cuando vamos a realizar una paginas Web lo primero que debemos tener en cuenta es que clase de pagina Web es la que queremos hacer ya sea para nuestros clientes o para nosotros mismos, en SGICorp durante 11 años de trabajo hemos catalogado las web en 4 Tipos que se ajustan a todos los desarrollos y pasamos a detallarlos

El primer tipo que en SGICorp la llamamos Web Corporativas es la típica pagina web que solo tiene entre 4 y 6 vínculos, destinadas a presentar a una empresa o servicio, con una pequeña descripción de la Empresa o Persona,  una descripción del servicio o trabajo que se realiza, un forma de contactarse generalmente un formulario de contáctenos o las direcciones y teléfonos para tal efecto y  alguna otra información simple que se desee agregar.

Pagina Web con un catalogo de productos, en esta pagina Web es todo lo anterior pero en el área de productos o servicios hay varios productos o servicios, estos están organizados generalmente en tipos o categorías de productos, por ejemplo supongamos que es un restaurant de comidas rápidas entonces la carta estaría dividida por ejemplo en pizzas, dentro de esta todos los tipos de pizza, otra categoría será bebidas, todos los tipos de bebidas que hay serán los productos para elegir, debemos tener en cuenta que podrian se mas de dos niveles por ejemplo Categoria-sub Categoria-producto.


Las de e-comerce o comercio electrónico son aquellas paginas web que te dejan comprar artículos en Internet si miramos un poco es un catalogo de productos que me permite hacer  compras en internet a través de la adición de un programa llamado carrito de compras, este tiene la funcion de ir guardando los productos seleccionados por el comprador para despues hacer una suma y facturar, ademas de identificar o al comprador mediante su nombre de usuario y clave de acceso si es que esta registrado y si no es asi pues pedir que se registre para poder completar la transaccion



Por ultimo las Custom o personalizadas aquellas que no puedes encasillar dentro de estas 3 categorías anteriores pues no es ninguna de ellas un ejemplo de esto es la Web de un Banco que no se podría encasillar en ninguna de las anteriores, esta pagina web hay que  tomarla con sumo cuidado pues hay que prestar mucha atención a la hora de hacer un propuesta económica, si bien es cierto que es una Pagina Web, lo mas probable es que tengamos que desarrollar el código o los programas que la manejan desde cero.

En esta serie de artículos desarrollaremos paso a paso una pagina Web con catalogo de productos y carrito de compras, pues esta engloba a las 3 categorías de paginas Web mas comunes un 90% de las paginas web realizadas en nuestros 11 años de permanencia en el mercado han sido de estos 3 tipos, veremos cada uno de los aspectos del desarrollo programación y diseño de una web con catalogo de productos y carrito de compras.

www.sgicorp.com

sábado, 12 de enero de 2013

Bienvenidos al Taller Web

Diseño Web
Bienvenidos a este blog sobre paginas Web, acá abordaremos el desarrollo de paginas Web hablaremos de hosting y dominios y explicaremos la importancia de una pagina web, lo q puedes hacer con ella,  como posicionarla y usarla como un mecanismo de desarrollo para tu Empresa o Negocio Personal, todas las dudas e inquietudes que tengas serán resueltas, escribenos .


www.sgicorp.com