INFOPyme Cantabria by Lucia Teran Canduela

BACHELOR IN INDUSTRIAL DESIGN AND MULTIMEDIA ENGINEERING

Desarrollo del Proyecto Networking Cantabria Carried out by: Lucía Terán Canduela Projecto supervisor: Joaquín Díaz de Entresotos Year: 2010 · 2011 Tutor: Carlos Fernández Company: Cappuccino

INGENIERÍA EN DISEÑO INDUSTRIAL Y MULTIMEDIA

Desarrollo del Proyecto Networking Cantabria Realizado por: Lucía Terán Canduela Director de proyecto: Joaquín Díaz de Entresotos Curso: 2010 · 2011 Tutor: Carlos Fernández Empresa: Cappuccino

Resumen

Resumen El proyecto se basa en el desarrollo de una plataforma en la que futuros emprendedores, y PYMES y autónomos ya activos puedan conseguir información sobre herramientas, servicios y recursos que ofrecen las distintas instituciones tanto europeas como nacionales en el ámbito de cada empresa. Para la correcta realización de este proyecto, era necesario realizar una investigación sobre plataformas que ofrecen el mismo servicio y sobre la información que ponían a disposición del público para así, conocer los temas que trataban y la cantidad de información que debía ir incluida en este proyecto. Además de este análisis inicial, era necesario llevar a cabo la realización de una identidad corporativa que fuese representativa de la plataforma y de los servicios que ofrece. La plataforma debía tener un aspecto moderno a la vez que atractivo y poseer una gran usabilidad para los usuarios que buscasen la información deseada dentro de dicha página, la cual ha sido desarrollada mediante el gestor de contenidos de Joomla.

Summary

Summary The project is based on the development of a platform on which future entrepreneurs and SMEs and active autonomous, can get information about tools, services and resources offered by various European and national institutions in the area of â&#x20AC;&#x2039;â&#x20AC;&#x2039;each company. For the successful achievement of this project was necessary to investigate on platforms that offer the same service and about the information made available to the public, so know the subjects treated and the amount of information that we should be included in this project . In addition to this initial analysis, was necessary to carry out the implementation of a corporate identity that was representative of the platform and the services it offers. The platform must have a modern and attractive look, and a high usability for users seeking information on page, which has been developed using the Joomla content management system.

Ă?ndice

Índice

Índice 1. Introducción

1.1 El diseño web

1.2 El diseño gráfico

2. Objetivos

3. La empresa: Cappuccino Estudio de Comunicación

4. Manual corporativo

4.1 Introducción

4.2 Logo

4.2.1 Construcción del logotipo

4.3 Color

4.4 Tipografía

4.5 Usos incorrectos

4.6 Papelería

4.7 Merchandising

5. Página web

5.1 Inicio

5.2 Noticias

5.3 Guía

5.4 Subvenciones

5.5 Herramientas

5.6 Formaci贸n

5.7 Directorio

5.8 Acceso y registro

5.9 Aviso legal

5.10 Contacta

5.11 Buscador

6. Programas

6.1 Photoshop

6.2 Illustrator

6.3 InDesign

6.4 Joomla!

6.5 Notepad++

6.6 XAMPP

6.7 Filezilla

6.8 Navegadores

7. Conclusiones

8. Bibliograf铆a

9. Agradecimientos

Index

Índex

Índex 1. Introduction

1.1 Web design

1.2 Gaphic design

2. Objectives

3. Company: Cappuccino Estudio de Comunicación

4. Corporate manual

4.1 Introduction

4.2 Logo

4.2.1 Construction logo

4.3 Color

4.4 Tipography

4.5 Misuse

4.6 Stationery

4.7 Merchandising

5. Página web

5.1 Home

5.2 News

5.3 Guide

5.4 Grants

5.5 Tools

5.6 Formation

5.7 Directory

5.8 Login and registration

5.9 Disclaimer

5.10 Contact

5.11 Search

6. Programs

6.1 Photoshop

6.2 Illustrator

6.3 InDesign

6.4 Joomla!

6.5 Notepad++

6.6 XAMPP

6.7 Filezilla

6.8 Browsers

7. Conclusions

8. Bibliography

9. Acknowledgements

1. Introducci贸n

Introducción

1. Introducción Antes de comenzar a explicar los procedimientos llevados a cabo a lo largo del proyecto, es necesario conocer un poco los dos ámbitos del diseño que se tratan en esta documentación. A continuación, se describe una breve historia de cómo, tanto el diseño web como el diseño gráfico, han llegado a ser lo que hoy en día nosotros conocemos y la gran evolución que han sufrido en los últimos años gracias a la evolución de las nuevas tecnologías.

1.1 El diseño web Desde la invención de Internet el mundo ha cambiado de manera abrumadora en un corto período de tiempo. Lo que antes era un mundo desconocido para muchos hoy en día es una herramienta más y en muchísimas ocasiones indispensable con la que poder trabajar en el día a día. Las páginas web también han sufrido una gran evolución en este período tan corto de tiempo y es que al principio las páginas web eran muy simples y contaban tan solo con hipervínculos y con una sola tipografía y en ciertas ocasiones con imágenes pequeñas ya que la conexión de aquellos tiempos no permitía la transmisión de grandes imágenes. El diseño de la paginas era demasiado caótico así que se realizaron un conjunto de normas estándares de lenguaje HTML para una unificación del diseño web, lo que trajo consigo la aparición de una serie de navegadores web con el constante desarrollo de nuevas funcionalidades y progresos. Progresivamente fueron avanzando y empezaron aparecer las primeras páginas comenzaban a utilizar iconos en vez de ciertas palabras, incluían imágenes de fondo, realizaban diseños y usaban de botones con relieve para mejorar la navegabilidad, aplicaban banners en lugar de cabeceras, el texto se estructuraba de forma jerárquica mediante menús o listados... La aparición de todos estos elementos en el diseño web generó el deseo o necesidad por parte de los diseñadores de incluir estos archivos en sus webs. Esto provoco que se añadiesen elementos gráficos sin control en las páginas, saturándolas y dejando de lado la accesibilidad y la usabilidad. Aunque, por supuesto, también existían diseñadores que aplicaban estos diseños correctamente y creaban páginas web que resultaban elegantes e innovadoras. Otro elemento que revolucionó el diseño web fue la aparición de la aplicación Macromedia Flash que no solo permitía incluir videos, presentaciones y archivos en movimiento dentro de las páginas web, sino que permitía diseñar las webs de forma muy dinámica y con diseños espectaculares.

Introducción

Actualmente, el diseño web ya está enfocado totalmente a lo multimedia integrando en las páginas web los elementos multimedia de última generación. Las páginas tienen grandes resoluciones, las fotografías son de gran calidad y los diseños abarcan desde los más simples hasta los más llamativos y eficientes. A esto le podemos añadir que las últimas versiones de los navegadores soportan muchas más prestaciones y elementos en las páginas web. Además, hoy en día se tiene muy en cuenta la accesibilidad y la usabilidad de las páginas diseñándolas de tal forma que se puede acceder a todos los lugares con muy pocos clics. Y por supuesto, hay que tener en cuenta el papel de la programación en este mundo y es que los avances que se han producido en estos años han generado la aparición de muchísimas aplicaciones que te permiten crear páginas web o blogs realizando una pequeña edición de sus módulos. Una de estas aplicaciones es Joomla y con ella es con la que este proyecto ha sido desarrollado.

