Como construir un Sitio Web

IDSystems
Asesoria Informatica desde 1989
6ª. No. 502 Pedro J. Arguelles y 20 de Noviembre. ● RFC SAOS690329894
● www.idsystemxmx.com
 INDICE

1. ¿Qué es un sitio Web?

2. Diseño y Estructura
3. Contenido
4. Hosting
5. Instalacion
6. Capacitacion
7. Publicidad
8. Mantenimiento
 ¿Qué es un sitio web?

• En primer lugar, un sitio web es como

tener una oficina, casa o sucursal en
internet
• Se compone de un lugar de alojamiento,
tecnologías de proceso, contenido,
dirección de ubicación
• No solamente es una tarjeta de
presentación informativa, sino una
sucursal y extensión del negocio físico
 ¿Qué es un sitio web?

• Vamos a ver como construir un sitio web

en similitud a como se construye una casa
o una oficina
Diseño y Estructura
 DISEÑO y ESTRUCTURA

• Cuando pensemos en el sitio Web, no lo

imaginemos como una tarjeta de
presentacion, un anuncio de periodico o
revista o anuncio de seccion amarilla,
donde solo ponemos datos de contacto,
nombre de la empresa, servicios y/o
productos de manera general
 DISEÑO y ESTRUCTURA

• Cuando queremos construir una casa o

una sucursal de nuestro negocio, una de
las primeras cosas es crear el diseño o
plano de la misma.
• Necesitamos saber cuantas habitaciones
tendrá, si pondremos
seguridad, donde, si
habrá privado, si será
de 1 piso, 2, con cochera, etc.
 DISEÑO y ESTRUCTURA

• Tambien queremos pensar en el color

exterior y el color interior, el decorado, los
muebles.
• Y lo que no se ve como el cableado
electrico, agua y drenaje, cableado
telefonico, aislante termico para las
paredes
• Y quiza algo comodo como abanicos de
cielo o aire acondicionado
 DISEÑO y ESTRUCTURA

• En una construccion fisica, tambien

podemos pensar en los materiales que
usamos: madera, block, cemento,
uniblock, varilla. Esto es con el fin de
saber que estilo le daremos a
nuestra sucursal y que tan
firme quedara.
 DISEÑO y ESTRUCTURA

• Así, primero necesitamos diseñar y

estructurar nuestro sitio web como una
oficina, no como una tarjeta de
presentación o un anuncio.
• Esto se logra en 2 pasos: estructurando
cuantas paginas (habitaciones)
tendrá nuestro sitio y dibujando
(diseñando) como queremos
que se vea.
 DISEÑO y ESTRUCTURA

• No hablaremos de las tecnicas para la

creacion de dibujo y estructura en la
creacion de websites, pero es importante
entenderlo.
• El diseño se referira a los colores,
ubicaciones, tablas, tipo de letra,
posiciones que sera constante en nuestro
sitio.
 DISEÑO y ESTRUCTURA

• En el Web Basico, generalmente el diseño

va junto con el contenido. Igualmente en
el Web basado en Flash. Es decir, se hace
el diseño y se pone el contenido.
• En el Web Dinamico (CMS, LMS),
generalmente va separado. Por lo mismo
se usan plantillas que cambian el aspecto,
mas no el contenido
 DISEÑO y ESTRUCTURA

• El diseño tambien esta basado en la

actualidad en la forma como se presenta: si
lleva encabezado o no, 1 columna, 2, 3 o
mas. Si contiene pie o si tiene bordes
redondeados o cuadrados
• Saber que elementos son los que se repiten
en todas las
paginas del sitio,
para guardar
simetria y coherencia
 DISEÑO y ESTRUCTURA

• La estructura por otra parte es decidir

cuantas habitaciones tendrá nuestra
sucursal, es decir, la cantidad de paginas.
• Cada pagina corresponde a una sección
que queremos mostrar.
• Por ejemplo, la pagina
CONTACTO, que lleva la
dirección, teléfono y
correo electrónico.
 DISEÑO y ESTRUCTURA

• Sin embargo, tambien puede llevar un

formulario, un mapa de ubicación e
incluso un chat en linea
• La pagina de nosotros, de historia de la
empresa, de la mision, y de los productos
y o servicios que ofrecemos
• En el caso de ofrecer varios servicios, se
recomienda mostrarlos por separado
 DISEÑO y ESTRUCTURA

• Los servicios por categorias, con

imágenes, videos o demos ayudan al
visitante a conocernos. Algunas veces se
incluyen precios o cotizaciones
• Los productos por otra parte caen dentro
de la categoria Ecommerce, donde
pondremos nuestro catalogo con fotos,
descripcion, precio para realizar la venta
 DISEÑO y ESTRUCTURA

