A web site and style for my business Una web y un

A web site and style for my business Una web y un

A web site and style for my
business
Una web y un estilo corporativo
para mi negocio: pautas
Hans Le Roy
http://hlrnet.com/sites/foot
2012-2013
Marco
• Asignatura « Aspectos
profesionales »
• Organización de la sanidad
• Contabilidad
• Derecho
Ingredientes
• Office
–
–
–
–
Word
Publisher
Excel
+plantillas
• Íconos
• Content Management System
– WordPress
– Joomla
– +plantillas / diseños predefinidos
Word, Excel y Publisher
• Documentos
• Facturación y más
• Documentos que no tienen texto
seguido
• Plantillas integradas
Excel
Word
Temas de Word
Publisher
Imágenes
• Bancos de datos
– Open Clipart
• Herramientas off line
– GIMP, Inkscape
• Herramientas on line
– Aviary
Preparación del sitio
• Nombre
– Con alternativa por si acaso
• Paquete(s)
– Funcionalidad, componentes,
maquetaje, plantillas
• Opensourcecms.com, hlrnet.net
Nombre
• P.ej. Godaddy.com, bNamed.net
Almacenamientio
• Por ejemplo HostGator, con
autoinstalador
Servidores DNS que definir con
el registrador
• Ejemplo: GoDaddy
Instalación de la aplicación
web
• Primer ejemplo: Joomla
Log in
• Instalación/administrator
Y se pueden encontrar…
• Componentes
– http://extensions.joomla.org/
– http://www.virtuemart.org
• Plantillas
– http://joomlaos.de/
• Instalación por
Extensions
Y/o: contenido
• Crear categorías y secciones
• Asignar a un menú
• Escribir contenido
Instalación de la aplicación
web
• Segundo ejemplo: WordPress
Log in
• instalación/wp-login.php
instalación/wp-admin
Contenido
• Páginas
– En el menú, sin fecha
• Posts
– Con fecha – orden cronológico inverso
– Integrados en hilo RSS
– Posibilidad de comentario por los
usuarios
– Vigilar la pertinencia de las categorías
• Menús
La platforma
• Appearance
– template (plantilla – colores y fuente)
– se puede elaborar con Artisteer.com
• Widgets
– elementos en las columnas de la
interfaz
• Plugins
– funcionalidad extra
Plugin
• Instalación y activación >
instrucciones
Lo que se requiere
• Una idea
• Una marca visual (colores, logo, ...)
• Lista de funcionalidades
–
–
–
–
Presentación de la empresa y de sus servicios
Catálogo
Venta (e-commerce)
…
• Software
• Almacenamiento / espacio web (hosting)
¿Existe mi nombre preferido?
• ¿Marca registrada?
– Agencia de marcas
– http://www.boip.int/
• ¿Dominio registrado?
– Registrar p.ej. GoDaddy.com
Posibilidades
• Dominio y almacenamiento en la misma
empresan
– BE = factura belga, y posibildiad de llamar en
caso de problemas
– Se puede separar: nombre en Bélgica,
almacenamiento en EEUUs
• Windows vs Linux
– Windows más caro, pero mucho software
comercial de calidad (Exchange server [mail],
Sharepoint [portal], Office 365)
– Linux mucho software gratis (PHP)
Precios
• .BE dominio 25 €/a (bNamed) 10 €/a GoDaddy
• Almacenamiento Windows
– Hostbasket – www.hostbasket. be ??
– Webhost4life – www.webhost4life.com 5$-20$/m para 2
GB
• Almacenamiento Linux
– Dreamhost – www.dreamhost.be ??
– Siteground – www.siteground.com 6$/m 750GB
– HostGator – www.hostgator.com 5$/m
Editar en local
Software
• NVU (gratis)
• Expression Web (MS)
• Dreamweaver (Adobe)
¿Cómo?
• Editar archivos y guardarlos
• Luego publicar
En el servidor
• Ejemplos de progamas instalables
automáticamente por Fantastico
• Content Management Systemen
– Joomla www.hlrnet.com/intjoomla.htm
• Comercio electrónico
–
–
–
–
Magento
CubeCart
OS Commerce
Zen Cart
CubeCart
OS Commerce (con demo)
Zen Cart
Demos
• OpensourceCMS: try before you
install
http://www.opensourcecms.com/
• Apartado e-Commerce
• Magento:
http://www.magentocommerce.com/
demo
Escenario
Un ejemplo paso a paso
Pautas
•
•
•
•
•
•
•
•
•
•
La gente no lo lee todo – estructura clara, página de acogida clara
Navegación clara, sin ambigüedades, con índice de lo que hay – el
visitante tiene que saber dónde está, de dónde viene y a dónde va
Dale al visitante orientación – navegación plegable, breadcrumbs
(camino jerárquico).
Consistencia gráfica
Textos cortos
Tipografía - escalable, sans-serif
Contenido renovado y portable (hilos RSS)
Rápido (entrada, consulta, información)
Accesible a minusválidos visuales
Consultar las estadísticas de visita
Pautas no acertadas
• Todo sobre 1 tema en 1 página
• Máximo x clics
• Interdicción de paginación vertical
A evitar
•
•
•
•
•
Javascript o Flash para el sitio entero
Flashintro
Frames (marcos)
Pretender que el visitante es idiota
Introducir tecnología por ser nueva
Estilos
• Plantillas
– Para CMS
– Para Office
Se trata de…
• Marketing
– Visibilidad de la marca
– Reconocimiento de la marca
• Técnicamente
– Plantillas
– Temas en Office 2007+
Usar
• Aplicar = dejar de maquetar por sí
solo
• PISTA: proteger documento (Tools,
Protect)
¿Plantillas?
• Lo que es
– Colección de estilos
– Documento ‘vacío’ con información sobre la forma
– Muchas veces se puede aplicar a un documento ya
existente
• ¿Cómo conseguirlas?
– Descargar (gratis o no)
– Crear
– Encargar a una empresa gráfica
• www.artisteer.com
– Creación de plantillas para sitios / CMS
Logos
• Qué
– Elemento gráficamente reconocible –
colores, formas, ...
– Presente en web y en documentos
– Metafile = redimensionable
• Cómo
– Descargas gratis
– Se puede comprar / encargar
– Dibujar: Inkscape
Conseguir imágenes
• http://openclipart.org
• http://www.wpclipart.com
Crear imágenes
• Logos
–
–
–
–
–
http://creatr.cc/creatr
http://www.logoease.com
http://www.logomaker.com
http://cooltext.com
http://www.onlinelogomaker.com
• Otras – en línea
– http://www.aviary.com
– http://www.cacoo.com
– http://www.creately.com
Referencias
• www.hlrnet.com/intgrap.htm
– Imágenes
– Editores
– Plantillas
• www.hlrnet.com/intecom.htm
– Comercio electrónico
• www.hlrnet.com/intcms.htm
– CMS