1.2 El diseño gráfico Comenzaremos definiendo teóricamente lo que es el diseño. Diseño es el proceso o labor destinado a proyectar, coordinar, seleccionar y organizar un conjunto de elementos para producir y crear objetos visuales destinados a comunicar mensajes específicos a grupos determinados. Un diseño es una pieza con un cierto atractivo visual, con personalidad propia y un gran equilibrio estético. El diseño se aplica en muchísimos ámbitos y se encuentra en todas partes. En toda la red, el mundo digital, diseño del mundo publicitario, revistas, periódicos, libros, manuales, en el mobiliario, sillas, mesas, en el cine, televisión, musicales, videos… Podemos comenzar a hablar de diseño gráfico en los últimos años del S.XV en los que surgen las primeras tipografías y posteriormente los innovadores diseños de tipos, normas de composición, ilustraciones y encuadernaciones en el S.XVI. Hay que destacar, que a lo largo de la historia, el diseño gráfico se ha visto influenciado por hechos como la Revolución Francesa o la Revolución Industrial, ya que ambos sucesos afectan en gran medida al desarrollo del comercio y de la actividad publicitaria. También hay que señalar que muchos aspectos sociales, políticos y religiosos en cada época han ejercido una gran influencia, bien como evolución o bien como retroceso, en los trabajos impresos (tipografías, publicación de libros, periódicos, enciclopedias o carteles). Durante el S.XVI surgen grandes tipografías creadas por grandes maestros de la época como Palatino (Giovanni Baptista Palatino), Garamond (Claude Garamond) o la Baskerville (Jhon Bas-

Introducción

kerville). Cada uno de ellos aportó grandes avances en la evolución del diseño tipográfico. En el S.XVII comienzan a aparecer lo primeros mensajes publicitarios dentro de los sectores sociales privilegiados y con ello comienza a hablarse de la imagen de identidad. En la evolución de las etiquetas de productos comerciales el texto, el ornamento y la ilustración aparecen en un momento histórico en el que la imagen comienza a valorarse como un complemento del texto y no como un elemento susceptible de ser leído por el público. Durante el S.XIII, se implantan las Escuelas Técnicas o de artes Aplicadas par al formación de especialistas en el diseño textil y las artes gráficas fundamentalmente y se crea la tipografía Bodoni (Giambaptista Bodoni). El hecho más destacado del S.XIII fue la Revolución Francesa en 1789 en la que se establece una sociedad igualitaria que proclama la libertad de prensa por lo que los diarios y periódicos se convierten en productos de consumo masivo en la sociedad francesa de la época. Además, el uso de la propaganda política introdujo nuevos elementos gráficos como son la caricatura y la sátira. En el siglo siguiente, el S.XIX surge otro acontecimiento relevante: la Revolución Industrial, la cual impulsó el desarrollo del comercio. En lo que compete directamente al diseño gráfico, Rowland Hill crea el sello de correos, se asume la técnica del grabado calcográfico como unidad estilística propia y aparece el billete con el uso del papel moneda. La publicidad directa empieza a perfilarse como estrategia e instrumento propagador y embellecedor y así surge otro elemento innovador: el uso de la figura femenina como elemento simbólico de atracción. En el S.XX se produce la industrialización de las artes gráficas. La tecnología pasó de lo manual a lo mecánico y a lo automático, y de un mercado limitado a uno masivo. Hay que destacar que las grandes invenciones que se produjeron ayudaron a difundir las comunicaciones visuales y a inspirar a los diseñadores, entre ellas tenemos: la máquina de escribir, el proceso de impresión en color, la fotografía en color, la composición automática, la instantánea, la fotografía de rayos X, la película de animación o las diapositivas de linterna mágica entre otros. Una nueva generación de diseñadores surge en el siglo XX rechazando el gusto por los estilos históricos (neoclasicismo, neogótico, etc.) dando como resultado un nuevo arte: Art Nouveau o Modernismo, el cual incluía ideas procedentes de todas las disciplinas del diseño y el arte (arquitectura, pintura, diseño de muebles, cerámicas, joyería, diseño industrial, ingeniería de la construcción, cine, fotografía, etc.), acelerando la evolución en el arte de vanguardia y en el diseño, el Art Nouveau creó al diseño gráfico como oposición al puramente tipográfico, no solo como un medio de comunicación de ideas nuevas, sino también para su expresión. En 1919 se crea La Bauhaus. Fue un lugar en el cual se unieron diversas corrientes vanguardistas que se dedicaron a la producción de la tipografía, publicidad, productos, pinturas y arquitectura. La forma visual se consideró como una escritura universal y la palabra “gráfico” se utilizó para referirse tanto a la escritura como al dibujo.

Introducción

A lo largo de la historia han ido surgiendo gran diversidad de movimientos artísticos (Modernismo, Arts and Craft, Racionalismo o el Pop Art entre otros) que han sido representados por importantes diseñadores (William Morris, Henry Holiday, Charles R. Mackinthos, Peter Behrens, Andy Warhol, Peter Blake o Roy Lichtenstein) Los avances tecnológicos dieron paso a una gran evolución del diseño gráfico, facilitando herramientas para la creación de diseños innovadores y de gran originalidad. Al respecto, cabe destacar el uso de programas como los del paquete de Adobe: Photoshop, Illustrator, In Design o Flash entre otros. Gracias a estas herramientas, actualmente, podemos crear grandes e innovadores diseños. Cada una de ellas nos permite realizar una actividad dentro del sector del diseño.

2. Objetivos

Objetivos

2. Objetivos Los objetivos principales de este proyecto son dos: - Realización de un manual corporativo - Diseño y desarrollo de la plataforma virtual

Manual Corporativo Un manual corporativo es aquel en el que se definen todas las normas de utilización de una identidad corporativa. En él se definen los colores, las tipografías, los tamaños mínimos permitidos, el espacio mínimo que rodea al logotipo, las distintas versiones de color en las que se puede utilizar dicha identidad… La distribución y estructura de un manual corporativo es muy similar en todos los tipos de manuales, pero varían en cuanto a la actividad que se define a través de ellos. En este caso, el manual desarrollado define el uso de la identidad corporativa de la plataforma INFOPyme Cantabria, que servirá como núcleo de información para todas aquellas PYMES ya establecidas, autónomos y emprendedores que tengan inquietudes o curiosidad sobre el estado de su negocio o sobre cómo llevar a cabo uno con éxito.

Página web La página web ha sido desarrollada mediante Joomla y los objetivos que se han querido plasmar a lo largo de todo su desarrollo han sido la funcionalidad y la calidad de información mediante un diseño atractivo y de fácil uso. Como anteriormente se ha nombrado, la pagina web servirá como punto de información para todas aquellas PYMES, autónomos y emprendedores que busquen información sobre su negocio o sobre cómo crear uno. Además de aportar información a los usuarios, INFOPyme posee una categoría de formación en la que se puede acceder a la plataforma Moodle y allí incribirse en los distintos cursos que están a diposicion del usuario registrado.

3. La empresa

La empresa

3. La empresa La empresa en la que he realizado tanto las prácticas como el proyecto se llama Cappuccino Estudio de Comunicación.

Es una empresa que está situada en Santander, en la calle Alta 133 en el Mercado de Méjico. Además de este estudio dan servicio en Madrid y en Cáceres.

En su página web se definen como: “Somos un grupo de profesionales de la comunicación con una amplia experiencia que ha decidido unir sinergias para afrontar de forma efectiva y coherente las necesidades de un mercado que ha evolucionado, y evoluciona, de forma vertiginosa. Un conjunto de creativos, diseñadores gráficos, web masters, ejecutivos de cuentas, periodistas, fotógrafos, infografistas, copys, programadores, artistas e ilustradores que nos hemos encontrado en el lugar y el momento exacto. Provenimos de distintas partes del mundo y eso nos otorga un plus de diversidad multicultural, una riqueza que se traduce en un planteamiento innovador y claramente diferente. Pero ante todo, lo más importante es que somos como tú.”

La empresa

“Ya escuchamos cientos de veces que “el cliente siempre tiene la razón”. ¿Qué nos diferencia de otras agencias? Nosotros creemos que una agencia y sus clientes deben ser cómplices en todo lo que hagan. El cliente es el que más sabe de su producto, y la agencia sobre planificaciones y estrategias de comunicación. Pero esto, lo único que debe crear entre ambos, es una sinergia. El cliente llega a una agencia para que se le aconseje, se le ayude, se le entienda y se le apoye en la difícil tarea de comunicar sus productos y, además, lograr venderlos. La verdadera diferencia radica en que la agencia le entienda y se implique cien por ciento con él. El objetivo de Cappuccino es ponerse a tu lado desde el primer momento. Ser un apoyo, un socio, un cómplice.

Los trabajos que realizan se dividen en distintas categorías: - Diseño gráfico - Estrategias de marketing - Campañas de publicidad - Web - Redes sociales: Marketing on-line En Cappuccino Santander hemos estado trabajando estos meses Miguel Mantecón, alumno de ITE en Cesine y yo y juntos, hemos realizado este proyecto en el que cada uno de nosotros se ha encargado de una parte y colaborando con las tareas del otro.

4. Manual Corporativo

Manual Corporativo

4. Manual corporativo Esta sección del proyecto está dedicada a explicar de forma detallada toda la fase de desarrollo de la identidad corporativa diseñada especialmente para él, así como sus correctos usos y todas las características que lo forman.