• Este tipo de estructura, esta basada en

carritos de compra o catalogos de
productos. Es el equivalente a poner
anaqueles en nuestra sucursal para
mostrarlos a los clientes.
 DISEÑO y ESTRUCTURA

• Como vemos, para una sucursal, despues

de crear el plano, hay que comenzar a
construir.
• Pero incluso antes, se puede hacer una
maqueta (fisica o digital) para preverla y
aprobar el proyecto
• En Informatica, podemos
crear un demo del sitio
para verlo
 DISEÑO y ESTRUCTURA

• Una vez aprobado, se comienza la construccion.

Es la etapa mas laboriosa porque pondremos
los materiales (plataforma tecnologica) a usar, y
los vamos combinando para levantar nuestra
sucursal (website).
• Tecnologias como HTML, JavaScript, DHTML,
XML, PHP, ASP, Flash, ActionScript, .NET, AJAX
son usadas como materiales
 DISEÑO y ESTRUCTURA

• Se retocan fotografias, se hacen

animaciones, y se construye el armazon
de nuestro sitio web, para despues
comenzar a poner el contenido.
Contenido
 CONTENIDO

• La siguiente parte en la creacion de

nuestra oficina o sucursal es amueblarla.
Poner en orden los diferentes cuartos, o
asignar departamentos (ventas,
contabilidad, compras, etc.)
• Desglosar que es lo que
queremos mostrar a los clientes, ya sean
productos o servicios
 CONTENIDO

• Para ello, no solamente tomamos un

recurso sino varios: un ejemplo de nuestro
producto o servicio, que es lo que hace,
como se hace, a quien se hace o quien lo
necesita.
• En nuestro sitio, ponemos texto explicativo
acompañado con imágenes que refuerzan
dicho contenido
 CONTENIDO

• Pero además, contamos con audio o video

o demostraciones interactivas.
• Dependiendo de nuestro giro son los
recursos que emplearemos.
Entre mas y mejor
expliquemos nuestros productos
mas serán de interés para el
cliente.
 CONTENIDO

• Recordemos que no estamos limitados a

indicar solo nuestro producto o servicio,
sino que podemos explicar a detalle como
funciona
• En algunos casos el contenido se apoya
en material extra.
• En otros echa mano a bases de datos,
que seria como tener articulos en bodega
o manuales de uso
 CONTENIDO

• Según la tecnología (plataforma)

seleccionada nuestro contenido puede ser
estático o dinámico
• Estático es cuando la información no va a
cambiar al menos en 3 meses o mas.
• Y cuando cambia, es necesario que el
administrador lo haga, ya que requiere
modificaciones especiales
 CONTENIDO

• Es el equivalente a decir, que si quiero

cambiar muebles, tengo que hablarle al
arquitecto para que lo haga, ya que
hacerlo yo implica alterar la construccion
misma.
• El contenido dinamico por otra parte es
independiente de la construccion y es
modificable por cualquiera
 CONTENIDO

• Incluidos los mismos clientes, que

solicitan informacion de acuerdo a sus
necesidades.
• Ademas, el contenido lo puede cambiar
los empleados (la similitud a mover
muebles por el personal).
• Los contenidos dinamicos ganan terreno
hoy dia, pero al mismo tiempo crearlos
tambien implica un costo extra
 CONTENIDO

• El usuario o propietario, debe aportar el

contenido (a su gusto), esto es: texto,
imágenes o fotos, audio, video
• La decoración se adecuara según el
diseño y estructura. Este proceso se lleva
menos tiempo que el paso anterior a
menos que lleve mucho retoque o
conversión de contenido
 Hosting
(Almacenamiento)
 HOSTING

• En el mundo real, cuando tenemos todo

nuestro proyecto en papel o maquetado
es tiempo de construirlo en una ubicación
y tener una dirección donde nos puedan
encontrar
• El terreno hay que escogerlo de acuerdo a
nuestro sitio (si es grande o
pequeño), e incluso los
materiales a usar
 HOSTING

• Dependiendo de que tan grande vayamos

a construir es lo que nos costara el
terreno.
• Además, a veces vienen con servicios
agregados que podemos usar o no de
momento.
 HOSTING

• En el mundo digital según la plataforma de

nuestro sitio y el tamaño del mismo, es el
espacio de almacenamiento que nos
proporcionan.
• Desde los gratuitos con publicidad (como
si tuvieramos un terreno compartido),
hasta los altamente privados y gran
capacidad
 HOSTING

• Entre mas espacio mas costo. Entre mas

recursos mas costo.
• El almacenamiento (terreno) no implica la
direccion (calle y numero) o el telefono
(email).
• La direccion se cobra aparte y es la forma
que tienen de encontrarnos (el .com,
.net, .org)
 HOSTING

