Documentación proyecto Pyme Patricio Calderón A. / Taller de Publicación de Proyectos / Profesor Andrés Araya R. / Sección 002D
Indice 1. DESCRIPCIÓN GENERAL
1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9
Introducción. Estudio de la competencia. Contenidos y estructura del Sitio Web. Nombre del dominio. Proveedor de Servicios de Internet. Plan de alojamiento. Cuentas de correo electrónico. Cuentas de FTP. Perfiles sociales en Internet.
2. DISEÑO WEB
2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
Aspectos generales. Recursos para webmasters. Palabras clave. URLs. Imágenes. Favicon. Páginas de error. Estadísticas de visitas.
3. MARKETING
3.1 3.2 3.3 3.4 3.5
Objetivos generales. Search Engine Optimization (SEO). Social Media. Search Engine Marketing (SEM). Otras acciones de Marketing Online.
03 04 04 05 07 07 07 08 08 08
09 10 10 10 10 11 11 12 12
13
14 14 14 15 15
4. MONETIZACIÓN
16
5. RECURSOS
19
6. CONCLUSIONES
25
7. GLOSARIO
26
4.1 4.2 4.3 4.4 4.5 4.6 4.7
Fuentes de ingresos. Formas de cobro. Venta online de productos y/o servicios. Ingresos por publicidad. Sistemas de afiliados. Venta de enlaces. Otras fuentes de ingresos.
5.1 Herramientas de software. 5.2 Sitios Web, Blogs, Foros, etc. en Internet. 5.3 Bibliografía.
17 17 17 17 18 18 18
20 21 24
1. Descripci贸n general
1.1 Introducción Dentro de todo proyecto, en especial en los de tipo webdesign, además de definir ciertos tópicos y procedimientos del mismo, es necesario mantenerlos bajo procesos y condiciones controladas, por lo cual esto puntos son registrados y detallados desde que se comienza el análisis teórico definiendo las fuentes, es decir, como se realizaron los objetivos específicos para lograr el resultado esperado, hasta la misma maquetación y montaje.
1.2 Estudio de la competencia Sitio web “La casa blanca”: Benchmarking: - Es un sitio minimalista y limpio. - Posee menú de vistas previas y destacadas. - Tiene un formulario especial para pedidos, detallando la cantidad, precio, disponibilidad, tipo de letra, formato y contenido. - Detalla el rango de cada grupo de unidad (12u-24u-36u). - Muestra una imagen destacadas en la sección de parte matrimoniales. - Tiene la opción de recomendar a un amigo(a).
Descripción general
4
1.3 Contenidos y estructura del sitio web
Sitio web Love&Love
Home
Quienes somos
Partes matrimoniales
Contacto
Page image publicitario
Misión
Catálogo (Método de filtro)
Formulario
¿Por qué nace esta iniciativa?
Visión
Partes más destacados
Espacio de trabajo
Detalle del producto
Partes botánicos
Formulario de pedido
Formulario de contacto
Footer Newsletter - Nuestra redes - Dirección - Copyright - Botón volver arriba
Descripción general
5
1.3 Contenidos y estructura del sitio web
Redes sociales
Decide compartir
Sitio web Love&Love Elige navegar por el sitio
Si es primera vez que lo visita
Empieza desde el home en adelante
Home
Quienes somos
Si es usuario frecuente
Partes matrimoniales
Contacto
Puede usar el buscador Page image publicitario
Catálogo (Método de filtro)
¿Por qué nace esta iniciativa? Tiene esto accesos directos
Partes más destacados Partes botánicos
Hace click al producto
Detalle del producto Una vez visto decide hacer el pedido
Quiere consultar
Formulario de contacto
Formulario
Descripción general
6
1.4 Nombre del dominio Si bien la pyme se lama Love&Love por un tema de caracteres no admitidos por los servicios de hosting donde también se registro el dominio no acepta el carácter & por el nombre quedará como loveandlove.
1.6 Plan de alojamiento
1.5 Proveedor de Servicios de Internet El proveedor Internet será Entel por su larga reputación y procedencia en calidad de servicios de Internet disponibles en la actualidad, que incluyen acceso, buzón de correo, espacio de servidor, tránsito, virtual y gratuito.
Dentro de la cotización de un plan de Hosting y registro de dominio para el sitio de la Pyme se escogió “ninjahosting.cl“ ya que es mucho más directo y claro en el ofrecimiento de sus planes y contratación. Existen los planes Básico y de Alto Rendimiento que ofrece el sitio. Llegando a un acuerdo se optó elegir dentro de los planes de Alto Rendimiento escoger el Plan Shogun ya que al ser una Pyme que esta en proceso de salir recién al mercado, convendría de principio tener contratado este plan, además de que ofrecen y buen rendimiento y de que la transferencia es ilimitada, además del respaldo diario que no ofrecen los planes básicos.
Descripción general
7
1.7 Cuentas de correo electrónico
1.9 Perfiles sociales en Internet
Como es una pyme y solo una persona maneja el proyecto tendrá solo una cuenta donde llegarán los pedidos y la consultas hechas por los clientes.
El sitio web contará con tres perfiles o redes sociales abiertos a los clientes. Primero esta “Facebook” ya que es la “SocialNetwork” mas recurrente en Chile, los usuarios pueden ver las ofertas y la publicidad que los incentive a ingresar al sitio y así generar publicidad entre usuarios sobre la pyme.
claudia_ds@loveandlove.cl Internamente como el sitio tendrá información que va a ir cambiando se otorgará una segunda cuenta de mail para el administrador. adminitrador@loveandlove.cl
1.8 Cuentas de FTP Ya que solo el administrador accederá a los archivos del sitio para las configuraciones pertinentes a futuro, se ingresará con la cuenta: loveandlove.cl que será la misma del dominio a través del software ope-source Filezilla.
Luego esta Pinterest, red social que muestra tableros, en este caso galerías y se puede conectar con más usuario, será implementado a esta pyme para relacionar el uso de los partes matrimoniales a ocasiones especiales, es decir, ambientalizarlos en el mundo real de como se va a ver, en términos sencillos, todo los relacionado con el ambiente matrimonial. Y por ultimo twitter, el cual se podrá compartir el tiempo real noticias exclusivas sobre los diseños, usuarios que compraron con nosotros y donde estuvieron, en dicho sentido, llevar twitter a los matrimonios con su frase “nosotros compramos el loveandlove“.
Descripción general
8
2. Dise単o Web
2.1 Aspectos generales
2.3 Palabras clave
La tecnologías aplicadas para el sitio en aspectos de código, se utilizaron lenguajes HTML5 para estructura, CSS y CSS3 para diagramción, Jquery y Javascript para interacción, además de PHP para las páginas dinámicas.
Partes - Matrimonio - Botánicos Diseños - Invitaciones - parejas catalogo - destacados - ecológicos Bajo impacto ambiental.
En cuanto a las aplicaciones web, se utilizo el C-panel para configurar correos, se utilizo el sistema MySql para crear base de datos y Phpmyadmin para crear tablas e información y conectarlo a través del software Dreamweaver.
2.2 Recursos para webmasters El sitio al no tener bastante complejidad, el único recurso utilizado es google anatylics el cual hace seguimiento de las visitas, es decir, los usuarios y cuanto tiempo están en la web.
2.3 URLs https://www.loveandlove.cl/home https://www.loveandlove.cl/nosotros https://www.loveandlove.cl/catalogo https://www.loveandlove.cl/contacto https://www.loveandlove.cl/detalle Diseño Web
10
2.5 Imágenes
2.6 Favicon
Estas serán las imágenes implementadas en el sitio tanto en la bienvenida del home y la sección botánica, pero principalmente en el catalogo de partes matrimoniales. El sitio al estar diseñado para ser visto desde pantallas 13 a 21 pulgadas las imágenes que cubren toda la pantalla están trabajadas a resolución optima.
1920x800px Home
Se usará este diseño para el Favicon del sitio como referencia de la marca e identificador de las pestañas en los navegadores
320x500px Home Mobile
768x412px Sección botánica Tablet
340x340px Catalogo
1920x412px Sección botánica Diseño Web
11
2.7 Páginas de error
2.8 Estadísticas de visitas
La página de error solo se utilizara para la sección “catalogo“ en caso de que la base de datos arroje algún tipo de error o que se haya borrado alguna tabla de la B.D.
Se utilizará Google Analylics y Alexa para determinar el nivel de audiencia, haciendo una visión general de usuarios en el sitio, cuanto duran estando ahí, etc. Diseño Web
12
3. Marketing
3.1 Objetivos generales
3.3 Social Media
El objetivo general de “Love&Love” es vender partes matrimoniales de carácter personalizados y con una diversa gama de materiales y técnicas, además de objetos especiales.
3.2 Search Engine Optimization
Marketing
14
3.4 Search Engine Marketing
3.5 Otras acciones de Marketing Online
Se implementará una estrategia del “email marketing“ o bien conocido Mailings, es decir, los usuarios al subcribirse por medio del Newsletter puesto en el footer del sitio, les irá llegando publicidad y promociones respeto a los partes matrimoniales.
Marketing
15
4. Monetizaci贸n
4.1 Fuentes de ingresos Como es una pyme a punto de ingresar al mercado, se contará con un capital inicial dentro de la misma.
4.2 Formas de cobro Por la compra de las unidades se dispondrá el método de pago en el lugar de retiro o bien deposito bancario con confirmación de boleta por e-mail.
4.3 Venta online de productos y/o servicios La venta no se realizará directamente en el sitio, ya que es un pedido detallado donde el usuario describe que contenido tendrá los parte matrimoniales, por cual solo dispondrá de un formulario de pedidos.
4.4 Ingresos por publicidad Ya que la publicidad es muy invasivo y de uso distractor en los sitios web, sobre todo en el de la pyme estructura, no contará con este tipo de ingresos, salvo los que estarán en redes sociales y mailings. Monetización
17
4.5 Sistemas de afiliados El sitio al ser de partes matrimoniales en el cual el usuario puede hacer el pedido de las mismas, es decir, algo más directo, no se necesita de inscripción de usuarios, ya que, no son muchas las acciones que realiza en el sitio.
4.6 Venta de enlaces En este caso no es aplicable, ya que, no recurre a la venta de publicidad, por un tema de no entorpecer la concentración de los usuarios y al ser una pyme no lo necesita, debido a que la publicidad de maneja por redes sociales y los costos serán vistos por otros recursos.
4.6 Otras fuentes de ingresos Para fortalecer y permanecer dentro del ambiente de este rubro, a mediano plazo se pensará postular a algún tipo de fondo concursable para asi poder costear materiales e insumos necesarios
Monetización
18
5. Recursos
5.1 Herramientas de software Illustrator: Se utilizo para la maquetación de los wireframes en alta definición del sitio como paso siguiente después del boceto. Photoshop: Utilizado para el retoque digital y para reenmarcar las fotografías para le sitio. Montaje de los mockups por carpetas donde se puede ya apreciar el diseño. Dreamweaver: Usado para trabajar los archivos formato PHP y para hacer la conexion con la Base de datos en PHPMyAdmin. Brackets: Se uso para estructurar el codigo HTML5, CSS3 y trabajar con archivos Javascript y Jquery posteriormente. Xampp: Utilizado como servidor local para realizar prueba de los sitios dinamicos hechos en formato PHP. Filezilla: Como sottware rapido de hacer la conexion al servidor para subir archivo de forma optima. Microsort Outlook 2013: Para configuración de cuentas de email.
Recursos
20
5.2 Sitios web, blogs, foros, etc, en Internet
Recursos
21
5.2 Sitios web, blogs, foros, etc, en Internet
Recursos
22
5.2 Sitios web, blogs, foros, etc, en Internet
Recursos
23
5.3 BibliografĂa Librosweb: http://librosweb.es/libro/css_avanzado/capitulo_3/pseudo_elementos.html Tympanus: http://tympanus.net/codrops/ CSS Pseudo-clases: https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes Tympanus: http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/ Patrones sutiles: http://subtlepatterns.com/ Jquery Rain: http://www.jqueryrain.com/ Designcrazed: http://designscrazed.org/free-photoshop-psd-website-templates/ Iconmoon: https://icomoon.io/ Google Analytics: https://www.google.com/analytics/web/?hl=es Alexa: http://www.alexa.com/ Webrecursos: http://www.webrecursos.com/ Helpadobe: https://helpx.adobe.com/es/dreamweaver/using/database-connections-php-developers.html Filezila: https://filezilla-project.org/ Recursos
24
6. Conclusión Una de las ventajas de la investigación es que podemos detallar y a la vez ir viendo que elementos faltan en nuestra propuesta. Podemos decir que al terminar un proyecto así nada mas, damos por hecho que todo está bien, sin embargo al tener una pauta guiada, podemos determinar que hay temas que no se abarcaron en su totalidad y son necesarias, por ejemplo determinar los metadatos para un sitio o bien definir que plan de hosting es conveniente. En términos sencillos, respaldar todo el proceso teórico, certifica que el proyecto cumple satisfactoriamente con los requerimientos que necesita.
25
7. Glosario Adobe Dreamweaver: Es una aplicación en programa de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones Web basados en estándares. Adobe Photoshop: Es un editor de gráficos rasterizados desarrollado por Adobe Systems Incorporated. Usado principalmente para el retoque de fotografías y gráficos, su nombre en español significa literalmente “taller de fotos”. Adobe Illustrator: Es un editor de gráficos vectoriales 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 (como rama del arte digital aplicado a la ilustración técnica o el diseño gráfico, entre otros). Brackets: Es un software libre de código abierto editor escrito en HTML, CSS y JavaScript con un enfoque principal en Desarrollo Web. Fue creado por Adobe Systems, con licencia bajo la licencia MIT, y en la actualidad se mantiene en GitHub. Soportes está disponible para multiplataforma descarga en Mac, de Windows y Linux. MySql: MySQL es un sistema de gestión de base de datos relacional (RDBMS) de código abierto, basado en lenguaje de consulta estructurado (SQL). PhpMyAdmin: Es una herramienta escrita en PHP con la intención de manejar la administración de MySQL a través de páginas web, utilizando Internet. Fillezilla: 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). Mockups: Un mockup, mock-up, o maqueta es un modelo a escala o tamaño real de un diseño o un dispositivo, utilizado para la demostración, evaluación del diseño, promoción, y para otros fines. Un mockup es un prototipo si proporciona al menos una parte de la funcionalidad de un sistema y permite pruebas del diseño.
26
7. Glosario Wireframes: Un wireframe para un sitio web, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web. Jquery: jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de JavaScript más utilizada. Javascript: JavaScript (abreviado comúnmente “JS”) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. HTML 5: HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar elementos 3D en los navegadores más importantes (Firefox, Chrome, Opera, Safari e Internet Explorer). CSS: Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. CSS3: A diferencia de CSS2, que fue una única especificación que definía varias funcionalidades, CSS3 está dividida en varios documentos separados, llamados “módulos”. Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad.
27
7. Glosario PHP: Es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en el documento HTML en lugar de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera la página Web resultante. C-panel: Es una herramienta de administración informática basada en tecnologías web para administrar sitios de manera fácil, con una interfaz limpia. Xampp: Es un servidor independiente de plataforma, software libre, que consiste principalmente en el sistema de gestión de bases 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. Microsoft Outlook: Es una aplicación de gestión de correo, así como agenda personal, que nos permite la comunicación con miles de personas en todo el mundo a través de mensajes electrónicos. Google Analytics: Es una herramienta de analítica web de la empresa Google. Ofrece información agrupada del tráfico que llega a los sitios web según la audiencia, la adquisición, el comportamiento y las conversiones que se llevan a cabo en el sitio web.
28