4.1 Introducción Un manual corporativo es aquel documento diseñado para establecer las normas de utilización de una identidad corporativa. En él se definen los colores, las tipografías, los tamaños mínimos permitidos, el espacio mínimo que rodea al logotipo, las distintas versiones de color en las que se puede utilizar dicha identidad… La distribución y estructura de un manual corporativo es muy similar en todos los tipos de manuales, pero varían en cuanto a la actividad que se define a través de ellos. La importancia de una identidad corporativa es muy grande ya que a través de ella los usuarios son capaces de reconocer a una empresa e identificarla con las sensaciones que esta crea en cada persona. La identidad corporativa es formada por dos elementos básicos que juntos conforman lo que llamamos logosímbolo. Estos elementos con el logo y el anagrama o símbolo. El logo es la parte grafica del proyecto, es lo que comúnmente podríamos denominar como las letras de nuestra identidad corporativa. El otro elemento es el anagrama o símbolo que es aquella imagen visual que sintetiza la identidad corporativa. Cuando ambos elementos se unen se genera un logosimbolo que representa la totalidad de la identidad visual corporativa. Los colores son un elemento de gran importancia a la hora de realizar un diseño de una identidad corporativa, ya que, a pesar de que no tengan un significado específico, son elementos que transmiten y evocan muchisimas sensanciones en el usuario. Por ello, hay que tener especial cuidado en que los colores representen la ideología de la empresa y no se relacionen con otras empresas o pensamientos que puedan llevar a la confusión de los clientes sobre el tema a tratar.

Manual Corporativo - Logo

4.2 Logo El logotipo ha sido diseñado y desarrollado específicamente para este proyecto y como todos ha sido fruto de una evolución de ideas, que se han ido modificando hasta llegar a desarrollar el logotipo deseado para nuestro proyecto. El logo elegido definitivamente ha sido el siguiente:

INFOP me Cantabria

4.2.1 Construcción del logotipo El logotipo puede presentarse en diferentes formas, de forma sencilla, acompañado del símbolo de INFOPyme acompañado por el identificador y acompañado por ambos.

Logotipo sencillo

Logotipo + Símbolo

Logotipo + Identificador

Logotipo + Símbolo + Identificador

Manual Corporativo - Logo

MODULACIÓN EL logotipo de INFOPyme, se inscribe en una superficie modular de proporciones 8x2,5. El valor “X” establece la unidad de medida, coincidiendo con el tamaño de la caja alta perteneciente a la tipografía Vintage. Así, aseguramos la correcta proporción de la marca sobre cualquier soporte y medidas.

ESPACIO DE SEGURIDAD Se ha establecido un espacio de seguridad en torno al logotipo. Este área deberá estar exenta de elementos gráficos o tipográficos, que interfieran en la percepción y lectura de la marca. La construcción del área de respeto queda determinada por la medida “X”.

Manual Corporativo - Logo

TAMAÑO MÍNIMO DE REPRODUCCIÓN

Para reproducción en pantalla se aconseja un tamaño mínimo de 100 pixeles de largo. En sistemas con bajos valores de reproducción, (relieves, grabados...), se aconseja un mayor tamaño, atendiendo a criterios técnicos del sistema de reproducción y de legibilidad.

Offset

15mm

Serigrafía

18mm

Soporte digital

100px

Manual Corporativo - Color

4.3 Color El color tipográfico es aquel color elegido para representar a la identidad corporativa. Existen colores primarios o secundarios. En este caso el logotipo está formado por dos grises, uno mas oscuro (Pantone 425C) y el otro mas claro (Pantone 430C) El símbolo esta formado por la combinación de varios colores, azul claro (Pantone Process Blue C), añil (Pantone 2718C), azul verdoso (Pantone 3155C) y lila (Pantone 2715C) El identificador está formado por la palabra Cantabria y es de color azul oscuro (Pantone 2728C)

Colores principales LOGOTIPO

Pantone 425 C

Pantone 430 C

SÍMBOLO

Pantone Procces Blue C

Pantone 2718 C

Pantone 3155 C

Pantone 2515 C

Colores secundarios IDENTIFICADOR

Pantone 2728 C

Manual Corporativo - Color

APLICACIONES CROMĂ TICAS

Sobre fondo blanco

Sobre fondo negro

En blanco y negro

En negativo blanco y negro

Escala de grises sobre fondo blanco

Esacala de grises sobre fondo negro

Negro sobre fondo Pantone Process Blue C

Blanco sobre fondo Pantone 3155 C

Manual Corporativo - Tipografía

4.4 Tipografía La tipografía corporativa es aquel tipo de letra escogido para representar la identidad corporativa de la empresa. En el caso de INFOPyme tenemos dos tipografías primarias y una secundaria. Dentro de las primarias, la primera de ellas representa la palabra “INFO” y la segunda a la palabra “Pyme”. La tipografia sencundaria ha sido utilizada para la palabra “Cantabria”.

Tipografías Primarias VINTAGE REGULAR

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%&*() BAUHAUS DEMI

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%&*()

Tipografía Secundaria MYRIAD PRO REGULAR

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%&*()

Manual Corporativo - Usos incorrectos

4.5 Usos incorrectos A continuación se establecen los principales usos incorrectos de la identidad corporativa de INFOPyme Cantabria que deberán respetados de forma absoluta.

INFOP me Cantabria

Cambiar los colores de los elementos

Cambiar la proporción vertical

INFOP me Cantabria

Cambiar las posiciones de los elementos

INFOPme Cantabria

Suprimir elementos

Colocar el logotipo sobre fondos que no permitan que se aprecie correctamente

Cambiar la proporción horizontal

INFO Cambiar la tipografía

Cambiar las posiciones de los elementos

Manual Corporativo - Papelería

4.6 Papelería Tarjetas de visita generales

INFOP me

Cantabria

C/Calle nº Piso Letra

Ciudad - Código Postal - Provincia

Tel: XXX XX XX XX Fax: +XX XXX XX XX

e-mail: xxxxxxx@xxxxxxx.com

Tarjetas de visita personalizadas

INFO P me Cant

abria

INFO P me Cant

abria

Nombre Apellido1 Apellido2

C/Calle nº Piso Letra

Ciudad - Código Postal - Provincia

Tel: XXX XX XX XX Fax: +XX XXX XX XX e-mail: xxxxxxx@xxxxxxx.com

Manual Corporativo - PapelerĂa

Cartas

INFOP me Cantabria

Nombre Apellidos Jefe de Departamento

Nombre Apellido1 Apellido2 C/calle numero piso ciudad CP Prov

Dae omnis untiori ostium: Est omnime sitatibus et quibea volene et repero veni re velitas eiusciliquas quiae necatust, tet, sedia nihicidel eatque pro quidebis con nonsequisqui nihit, tem qui venda cum dolestium fugitas pereribus doluptis seque pori voluptas alicat occus. Genisquas voluptuscia simaiore modio tem dolorup taquos et lique qui quaessequi ipsum fugitem adi dolutaeperi aut ilibus, etur, ut verspeliquia nienis modicil laccum invelendae ressimi, cuptibus modigent. Ebis con corereiur? Eseque et, voluptur saectur modit alit etur? Hicatem porerat et fuga. Ut ilitibus endus at omniminciis id et hil inihilit re, aut im esseque venias dolestrupti officia num quodit landeris que cuptamus. Namusdam, nima nobis maximod itatquosam ipicient, aute voluptus simagni hicatur autet volupist et, idel inihit pa suntia por se perae eris sit, alita vent facim rest fugitat emporibus. Dolestis sam, ea discia et laborestibus cone occus sit laborum rento opta et ulles dolupta aut miniscidis iliti nimus sita enis inuscil labore prat volo quam, sus modit as ad quos alibusam quati dolo et odis dolesed quunt et vollatus doluptae volorec uptasim enimpora doleniendem consequam, tem quatata verferchil ipiciaspe perferit ex esto tem a vidi secto cum qui consequam etur sundam vellabo. Cil idi aut magnien diciis animoss imporitia apicatum dolupta con nis ut autasitis ullabo. Ga. Pis endem qui aut hicimus peribus doloriat eateturibus. Optat fugit qui nis aut quiam eos repe desequi dus eum eium quistis atur aut que ditibust, quo qui bernati onsequi asperibus. Em quae. Fic tota nuscid quam rem nam idit eatum fugiae nitatiam quo blatur rehente qui aut ium natem dolorporum nim volorumet pratisquis et quos aut ari cumquati blaut es alia con cum, num rem verferf ererunt alibus, imagnatiae labore rem ditatio ritatur reribus. Tur sapid untium quam, ut molla simus dolupiet volest, sin comnihicil eos sed ut venis estem sequia nis is evelibe rovita verorer umquunt eat que nume nese poraerora ipictiat. lorio. Con porepta tusandit quid quidebis corpore hendam re diti doloria tatur? Quiae voloriam quas am quodis as aut odist od quia qui omni sequi in escipsa menimodi tem acepro bla idit acepudae ilibus et, volore conse non re voluptatem dolliquia cumqui nonsed maio. Ut fuga. Rem volorei ctatis iliquam Que duciasp isquae