• Muchos sitios de hosting

(almacenamiento) ofrecen tambien el
dominio (direccion URL) para nuestro sitio
• Asi tambien, nos otorgan al menos un
correo electronico para comunicarnos con
nuestros clientes
• Recursos extras como bases de datos,
streaming de video, audio y otros son
opciones a tener en cuenta
Instalacion
 INSTALACION

• Repasando, ya tenemos nuestro plano,

nuestra estructura, los materiales, los
muebles, los archiveros, el terreno, la
dirección. Ahora nos falta mudarnos aquí.
• Aunque pudimos haber construido el sitio
(como demo), una vez adquirido nuestro
sitio fisico final, con nuestro dominio
(nombre), hay que copiar toda la
estructura (archivos, bases de datos).
 INSTALACION

• Y no solamente es copiar, sino hacer la

configuración adecuada (el equivalente a
dar de alta los servicios de luz, teléfono,
agua)
• Algunos sitios no necesitan demasiada
configuración y otros como las
tiendas si porque hay que
ajustar las bases de datos y
ciertos parámetros técnicos
 INSTALACION

• Generalmete este proceso es bastante

más rápido, desde 24 a 72 horas
dependiendo de la complejidad del sitio
aproximadamente (en algunos casos un
poco mas)
• Una vez que este configurado y copiado,
nuestro sitio esta oficialmente ignaurado y
en linea para todos los visitantes
Capacitacion
 CAPACITACION

• En la vida real, despues de abrir la

sucursal u oficina, necesitaremos personal
que la administre
• Habra que delegar algunas funciones
según la complejidad
• En nuestro sitio web, puede haber cierta
capacitacion si el contenido es dinamico
 CAPACITACION

• E incluso si el contenido es estatico,

puede haber cierta capacitacion para
monitorear el sitio, las estadisticas y
algunos aspectos tecnicos menores
• En el caso de tiendas (Ecommerce), la
capacitacion se puede extender para el
manejo del inventario y el proceso de
ventas
 CAPACITACION

• En el caso de sitios LMS (Educacion),

puede haber mucha capacitacion para
docentes, alumnos y administradores
• Esto dependera del giro de la empresa y
del propio sitio web y de que tanto quiera
el propietario involucrarse
Publicidad
 PUBLICIDAD

• Al igual que en la vida real, necesitamos

clientes que nos visiten en esta nueva
ubicación y que sepan de nuestros
productos y/o servicios
• La publicidad por boletines, periodico,
revistas, radio, tv, correo electronico y
banners publicitarios de internet siguen la
misma pauta
 PUBLICIDAD

• En la vida real usamos todas estas

tecnicas para atraer clientes a nuestra
nueva sucursal
• En internet, usamos el registro en
buscadores locales, nacional e
internacionales para darnos a conocer y
que nos encuentren
• Tambien nos registramos en portales
locales o afines a nuestro giro
 PUBLICIDAD

• Mensajes por correo electronico o

boletines son otra forma de hacer saber a
los clientes que estamos en una sucursal
digital
• En la actualidad las redes sociales
tambien ayudan a indicar que tenemos un
sitio profesional y no personal donde
pueden visitarnos
Mantenimiento
 MANTENIMIENTO

• El ciclo de nuestra sucursal se cierra con

el mantenimiento periodico al inmueble,
en menor grado al mobiliario y a la
informacion que otorgamos
• En nuestro sitio web, si nuestro contenido
es estatico, esta mantenimiento tendera a
ser mas lento y esporadico, anunciando
ofertas o notas cada cierta temporada
 MANTENIMIENTO

• En los contenidos dinamicos o de tiendas,

el contenido cambiara mas a menudo,
pero el diseño posiblemente no
• El mantenimiento al diseño, estructura
puede darse por temporadas para que la
apariencia no sea siempre la misma y se
vea que el sitio se esta renovando
 MANTENIMIENTO

• También, la estructura general puede

cambiar agregando paginas, quitando,
añadiendo servicios o notas y contenido
• Algunas cosas las podrá hacer el
propietario, otras deberá
hacerlo el webmaster por
las razones técnicas
 MANTENIMIENTO

• Y a menos que el cambio sea bastante

radical para incrementar el contenido o
eliminarlo, se volvera al inicio diseñando
un nuevo proyecto… o porque no… una
nueva sucursal
 RESUMEN

• Esto es a grandes rasgos como se crea

un sitio web en similitud a como se
construye una sucursal.
• Espero que la información le sea útil y
pueda entender mejor como funcionan
estos espacio digitales
 RESUMEN

No espere mas…

Contactenos!!