PDF de programación - Una web y un estilo corporativo para mi negocio: pautas

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