Nombre Apellido1 Apellido2 C/calle numero piso ciudad CP Prov

INFOP me Cantabria

Nombre Apellidos Jefe de Departamento

Manual Corporativo - Papelería

Sobres

INFOP me Cantabria

Calle nº piso - Ciudad - CP - Provincia www.infopymecantabria.com

INFOP me Cantabria

Manual Corporativo - Papelería

Cuaderno

INFOP me Cantabria

Fax INFOP me Cantabria

Calle, nº CP Ciudad, Provincia Telf - Fax E-mail Página Web

De: Para: Nº de hojas: Fecha

Manual Corporativo - Papelería

Carpetas

INFOP me Cantabria

INFOPyme

infopymecantabria.com

INFOP me Cantabria

INFOPyme

infopymecantabria.com

Sello

INFOP me Cantabria

Teléfono - Fax info@infopymecantabria.com | infopymecantabria.com

Manual Corporativo - Merchandising

Cantabria

INFOP me

4.7 Merchandising

INF

OP me Can

tab

ria

INFOP me Cantabria

5. Pรกgina web

Página web

5. Página web Este proyecto ha sido diseñado como una plataforma interactiva en la que PYMES, emprendedores y autónomos puedan obtener toda la información necesaria para que su negocio sea un éxito. Esta plataforma se llama INFOPYME Cantabria y consta de distintas secciones en las que podemos encontrar toda la información requerida dependiendo de nuestro tipo de negocio, pudiendo elegir entre tres categorías principales: - PYMES - Autónomos - Emprendedores Y otras subcategorías, que son las siguientes: - INICIO - Noticias - Guía - Subvenciones - Herramientas - Formación - Directorio A lo largo de todo el desarrollo de esta plataforma, se ha pretendido mantener el mismo diseño y armonía entre todos los elementos de la página. El fondo de la página es de color gris de un tono medio, la barra de menú esta formada por un degradado de gris a gris oscuro, mientras que el fondo de la página de contenidos está formado por un degradado de blanco a gris claro, siendo un degradado vertical en la zona de la cabecera y un degradado del centro a los laterales en el contenido de la página. El pie de página sigue el mismo código de colores del menú superior, siendo el fondo de color gris oscuro y con un degradado de gris a gris oscuro en la zona de acceso a las redes sociales. Los titulos de los textos a lo largo de todos los contenidos de la página son en tonos azules. Los titulos principales son de un azul mas oscuro y los vínculos son de un azul mas claro, asi como los vínculos de la ruta de la pagina. A continuación se describen cada una de las categorías que forman parte de esta plaforma.

Página web - Inicio

5.1 Inicio La página de inicio de INFOPyme Cantabria está formada por una cabecera con el botón de acceso o registro, un menú superior con un buscador y con todas las categorías que componen la página, una presentación central divida en PYMES, autónomos y emprendedores, que se despliega y a través de la cual podemos acceder a todo el contenido y en la parte inferior de la pantalla de inicio se describe el objetivo de INFOPyme Cantabria.

Página de inicio

Página de inicio con el slider central desplegado

Página web - Noticias

5.2 Noticias Esta sección de la página está diseñada para mostrar las últimas noticias mas importantes dentro del sector de las PYMES, autónomos y emprendedores. La página de noticias, mantiene el mismo diseño del menú superior de la página de inicio, el fondo de la página es del mismo color y el pie de página es común, también.

Página principal de noticias

Página web - Guía

5.3 Guía La categoría de guía está formada por tres subcategorías con sus repectivos menús en los que se refleja la organización de todos los contenidos que forman cada una de estas guías. Estas tres subcategorías son: - Gestión PYMES - Gestión autónomos - Guía emprendedores Cada una de estas categorías está formada por contenidos distintos, así como sus objetivos y sus usuarios, aunque todas tienen un fin común y es ayudar a aquellas personas que tengan dudas sobre como crear o gestionar sus negocios dentro del mercado actual.

Gestión PYMES Esta categoría tiene como objetivo ser capaz de proporcionar a todas aquellas personas que forman parte de una PYME o tienen intención de crear una desde el inicio.. Para ellos, hemos organizado la información de tal modo que pueden comenzar su aprendizaje desde la información mas básica como es gestionar la empresa hasta cómo cerrar una empresa en los distintos casos que se pueden dar para llegar a ese punto.

Página de la gestión de PYMES

Página web - Guía

Gestión autónomos Dentro de la categoría de gestión autónomos hemos querido recopilar toda la información que fuese necesaria para todas aquellas personas que sean autónomos o quieran comenzar a serlo. Ponemos a su disposición la información que ellos necesitan para poder gestionar o crear sus negocios desde cero, así como la contratación de personal o la regulación de todos los documentos que un autónomo tiene que llevar a cabo.

Página de la gestión de autónomos

Página web - Guía

Guía emprendedores En la subcategoría de emprendedores la información que ponemos a disposición de los usuarios está organizada de tal forma que cualquier persona puede llegar a aprender todo lo necesario para poder hacer realidad sus ideas de negocios. En esta guía la informacion se organiza desde lo mas sencillo, que es la idea de negocio, hasta el concepto de venta y todas las pequeñas cosas que hay que aprender para poder aumentar las ventas de los negocios.

Página de la guía de emprendedores

Página web - Subvenciones

5.4 Subvenciones Esta categoría recoge todas las subvenciones y ayudas de la Comunidad de Cantabria, que han sido extraídas de la Cámara de Comercio de Cantabria.Las ayudas o subvenciones suelen ser un pilar a tener muy en cuenta a la hora de poner en marcha un negocio de una forma mas desahogada, en lo que a lo econónomico respecta. Un elemento muy característico de esta categoría es el slide de la parte superior en el que van apareciendo todas las subvenciones publicadas en la página de subvenciones, mientras que los articulos propios se muestran en la parte inferior de la pantalla, pudiendo acceder al resto de subvenciones de una forma cómoda y rápida.

Página principal de subvenciones

Página web - Herramientas

5.5 Herramientas En la página de herramientas en usuario tiene a su disposición todo tipo de documentos, plantillas e impresos mediante los cuales puede llevar a cabo todas las tareas de regulación, alta o contrato dentro de las obligaciones de su negocio. De esta forma tendrá el negocio dado de alta de una forma legal y correcta y no tendrá preocupaciones por tener problemas con hacienda o con la justicia. Algunas de las categorías de documentos que están a disposicion de los usuarios registrados en la página de INFOPyme Cantabria son: - Tipos de contratos laborales - Folletos y publicaciones - Guías - Impresos oficiales - Normativa - Patentes y marcas

Página principal de herramientas

Página web - Herramientas

A continuación se muestra una imagen de una de las muchas páginas de contenidos que la sección de herramientas de la página web de INFOPyme Cantabria posee. En este caso específico se muestra la página de Contratos laborales con la posibilidad de descargarse los distintos tipos de contratos que existen en el mercado acual. El número máximo de descargas se ha restrigido por día y por usuario.

Página de contenidos de herramientas

Página web - Formación

5.6 Formación Al clicar en la sección de formación se nos abre una ventana nueva en la que podemos acceder a la plataforma virtual de Moodle. En esta plataforma los usuarios de INFOPyme Cantabria tienen la posibilidad de incribirse en cursos on-line mediante los cuales aprenderán los conocimientos necesarios para poder dirigir o crear un negocio de éxito asi como técnicas de mejora de las capacidades de dirección. Acceder a estos cursos es muy fácil. Tan sólo hay que crear una nueva cuenta de usuario y posteriormente inscribirse en los cursos que esten disponibles y sean del interés del usuario.

Página de acceso a Moodle

Página de registro en Moodle

Pรกgina web - Formaciรณn

Pรกgina principal de Moodle

Pรกgina de un curso en Moodle

Página web - Directorio

5.7 Directorio La sección de directorio está dedicada a albergar a todas aquellas empresas que se quieran registrar en nuestra plataforma para así promocionarse a todos los usuarios de INFOPyme Cantabria. En este directorio las empresas se organizan según su actividad comercial y la información que mostramos se basa en el nombre de la empresa, dirección, teléfono de contacto, email y un mapa de Google maps con la localización.

Página principal de directorio

Página de localización de una empresa

Página web - Acceso y registro

5.8 Acceso y registro En la mayoría de las páginas en las que se ofrecen descargas o se muestra contenido especial en algún sentido, el requisito indispensable para poder acceder a ello, es registrarse. INFOPyme Cantabria, no es una excepción y para poder descargarse los contenidos de la sección de herramientas es necesario registrarse en la página. Los datos serán almacenados en una base de datos y el usuario debera aceptar los requisitos legales reflejados en el aviso legal si quiere obtener el privilegio de poder descargar.

Página de localización de una empresa

Para aquellos usuarios que olviden su contraseña, nuestro menú de acceso posee una opción de solicitud de recordatorio de la contraseña que el usuario estableció en su registro.

Página web - Acceso y registro

Para aquellos usuarios que olvidaron su nombre de usuario y no les sea permitido acceder a la página de INFOPyme Cantabria, en el menú de acceso tiene la a opción de solicitud de recordatorio del nombre de usuario que será enviado a la bandeja de entrada del correo que se estableció durante el registro.

Página de solicitud de recordatorio de usuario

Todas aquellas personas que esten interesadas en descargarse archivos dentro de esta página deberán rellenar el siguiente cuestionario de registro para así poder acceder a dichos documentos.

Página de registro

Página web - Aviso lega

5.9 Aviso legal En materia de Internet, el aviso legal de una página web es una página que recoge el conjunto de normas que se aplican a la navegación por dicho sitio web. Básicamente, el Aviso legal de una página web informa de: - Las condiciones generales de uso del sitio: identificación del prestador de servicios online, descripción del producto o servicio ofrecido (incluyendo impuestos y recargos existentes), códigos éticos a los que esté adherido el comercio (Por ejemplo, Confianza online), política de entrega de productos y devoluciones de los mismos, etc. Esta parte está regulada por la Ley 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSI), que dice en su artículo 27.4 (Obligaciones previas a la contratación) - La política de privacidad del sitio web, es decir, información sobre la existencia de un fichero de datos personales y sobre los derechos ARCO del usuario (acceso, rectificación, cancelación y oposición). Esta parte está regulada por la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal (LOPD). Muchas veces es necesario declarar haber leído y aceptar el Aviso legal de esa web para poder beneficiarse de algún servicio de la misma (newsletter, compra online, registro online, etc.). En INFOPyme Cantabria también se ha redactado un aviso legal en el que se detallan las condiciones de uso del sitio web y la politica de privacidad de los datos de los usuarios. Los usuarios deben leer y aceptar las condiciones legales si quieren acceder a la página y a las descargas que contiene.

Página de aviso legal

Página web - Contacta

5.10 Contacta La página de contacto esta destinada para envíar aquellas dudas o consultas que puedan surgir a los usuarios de la página web de INFOPyme Cantabria. A través de la cumplentación de este cuestionario, se pondrán en contacto con el encargado de gestionar las dudas del sitio web. La información que deberán cumplimentar es la siguiente: - Nombre y apellidos - Email - Tema del mensaje - Mensaje Ademas, tendrán la opción de enviar una copia a su correo para confirmar que la duda, queja o consulta ha sido enviada correctamente al correo de contacto de INFOPyme Cantabria.

Página de contacto

Página web - Buscador

5.11 Buscador INFOPyme Cantabria dispone de un buscador mediante el cual el usuario puede buscar directamente todos los documentos, artículos, secciones o categorías que incluyan la palabra introducida en el buscador. Este buscador esta disponible siempre y está colocado en la parte derecha del menú superior que se repite en cada una de las categorías y articulos que forman parte de los contenidos de la página web. Las búsquedas se pueden realizar mediante todas las palabras introducidas, con cualquier palabra o con la frase exacta. Los resultados de la búsqueda se pueden organizar según lo más o lo menos nuevo, alfabéticamente, lo más popular o por la sección. Además, podemos elegir lo que queremos buscar dependiendo del tipo de elemento que estemos buscando, pudiendo elegir entre artículos, enlaces web, contactos, categorías, secciones o suscripción de noticias. Los resultados que nos muestra el buscador por página también pueden ser modificados pudiendo elegir que nos muestre desde 5 resultados por página, a 10, 15, 20, 25, 30, 50, 100 o todos los resultados obtenidos en la búsqueda.

Página de resultados de búsqueda

6. Programas

Programas

6. Programas A lo largo de todo el desarrollo de este proyecto se han ido utilizando distintos programas dependiendo de la actividad que fuésemos a realizar y del ámbito de esta. Gracias a estos programas el resultado obtenido ha sido muy bueno y sin el avance de estas tecnologías habría sido muy difícil alcanzar los objetivos que nos habían fijado. Dentro de la rama de diseño, se han utilizado algunos programas del paquete de Adobe CS5: - Photoshop - Illustrator - Indesign Dentro de la rama de la informática y la maquetación web, hemos utilizado: - Joomla! - Notepad ++ - XAMPP - Filezilla A la hora de verificar el correcto funcionamiento de la página web de INFOPyme Cantabria, se ha consultado en cuatro de los navegadores mas utilizados por los usuarios de los ordenadores, tanto en sistema operativo Windows como en Macintosh. Estos navegadores son: - Internet Explorer - Mozilla Firefox - Google Chrome - Safari A continuación se describe brevemente cada programa y navegador y sus utilidades básicas.

Programas - Photoshop

6.1 Adobe Photoshop CS5 Adobe Photoshop es uno de los programas más populares de la casa Adobe. Su nombre en español significa “taller de fotos” y se trata de una aplicación informática en forma de taller de pintura y fotografía que trabaja sobre un “lienzo” y está destinado para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits (o gráficos rasterizados). Su capacidad de retoque y modificación de fotografías le ha dado el título de ser el programa de edición de imágenes más famoso del mundo. Actualmente forma parte de la familia Adobe Creative Suite y es desarrollado y comercializado por Adobe Systems Incorporated inicialmente para computadores Apple pero posteriormente también para plataformas PC con sistema operativo Windows. Su distribución viene en diferentes presentaciones, que van desde su forma individual hasta como parte de un paquete (Adobe Creative Suite Design Premium, Adobe Creative Suite Web Premium, etc…). Photoshop en sus versiones iniciales trabajaba en un espacio bitmap formado por una sola capa, donde se podían aplicar toda una serie de efectos, textos, marcas y tratamientos. A medida que ha ido evolucionando el software ha incluido diversas mejoras fundamentales, como la incorporación de un espacio de trabajo multicapa, inclusión de elementos vectoriales, gestión avanzada de color (ICM / ICC), tratamiento extensivo de tipografías, control y retoque de color, efectos creativos, posibilidad de incorporar plugins de terceras compañías, exportación para sitios web entre otros. Photoshop se ha convertido, casi desde sus comienzos, en el estándar en retoque fotográfico, pero también se usa en multitud de disciplinas del campo del diseño y fotografía, como diseño web, composición de imágenes bitmap, estilismo digital, fotocomposición, edición y grafismos de vídeo y básicamente en cualquier actividad que requiera el tratamiento de imágenes digitales. Photoshop ha dejado de ser una herramienta únicamente usada por diseñadores y maquetadores, ahora Photoshop es una herramienta muy usada también por fotógrafos profesionales de todo el mundo, que lo usan para realizar el proceso de “positivado y ampliación” digital, no teniendo que pasar ya por un laboratorio más que para la impresión del material. Con el auge de la fotografía digital en los últimos años, Photoshop se ha ido popularizando cada vez más fuera de los ámbitos profesionales y es uno de los programas que resulta más familiar (al menos de nombre) a la gente que comienza a usarlo. Aunque el propósito principal de Photoshop es la edición fotográfica, este también puede ser usado para crear imágenes, efectos, gráficos y más en muy buena calidad.

Programas - Photoshop

Aunque para determinados trabajos que requieren el uso de gráficos vectoriales es más aconsejable utilizar Adobe Illustrator. Algunos de los trabajos que hemos realizado mediante Photoshop a lo largo del desarrollo del proyecto son los mostrados en las siguientes imágenes.

Degradado fondo páginas de contenidos

Degradado fondo cabecera

Degradado fondo botones del menú

Degradado para las imágenes del menu desplegable de la página de inicio

Programas - Illustrator

6.2 Adobe Illustrator CS5 Adobe Illustrator es otro de los programas más populares de la casa Adobe. Se trata de una aplicación de creación y manipulación vectorial en forma de taller de arte que trabaja sobre un tablero de dibujo, conocido como "mesa de trabajo" y está destinado a la creación artística de dibujo y pintura para Ilustración (Ilustración como rama del Arte digital aplicado a la Ilustración técnica o el diseño gráfico, entre otros). Está desarrollado y comercializado por Adobe Systems Incorporated y constituye su primer programa oficial de su tipo en ser lanzado por ésta compañía definiendo en cierta manera el lenguaje gráfico contemporáneo mediante el dibujo vectorial. Adobe Illustrator contiene opciones creativas, un acceso más sencillo a las herramientas y una gran versatilidad para producir rápidamente gráficos flexibles cuyos usos se dan en (Maquetación-Publicación) impresión, vídeo, publicación en la Web y dispositivos móviles. Las impresionantes ilustraciones que se crean con éste programa le han dado una fama de talla mundial a esta aplicación de manejo vectorial entre artistas gráficos digitales de todo el planeta, sin embargo, el hecho de que hubiese sido lanzado en un principio para ejecutarse sólo con el sistema operativo Macintosh y que su manejo no resultara muy intuitivo para las personas con muy poco transfondo en manejo de herramientas tan avanzadas afectó la aceptación de éste programa entre el público general de algunos países. Actualmente forma parte de la Familia Adobe Creative Suite y tiene como función única y primordial la creación de material gráfico-ilustrativo altamente profesional basándose para ello en la producción de objetos matemáticos denominados vectores. La extensión de sus archivos es .AI (Adobe Illustrator). Su distribución viene en diferentes presentaciones, que van desde su forma individual hasta como parte de un paquete (Adobe Creative Suite Design Premium, Adobe Creative Suite Production Studio Premium, etc…) Esta aplicación es más reconocida por la calidad y nivel artístico de las ilustraciones allí creadas más que por cualquier otra cosa, siendo frecuentemente utilizado por artistas muy experimentados esto, además, de que también requiere de una cierta cantidad de tiempo y esfuerzo para poder dominar el programa. Adobe Illustrator fue uno de los primeros en hacer uso de la tecnología Display PostScript un tipo de lenguaje WYSIWYG creado por la compañía Adobe Systems en convenio con la compañía NeXT Computer, Inc.. en el año de 1987 y que se trata de una versión más avanzada del lenguaje de descripción de páginas para impresora Adobe PostScript de Adobe Systems que permite que lo que se vea en la pantalla sea una previsualización del resultado tal cual como se va a imprimir.

Programas - Illustrator

La mayoría de los trabajos que hemos realizado para la página web de INFOPyme Cantabria han sido a través de Illustrator. Toda la evolución del logotipo está hecha en este programa, asi como los monigotes del menú desplegable de la página de inicio, tanto internos como los externos. A continuación se muestran ejemplos de estos trabajos.

INFOP me Cantabria

Logotipo

HERRAMIENTAS

FORMACIÓN

NOTICIAS

Imágenes del menu desplegable interno

Monigotes del menú desplegable de inicio

Programas - InDesign

6.3 Adobe InDesign CS5 Adobe InDesign es una aplicación en forma de taller que trabaja sobre un doblez de páginas conocido como Pliego o sobre una sola página y que está destinado a la maquetación de textos para propósitos impresos o web. Está desarrollado por la compañía Adobe Systems para diseñadores gráficos. Fue presentado en 1999, su objetivo era ser la alternativa a QuarkXPress, de Quark Inc., que desde hacía doce años venía ejerciendo el monopolio en la composición profesional de páginas. En las últimas versiones, las aplicaciones de Adobe han sido renovadas de forma que la apariencia quedó más simple y práctica, con colores grises, de modo que resultase agradadable a los principales grupos de usuarios. El programa se divide de forma relativamente simple. Por defecto, las herramientas quedan sobre el lado izquierdo de la pantalla. En la parte superior encontrarás las opciones de márgenes, de formao de fuente y de alineación de objetos, además de varios otros ajustes. Una “hoja” aparece en medio de la pantalla, mostrando los límites del documento. En los bordes quedan las reglas, de forma que puedes arrastrar líneas guías. Sobre el lado derecho de la pantalla encontrarás todas las páginas del documento para navegar por ellas. También podrás definir una página maestra, para que el estilo sea aplicado en todas de una sola vez. Al abrir el programa tienes la opción de iniciar un nuevo documento normal o un libro. El programa tiene pre-definiciones para impresión o material de divulgación vía web. Podrás escoger el número de páginas, ancho, altura, columnas, margen y espaciadores. Podrás agregar imágenes e ítems interactivos (PDF) en la página. Sobre el lado izquierdo de la pantalla encontrarás las herramientas del programa, texto, línea, lápiz, formas geométricas… Adobe InDesign exhibe en tiempo real la cantidad de errores que puede acontecer durante la impresión de los proyectos (este recurso está presente en la barra inferior de la ventana principal). Tienes dos opciones en el menú “Archivo” para concluir tu trabajo: “Exportar”, que permite guardar en PDF de impresión o interactivo, EPS, Flash, IDML (InDesign Markup), JPEG y XML; la otra opción es “Exportar Para”, con Buzzword, Dreamweaver (HTML) y EPUB, eBooks con compatibilidad para Apple iPad, Sony Reader, Barnes & Noble Nook y otros dispositivos. En las últimas versiones, uno de los grandes recursos de los programas de Adobe fue la unión de sus aplicaciones. Este programa ha sido utilizado para realizar la maquetación de todo el proyecto.

Programas - Joomla!

6.4 Joomla! Joomla! es un sistema de gestión de contenidos, y entre sus principales virtudes está la de permitir editar el contenido de un sitio web de manera sencilla. Es una aplicación de código abierto programada mayoritariamente en PHP bajo una licencia GPL. Este administrador de contenidos puede trabajar en Internet o intranets y requiere de una base de datos MySQL, así como, preferiblemente, de un servidor HTTP Apache. En Joomla! se incluyen características como: hacer caché de páginas para mejorar el rendimiento, indexamiento web, feed RSS , versiones imprimibles de páginas, flash con noticias, blogs, foros, encuestas, calendarios, búsqueda en el sitio web e internacionalización del lenguaje. Su nombre es una pronunciación fonética para anglófonos de la palabra swahili jumla, que significa “todos juntos” o “como un todo”. Se escogió como una reflexión del compromiso del grupo de desarrolladores y la comunidad del proyecto. De forma similar a otros proyectos, Joomla mantiene dos versiones de la aplicación: una estable y otra Beta o en desarrollo. La versión estable es la que se considera para usuarios y a medida que aparecen errores se corrigen, esta versión se publica sin nuevas funcionalidades. La versión Beta, incluye nuevas funcionalidades y mejoras a los fallos reportados en versiones anteriores, de igual forma se tiene que en este tipo de versión se reflejan las directivas del proyecto para usuarios avanzados y desarrolladores. La primera versión de Joomla! (Joomla! 1.0.0) fue publicada el 16 de septiembre de 2005. Se trataba de una versión mejorada de Mambo 4.5.2.3 combinada con otras modificaciones de seguridad y anti-bugs. Actualmente los programadores han publicado Joomla! 1.5 Stable bajo un código completamente reescrito y construido bajo PHP 5. El 22 de enero de 2008 se ha lanzado la versión 1.5 estable de Joomla, que incorpora notables mejoras en el área de seguridad, administración y cumplimiento con estándares W3C. Actualmente cuenta con una gran cantidad de componentes, módulos y plugins, aunque se pueden usar los de la versión anterior (1.0.X). Para esto, sólo hay que activar un plugin incluido llamado System - Legacy que mejora considerablemente (no por completo) la compatibilidad con los mambots para Joomla! 1.0.X. El 10 de enero de 2011 se publica la versión 1.6 estable de Joomla, que incluye numerosas mejoras, entre las que cabe contar: categorías anidadas, ACL, mejoras en el soporte de idiomas y SEO, redirección de páginas integrada, estilos de plantilla. Además, se ha rediseñado completamente el entorno (interfaz de usuario), y se ha mejorado el gestor de extensiones.

Programas - Joomla!

Para la creación completa de la página web de INFOPyme Cantabria debiamos utilizar la plataforma Joomla!, mediante la cuál, y a través de la instalación de una plantilla y diversos módulos hemos conseguido realizar el proyecto con gran comodidad en su edición y gracias al panel de administración de Joomla!. Mediante este panel podemos editar muchos de los detalles de los módulos, como por ejemplo, el ancho, el alto, la opción de mostrar el titulo, etc.. y además Joomla! nos permite crear secciones, categorías y artículos con los que establecemos todos los contenidos de la página web sin tener que introducirlo en ningún editor de texto externo a la plataforma.

Página principal de administración de Joomla!

Página gestor de artículos de Joomla!

Programas - Joomla!

Pรกgina gestor de texto de Joomla!

Pรกgina gestor de mรณdulos de Joomla!

Programas - Notepad++

6.5 Notepad++ Notepad++ es un editor de texto y de código fuente libre con soporte para varios lenguajes de programación. Solo funciona en Microsoft Windows. Se distribuye bajo los términos de la Licencia Pública General de GNU. Y permite editar código fuente en HTML, CSS, JavaScript, PHP, PERL, SQL, Delphi, C++ y otros lenguajes. Es una avanzada herramienta con las características excepcionales, como sintaxis resaltada, plantillas de código, marcadores, longitud de texto ilimitada, URLs resaltadas, numeración de líneas, potente función de buscar y reemplazar, función de deshacer/reacer múltiple, función de arrastrar y soltar, impresión a color, etcétera. A la vez que puede servir como el sustituto perfecto para el Cuaderno de Notas de Windows, también ofrece muchas potentes características dirigidas a desarrolladores de páginas Web y programadores. Características: - Longitud de texto y de línea ilimitadas: puede funcionar con ficheros realmente grandes y seguir siendo muy rápido. - Parseo de sintaxis y sintaxis resaltada: incluye esquemas de sintaxis para los principales lenguajes (HTML, CSS, JavaScript, PHP, PERL, SQL, Delphi, C++). - Soporte para mapa de caracteres de DOS y Windows : selección automática del mapa de caracteres al abrir el fichero. - Hiperenlaces: los hiperenlaces se resaltan automáticamente - Función de Arrastrar y Soltar - Niveles ilimitados de deshacer/rehacer. - Numeración de línea - Impresión a color - Exportar a HTML y RTF con sintaxis resaltada. - Marcadores: Se admiten hasta 255 marcadores en un texto. Se mostrarán unas imágenes en la barrra laterar indicando las líneas con marcador. - Expresiones regulares en función de buscar y reemplazar. - Ajuste de línea: Si está trabajando sobre un texto con líneas largas, la función de ajuste de línea le será extremadamente util. - Plantillas de código: Acelera el proceso de desarrollo y ayuda a mantener la consistencia en las páginas web.

Programas - Notepad++

Gracias a Notepad++ hemos podido cambiar todos los detalles que el administrador de Joomla! no tenia disponible en sus módulos. A taves de Notepad++, y retocando el código de la página web de INFOPyme Cantabria se han podido cambiar los tamaños, colores, posiciones, bordes, entre otras mcuhas opciones, de las letras, botones, capas, etc...

Página en blanco en Notepad++

Página con código en Notepad++

Programas - XAMPP

6.6 XAMPP XAMPP es un servidor independiente de plataforma, software libre, que consiste principalmente en la base de datos MySQL, el servidor web Apache y los intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del acrónimo de X (para cualquiera de los diferentes sistemas operativos), Apache, MySQL, PHP, Perl. El programa está liberado bajo la licencia GNU y actúa como un servidor web libre, fácil de usar y capaz de interpretar páginas dinámicas. Actualmente XAMPP esta disponible para Microsoft Windows, GNU/Linux, Solaris, y MacOS X. XAMPP solamente requiere descargar y ejecutar un archivo zip, tar, o exe, con unas pequeñas configuraciones en alguno de sus componentes que el servidor Web necesitará. XAMPP se actualiza regularmente para incorporar las últimas versiones de Apache/MySQL/PHP y Perl. También incluye otros módulos como OpenSSL y phpMyAdmin. Para instalar XAMPP se requiere solamente una pequeña fracción del tiempo necesario para descargar y configurar los programas por separado. Oficialmente, los diseñadores de XAMPP sólo pretendían su uso como una herramienta de desarrollo, para permitir a los diseñadores de sitios webs y programadores testear su trabajo en sus propios ordenadores sin ningún acceso a Internet. En la práctica, sin embargo, XAMPP es utilizado actualmente para servidor de sitios Web y, con algunas modificaciones, es generalmente lo suficientemente seguro para serlo. Con el paquete se incluye una herramienta especial para proteger fácilmente las partes más importantes.

Página de control de XAMPP

Programas - Filezilla

6.7 Filezilla FileZilla es un cliente FTP multiplataforma de código abierto y software libre, licenciado bajo la Licencia Pública General de GNU. Soporta los protocolos FTP, SFTP y FTP sobre SSL/TLS (FTPS). Inicialmente fue diseñado para funcionar en Microsoft Windows, pero desde la versión 3.0.0, gracias al uso de wxWidgets, es multiplataforma, estando disponible además para otros sistemas operativos, entre ellos GNU/Linux, FreeBSD y Mac OS X. De acuerdo con la documentación de ayuda, FileZilla comenzó siendo un proyecto de clase de informática en enero de 2001 de Tim Kosse y dos compañeros de clase. La versión alfa fue lanzada finales de febrero de 2001, y todas las características requeridas se incorporaron en la beta 2.1. Algunas de las características de Filezilla son: - Administrador de sitios: permite a un usuario crear una lista de sitios FTP con sus datos de conexión, como el número de puerto a usar, o si se utiliza inicio de sesión normal o anónima. Para el inicio normal, se guarda el usuario y, opcionalmente, la contraseña. - Registro de mensajes: se muestra en la parte superior de la ventana. Muestra en forma de consola los comandos enviados por FileZilla y las respuestas del servidor remoto. - Vista de archivo y carpeta: situada en la parte central de la ventana, proporciona una interfaz gráfica para FTP. Los usuarios pueden navegar por las carpetas, ver y alterar sus contenidos tanto en la máquina local como en la remota, utilizando una interfaz de tipo árbol de exploración. Los usuarios pueden arrastrar y soltar archivos entre los ordenadores local y remoto. - Cola de transferencia: situada en la parte inferior de la ventana, muestra en tiempo real el estado de cada transferencia activa o en cola.

Página de gestión de Filezilla

Programas - Navegadores

6.8 Navegadores A la hora de crear una página web, hay que tener en cuenta que cada navegador soporta un tipo de prestaciones y por tanto hay que intentar que la página se vea correctamente en todos ellos. Esas prestaciones puede que se vean en algún navegador y en otro no, pero eso no debe impedir que el funcionamiento de la página no sea el óptimo. La creación de la página esta optimizada para el navegador Mozilla Firefox y ha sido comprobada en Internet Explorer, Google Chrome y Safari.

Mozilla Firefox Mozilla Firefox es un navegador web libre y de código abierto, en cuyo desarrollo puede colaborar cualquier usuario que lo desee. Es descendiente de Mozilla Application Suite y es desarrollado por la Fundación Mozilla. Mozilla Firefox es el segundo navegador más utilizado de Internet, con una cuota de mercado del 21,74% a finales de febrero de 2011, según la firma Net Applications. Otras fuentes de medición global sitúan el uso de Firefox entre el 19% y el 31%. Incluye navegación por pestañas, corrector ortográfico, búsqueda progresiva, marcadores dinámicos, un administrador de descargas, navegación privada, navegación con georreferenciación y un sistema de búsqueda integrado que utiliza el motor de búsqueda que desee el usuario. Además se pueden añadir funciones a través de complementos desarrollados por terceros, entre los que hay una amplia selección, lo que según algunos estudios lo convierte en el navegador más personalizable y seguro del momento. Esto ha aumentado significativamente la comunidad de usuarios del navegador. Firefox es un navegador multiplataforma y está disponible en varias versiones de Microsoft Windows, Mac OS X, GNU/Linux y algunos sistemas basados en Unix..

Internet Explorer Windows Internet Explorer (anteriormente Microsoft Internet Explorer), conocido comúnmente como IE, es un navegador web desarrollado por Microsoft para el sistema operativo Microsoft Windows desde 1995.

Programas - Navegadores

Ha sido el navegador web más utilizado de Internet desde 1999 hasta la actualidad, con un pico máximo de cuota de utilización del 95% entre el 2002 y 2003. Sin embargo, dicha cuota de mercado ha disminuido paulatinamente con los años debido a una renovada competencia por parte de otros navegadores, situándose aproximadamente entre el 40% y 62% para finales de febrero de 2011, dependiendo de la fuente de medición global.

Su versión más reciente es la 9.0, publicada el 14 de marzo de 2011, y está disponible gratuitamente como actualización para Windows Vista SP2 o Windows Server 2008 SP2, además de Windows 7 y Windows Server 2008 R2. Los sistemas operativos Windows XP, Windows 2003 y anteriores no están soportados. Esta nueva versión de Internet Explorer incorpora considerables avances en la interpretación de estándares web respecto a sus precursores, como el soporte para CSS3, SVG, HTML5 (incluyendo las etiquetas <audio>, <video> y <canvas>), el formato de archivo tipográfico web “WOFF”, además de incluir mejoras de rendimiento como la aceleración por hardware para el proceso de renderizado de páginas web y un nuevo motor de JavaScript denominado Chakra. También se han producido compilaciones de Internet Explorer (algunas actualmente descontinuadas) para otros sistemas operativos, incluyendo Internet Explorer Mobile (Windows CE y Windows Mobile), Internet Explorer para Mac (Mac OS 7.01 a 10) e Internet Explorer para UNIX (Solaris y HP-UX).

Google Chrome Google Chrome es un navegador web desarrollado por Google y compilado con base en componentes de código abierto como el motor de renderizado WebKit y su estructura de desarrollo de aplicaciones (framework). Google Chrome es el tercer navegador más utilizado en Internet con una cuota de mercado del 11,57% a finales de marzo de 2011 y posee más de 120 millones de usuarios, destacando por su accesibilidad. Está disponible gratuitamente bajo condiciones de servicio específicas. El nombre del navegador deriva del término usado para el marco de la interfaz gráfica de usuario («chrome»). Por su parte, Chromium es el proyecto de software libre con el que se ha desarrollado Google Chrome y es de participación comunitaria (bajo el ámbito de Google Code) para fundamentar las bases del diseño y desarrollo del navegador Chrome (junto con la extensión Chrome

Programas - Navegadores

Frame), además del sistema operativo Google Chrome OS. La porción realizada por Google está amparada por la licencia de uso BSD, con otras partes sujetas a una variedad de licencias de código abierto permisivas que incluyen MIT License, Ms-PL y la triple licencia MPL/GPL/LGPL. En esencia, los aportes hechos por el proyecto libre Chromium fundamentan el código fuente del navegador base sobre el que está construido Chrome. El 2 de septiembre de 2008 salió a la luz la primera versión al mercado, siendo ésta una versión beta. Finalmente, el 11 de diciembre de 2008 se lanzó una versión estable al público en general. Actualmente el navegador está disponible para la plataforma Microsoft Windows en más de 50 idiomas, y desde el 25 de mayo de 2010 para los sistemas Mac OS X y Linux

Safari Safari es un navegador web de código cerrado desarrollado por Apple Inc. Está disponible para Mac OS X, iOS (el sistema usado por el iPhone, el iPod Touch y el iPad) y Microsoft Windows. Safari incluye navegación por pestañas, corrector ortográfico, búsqueda progresiva, marcadores, bloqueador de ventanas emergentes, atajos del teclado, soporte para motores de búsqueda, un gestor de descargas, administrador de descargas, CoverFlow para vista del historial y los Top Sites. Proporciona un entorno para los desarrolladores web, como el “User Agent” en el cual se selecciona el motor de rederizado para abrir las páginas web. Inspector Web, Consola de errores además de herramientas para JavaScript. Está escrito sobre el framework WebKit, que incluye a WebCore, el motor de renderizado, y JavaScriptCore, el intérprete de JavaScript. Por su parte, WebKit (el motor de renderizado del navegador) está basado en el motor KHTML, creado por el proyecto KDE para su navegador Konqueror. Como resultado de esto, el motor interno de Safari es software libre y es liberado bajo los términos de la licencia LGPL. Las mejoras al código de KHTML por parte de Apple son incorporadas al código de KDE rápidamente.

7. Conclusiones

Conclusiones

7. Conclusiones El proyecto fue terminado unas semanas antes de la fecha, lo que nos permitió llegar a cumplir perfectamente las especificaciones y cumplir con los objetivos y expectativas que nos habíamos planteado. El portal web ha sido publicado en la dirección infopymecantabria.com de forma 100% funcional.

Utilidad de mis estudios en Cesine Para llevar a cabo la realización de este proyecto, en mi caso, me han sido muy útiles ciertas asignaturas de mis estudios en la universidad, como son: - Identidad corporativa e imagen de la empresa: gracias a esta asignatura conocía con mayor profundidad los procesos y normas de creación de logotipos, asi como el desarrollo de un manual corporativo, ambas cosas son materia imprescindible para cumplir con los objetivos del proyecto. - Ingeniería web y multimedia: en 3º de carrera aprendimos a crear páginas web mediante código HTML en el programa Notepad ++. Gracias a la calidad del aprendizaje que tuve en esa asignatura he sido capaz de modificar el código de la página web de INFOPyme Cantabria con muchísimo éxito. - Diseño editorial y maquetación: aprender a manejar el programa Adobe InDesign, me ha permitido poder maquetar toda la documentación del proyecto de una forma ordenada y clara. Además, al tener un compañero de proyecto de otra carrera (Miguel Mantecón, de ITE) he podido aprender muchas cosas sobre la realización de páginas web en un servidor local y posteriormente colgarlas en la red, pudiendo editarlas cómodamente mediante una aplicación. Otros conocimientos que he adquirido han sido el manejo de Adobe Illustrator, que he ido perfeccionando a lo largo de mis prácticas y sobretodo, el manejo de Joomla!, programa del cual no conocía su existencia hasta este año.

Conclusiones

Valoración personal Creo que a lo largo de los meses que he estado realizando las prácticas y desarrollando el proyecto en Cappuccino Estudio de Comunicación, he llegado a aprender mucho sobre el mundo del diseño gráfico, He adquirido muchísimos conocimientos sobre creación de publicaciones, maquetación, trazado de imágenes, creación de logotipos, realización de manuales corporativos y sobre todo me ha servido para conocer el mundo laboral y cómo se trabaja en las empresas, así como la resolución y finalización de los trabajos en las fechas establecidas y el trato con los clientes. También he podido poner en práctica la realización de un proyecto desde su fase inicial hasta su terminación, lo que me ha hecho ver lo importante que es tener una correcta planificación. En resumen, puedo decir que estoy muy satisfecha con el proyecto, y con haber realizado las prácticas en Cappuccino Estudio de Comunicación, ya que el trato recibido por parte de los empleados y compañeros ha sido excelente y para mí ha sido una gran experiencia que me servirá para trabajar en el futuro en cualquier empresa.

101

8. Bibliografía

Bibliografía

8. Bibliografía Durante la realización del proyecto han ido surgiendo dudas y también, era necesaria una investigación sobre la información a incluir en la página de INFOPyme Cantabria. Por lo tanto, ha sido necesario visitar páginas y extraer información de ellas para poder llevar a cabo el proyecto y cumplir las expectativas fijadas. La bibliografía de la que me he servido a la hora de realizar el proyecto es la siguiente: CREACIÓN DE LA PÁGINA WEB: - http://extensions.joomla.org/ - http://help.adobe.com/es_ES/Illustrator/13.0/ - http://help.adobe.com/es_ES/Photoshop/10.0/ DOCUMENTACIÓN DE LA PÁGINA WEB: - www.infoautonomos.com - www.redautonomos.com - http://www.camaracantabria.com/

DOCUMENTACIÓN DEL PROYECTO: - http://www.fotonostra.com/grafico/ - http://www.hooping.net/faq-historia-diseno-web.aspx - http://es.wikipedia.org - http://help.adobe.com/es_ES/InDesign/5.0/

105

9. Agradecimientos

Agradecimientos

9. Agradecimientos En la realización de este proyecto me han ayudado muchas personas, por lo que creo que debo mencionarlas para demostrar mi agradecimiento a su apoyo y ayuda. Tengo que agradecer a los miembros de Cappucino Estudio de Comunicación la oportunidad que me han ofrecido para realizar las prácticas allí y todos los conocimientos que me han aportado. De ellos he aprendido mucho y estoy segura de que me servirá en el futuro. Ellos son:

Miguel Mantecón Compañero de proyecto y estudiante de informática en Cesine

José Miguel Méndez Carlos Fernández Rafa Alonso Jorge Prida Miembros de Cappuccino Estudio de Comunicación y compañeros en estos meses

109