UNIDAD ACADÉMICA DE INGENIERÍA DE SISTEMAS, ELÉCTRICA...
152
UNIVERSIDAD CATÓLICA DE CUENCA UNIDAD ACADÉMICA DE INGENIERÍA DE SISTEMAS, ELÉCTRICA Y ELECTRÓNICA CARRERA DE INGENIERÍA DE SISTEMAS Desarrollo de página web comercial para la empresa COMPUFLASH con el estándar HTML5, CSS y JavaScript TRABAJO DE INVESTIGACIÓN PREVIA A LA OBTENCIÓN DEL TÍTULO DE INGENIERO DE SISTEMAS CHRISTIAN MAURICIO SILVA ORELLANA [email protected] Director: Ing. Milton Campoverde 2014
Transcript of UNIDAD ACADÉMICA DE INGENIERÍA DE SISTEMAS, ELÉCTRICA...
UNIVERSIDAD CATÓLICA DE CUENCA
UNIDAD ACADÉMICA DE INGENIERÍA DE SISTEMAS, ELÉCTRICA Y ELECTRÓNICA
CARRERA DE INGENIERÍA DE SISTEMAS
Desarrollo de página web comercial para la empresa COMPUFLASH con el estándar HTML5, CSS y JavaScript
TRABAJO DE INVESTIGACIÓN PREVIA A LA OBTENCIÓN DEL TÍTULO DE INGENIERO DE SISTEMAS
CHRISTIAN MAURICIO SILVA ORELLANA
Director: Ing. Milton Campoverde
2014
ANE
XO A
2
DECLARACION
Yo, Christian Mauricio Silva Orellana, declaro bajo juramento que el trabajo aquí descrito es de
mi autoría; que no ha sido previamente presentada para ningún grado o calificación profesional;
y, que he consultado las referencias bibliográficas que se incluyen en este documento.
La Universidad Católica de Cuenca puede hacer uso de los derechos correspondientes a este
trabajo, según lo establecido por la Ley de Propiedad Intelectual, por su Reglamento y la
normatividad institucional vigente.
Christian Mauricio Silva Orellana
3
CERTIFICACIÓN
Certifico que el presente trabajo fue desarrollado por Christian Mauricio Silva Orellana,
bajo mi supervisión.
Ing. Milton Campoverde
DIRECTOR
4
AGRADECIMIENTOS
A mi mejor amigo Ingeniero John García, quien con su apoyo me ha brindado la oportunidad de
reunir las fuerzas para resurgir; convirtiéndose en más que un amigo un verdadero hermano para
mí.
A todo el personal docente y directivos de la UCACUE, a quienes fueron mis maestros durante
estos años; un sincero agradecimiento y mi reconocimiento por su noble labor, un
agradecimiento especial al Ingeniero Diego Cordero Guzmán, un ejemplo como persona y como
decano; quien supo guiarnos e inculcarnos el amor y el respeto por nuestra carrera y nuestra
universidad.
A mi director de monografía Ingeniero Milton Campoverde Molina por su apoyo sincero y
desinteresado que me ha llevado a culminar con éxito este trabajo.
A la empresa Compuflash en las personas del Ingeniero Walter Criollo y Andrés León por
permitirme realizar esta investigación y concluir con la página web en su noble institución.
A mi madre, mi hijo, mis amigos, por su apoyo y comprensión en los momentos difíciles.
5
DEDICATORIA
A mi hermano el Ing. John García que jamás dejo que me derrumbara a pesar de las
circunstancias, siempre estuvo apoyándome sin ningún tipo de interés.
A mi amiga leal Yaneth Cristina Vázquez, quien ha sido la impulsadora para recuperar no solo
mi carrera, sino mi vida. Para ella mi real agradecimiento y cariño absoluto; ya que ella es parte
de mi familia.
A mi ángel guardián, mi querida madre Marianita del niño Jesús Orellana Quezada quien con su
amor incondicional ha logrado mantenerme en esta vida a salvo.
A mi hijo Isaac Mateo Silva, quien es la razón para lograr todos los triunfos posibles; esperando
que algún día logre superarme en demasía para su éxito personal.
6
ÍNDICE DE CONTENIDOS
DECLARACION........................................................................................................................................................... I
CERTIFICACIÓN ........................................................................................................................................................ II
AGRADECIMIENTOS ............................................................................................................................................... III
DEDICATORIA ......................................................................................................................................................... IV
ÍNDICE DE CONTENIDOS ...................................................................................................................................... V
LISTA DE FIGURAS ................................................................................................................................................ VI
LISTA DE TABLAS ................................................................................................................................................. VII
LISTADOS .............................................................................................................................................................. VIII
LISTA DE ANEXOS ................................................................................................................................................. IX
RESUMEN ................................................................................................................................................................... X
ABSTRACT ............................................................................................................................................................... XI
1 CAPITULO 1 PROBLEMA DE INVESTIGACIÓN........................................................ 22
1. 1 DEFINICIÓN DEL PROBLEMA ...................................................................................... 22
1. 2 OBJETIVOS ....................................................................................................................... 22
1.2.1 OBJETIVO GENERAL: ..................................................................................................... 22
1.2.2 OBJETIVOS ESPECÍFICOS: ............................................................................................ 22
1. 3 JUSTIFICACIÓN……………………………………………………………………….22
2 CAPITULO 2 MARCO TEORICO .................................................................................. 24
2. 1 CONCEPTOS INTRODUCTORIOS DE HTML5 ........................................................... 24
2.1.1 MEJOR ESTRUCTURA ................................................................................................... 25
2.1.2 MEJORAS EN LOS FORMULARIOS ............................................................................. 27
2.1.3 NOVEDADES EN HTML5 .............................................................................................. 29
2.2 CSS3 .................................................................................................................................. 29
2.2.1 INTRODUCCIÓN A CSS3 ............................................................................................... 29
2.2.2 NUEVAS CARACTERÍSTICAS ...................................................................................... 30
7
2.2.3 DEGRADADOS CSS3 ...................................................................................................... 31
2.2.4 ANIMACIONES CSS ....................................................................................................... 33
2.2.5 MODELO DE CAJA ......................................................................................................... 34
2. 3 JAVASCRIPT .................................................................................................................... 34
2.3.1 LA RELEVANCIA DE JAVASCRIPT............................................................................. 34
2.3.2 INCORPORANDO JAVASCRIPT ................................................................................... 34
2.3.3 NUEVOS SELECTORES ................................................................................................. 36
2.3.4 MANEJADORES DE EVENTOS ..................................................................................... 36
2.3.5 ELEMENTOS .................................................................................................................... 37
2.3.6 LIBRERÍAS EXTERNAS ................................................................................................. 38
3 CAPITULO 3 ANALISIS Y DISEÑO ............................................................................. 38
3.1 ANÁLISIS ......................................................................................................................... 38
3.1.1 DESCOMPOSICIÓN DEL PROBLEMA ......................................................................... 38
3.1.2 RECOLECCIÓN DE LA INFORMACIÓN ...................................................................... 39
3.1.3 SELECCIÓN DE LA INFORMACIÓN ............................................................................ 53
3.1.4 ANÁLISIS DE LA INFORMACIÓN ............................................................................... 57
3. 2 DISEÑO ............................................................................................................................. 57
3.2.1 PLANIFICACIÓN ............................................................................................................. 57
3.2.2 DIAGRAMACIÓN UML .................................................................................................. 58
3.2.3 ESTRUCTURA GENERAL PARA EL PROYECTO ...................................................... 63
4 CAPITULO 4 DESARROLLO Y PRUEBAS ................................................................. 65
4.1 PÁGINA WEB DE COMPUFLASH ................................................................................ 65
4.1.1 DESARROLLO ................................................................................................................. 65
4.1.2 PERFIL DE COMPUFLASH ............................................................................................ 65
4.1.3 IMPLEMENTACIÓN........................................................................................................ 66
4.1.4 DATOS Y PRUEBAS ..................................................................................................... 124
4.1.5 FINALIZACIÓN……………………………………………………………………….127
8
CONCLUSIONES ..................................................................................................................................................... 130
RECOMENDACIONES ........................................................................................................................................... 131
REFERENCIAS BIBLIOGRAFÍCAS ...................................................................................................................... 132
ANEXOS ................................................................................................................................................................... 133
LISTA DE FIGURAS
9
Capítulo 2
Figura 1 Componentes básicos del diseño web con HTML5. .......................................... 24
Figura 2 Diferencia entre HTML y HTML5..................................................................... 27
Capítulo 3
Análisis
Figura 3.1.1 Logo de Multicomercio. .............................................................................. 45
Figura 3.1.2 Logo de Electricidad y Electrónica. ............................................................ 45
Figura 3.1.3 Imagen de Vicente Martinez (sujeto del medio). ........................................ 45
Figura 3.1.4 Logo de Digital Mate................................................................................... 46
Figura 3.1.5 Logo de TecnoMega. ................................................................................... 46
Figura 3.1.6 Logo de CompuRam.................................................................................... 46
Figura 3.1.7 Estructura básica de los integrantes de Compuflash ................................... 55
Figura 3.1.8 Recursos físicos del área de hardware. ........................................................ 56
Figura 3.1.9 Recursos físicos del área de hardware. ........................................................ 56
Figura 3.1.10 Recursos físicos del área de hardware. ...................................................... 57
Diseño
Figura 3.2.1 Campos básicos. .......................................................................................... 58
Figura 3.2.2 Campos básicos extendidos. ........................................................................ 59
Figura 3.2.3 Descomposición de la teoría del trabajo de investigación........................... 59
Figura 3.2.4 Estructura básica de la página web. ............................................................. 60
Figura 3.2.5 Aplicaciones utilizadas en la práctica. ......................................................... 61
Figura 3.2.6 Páginas .html que conforman el proyecto en su mayor parte. ..................... 61
Figura 3.2.7 Carpetas que contienen los elementos de las páginas html. ........................ 62
Figura 3.2. 8 Medios donde se guardan backups del proyecto. ....................................... 62
Figura 3.2.9 Comprobación de la página web mediante dispositivos.............................. 63
Figura 3.2.10 Estructura general del trabajo de investigación práctico. .......................... 63
10
Capítulo 4
Figura 4.1.1 Logo anterior de Compuflash. ...................................................................... 66
Figura 4.1.2 Logo actual de Compuflash. ........................................................................ 67
Figura 4.1.3 Portada para la página web de Compuflash. ............................................... 67
Figura 4.1.4 Inicialización de XAMPP. ........................................................................... 67
Figura 4.1.5 Carpeta destinataria Compuflash. ................................................................. 68
Figura 4.1.6 Inicio del archivo Index de Sublime Text. .................................................. 68
Figura 4.1.7 Cabecera de la página web Compuflash. ..................................................... 71
Figura 4.1.8 Creando el estilo de nuestro menú principal. .............................................. 74
Figura 4.1.9 Links para el menú principal. ...................................................................... 74
Figura 4.1.10 Menú principal........................................................................................... 74
Figura 4.1.11 Menu Izquierdo (lateral). ........................................................................... 76
Figura 4.1.12 Interface de bienvenida y la opción de Quienes Somos. ........................... 79
Figura 4.1.13 Opción de Misión y Visión del menú izquierdo. ....................................... 80
Figura 4.1.14 Opción Ubicación Geográfica del local. ................................................... 80
Figura 4.1.15 Galería de imágenes dinámica derecha. .................................................... 81
Figura 4.1.16 Propaganda de servicio técnico a domicilio. ............................................ 82
Figura 4.1.17 Secuencia de imágenes con el destello diagonal. ....................................... 82
Figura 4.1.18 Interface para crear el gif animado en Picasion. ........................................ 83
Figura 4.1.19 Ubicación de la sección Servicio Técnico y archivo Word
con la información del Servicio Técnico. ......................................................................... 83
Figura 4.1.20 Sección Promoción y Pagina web con la especificación. .......................... 84
Figura 4.1.21 Sección Marcas con las que trabajamos. ................................................... 87
Figura 4.1.22 Interface de Balabolka con el texto elegido. ............................................. 88
Figura 4.1.23 Interface de Nero SoundTrax con los sonidos utilizados. .......................... 89
Figura 4.1.24 Presentación realizada en PowerPoint. ....................................................... 90
Figura 4.1.25 Videos subidos a la página principal. ......................................................... 90
Figura 4.1. 26 Paginas públicas más conocidas para crear los enlaces. ........................... 91
Figura 4.1.27 Enlaces a las paginas publicas más utilizadas por los usuarios. ................ 93
11
Figura 4.1. 28 Pie de página............................................................................................. 94
Figura 4.1.29 Sección Contáctenos resultante. ................................................................. 95
Figura 4.1.30 Resultado Final de la sección Noticias. ..................................................... 97
Figura 4.1. 31 Galería de Imágenes de la empresa y el personal. .................................. 101
Figura 4.1.32 Bloque 1 del Menú Principal. .................................................................. 102
Figura 4.1.33 Interface de Magix deluxe 17. ................................................................. 102
Figura 4.1. 34 Sección Hardware de la pestaña Servicios que ofrecemos. .................... 103
Figura 4.1.35 Sección Software de la pestaña Servicios que ofrecemos. ...................... 104
Figura 4.1. 36 Sección Software de la pestaña Servicios que ofrecemos. ..................... 105
Figura 4.1. 37 Página web de Catálogo de Productos en existencia. ............................. 106
Figura 4.1.38 Bloque de Servicios que ofrecemos del Menú Principal. ........................ 106
Figura 4.1. 39 Personal de Compuflash. ........................................................................ 110
Figura 4.1. 40 Página web hardware.html. .................................................................... 114
Figura 4.1.41 Menú Principal actual. ............................................................................. 114
Figura 4.1.42 Página web materiales2.html. .................................................................. 117
Figura 4.1.43 Bloque de recursos de la empresa Compuflash. ...................................... 117
Figura 4.1.44 Página web recomedaciones.html. .......................................................... 120
Figura 4.1.45 Página web ruc.html. ............................................................................... 121
Figura 4.1.46 Bloque de Política de Calidad. ................................................................ 121
Figura 4.1.47 Cabecera de la página web con fecha y hora incluida. ............................ 124
Anexos
Anexo 1
Figura 1.1 Comprobación de servidor. .......................................................................... 133
Figura 1.2 Mensajes de precaución antes de la instalación de XAMPP. ........................ 133
Figura 1.3 Comienzo de la instalación de XAMPP. ...................................................... 134
Figura 1.4 Elección del archivo destino y aprobación de Bitnami. ............................... 134
Figura 1.5 Proceso de inicio de copia de archivos. ........................................................ 135
Figura 1.6 Finalización del proceso de Instalación. ....................................................... 135
12
Figura 1.7 Interface del servidor XAMPP. .................................................................... 136
Figura 1.8 Inicialización de Apache y restricción de Firewall. ..................................... 136
Figura 1.9 Iniciar Apache y muestra de las reglas de entrada en Firewalls. .................. 136
Figura 1.10 Comprobación de funcionamiento del servidor. ........................................ 137
Figura 1.11 Configuración en el área de notificación. ................................................... 137
Figura 1.12 Configuración de Apache y PHP. ............................................................... 138
Figura 1.13 Funcionamiento del servidor. ..................................................................... 138
Figura 1.14 Instalación de servicios............................................................................... 139
Anexo 2
Figura 2.1 Interface de Sublime Text 2 ......................................................................... 139
Figura 2.2 Barra lateral de sublime text. ........................................................................ 140
Figura 2.3 Goto Anything búsqueda e impresión. ......................................................... 141
Figura 2.4 Autocompletado de Sublime Text. ............................................................... 142
Figura 2.5 Package Control en acción. .......................................................................... 143
Figura 2.6 Opciones de SideBarEnhancements. ............................................................ 143
Figura 2.7 Cambio de atajos en ST2. ............................................................................. 144
Figura 2.8 Configuración de usuario. ............................................................................ 144
Figura 2.9 Configuración de usuario .............................................................................. 145
Figura 2.10 Test de soporte HTML5 en los navegadores. ............................................. 146
Figura 2.11 Comprobación de código HTML5 en los navegadores. .............................. 146
Anexo 3
Figura 3.1 Foto tomada a la pantalla de un Pc. .............................................................. 147
Figura 3.2 Página web mostrada en una laptop. ............................................................ 147
Figura 3.3 Página web visualizada en un celular de forma vertical. .............................. 148
Figura 3.4 Página web visualizada en un celular de forma horizontal. ......................... 148
Figura 3.5 Página web visualizada en una tablet de forma horizontal........................... 149
Figura 3.6 Página web visualizada en una tablet de forma vertical. .............................. 149
Figura 3.7 Página web visualizada en el navegador Mozila Firefox. ............................ 150
Figura 3.8 Página web visualizada en el navegador Google Chrome............................ 150
13
Figura 3.9 Página web visualizada en el navegador Internet Explorer. ......................... 151
LISTA DE TABLAS
14
Tablas I Productos en existencia 1 ................................................................................... 46
Tablas II Productos en existencia 2 ................................................................................. 49
Tablas III Productos en existencia 3 ................................................................................ 51
LISTADOS
15
Capítulo 2
HTML
Listado 2.1.1 Código para la etiqueta <article>. .............................................................. 26
Listado 2.1.2 Código para la etiqueta <aside>. ................................................................ 26
Listado 2.1.3 Código para la etiqueta <header>. ............................................................. 26
Listado 2.1.4 Código para la etiqueta <nav>. .................................................................. 26
Listado 2.1.5 Código para la etiqueta <footer>. .............................................................. 27
Listado 2.1.6 Usando el elemento <link>. ........................................................................ 28
Listado 2.1.7 Código para <hgroup>. .............................................................................. 28
Listado 2.1.8 Código para <figure> y <figcaption>. ....................................................... 28
Listado 2.1.9 Inclusión de información legal con el elemento <small>. .......................... 28
Listado 2.1.10 Usando la etiqueta <title>. ........................................................................ 28
Listado 2.1.11 Agregando más elementos <meta>. .......................................................... 29
CSS3
Listado 2.2.2 Formas general y detallada de poner bordes redondeados. ........................ 30
Listado 2.2.3 Ejemplos de uso de colores RGBA. ........................................................... 30
Listado 2.2.4 Código para poner imagen en el borde. ..................................................... 31
Listado 2.2.5 Propiedad de sombra. ................................................................................. 31
Listado 2.2.6 Código para diferentes navegadores. ......................................................... 31
Listado 2.2.7 Código para aceptar tipos de letras. ........................................................... 31
Listado 2.2.8 Degradado en línea. ................................................................................... 32
Listado 2.2.9 Degradado en línea. ................................................................................... 32
Listado 2.2.10 Código para formas de declarar degradados lineales. .............................. 32
Listado 2.2.11 Formas de declarar los degradados radiales. ............................................ 32
Listado 2.2.12 Degradados radiales con repetición. ........................................................ 33
Listado 2.2.13 Formas para transformar. ......................................................................... 33
Listado 2.2.14 Formas para escalar. .................................................................................. 33
Listado 2.2. 15 Trasladar. ................................................................................................ 33
Listado 2.2.16 Transiciones. ............................................................................................ 34
16
JAVASCRIPT
Listado 3.1.1 Primer código en script. ............................................................................. 35
Listado 3.1.2 Dias de la semana en el elemento input. .................................................... 37
Listado 3.1.3 Busqueda con JavaScript. ........................................................................... 38
Capítulo 4
Listado 4.1.1 Código base HTML para la página web Compuflash. ................................ 69
Listado 4.1.2 Código para insertar normalize en nuestro proyecto. ................................. 69
Listado 4.1.3 Estilos para nuestra cabecera. .................................................................... 69
Listado 4.1.4 Código link para Prefixfree. ....................................................................... 70
Listado 4.1.5 Ingreso de la opción de búsqueda mediante código HTML. ..................... 70
Listado 4.1.6 Código JavaScript para crear un efecto en la página web. ........................ 71
Listado 4.1.7 Estructura básica del menú principal. ........................................................ 73
Listado 4.1.8 Creando el estilo de nuestro menú principal. ............................................. 74
Listado 4.1.9 Links para el menú principal...................................................................... 74
Listado 4.1.10 Código HTML para crear el menú izquierdo. .......................................... 75
Listado 4.1.11 Estilos CSS para el menú izquierdo. ......................................................... 75
Listado 4.1.12 Estilo para el #menulateral....................................................................... 76
Listado 4.1.13 Código para la sección contenido. ........................................................... 76
Listado 4.1.14 Estilo para la sección contenido. .............................................................. 77
Listado 4.1.15 Código JavaScript para crear un proceso de cambio de texto
e imágenes dentro de la sección contenido. ................................................................... 79
Listado 4.1.16 Creación del código para la sección derecha de la galería
de imágenes dinámicas. .................................................................................................... 80
Listado 4.1.17 Estilo de la galería de imágenes derecha dinámicas. ............................... 81
Listado 4.1.18 Función desplazar para crear dinamismo para el intercambio de
imágenes. .......................................................................................................................... 81
Listado 4.1.19 Creando la sección Servicio técnico y el enlace que conlleva. ................ 83
Listado 4.1.20 Creando la sección de oferta dentro del body. .......................................... 84
17
Listado 4.1.21 Creando el código para la sección marcas. .............................................. 85
Listado 4.1.22 Estilo CSS para la sección marcas. .......................................................... 86
Listado 4.1.23 Código para la creación de los videos de la página web.......................... 88
Listado 4.1.24 Código creado para la sección pie de página. ........................................... 92
Listado 4.1.25 Estilo predefinido para la sección pie de página. ..................................... 92
Listado 4.1.26 Código para compartir en Facebook. ........................................................ 93
Listado 4.1.27 Copyright 2014 Compuflash. ................................................................... 93
Listado 4.1.28 Estilo de Copyright. ................................................................................. 93
Listado 4.1.29 Código para crear la sección Contáctenos. ............................................... 95
Listado 4.1.30 Estilo de la sección Contacte con nosotros. .............................................. 95
Listado 4.1.31 Referencias a los archivos CSS y JS. ........................................................ 96
Listado 4.1.32 Código HTML para la creación de la sección Noticias. ........................... 97
Listado 4.1.33 Listado 4-1-33 Código JavaScript para la sección Noticias. .................. 97
Listado 4.1.34 Enlaces a los archivos CSS y JS de la galería. .......................................... 98
Listado 4.1.35 Código HTML para la galería de imágenes. .......................................... 100
Listado 4.1.36 Código JavaScript para la galería de imágenes....................................... 101
Listado 4.1.37 Código para la sección de Hardware. .................................................... 103
Listado 4.1.38 Sección de Software. .............................................................................. 104
Listado 4.1.39 Sección de Redes y Comunicación ......................................................... 105
Listado 4.1.40 Código para la sección del personal humano. ......................................... 108
Listado 4.1.41 Personificación de la página personal.html. .......................................... 110
Listado 4.1.42 Código para la sección material de hardware. ........................................ 113
Listado 4.1.43 Código para dar estilo a la sección material de hardware. ..................... 113
Listado 4.1.44 Código para la sección recursos lógicos. ............................................... 116
Listado 4.1.45 Código para la sección referencias comerciales. ................................... 119
Listado 4.1.46 Estilo para la sección referencias comerciales. ...................................... 119
Listado 4.1.47 Código de la sección autentificación. .................................................... 120
Listado 4.1.48 Estilo para la sección autentificación. .................................................... 121
Listado 4.1.49 Código PHP ingresado en index para la creación estática
18
de la fecha y el reloj. ....................................................................................................... 123
Listado 4.1.50 Código JavaScript para dinamizar el reloj y concretar la fecha. ............ 124
Listado 4.1.51 Ancho total para una imagen. ................................................................. 125
Listado 4.1.52 Ancho máximo de una imagen. ............................................................. 125
Listado 4.1.53 Ancho total máximo de una imagen. ..................................................... 125
Listado 4.1.54 Tamaño total de video. ........................................................................... 126
Listado 4.1.55 Adaptación de la imagen. ....................................................................... 126
Listado 4.1.56 Condición Responsive para la clase materiales. .................................... 126
19
LISTA DE ANEXOS
Anexo 1 Instalación del servidor XAMPP [8] ............................................................... 133
Anexo 2 Características básicas de Sublime Text 2 [5] ................................................. 139
Anexo 3 Fotos de la comprobación de la página web. .................................................. 147
Anexo 4 Manual de Usuario (El manual de usuario viene grabado y adjuntado
en un disco en forma de video,). ..................................................................................... 151
20
RESUMEN
Este trabajo de investigación se basa en el diseño web con HTML5, CSS3 y JavaScript,
se da los conceptos básicos y necesarios para realizar la práctica; la práctica es la
implementación de una página web de publicidad para la empresa Compuflash. En este trabajo
se detalla todos los aspectos y pasos necesarios para realizar la página web; existen otros ámbitos
que son indispensables conocer o aprender por ejemplo a editar audio, imágenes y video;
también a convertir formatos, crear gifs animados y con JavaScript crear algunas animaciones
para que la página quede dinámica. Todos los aspectos correspondientes a la investigación como
definir el problema, el análisis, el diseño, y las conclusiones y recomendaciones de la página
web.
Palabras clave: HTML5, CSS3, JAVASCRIPT, COMPUFLASH, Página web, model
responsive, model elastic.
21
ABSTRACT
This research is based on web design with HTML5, CSS3 and JavaScript, the basic and
necessary concepts to practice is given, the practice is to implement a website advertising for the
company Compuflash. In this study all aspects and steps to perform detailed website, there are
other areas that are essential to know or learn by example to edit audio, images and video, and
also convert formats, create animated gifs and JavaScript to create some animations for the page
to be dynamic. All costs relating to research and define problem areas, analysis, design, and the
conclusions and recommendations of the website.
Keywords: HTML5, CSS3, JAVASCRIPT, COMPUFLASH, Website, responsive model, elastic
model.
22
1 PROBLEMA DE INVESTIGACIÓN
1. 1 DEFINICIÓN DEL PROBLEMA
La empresa Compuflash realiza soluciones informáticas y ha visto la necesidad de
expandir sus horizontes, razón por la cual se pretende la creación de su propia página web; para
que así los usuarios de diversos lugares conozcan los servicios que ofrece Compuflash y puedan
contactarse y comunicarse con la empresa.
La falta de una página web hace que la empresa comience a perder competitividad en el
mercado al no tener publicidad de la misma en la red; esto ha ocasionado que los socios de la
empresa tengan que trasladarse a los lugares de trabajo de sus clientes a ofrecer sus servicios y
productos.
Además los clientes no tienen un contacto directo con la empresa e información necesaria
sobre los servicios y productos que brinda Compuflash.
También la empresa al no contar con una página web hace que algunos socios tengan que
estar comunicándose constantemente con la empresa a consultar los productos que se venden por
desconocimiento.
Si la empresa en cuestión no se promueve y no se actualiza corre el gran riesgo de
quedarse estancada en vez de crecer. Por eso se ha decidido realizar el diseño e implementación
de una página web en HTML5 que permita tener un contacto directo con los clientes,
proveedores y socios, asimismo promocionar los productos y servicios que ofrecen.
1. 2 OBJETIVOS
1.2.1 OBJETIVO GENERAL:
Elaborar una página web comercial para la empresa Compuflash Soluciones Informáticas
con el estándar HTML5 para aprender a diseñar en la web con esta nueva tecnología.
1.2.2 OBJETIVOS ESPECÍFICOS:
Definir el problema que conlleva a la investigación para dar una solución práctica.
Realizar un estudio sobre los conceptos generales de HTML5, CSS3 y JavaScript.
Analizar y diseñar la página web para la empresa Compuflash.
Desarrollar e Implementar de la página web en Compuflash.
Elaborar un manual de usuario de la página web.
1. 3 JUSTIFICACIÓN
El motivo por el cual se va a realizar esta investigación teórica práctica es para mejorar el
rendimiento de la empresa Compuflash, expandiendo su campo comercial, mejorando el contacto
entre los clientes, renovando su imagen institucional, permitiendo tener un mayor contacto con
los proveedores y promocionan los servicios y productos que ofrecen.
23
Los beneficiarios de esta investigación son la empresa Compuflash, los socios, los
clientes, proveedores, los estudiantes que tengan acceso a este trabajo, la sociedad en general y
mi persona por realizar este proyecto.
Esta investigación práctica es muy importante pues puede ser la base para futuros
proyectos con aplicaciones y novedades que se vayan dando a través del tiempo.
24
2 MARCO TEORICO
2. 1 CONCEPTOS INTRODUCTORIOS DE HTML5 [4]
El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del
lenguaje de programación “básico” de la World Wide Web, el HTML. Esta nueva versión
pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores
web se encuentran, así como rediseñar el código actualizándolo a nuevas necesidades que
demanda la web de hoy en día. Debido a que estos cambios afectaran la forma de desarrollar la
web en un futuro inmediato, desde The Process, plantearemos una serie de artículos donde
desvelaremos los cambios más importantes. Actualmente el HTML5 está en un estado BETA,
aunque ya algunas empresas están desarrollando sus sitios webs en esta versión del lenguaje. A
diferencia de otras versiones de HTML, los cambios en HTML5 comienzan añadiendo semántica
y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. Se tiene
en cuenta el dinamismo de muchos sitios webs (facebook, twenti, etc), donde su aspecto y
funcionalidad son más semejantes a aplicaciones webs que a documentos.
Conformación
HTML5 provee básicamente tres características fundamentales: la estructura, el estilo y la
funcionalidad. Nunca fue declarado oficialmente pero incluso cuando algunas APIs (Interface de
Programación de Aplicaciones) y la especificación de CSS3 por completo no son parte del
mismo núcleo, HTML5 es considerado el producto de la combinación de: HTML, CSS y
JavaScript; estas tecnologías son altamente dependientes y actúan como una sola unidad
organizada bajo la especificación de HTML5.
Figura 1 Componentes básicos del diseño web con HTML5 [2] [1].
1) HTML Siglas de HyperText Markup Language, hace referencia al lenguaje de
marcado para la elaboración de páginas web. Es un estándar que en sus diferentes versiones,
define una estructura básica y un código para la definición de contenido de una página web,
como texto, imágenes, etc… Está a cargo de la estructura general del diseño web.
25
2) CSS Es un lenguaje de estilo que define la presentación de los documentos HTML.
Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura,
anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas. Es posible usar
HTML o incluso abusar del mismo para añadir formato a los sitios web. Sin embargo, CSS
ofrece más opciones y es más preciso y sofisticado y está soportado por todos los navegadores
hoy día.
3) JavaScript se encarga de la programación y la parte dinámica del documento, es un
lenguaje de programación interpretado, se define como orientado a objetos, basado en prototipos,
imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del
cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de
usuario y páginas web dinámicas.
Más allá de esta integración, la estructura sigue siendo parte esencial de un documento, la
misma provee los elementos necesarios para ubicar contenido estático o dinámico, y es también
una plataforma básica para aplicaciones. Con la variedad de dispositivos para acceder a Internet
y la diversidad de interfaces disponibles para interactuar con la web, un aspecto básico como la
estructura se vuelve parte vital del documento. Ahora la estructura debe proveer forma,
organización y flexibilidad; además debe ser tan fuerte como los fundamentos de un edificio,
para trabajar y crear sitios webs y aplicaciones con HTML5, así necesitamos saber primero
cómo esa estructura es construida. Crear fundamentos fuertes nos ayudará más adelante a aplicar
el resto de los componentes para aprovechar completamente estas nuevas tecnologías. Por ende,
hay que empezar por lo básico, paso a paso; recuerde un documento HTML es un archivo de
texto, si usted no posee ningún programa para desarrollo web puede simplemente utilizar el Bloc
de Notas de Windows o cualquier otro editor de textos como el Sublime Text. El archivo debe
ser grabado con la extensión.html y el nombre que desee; por ejemplo, micodigo.html.
2.1.1 MEJOR ESTRUCTURA
Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques.
El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué
es cada sección, eliminando así DIV innecesarios. Este cambio en la semántica hace que la
estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores
podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los
buscadores, así como cualquier otra aplicación que interprete sitios web. Las webs se dividirán
en los siguientes elementos:
<section></section> - Se utiliza para representar una sección “general” dentro de un documento
o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de
h1-h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy
favorable para el buen posicionamiento web.
<article></article> - El elemento de artículo representa un componente de una página que
consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la
intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros,
una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un
usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido.
Cuando los elementos de <article> son anidados, los elementos de <article> interiores
representan los artículos que en principio son relacionados con el contenido del artículo externo.
26
Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se
podrían representar con <article>.
<article>
Este es el texto de mi segundo mensaje
</article> Listado 2.1.1 Código para la etiqueta <article>.
<aside></aside> - Representa una sección de la página que abarca un contenido tangencialmente
relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido
independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales,
elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se
considere separado del contenido principal de la página.
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside> Listado 2.1.2 Código para la etiqueta <aside>.
<header></header> - Elemento <header> representa un grupo de artículos introductorios o de
navegación:
<header>
<h1>Este es el título principal del sitio web</h1>
</header> Listado 2.1.3 Código para la etiqueta <header>.
<nav></nav> - El elemento <nav> representa una sección de una página que es un link a otras
páginas o a partes dentro de la página: una sección con links de navegación. No todos los grupos
de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten
en bloques principales de la navegación son apropiadas para ser utilizadas con el elemento
<nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de
enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso y privacidad.
No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento
<nav>:
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav> Listado 2.1.4 Código para la etiqueta <nav>.
27
<footer></footer> - El elemento <footer> representa el pié de una sección, con información
acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor,
el copyright o el año. Diferencias entre HTML y HTML5.
<footer>
Derechos Reservados © 2013
</footer> Listado 2.1.5 Código para la etiqueta <footer>.
Figura 2 Diferencia entre HTML y HTML5 [4] [1].
2.1.2 MEJORAS EN LOS FORMULARIOS
<link> Otro importante elemento que va dentro de la cabecera del documento es <link>. Este
elemento es usado para incorporar estilos, códigos JavaScript, imágenes o iconos desde archivos
externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos
CSS:
28
<head>
<link rel=”stylesheet” href=”misestilos.css”>
</head> Listado 2.1.6 Usando el elemento <link>.
<audio> y <video> - Nuevos elementos que permitirán incrustar un contenido multimedia de
sonido o de vídeo, respectivamente. Es una de las novedades más importantes e interesantes en
este HTML5, ya que permite reproducir y controlas vídeos y audio sin necesidad de plugins
como el de Flash. El comportamiento de estos elementos multimedia será como el de cualquier
elemento nativo, y permitirá insertar en un video, enlaces o imágenes, por ejemplo. YouTube, ya
ha anunciado que deja el Flash y comienza a proyectar con HTML5.
En el cuerpo:
<hgroup> Para evitar generar múltiples secciones durante la interpretación del documento por
parte del navegador, estas etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, deben ser agrupadas
juntas. Por esta razón, HTML5 provee el elemento <hgroup>:
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
</hgroup> Listado 2.1.7 Código para <hgroup>.
<figure> y <figcaption> La etiqueta <figure> fue creada para ayudarnos a ser aún más
específicos a la hora de declarar el contenido del documento, para identificar fotos, texto, etc…
<figcaption> encierran el texto relacionado con <figure> y establecen una relación entre ambos
elementos y su contenido.
<figure>
<img src=”compuflash.com/image.jpg”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure> Listado 2.1.8 Código para <figure> y <figcaption>.
<small> En HTML5, el nuevo propósito de <small> es presentar la llamada letra pequeña como
impresiones legales, descargos, etc…
<small>Derechos Reservados © 2014 Compuflash</small> Listado 2.1.9 Inclusión de información legal con el elemento <small>.
<title> La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no
hay nada nuevo para comentar:
</head>
<title>Este texto es el título del documento</title>
</head> Listado 2.1.10 Usando la etiqueta <title>.
29
2.1.3 NOVEDADES EN HTML5
Video: El HTML5 ha definido un nuevo elemento llamado <video> para incrustar video en las
páginas de la web. Actualmente insertar un video en la web era imposible sin determinados
plugins como el QuickTime o el Flash. El elemento <video> ha sido diseñado para utilizarlo sin
la necesidad de que tenga que detectar ningún script. Se pueden especificar múltiples ficheros de
video y los navegadores que soporten el video en HTML5 escogerán uno basado en el formato
que soporte.
Formatos de video
Los formatos de video son como los lenguajes escritos. Un periódico en inglés contiene
la misma información que un periódico en español, aunque solo uno le será útil. Con los
navegadores pasa lo mismo, necesitan saber en qué “idioma” está escrito el video. Los lenguajes
de los videos se llaman “codecs” un algoritmo utilizado para compactar un video. Existen
docenas de codecs en uso en todo el mundo, aunque dos son los más relevantes. Uno de estos
codecs cuesta dinero por la licencia de la patente, y funciona en safari y los iphones. El otro
codec es gratis y de código abierto y funciona en navegadores como Chromium y Firefox.
<meta> La innovación de este elemento en HTML5, como en la mayoría de los casos, es solo
simplificación. La nueva etiqueta <meta> para la definición del tipo de caracteres es más corta y
simple. Por supuesto, podemos cambiar el tipo iso-8859-1 por el necesario para nuestros
documentos y agregar otras etiquetas <meta> como description o keywords para definir otros
aspectos de la página web, como es mostrado en el siguiente ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name=”description” content=”Ejemplo de HTML5”>
<meta name=”keywords” content=”HTML5, CSS3, JavaScript”>
</head>
<body>
</body>
</html> Listado 2.1.11 Agregando más elementos <meta>.
2.2 CSS3
2.2.1 INTRODUCCIÓN A CSS3 [2]
CSS3 trae grandes novedades para el diseño de webs y todos los navegadores comienzan
a implementar CSS 3, desde que CSS comenzó han pasado muchos años y ya vamos por la
especificación de CSS3, que incorpora una serie de novedades.
CSS es un lenguaje para definir el estilo o la apariencia de las páginas web (estilos en
cascada), escritas con HTML o de los documentos XML. CSS se creó para separar el contenido
de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre
la apariencia de las páginas. El objetivo inicial de CSS es separar el contenido de la forma, se
cumplió ya con las primeras especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer
un control total a los diseñadores sobre los elementos de la página ha sido más difícil de cubrir.
30
Las especificaciones anteriores del lenguaje tenían muchas utilidades para aplicar estilos a las
webs, pero los desarrolladores aún continúan usando trucos diversos para conseguir efectos tan
comunes o tan deseados como los bordes redondeados o el sombreado de elementos en la página.
Así pues, la novedad más importante que aporta CSS 3, de cara a los desarrolladores de
webs, consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre
el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o
hacks, que a menudo complicaban el código de las web.
2.2.2 NUEVAS CARACTERÍSTICAS
La especificación de CSS3 viene con interesantes novedades que permitirán hacer webs
más elaboradas y más dinámicas, con mayor separación entre estilos y contenidos; dará soporte a
muchas necesidades de las webs actuales, sin tener que recurrir a trucos de diseñadores o
lenguajes de programación.
Bordes redondeados en CSS 3
CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se
permiten bordes con las esquinas redondeadas, bordes con imágenes (incluso varias imágenes se
pueden utilizar para definir el aspecto del borde), sombras, etc.
border-radius: 7px 27px 100px 0px; ó
border-radius: 5px;
Listado 2.2.2 Formas general y detallada de poner bordes redondeados.
Colores RGBA en CSS 3
Para definir un color RGBA, se deben especificar cuatro valores, de la siguiente manera:
rgba(255, 125, 0, 0.5);
<div style="background-color: rgba(0, 0, 255, 0.1);">Esta capa tiene fondo azul, casi
transparente</div>
<span style="color: rgba(0,255,0,0.8);">Este texto es verde y tiene un poco de
transparencia</span>
Listado 2.2.3 Ejemplos de uso de colores RGBA.
Los tres primeros valores son números en sistema decimal, que corresponden con los
valores de rojo, verde y azul. Siempre tienen que ser números entre 0 y 255. El cuarto valor es
un número entre 0 y 1. Por ejemplo 0 sería totalmente transparente, 1 sería totalmente opaco y
0.5 sería una transparencia al 50%, es decir, mitad opaco mitad transparente.
Bordes con imágenes
El atributo border-image y varios otros de CSS3 harán posible la utilización de imágenes
como bordes de los elementos de la página, sin código HTML especial, simplemente con hojas
de estilo.
#capaborde{
-moz-border-image: url(sello.png) 2 2 2 2 stretch stretch;
31
-webkit-border-image: url(sello.png) 2 2 2 2 stretch stretch;
padding:20px;
width: 100px;} Listado 2.2.4 Código para poner imagen en el borde.
Sombras en CSS 3 con box-shadow
CSS 3 supone una nueva revolución en el diseño web, aportando soluciones a muchas de las
prácticas que utilizan los diseñadores para decorar las páginas web. Esto quiere decir que, muchas de las cosas que antes hacíamos con técnicas de diseño que requerían uso de imágenes, como las sombras o las esquinas redondeadas, a partir de ahora las vamos a poder especificar simplemente desde CSS: box-shadow: 5px -9px 3px #000; Listado 2.2.5 Propiedad de sombra.
Por orden de aparición, los valores que se indican en box-shadow son: Desplazamiento horizontal de la sombra, vertical, difuminado y color de la sombra.
Resplandor exterior
Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad
box-shadow, pues a continuación lo vemos:
-moz-box-shadow: 0px 0px 30px #ffffff;
-webkit-box-shadow: 0px 0px 30px #ffffff;
box-shadow: 0px 0px 30px #ffffff;
Listado 2.2.6 Código para diferentes navegadores.
Introducción a @font-face
Nos permite utilizar cualquier tipografía en una página web. Su sintaxis es la siguiente:
@font-face{
font-family:<nombre_fuente>;
src: <source>[,<source>]*;
[font-weight:<weigth>];
[font-style:<style>];} Listado 2.2.7 Código para aceptar tipos de letras.
Con esto definimos el tipo de letra y su ubicación en nuestro servidor. Si queremos
utilizar dicha fuente tan solo tenemos que llamarla con font-family en las reglas de estilo que
deseemos. Debemos tener en cuenta que si no encuentra la fuente en nuestro servidor, cogerá la
siguiente por defecto que tengamos definida en nuestra hoja de estilos.
2.2.3 DEGRADADOS CSS3
Permiten hacer todo tipo de gradientes sin necesidad de usar imágenes. Existen varios
entre ellos tenemos:
32
Degradados lineares: Los degradados lineares se consiguen con el atributo background
asignándole el gradiente con la propiedad "linear-gradient" de CSS 3. Un ejemplo puede verse a
continuación:
div{
height: 130px;
width: 630px;
background: -webkit-linear-gradient(orange, pink);
background: -moz-linear-gradient(orange, pink);
background: -o-linear-gradient(orange, pink);}
Listado 2.2.8 Degradado en línea.
Degradados circulares: El valor que asignamos a background en este caso será por medio
del atributo "radial-gradient", además de toda la serie de parámetros necesarios para definir el
degradado según nuestras intenciones.
div.circular{
background: -webkit-radial-gradient(#0f0, #06f);
background: -moz-radial-gradient(#0f0, #06f);
border: 1px solid #333;
height: 200px;
width: 250px;}
Listado 2.2.9 Degradado en línea.
Degradados lineales con repetición: Nos permite realizar degradados lineales con
múltiples repeticiones del mismo gradiente de color:
background: repeating-linear-gradient(#fff, #666 25%);
background: repeating-linear-gradient(left, #ffc, #f96 30%, #963 40%, #630 51%);
background: repeating-linear-gradient(45deg, red, blue, red 50px);
background: repeating-linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f, #f00 100px);
Listado 2.2.10 Código para formas de declarar degradados lineales.
Degradados radiales: Veremos ahora cómo conseguir degradados CSS3 en un gradiente
de color que se distribuirá de forma radial, creando tanto círculos como elipses:
La sintaxis resumida será la siguiente: background: radial-gradient(parámetros);
O bien: background-image: radial-gradient(parámetros);
background: radial-gradient(ellipse cover, #66f, #f80, #ffc);
background: radial-gradient(top left, #fff, #f66);
background: radial-gradient(center, #00f, #000 50%);
background: radial-gradient(200px 30px, #f0f, #000);
background: radial-gradient(circle, #66f, #f80, #ffc);
Listado 2.2.11 Formas de declarar los degradados radiales.
Degradados CSS 3 radiales de repetición
Estos nos permiten definir fondos con gradientes de color que serían muy difíciles de
implementar con imágenes. La sintaxis básica de este tipo de degradados es la siguiente:
repeating-radial-gradient(parámetros). Los parámetros, tales como centro del degradado radial,
33
forma y tamaño del motivo y los colores son exactamente los mismos que para los degradados
radiales, por lo que no lo vamos a explicar. Las únicas diferencias es que tenemos que utilizar el
atributo repeating-radial-gradient. Además, para que se produzca la repetición con el tamaño o
intervalo que nosotros deseemos, tendremos que asignar alguna parada de color al último de los
colores del degradado, que generalmente tendrá un valor menor del 100% del espacio del
elemento.
background: -webkit-repeating-radial-gradient(circle, #fff, #666 25%);
background: -moz-repeating-radial-gradient(circle, #fff, #666 25%);
background: repeating-radial-gradient(circle, #fff, #666 25%);
Listado 2.2.12 Degradados radiales con repetición.
2.2.4 ANIMACIONES CSS
Transiciones y Transformaciones [3]
Transformaciones: Las transformaciones de CSS3 pueden ser en 2D y en 3D, siendo estas
últimas considerablemente más complejas al tener que tener en cuenta los tres ejes de
coordenadas. En este ejemplo podemos ver en qué consisten las transformaciones de CSS3 de
rotar, escalar y distorsionar. También hay otras muy usadas como la de trasladar. De las
transformaciones de CSS3, las más usadas son:
Rotate. Rotate te permite rotar un elemento dándole un ángulo de giro en grados:
transform: rotate (45deg);
transform-origin: left top;
transform: rotate (-20deg);
Listado 2.2.13 Formas para transformar.
Scale. Scale te permite escalar un elemento, toma valores positivos y negativos y se le pueden
poner decimales:
transform: scale(2);
transform: scale (.5, 2);
transform: scaleY(3);
Listado 2.2.14 Formas para escalar.
Translate. Translate nos permite trasladar un elemento a la vez en el eje de las X y de las Y.
transform: translate(10px, 20px);
Listado 2.2. 15 Trasladar.
Si no queremos que se aplique ninguna transformación, la propiedad será de none.
Transiciones: Para activar una transición es necesario que se detecte un evento. Por
ejemplo con :hover, :active o:focus. Si combinamos las transiciones con las transformaciones de
CSS3, daremos un efecto de movimiento.
#nav a{
background-color:red;}
34
#nav a:hover, #nav a:focus{
background-color:blue;
transition-property:background-color;
transition-duration:2s;}
Listado 2.2.16 Transiciones.
2.2.5 MODELO DE CAJA
Nos permite diseñar nuestras páginas de forma que sus elementos se adapten según la
pantalla y resolución en la que vayan a ser vistas. Por eso creo que es el momento de centrarse en
este modelo y empezar a dejar ya de lado el antiguo modelo tradicional de cajas. Vamos a partir
de ahora a centrarnos en el nuevo modelo, a pesar de ser consciente de que en algunos
navegadores posiblemente tenga algunos problemas de compatibilidad. El modelo de cajas de
CSS optimizado para diseño de interfaces proporciona un sistema de diseño adicional a los que
ya ofrece CSS, en este nuevo modelo de cajas, los elementos secundarios de una caja se disponen
tanto horizontal como verticalmente y el espacio no utilizado puede asignarse a un elemento
secundario específico o distribuirse entre los diferentes elementos secundarios mediante la
asignaciones dadas a los elementos secundarios que se deben expandir. El anidamiento de estas
cajas (horizontal dentro de vertical o vertical dentro de horizontal) se puede utilizar para crear
diseños en dos dimensiones. Este se basa en el modelo de cajas del lenguaje de interfaz de
usuario que se utiliza en la interfaz de usuario de un gran número de aplicaciones basadas en
HTML5.
2. 3 JAVASCRIPT
2.3.1 LA RELEVANCIA DE JAVASCRIPT [6]
HTML5 puede ser imaginado como un edificio soportado por tres grandes columnas:
HTML, CSS y JavaScript, ahora es momento de develar lo que puede ser considerado como uno
de los pilares más fuertes de esta especificación: JavaScript.
JavaScript es un lenguaje interpretado usado para múltiples propósitos pero solo
considerado como un complemento hasta ahora, una de las innovaciones que ayudó a cambiar el
modo en que vemos JavaScript fue el desarrollo de nuevos motores de interpretación, creados
para acelerar el procesamiento de código. La clave de los motores más exitosos fue transformar
el código JavaScript en código máquina para lograr velocidades de ejecución similares a aquellas
encontradas en aplicaciones de escritorio; esta mejorada capacidad permitió superar viejas
limitaciones de rendimiento y confirmar el lenguaje JavaScript como la mejor opción para la
web.
2.3.2 INCORPORANDO JAVASCRIPT
Siguiendo los mismos lineamientos que en CSS, existen tres técnicas para incorporar
código JavaScript dentro de HTML. Sin embargo, al igual que en CSS, solo la inclusión de
archivos externos es la recomendada a usar en HTML5.
35
En línea: Esta es una técnica simple para insertar JavaScript en nuestro documento que se
aprovecha de atributos disponibles en elementos HTML; estos atributos son manejadores de
eventos que ejecutan código de acuerdo a la acción del usuario, los manejadores de eventos más
usados son, en general, los relacionados con el ratón, como por ejemplo onclick, onMouseOver,
u onMouseOut. Sin embargo, encontraremos sitios web que implementan eventos de teclado y de
la ventana, ejecutando acciones luego de que una tecla es presionada o alguna condición en la
ventana del navegador cambia (por ejemplo, onload u onfocus).
Realmente no existe una norma de obligado cumplimiento a la hora de colocar nuestro
código Javascript dentro del HTML. El código Javascript lo interpreta nuestro navegador web,
por lo tanto necesitamos incluirlo en el HTML, cuando en un navegador se escribe la URL de un
sitio web, se hace una petición al servidor que aloja el sitio, para que devuelva la información
que debe pintar el ordenador en el navegador web.
Esta información se devuelve, normalmente, en forma de un código HTML que el
navegador interpreta y pinta. Esto significa que si yo quiero que el navegador interprete un
determinado código Javascript debo indicarle al navegador de alguna forma que existe un código
Javascript que quiero que se ejecute y como el navegador lo que recibe es un código HTML, esta
indicación tendrá que ir en el HTML.
Aunque el código de ejemplo es muy sencillo, es bastante fácil ver el problema de incluir
el código JavaScript dentro de las etiquetas HTML, es imposible reutilizar el código JavaScript.
Si quieres tener varios eventos onclick que abran una alerta diciendo “hola mundo!” tendrás que
escribir el código JavaScript en cada uno de los eventos, La claridad del código brilla por su
ausencia; en el ejemplo sólo tenemos una etiqueta HTML, pero es fácil imaginarse una pantalla
con cientos de etiquetas HTML o un proyecto web de múltiples pantallas HTML, mantener el
código de esta forma no es necesario. Así que, apareció otra forma de incluir el JavaScript y aquí
entra, por primera vez, la etiqueta script:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Incluyendo JS en HTML5</title>
<script type="text/javascript">
function alerta() {
alert('hola mundo!');
}
</script>
</head>
<body>
<section>
<span onclick="alerta();">Clic aquí</span>
</section>
</body>
</html>
Listado 3.1.1 Primer código en script.
Bien, dentro de la etiqueta head tenemos la etiqueta script con su apertura y su cierre, con
el atributo “type” especificando al navegador que el script incluido dentro de la etiqueta es de
36
tipo text/JavaScript o lo que es lo mismo, JavaScript. Dentro del script tenemos nuestro código
JavaScript. En este caso se trata de una función que, una vez llamada, lanzará nuestra alerta.
Nuestra etiqueta span mantiene el atributo onclick, pero en vez de tender dentro el código
JavaScript para lanzar la alerta, lo que tiene es una llamada a la función que creamos en la
cabecera de nuestro documento.
De esta forma se conseguía tener todo el código JavaScript en la cabecera, de forma que
fuese más sencillo modificarlo y sobre todo, permitiendo reutilizar el código ya que podemos
tener varias etiquetas HTML con un evento onclick que llame a la misma function de JavaScript
que hemos declarado.
2.3.3 NUEVOS SELECTORES
Como vimos anteriormente, los elementos HTML tienen que ser referenciados desde
JavaScript para ser afectados por el código, si recuerda CSS3, ofrece un poderoso sistema de
referencia y selección que no tiene comparación con los pocos métodos provistos por JavaScript
para este propósito. Los métodos getElementById, getElementsByTagName y
getElementsByClassName no son suficientes para contribuir a la integración que este lenguaje
necesita y sostener la relevancia que posee dentro de la especificación de HTML5. Para elevar
JavaScript al nivel que las circunstancias requieren, nuevas alternativas debieron ser
incorporadas, desde ahora podemos seleccionar elementos HTML aplicando toda clase de
selectores CSS por medio de los nuevos métodos querySelector() y querySelectorAll().
querySelector(). Este método retorna el primer elemento que concuerda con el grupo de
selectores especificados entre paréntesis. Los selectores son declarados usando comillas y la
misma sintaxis CSS.
2.3.4 MANEJADORES DE EVENTOS
Como comentamos anteriormente, el código JavaScript es normalmente ejecutado luego
de que el usuario realiza alguna Acción; estas acciones y otros eventos son procesados por
manejadores de eventos y funciones JavaScript asociadas con ellos. Existen tres diferentes
formas de registrar un evento para un elemento HTML: podemos agregar un nuevo atributo al
elemento, registrar un manejador de evento como una propiedad del elemento o usar el nuevo
método estándar addEventListener().
En JavaScript las acciones de los usuarios son llamadas eventos, cuando el usuario realiza
una acción, como un clic del ratón o la presión de una tecla, un evento específico para cada
acción y cada elemento es disparado. Además de los eventos producidos por los usuarios existen
también otros eventos disparados por el sistema (por ejemplo, el evento load que se dispara
cuando el documento es completamente cargado), estos eventos son manejados por códigos o
funciones; el código que responde al evento es llamado manejador; cuando registramos un
manejador lo que hacemos es definir cómo nuestra aplicación responderá a un evento en
particular, luego de la estandarización del método addEventListener(), este procedimiento es
usualmente llamado “escuchar al evento”, y lo que hacemos para preparar el código que
responderá a ese evento es “agregar una escucha” a un elemento en particular.
Manejadores de eventos en línea: Ya utilizamos esta técnica en el código del Listado 4-1
incluyendo el atributo onclick en el elemento <p> (revise este código para comprobar cómo se
aplica). Se trata simplemente de utilizar los atributos provistos por HTML para registrar eventos
37
para un elemento en particular. Esta es una técnica en desuso pero aun extremadamente útil y
práctica en algunas circunstancias,
especialmente cuando necesitamos hacer modificaciones rápidas para testeo.
Manejadores de eventos como propiedades
Para evitar las complicaciones de la técnica en línea (inline), debemos registrar los eventos desde
el código JavaScript, usando selectores JavaScript podemos referenciar el elemento HTML y
asignarle el manejador de eventos que queremos como si fuese una propiedad. En el código del
Listado 4-2 encontrará esta técnica puesta en práctica, dos manejadores de eventos fueron
asignados como propiedades a diferentes elementos; el manejador de eventos onload fue
registrado para la ventana usando la construcción window.onload y el manejador de eventos
onclick fue registrado para el primer elemento <p> encontrado en el documento con la línea de
código document.getElementsByTagName('p')[0].onclick.
El método addEventListener()
El método addEventListener() es la técnica ideal y la que es considerada como estándar
por la especificación de HTML5, este método tiene tres argumentos: el nombre del evento, la
función a ser ejecutada y un valor booleano (falso o verdadero) que indica cómo un evento será
disparado en elementos superpuestos.
2.3.5 ELEMENTOS
Datalist y List: En esta ocasión vamos a revisar un nuevo elemento y un atributo. El nuevo
elemento datalist nos permite realizar una tarea que durante muchos años hemos realizado con
JavaScript. Se trata de un híbrido entre un elemento input normal y un elemento select. Usando
el atributo list con nuestros elementos input podemos especificar una lista de opciones en él:
<label for="diasemana">¿Que día de la semana es hoy?</label>
<input type="text" name="diasemana" id="diasemana" list="dias"/>
<datalist id="dias">
<option value="Lunes" />
<option value="Martes" />
<option value="Miércoles" />
<option value="Jueves" />
<option value="Viernes" />
<option value="Sábado" />
<option value="Domingo" />
</datalist>
Listado 3.1.2 Días de la semana en el elemento input.
Esto permite al usuario seleccionar un valor de la lista o escribir uno que no esté en ella.
Es lo que en la mayoría de frameworks de JavaScript con soporte para elementos de formulario
se viene a llamar Combo Boxes.
Search: Un elemento de tipo search es prácticamente igual que un elemento de tipo text pero con
la diferencia de que el nuevo tipo search tiene un aspecto mucho más consistente con su misión
final que no es otra que la de la búsqueda:
38
<label for="busqueda">Búsqueda</label>
<input type="search" name="busqueda" id="busqueda" />
Listado 3.1.3 Búsqueda con JavaScript.
También podemos añadir un histórico de búsquedas al elemento utilizando para ello el
atributo results:
2.3.6 LIBRERÍAS EXTERNAS
HTML5 fue desarrollado para expandir la web utilizando un conjunto de tecnologías
estándar que todo navegador pueda entender y procesar, y fue creado para proveer todas las
herramientas que un desarrollador necesita; de hecho, HTML5 fue conceptualizado para no
depender de tecnologías de terceras partes, pero por una razón u otra siempre necesitaremos
contar con ayuda extra; antes de la aparición de HTML5, varias librerías JavaScript fueron
desarrolladas para superar las limitaciones de las tecnologías disponibles al momento.
Algunas de estas librerías tenían propósitos específicos (desde procesamiento y
validación de formularios hasta generación y manipulación de gráficos), algunas se volvieron
extremadamente populares y otras son casi imposibles de imitar por desarrolladores
independientes (como es el caso de Google Maps). Incluso cuando futuras implementaciones
provean mejores métodos o funciones, los programadores siempre encontrarán una manera más
fácil de lidiar con un asunto determinado; librerías desarrolladas por terceros que facilitan tareas
complicadas siempre estarán vivas y creciendo en número, estas librerías no son parte de
HTML5 pero son una parte importante de la web y algunas de ellas son actualmente usadas en
sitios web y aplicaciones exitosas. Junto con el resto de las funciones incorporadas por esta
especificación, mejoran JavaScript y acercan las tecnologías de última generación al público en
general.
jQuery: Esta es la librería web más popular disponible en estos días, la librería jQuery es gratuita
y fue diseñada para simplificar la creación de sitios web modernos; facilita la selección de
elementos HTML, la creación de animaciones y efectos, y también controla eventos y ayuda a
implementar Ajax en nuestras aplicaciones
Google Maps: Accesible por medio de JavaScript (y otras tecnologías), Google Maps es un
complejo y único set de herramientas que nos permite desarrollar cualquier servicio de mapeado
para la web que podamos imaginar.
Así existen muchas otras librerías pero solo mencionamos las más importantes, si desea
conocer más puede investigarlo en la web.
3 ANALISIS Y DISEÑO
3.1 ANÁLISIS
3.1.1 DESCOMPOSICIÓN DEL PROBLEMA
Necesitamos realizar una página web con nueva tecnología para la empresa Compuflash,
que este vigente durante mucho tiempo, que se pueda actualizar con facilidad y que nos dé la
oportunidad de aprender sobre el futuro de la web, para ello se ha elegido realizar el Diseño Web
39
con HTML5 como tema de investigación y práctica porque HTML5 recoge todas las ventajas
que introdujo el XHTML y elimina bastante restricciones y limitaciones, es más ligero al ser más
sencillo y simple el código; lo que permite que las páginas escritas en este lenguaje carguen más
rápido en el navegador. Si aún no fuera suficiente, introduce infinidad de opciones que hasta
ahora estaban vedadas a las páginas web, como insertar directamente video (no flash), música, y
casi cualquier elemento; si te interesa el posicionamiento de tu página en Google, debes saber
que una página escrita en este lenguaje es priorizada por el buscador, respecto a otras con el
mismo contenido pero escritas usando otros lenguajes.
¿Por qué usar el lenguaje HTML5 en las páginas web? Escribir páginas usando HTML 5
nos brinda varios beneficios, por ejemplo:
Al ser el código más sencillo y simplificado, cargan más rápido las páginas en el
navegador.
Las páginas y los elementos que contienen, se ven perfectamente en todos los
navegadores, la gran mayoría de los navegadores de los teléfonos Smartphone y las tabletas, son
compatibles con HTML5, si posees uno de estos dispositivos puedes comprobarlo.
Los plugins, widgets y botones que ofrecen los desarrolladores de las redes como
Facebook, Twitter y otras, escritos en HTML 5 funcionan excelentemente, con más opciones que
los clásicos en XHTML o que los iframes.
Es posible insertar directamente videos en las páginas sin tener que acudir a los iframes o
usar la etiqueta object.
HTML 5 incluye etiquetas orientadas principalmente a los buscadores, para facilitarles
comprender el contenido de las páginas, lo que nos beneficia, por ejemplo: header, footer, article,
nav, etc.
Permite la Geolocalización del usuario.
Otras de las razones es el empleo del microformato en las páginas web, que algunos son
totalmente incompatibles con otros lenguajes por lo que no validan correctamente a no ser que se
use HTML5.
Se puede validar correctamente las páginas usando el Validador W3C de este organismo.
Como se puede ver HTML5 es la mejor opción a la hora de diseñar páginas web, es el
estándar más accesible, eficiente y eficaz para un desarrollador, por tal motivo esta investigación
se ha realizado siguiendo los lineamientos y profundizando en sus temas más importantes; pues
bien continuemos con el desarrollo.
3.1.2 RECOLECCIÓN DE LA INFORMACIÓN
Para obtener la información que necesitamos para nuestra página web requerimos
primero empaparnos de todo lo concerniente a la empresa Compuflash, desde sus inicios, su
propuesta, sus ambiciones, su recorrido, sus mejoras, sus experiencias documentadas y sus
proveedores con los productos que ofrecen, así como el catálogo actual. Ya que hemos visto todo
lo concerniente al marco teórico y que hemos hecho las pruebas solo nos queda analizar la
información de la empresa para comenzar a hacer nuestro diseño web.
Inicios:
40
La información de los comienzos de la empresa no estaban documentadas por tal motivo
nos tocó tomar testimonio del gerente y de los integrantes para recopilar esta importante
información y procesarla para la prosperidad.
Fundada en 1998, por un grupo de Ingenieros recién graduados en la UCACUE, con el
nombre de DGACNET por sus integrantes creadores: Danilo Morocho, Geovany Morocho,
Andrés León y Christian Orellana; con el “net” que era una simbología de internet y a la vez de
sistemas. Empezó como un prototipo para ver como resultaba, pero a medida que se fue tomando
las responsabilidades del caso y experimentando en el ambiente laboral; se fue consolidando
como una empresa seria. Todavía faltaba mucho para consolidarse totalmente pero el camino ya
estaba trazado,
La empresa empezó a funcionar y con el paso del tiempo y al tomar la experiencia
necesaria se llegó a la conclusión de que se podía mejorar si los integrantes se especializaban en
diferentes ramas para poder brindar servicios más profesionales a los clientes; así se fueron
formando otras empresas paralelas por los socios y de esa manera se reestructura la empresa base
para dedicarse al hardware, software y redes pero en menor proporción que las especializadas
por los demás integrantes,
Así se mantiene la base como un núcleo fortalecido para dar ayuda a los terminales
creados para software por dos integrantes: Ing. Andrés León e Ing. Danilo Morocho, hardware
por el Ing. Geovanni Morocho e Ing. Andrés Illescas. Quedando la gerencia para el Ing. Walter
Criollo y el Ing. Álvaro Niévesela como colaborador, Ese núcleo se denomina como la nueva
empresa: COMPUFLASH "SOLUCIONES INFORMATICAS"; La cual es una empresa con
vocación de servicio, cuyo objetivo es atender las demandas de sus clientes respecto a sus
sistemas e infraestructuras informáticas y proveer a las mismas de soluciones profesionales ante
los imparables cambios que experimentan las Tecnologías de la Información. COMPUFLASH
consolida su permanencia en el mercado a través de un equipo multidisciplinar experto gracias a
que ofrece cobertura a las nuevas necesidades generadas en el mundo informático.
Además cabe destacar que entre todos consolidan una sola fuerza para cualquier trabajo o
servicio a prestar, solo se dieron cambios para el bien de sus integrantes y para acelerar y
profesionalizar los procesos dejando áreas específicas con mejor consolidación y prestar los
servicios necesarios y actualizados sin ningún error y peor el desconocimiento de algún tema.
Propuesta:
La propuesta de Compuflash es como su eslogan lo indica: “soluciones informáticas”, es
brindar a sus clientes soluciones en todos los ámbitos informáticos; ya sean de enseñanza,
servicios requeridos en hardware, software y redes. Por eso hicimos una recolección de todos o
la mayoría de los servicios generales y en casos específicos de cada área para poder dar la
información necesaria para los usuarios de la página web. Vamos a continuación a revisar la
información recopilada:
Hardware: Compuflash se preocupa de sus clientes, por tal motivo brinda todos los
servicios de hardware posibles, aunque para algunas empresas les resulte ridículo e irrisorio;
nosotros consideramos que no hay trabajo pequeño sino que grande es la empresa que deja
satisfechos a sus clientes, para ello contamos con el personal necesario para investigación y
solución de inmediato. Al menos lo intentamos para saber más ya que el mundo informático
nunca descansa siempre hay algo nuevo que hacer arreglar, configurar, etc…
Entre los servicios más importantes que brindamos esta:
41
Actualización del hardware con sus respectivos drivers.
Arreglo del hardware o dispositivos electrónicos si es que lo tienen.
Revisión de dispositivos y soluciones inmediatas mediante diagnósticos.
Mejoramiento de computadoras.
Capacitación de los usuarios.
Búsqueda de piezas necesarias o compatibles.
Brindar última tecnología.
Instalación de equipos.
Limpieza de equipos.
Venta de hardware nuevo o de segunda mano.
Venta de dispositivos (cámaras, tablets, celulares, etc…)
Proformas de computadoras armadas.
Esas son las más importantes pero existen otras que no valdría la pena especificar o que
están contenidas dentro de las generales, para esta investigación hemos reunido la información
empresarial más importante; y así continuamos con el siguiente campo:
Software: Los servicios intangibles que se realizan en Compuflash están ligados al
software de venta como de uso, existen diferentes tipos aparte de estos como: arreglo de
computadoras, actualización del software de aplicaciones como de sistemas operativos,
instalación etc… A continuación damos una referencia de los servicios que ofrece la empresa en
esta área:
Venta de programas, utilerías y ayudas (manuales).
Instalación y búsqueda de aplicaciones.
Actualización e instalación de sistema/s operativo/s en conjunto.
Arreglo o recuperación de sistemas operativos.
Mantenimiento de dispositivos varios y computadoras.
Clases para usuarios en diferentes aplicaciones o de sistemas operativos.
Tutorías en web o chat por medio de redes sociales.
Soporte técnico a domicilio.
Busqueda y ayuda en nuevas aplicaciones, tutoriales, sistemas, games, etc…
Investigación y capacitación de nuevo software.
Eliminación y cambio de software.
Esos son los servicios más importantes que ofrece Compuflash y que hemos podido
recopilar de acuerdo a testimonios y manuales de trabajo.
Redes y Comunicación:
Venta de dispositivos para redes (switch, routers, etc…).
Configuración de redes (inalámbricas, convencionales).
Arreglo de equipos y software base.
Instalación de redes con cableado e inalámbricas.
Capacitación del manejo de redes.
Armado y mantenimiento de servidores.
Configuración de equipos individuales.
Busqueda de información acerca de diferentes dispositivos de red.
Soporte a domicilio.
Configuración de sistemas para redes.
42
Mejoramiento de estructuras y acoplaciones.
Entre las principales tareas se encuentran estas, se podrían tomar en cuenta otras pero
están dentro de las principales por tal motivo solo se ha generalizado.
Ambiciones:
Las metas que tiene Compuflash como empresa son las de llegar lo más alto posible;
respetando por supuesto a sus clientes fieles. Llegar a la mayor cantidad de gente posible para así
mejorar los servicios y poder crear sucursales y hasta atender a nivel nacional, esa es la meta de
la empresa y para ello se proyecta en un futuro y por tal motivo nos confía la creación de la
página web oficial de la empresa para establecerse en el presente y llegar a la mayor cantidad de
usuarios; posibles clientes para así poder ampliar su clientela con nuevas ofertas, productos y
servicios.
Una reestructuración total es otra de las metas de la empresa para poder eliminar sus debilidades
y potenciarlas, por eso se ha adquirido un vehículo propio para la empresa y así ir mejorando el
servicio a domicilio.
Adquirir nuevos conocimientos con respecto a las nuevas tecnologías con esto queremos decir
que siempre se quiere mantener actualizados para estar a la orden del día a día informático.
Adquirir nuevos equipos informáticos que nos de la pauta de estar siempre al servicio del cliente.
Dar todas las garantías y políticas de calidad a los usuarios y clientes para que la confianza sea
absoluta.
Brindar la experiencia en todo caso posible en el trabajo cotidiano.
Tener muchos empleados eficientes para que trabajen a la orden de los clientes futuros.
Crear una marca referente de eficiencia y eficacia en el mercado informático.
Recorrido:
Tras todos estos años de experiencia adquirida Compuflash que antiguamente se llamaba
DGACNET, ha ido adquiriendo toda la sabiduría necesaria para una empresa seria que este al
nivel de grandes empresas; con la humildad que caracteriza a la desde el principio.
Todos los problemas que han surgido han sido resueltos de manera satisfactoria y honesta para
crear un precedente en el mercado.
Se ha brindado las garantías y se han hecho efectivas a la hora de responder Compuflash ha sido
preciso.
No se ha quedado mal con la clientela al rechazar algún trabajo por más simples que sea.
La higiene en las computadoras o dispositivos arreglados ha sido fundamental para la empresa.
43
La eficiencia de los servicios ofrecidos y el respaldo de sus integrantes ante alguna falla, da la
pauta para ir progresando.
La honestidad en todos los procesos y trabajos es fundamental en la ideología de la empresa.
La velocidad o agilidad de los trabajos entregados nos brinda la confianza de todos los clientes.
Cuando no había componte o no iba a ser total el arreglo, la sinceridad hacia los clientes era
imprescindible.
No confiar en la gente en su totalidad, sino siempre hacer una revisión exacta para no caer en
estafas.
Dejar tiempos de holgura para cada, porque como sabemos en estos campos informáticos no todo
es exacto.
Tener sistemas de seguridad para poder cuidar los equipos de los clientes.
La responsabilidad de los integrantes de Compuflash es primordial para un buen trabajo y para la
prosperidad en un futuro inmediato.
La aceleración de procesos y la eliminación de procesos innecesarios solo se han ido
especializando atravesó del tiempo.
Mejoras:
Las mejoras implementadas atravesó de la trayectoria de la empresa han sido varias desde
básicas, estructurales, etc… Pero entre las principales anotamos las siguientes:
Se reestructuro la empresa DGACNET para dar paso a Compuflash y sus terminales
especializadas; con el propósito de mejorar los servicios y especializar tanto el software,
hardware y redes.
Se mantuvo la base mejorada y ampliada para el contacto directo con los clientes, con sus
terminales o socios van de forma indirecta por la velocidad y optimización de los procesos y
rendimientos.
La tecnología adquirida se ha ido actualizando con mucha más rapidez que antiguamente y esto
se debe a la mejora establecida con los proveedores.
La edificación y el entorno de atención al cliente hay que mantenerlo siempre presentable y se ha
ido mejorando pensando en esta filosofía.
El comportamiento tanto como la educación, hasta la confianza y el buen trato en general se ha
ido mejorando muchísimo atravesó de toda la trayectoria de la empresa.
La compra de automóvil para mejorar el servicio técnico a domicilio da una vista hacia el futuro
de prosperidad.
44
Al tener software ya creado y actualizado nos da la pauta de mejoría por tener una base
establecida, para la venta a futuro.
Las constantes capacitaciones personales y contratadas del personal, garantiza un servicio total.
Se ha adquirido equipos e impresoras mejores para agilizar los procesos en la empresa.
La propaganda mediante medios radiales o de tarjeta de presentación como boletines, redes
sociales, etc… no son suficientes por tal motivo se ha creado la página web para tener más
alcance, pero sin descuidar los anteriores porque el propósito no es dejar sino mejorar.
Cada equipo arreglado es limpiado con los productos y procesos estándar para ello.
Experiencias:
Las experiencias que se ha tenido desde el comienzo en el trato de las personas clientes y
no clientes ha sido un verdadero desafío, dado el nivel de educación bajo para nuestra sociedad;
pero a pesar de todo se ha tenido mucho que aprender para poder crear normas que lleven a la
empresa Compuflash a un nivel idóneo para atención al cliente. Veamos las principales en este
tema tan controversial:
Siempre mostrar educación al cliente así no tenga la razón o muestre signos de violencia o muy
mala educación en su lenguaje o comportamiento.
Siempre hablar con la verdad acerca del producto ya sea a proveedores como a clientes.
No confiar en todo lo que digan proveedores en busca de vender cualquier cosa a toda medida, a
clientes por sacar provecho o querer estafar con algún medio.
Estar siempre atento a posibles delincuentes que quieran hacer de las suyas al entrar al local
supuestamente para comprar o preguntar algo y solo es para mirar lo que pueden robar.
No brindar demasiada confianza al cliente pues puede tomarse atributos que no son
convenientes.
Establecer un laso de confianza mutua con los clientes y proveedores para una relación comercial
estable.
A nivel empresarial siempre es mejor firmar contratos para no tener problemas posteriores, pero
si un cliente necesita un trabajo más grande también es mejor hacerlo.
Los pagos como las garantías deben ser dados y confirmados, para poder realizar una
transacción, una venta, o servicio preestablecido. No se puede dar algo sin recibir el pago o
garantía del caso porque se puede perder el producto o servicio prestado.
Mostrar los productos a los clientes los arreglos que funcionan correctamente para poder
respaldar a la empresa en caso de algún reclamo.
Estar pendiente de los pedidos sin retrasos porque da mala fama a la empresa.
45
Clientes y Proveedores:
Algunos de los proveedores y clientes se han tomado en cuenta pero de los principales, ya
que poner todos seria redundar en el asunto. Veamos algunos para dar constancia:
Clientes:
FERRETERIA MULTICOMERCIO
Figura 3.1.1 Logo de Multicomercio.
Ángel Morocho Valladares.
Dirección: Avenida de las Américas y Barrial Blanco frente al Templete de Miraflores.
ELECTRICIDAD Y ELECTRONICA
Figura 3.1.2 Logo de Electricidad y Electrónica.
Vicente Martínez Jara
Dirección: General Torres y Gaspar Sanguina.MARTINEZ JARA
Figura 3.1.3IImagen de Vicente Martinez (sujeto del medio).
Proveedores:
DIGITAL MATE
Www. digitalmate.com.ec
46
Figura 3.1.4 Logo de Digital Mate.
TECNOMEGA
http://www.tecnomega.com/?site=contactenos
Figura 3.1.5 Logo de TecnoMega.
COMPURAM
www.compuram.com
Figura 3.1.6 Logo de CompuRam.
Catálogo Actual:
Tablas I Productos en existencia 1
ACCESORIOS NOTEBOOKS MOTHERBOARDS
512 MB DDR II SODIMM PC5300 / 667 PARA NOTEBOOK INTEL PENTIUM G2030, 3.00 GHz, LGA 1155, BOX
512 MB DDR II SODIMM PC5300 / 667 MARKVISION PARA NOTEBOOK INTEL CORE i3 3240 3.40 GHz, LGA 1155, BOX
2 GB DDR III SODIMM PC10600 / 1333 PARA NOTEBOOK INTEL CORE i5 3330 3.00 GHz, LGA 1155, BOX
2 GB DDR II SODIMM PC5300 / 667 KINGSTON PARA NOTEBOOK INTEL CORE i5 3470 3.20 GHz, LGA 1155, BOX
47
2 GB DDR II SODIMM PC6400 / 800 KINGSTON PARA NOTEBOOK INTEL CORE i3 CUARTA GENERACION 4130 3.40 GHz, LGA 1150, BOX
2 GB DDR III SODIMM PC10600 / 1333 KINGSTON PARA NOTEBOOK INTEL CORE i7 CUARTA GENERACION 4770 3.40 GHz, LGA 1150, BOX
4 GB DDR III SODIMM PC10600 / 1333 KINGSTON PARA NOTEBOOK DISCOS DUROS
8 GB DDR III SODIMM PC10600-12800 / 1333 KINGSTON PARA NOTEBOOK 160 GB SEAGATE, IDE
250 GB SAMSUNG SATA, NOTEBOOK 500 GB TOSHIBA, SATA
320 GB SAMSUNG SATA, NOTEBOOK 1 TB TOSHIBA, SATA
320 GB SEAGATE SATA, NOTEBOOK 1 TB SEAGATE, SATA
500 GB SAMSUNG SATA, NOTEBOOK 2 TB SEAGATE, SATA
500 GB TOSHIBA SATA, NOTEBOOK 500 GB TOSHIBA, EXTERNO USB 3.0, 2.5"
640 GB SAMSUNG SATA, NOTEBOOK 1 TB TOSHIBA, EXTERNO USB 3.0, 2.5"
750 GB SAMSUNG SATA, NOTEBOOK CASE EXTERNO PARA DISCO DURO 3.5" SATA / IDE
1 TB TOSHIBA SATA, NOTEBOOK CABLE DE DATOS PARA DISCOS DUROS SATA
CASE EXTERNO USB PARA DISCO DURO 2.5" IDE CABLE DE PODER PARA DISCOS DUROS SATA
CASE EXTERNO USB PARA DISCO DURO 2.5" SATA MEMORIA RAM
MINI MOUSE GENIUS USB RETRACTIL, NEGRO 1 GB DDR PC3200 / 400
MINI MOUSE GENIUS USB RETRACTIL, PLATA 256 MB DDR II PC4200 / 533 MARKVISION
MINI MOUSE GENIUS USB RETRACTIL, ROJO 2 GB DDR II PC6400 / 800 KINGSTON
MINI MOUSE GENIUS USB RETRACTIL, BLANCO 2 GB DDR III PC10600 / 1333 KINGSTON
MINI MOUSE RETRACTIL NEGRO 4 GB DDR III PC10600 / 1333 KINGSTON
PORTABLE KIT MARKVISION PARA NOTEBOOK (MOUSE OPTICO, HUB 4 PUERTOS USB, HEADSET, WEB CAM) 8 GB DDR III PC10600 / 1333 KINGSTON
PORTABLE KIT PARA NOTEBOOK (MOUSE OPTICO, PUNTERO LASER, LAMPARA, HUB 4 PUERTOS USB, HEADSET, WEB CAM) 4 GB DDR III PC10600 / 1333 MARKVISION
ADAPTADOR DE VOLTAJE NOTEBOOKS TARGUS APA69US, 90 W 8 GB DDR III PC10600 / 1333 MARKVISION
ADAPTADOR DE VOLTAJE HP, 65 W MEMORIA FLASH
ADAPTADOR DE VOLTAJE NOTEBOOKS NOBUTECH 40 W PEN DRIVE TDK 8 GB
ADAPTADOR DE VOLTAJE NOTBOOKS NOBUTECH 90 W PEN DRIVE IMATION 8 GB
LAMINA DE PROTECCIÓN NOBUTECH, TECLADO DE NOTEBOOKS 11.6" PEN DRIVE KINGSTON 8 GB
LAMINA DE PROTECCIÓN NOBUTECH, TECLADO DE NOTEBOOKS 15.6" PEN DRIVE KINGSTON 16 GB
BATERIA SONY VGP-BPS2B, 11.1V / 4,8A, PARA NOTEBOOKS SONY PEN DRIVE KINGSTON 32 GB
48
BATERIA LENOVO 229P1186, 10.8V / 4,4A, PARA NOTEBOOKS LENOVO 3000 N100 PEN DRIVE KINGSTON 64 GB
LAMPARA USB PARA NOTEBOOK NOBUTECH USB LED AZUL PEN DRIVE HP 8 GB MINI
LAMPARA USB PARA NOTEBOOK NOBUTECH USB LED BLANCA PEN DRIVE HP 16 GB MINI
MALETIN NOTEBOOK 15.6" NEGRO PEN DRIVE HP 32 GB MINI
MALETIN DELL NOTEBOOK 15.6" NEGRO BACK IN A FLASH 15.5 GB
MOCHILA NOTEBOOK 14" NEGRA MP3, MP4 Y ACCESORIOS
MOCHILA NOTEBOOK 16" NEGRA MP4 2 GB + DISPLAY 2.2" + CAMARA, CARGADOR DE AUTO, CAJA REGALO
MOCHILA NOTEBOOK 16" NEGRA, OMEGA SONY WALKMAN MP4 2 GB, DISPLAY 1.8" NEGRO, NWZ-S615F
MOCHILA NOTEBOOK 16" TARGUS SONY WALKMAN MP4 8 GB, DISPLAY 2.4" ROJO, NWZ-S544
MOCHILA NOTEBOOK 16" HP SONY WALKMAN MP4 8 GB, DISPLAY 2.4" PINK, NWZ-S544
CABLE DE SEGURIDAD ALTEK PARA NOTEBOOK PARLANTE PORTATIL HP COLOR NEGRO
CABLE DE SEGURIDAD NOBUTECH PARA NOTEBOOK AUDIFONOS SONY MDR-ZX300 COLOR ROJO
COOLING PAD NOBUTECH PARA NOTEBOOKS 15.6" AUDIFONOS SONY MDR-ZX300 COLOR BLANCO
COOLING PAD ARGOM AJUSTABLE PARA NOTEBOOKS HASTA 17" AUDIFONOS SONY MDR-ZX300 COLOR NEGRO
COOLING PAD NOBUTECH PARA NOTEBOOKS 11.6" AUDIFONOS SONY MDR-XB200 COLOR NARANJA
COOLING PAD TRIPP LITE, DOS VENTILADORES, PARA NOTEBOOKS 14" AUDIFONOS SONY MDR-XB200 COLOR VERDE
COOLING PAD COMQTECH PARA NOTEBOOKS 14" AUDIFONOS SONY MDR-XB200 COLOR CELESTE
COOLING PAD GENIUS NB STAND 280 NOTEBOOKS AUDIFONOS SONY MDR-XB200 COLOR ROSADO
MOTHERBOARDS TABLETS, CELULARES Y ACCESORIOS
BIOSTAR H61MVG, CORE i3, i5, i7, LGA 1155, V,S,L TABLET XELIO P7089 4GB PANTALLA 5”, WI-FI, CAMARA, ANDROID 4.1
BIOSTAR H81MLC, CORE i3, i5, i7, LGA 1150, V,S,L TABLET XELIO P717A, 4GB, PANTALLA 7", WI-FI, CAMARA, ANDROID 4.1
INTEL DH61BF, CORE i3, i5, i7, LGA 1155, V,S,L TABLET SUPERSONIC SC-72JB, 4GB, PANTALLA 7", WI-FI, DOBLE CAMARA, ANDROID 4.1
INTEL DH61WW, CORE i3, i5, i7, LGA 1155, V,S,L TABLET SUPERSONIC SC-74JB, 4GB, PANTALLA 7" HD, WI-FI, DOBLE CAMARA, HDMI, ANDROID 4.1
INTEL DH61CR, CORE i3, i5, i7, LGA 1155, V,S,L TABLET SUPERSONIC KIDS SC-772KT, AZUL, 4GB, PANTALLA 7" CON MARCO ANTIGOLPES, WI-FI, DOBLE CAMARA, ANDROID 4.1
INTEL DB85FL, CORE i3, i5, i7, LGA 1150 CUARTA GENERACION, V,S,L TABLET SUPERSONIC KIDS SC-772KT, PINK, 4GB, PANTALLA 7" CON MARCO ANTIGOLPES, WI-FI, DOBLE CAMARA, ANDROID 4.1
PROCESADORES TABLET SUPERSONIC SC-79BL, 3G, 4GB, PANTALLA 7", BLUETOOTH, WI-FI, DOBLE CAMARA, ANDROID 4.0
49
INTEL CELERON G1610, 2.60 GHz, LGA 1155, BOX TABLET QUO TAB QD7, 8GB, PANTALLA 7" HD, WI-FI, DOBLE CAMARA, HDMI, ANDROID 4.1, ESTUCHE ORIGINAL INCLUIDO
Tablas II Productos en existencia 2
TABLETS
TABLETS
TABLET INTEL TM75A,16GB, PANTALLA 7", WI-FI, 1GB, BLUETOOTH,DOBLE CAMARA, HDMI, ANDROID 4.1 DOCKING STATION SAMSUNG PARA TABLET 7"-10"
TABLET HUAWEI MEDIAPAD 7 LITE, 3G, 8GB, PANTALLA 7", BLUETOOTH, WI-FI, DOBLE CAMARA, ANDROID 4.0
MINI TECLADO BLUETOOTH PARA SMARTPHONES, TABLETS, CONSOLAS JUEGOS
TABLET SAMSUNG GALAXY 3 T210, MARRÓN, 8GB, PANTALLA 7", WI-FI, DOBLE CAMARA, ANDROID 4.1
CARGADOR UNIVERSAL USB GENIUS ECO-U200, PARA CELULARES, SMARTPHONES
TABLET SAMSUNG GALAXY 3 T210, BLANCA, 8GB, PANTALLA 7", WI-FI, DOBLE CAMARA, ANDROID 4.1 CARGADOR ARGOM USB PARA AUTOMOVIL
TABLET SAMSUNG GALAXY 3 T210, NEGRA, 8GB, PANTALLA 7", WI-FI, DOBLE CAMARA, ANDROID 4.1 CARGADOR ARGOM USB DE PARED
TABLET SAMSUNG GALAXY 3 T310, BLANCA, 16GB, PANTALLA 8", BLUETOOTH, WI-FI, DOBLE CAMARA, ANDROID 4.0 ADAPTADOR DE VOLTAJE NOBUTECH PARA IPAD-IPOD, AUTO/USB
TABLET SAMSUNG GALAXY 3 T310, NEGRA, 16GB, PANTALLA 8", BLUETOOTH, WI-FI, DOBLE CAMARA, ANDROID 4.0 BATERIA RECARGABLE TITAN USB PARA CELULARES, TABLETS, MP3, MP4
TABLET SAMSUNG GALAXY 3 T211, 3G, BLANCA, 8GB, PANTALLA 7", WI-FI, DOBLE CAMARA, ANDROID 4.1 MANOS LIBRES BLACKBERRY BLUETOOTH HS-300
TABLET SAMSUNG GALAXY 3 P5210, BLANCA, 16GB, PANTALLA 10,1", WI-FI, DOBLE CAMARA, ANDROID 4.1 MANOS LIBRES BLACKBERRY NEGRO HDW-14322-003
TABLET SAMSUNG GALAXY P7300, 3G, BLANCA, 16GB, PANTALLA 8,9", WI-FI, DOBLE CAMARA, ANDROID 3.0 MANOS LIBRES BLACKBERRY BLANCO HDW-14322-002
TABLET SAMSUNG GALAXY 3 P5200, 3G, BLANCA, 16GB, PANTALLA 10,1", WI-FI, DOBLE CAMARA, ANDROID 4.2 MANOS LIBRES BLUETOOTH BLACKBERRY VM-605
IPAD MINI 32GB, NEGRA, WI-FI ADAPTADOR DE AUDIO PARA CELULARES BLACKBERRY ASY-16130-001
IPAD4 16GB, BLANCA, WI-FI PRESENTADOR PARA BLACKBERRY
IPAD AIR 16GB, SILVER, WI-FI CAMARAS DIGITALES Y FILMADORAS
TABLET TITAN 7009, BLANCA, 8GB, PANTALLA 7", WI-FI, 512MB RAM, CAMARA, ANDROID 4.0
SONY DSC-W690/SILVER, 16.1 MPIXEL, VISOR 2.7", ZOOM 5X, SWEEP PANORAMA
TABLET TITAN 7009, NEGRA, 8GB, PANTALLA 7", WI-FI, 512MB RAM, CAMARA, ANDROID 4.0
SONY DSC-W710/PINK, 16.1 MPIXEL, VISOR 2.7", ZOOM 5X, SWEEP PANORAMA
TABLET TITAN 7009, ROJA, 8GB, PANTALLA 7", WI-FI, 512MB RAM, CAMARA, ANDROID 4.0
SONY DSC-W710/NEGRA, 16.1 MPIXEL, VISOR 2.7", ZOOM 5X, SWEEP PANORAMA
TABLET TITAN 7009, PINK, 8GB, PANTALLA 7", WI-FI, 512MB RAM, CAMARA, ANDROID 4.0
SONY DSC-W730/NEGRA, 16.1 MPIXEL, VISOR 2.7", ZOOM 5X, SWEEP PANORAMA
TABLET TITAN 7009, NEGRA, 16GB, PANTALLA 7", WI-FI, 512MB RAM, CAMARA, ANDROID 4.0 ESTUCHE PARA CAMARA CYBERSHOT SONY, NEGRO
TABLET TITAN 7009, BLANCA, 16GB, PANTALLA 7", WI-FI, 512MB RAM, CAMARA, ANDROID 4.0 CAMARA Y PEN DRIVE 4 GB, TIPO ESFERO Q-SEE
TABLET TITAN 7009, ROJA, 16GB, PANTALLA 7", WI-FI, 512MB RAM, CAMARA, ANDROID 4.0 GENIUS WEB CAM
TABLET TITAN 7009, PINK, 16GB, PANTALLA 7", WI-FI, 512MB RAM, CAMARA, ANDROID 4.0 TARJETAS DE MEMORIA
50
TABLET TITAN 7028, NEGRA, 8GB, PANTALLA 7", WI-FI, 512MB RAM, DOBLE CAMARA, ANDROID 4.2 MICRO SD 4 GB SANDISK
TABLET TITAN 7028, ROJA, 8GB, PANTALLA 7", WI-FI, 512MB RAM, DOBLE CAMARA, ANDROID 4.2 MICRO SD 4 GB KINGSTON
TABLET TITAN 7028, PINK, 8GB, PANTALLA 7", WI-FI, 512MB RAM, DOBLE CAMARA, ANDROID 4.2 MICRO SD 8 GB KINGSTON
TABLET TITAN 7009, BLANCA + ESTUCHE Y TECLADO, 8GB, PANTALLA 7", WI-FI, 512GB RAM, CAMARA, ANDROID 4.0 MICRO SD 16 GB KINGSTON
TABLET TITAN 7011, BLANCA + ESTUCHE Y TECLADO, 8GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 MICRO SD 32 GB KINGSTON
TABLET TITAN 7010, BLANCA, 8GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 M2 4 GB LEXAR
TABLET TITAN 7052, NEGRO, 8GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.1 M2 2 Gb SONY
TABLET TITAN 7010, BLANCA, 16GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 M2 4 Gb SONY
TABLET TITAN 7010, ROJA, 16GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 LECTOR DE MEMORIAS INTERNO
TABLET TITAN 7010, BLANCA + ESTUCHE Y TECLADO, 16GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 LECTOR DE MEMORIAS EXTERNO COMQTECH
TABLET TITAN 7010, ROJA + ESTUCHE Y TECLADO, 16GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 LECTOR DE MEMORIAS EXTERNO ENCORE
TABLET TITAN 7021, SILVER, 8GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.1 CONECTIVIDAD
TABLET TITAN 7010, NEGRA, 32GB, PANTALLA 7", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 TARJETA DE RED ENCORE PCI 10/100
TABLET TITAN 1008, BLANCA, 8GB, PANTALLA 10", BLUETOOTH,WI-FI, 1GB RAM, DOBLE CAMARA, HDMI, ANDROID 4.2 TARJETA DE RED ENCORE PCI GIGABIT 10/100/1000
TABLET TITAN 7067, SILVER, 3G, DOBLE CHIP, RECEPTOR DE TV ANALOGICA, 8GB, PANTALLA 7",BLUETOOTH, WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.1
ADAPTADOR DE RED D-LINK USB 150 Mbps WIRELESS, DWA-125
TABLET TITAN 7058, NEGRA, 3G, 8GB, PANTALLA 7",BLUETOOTH, WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 TARJETA DE RED D-LINK WIRELESS DWA-525 PCI
TABLET TITAN 7058, BLANCA, 3G, 8GB, PANTALLA 7",BLUETOOTH, WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.0 ROUTER D-LINK 150Mbps WIRELESS USB, DIR-610
TABLET TITAN 1002, NEGRA, 16GB, PANTALLA 10", WI-FI, 1GB RAM, DOBLE CAMARA, ANDROID 4.1 ROUTER ENCORE 150Mbps 3G WIRELESS NW-3G/150M AP/R
TABLET TITAN 7801, SILVER, QUAD CORE,16GB, PANTALLA 7.8", WI-FI, 1GB RAM, BLUETOOTH,DOBLE CAMARA, ANDROID 4.1 MINI ADAPTADOR BLUETOOTH NOBUTECH, USB
ESTUCHES ADAPTADOR BLUETOOTH SABRENT, USB
ESTUCHE CON TECLADO ESPAÑOL PARA TABLET TITAN 7" NEGRO HUB 4 PUERTOS USB ENCORE
ESTUCHE CON TECLADO ESPAÑOL PARA TABLET TITAN 7" AZUL HUB 4 PUERTOS USB NOBUTECH
ESTUCHE CON TECLADO ESPAÑOL PARA TABLET TITAN 7" ROJO UNIDADES OPTICAS
ESTUCHE CON TECLADO ESPAÑOL PARA TABLET TITAN 7" PINK DVD WRITER LG SLIM EXTERNO USB, NEGRO
ESTUCHE CON TECLADO PARA TABLET TITAN 8" DVD WRITER LG 22X, SATA
ESTUCHE CON TECLADO PARA TABLET TITAN 9.7" BLU RAY READER LG 12X, SATA
ESTUCHE CON TECLADO BLUETOOTH EN ESPAÑOL PARA TABLET TITAN 7" BLU RAY WRITER LG 12X, SATA
ESTUCHE CON TECLADO BLUETOOTH EN ESPAÑOL PARA TABLET TITAN 10.1" TARJETAS DE VIDEO
51
BATERIAS DE TABLET TARJETA DE VIDEO GEFORCE PCI EXPRESS 1 GB / DVI
BATERIA TABLET 7010 TARJETA DE VIDEO GEFORCE PCI EXPRESS 2 GB / DVI
PANTALLA TABLET 8008 MONITORES
TOUCH PEN PORT AOC 15.6" 1660SW/1670SW
BOLSO GENIUS GS-701 PARA TABLET 7" AOC 19" LED E950SW
BOLSO PARA TABLET 10" AOC 19.5" LED E2060SWN
BOLSO ARGOM PARA TABLET 7" AOC 21.5" E2250SWDN
BOLSO ARGOM PARA TABLET 10" AOC 23" E2351F
ESTUCHE PORT BERGAME, NEGRO, PARA TABLET 10" LG 18.5" LED E19EN33SB
Tablas III Productos en existencia 3
MONITORES UPS ALTEK 725 VA
SAMSUNG 18.5" LED S19B150N/S19C150F HEADSET ALTEK
SAMSUNG 21.5" LED S22C150MS HEADSET GENIUS HS-02B
ADAPTADORES DE TV HEADSET GENIUS GHP-200V
ADAPTADOR DE TV Y RADIO FM, USB, CONTROL REMOTO HEADSET WIRELESS NOBUTECH MODELO 3098, RADIO FM
TARJETA DE TV Y RADIO FM, PCI, CONTROL REMOTO MOUSE USB NEGRO ARGOM
TARJETA DE TV Y RADIO FM KWORLD, PCI EXPRESS, CONTROL REMOTO MOUSE GENIUS PS/2 NEGRO
TELEVISORES, DVD, BLU-RAY, CONSOLAS JUEGOS MOUSE GENIUS USB NEGRO
SAMSUNG 32" LED, 32F4000 HD MOUSE INALAMBRICO DELL ROJO
SAMSUNG 40" LED, 40F5000 FULL HD MOUSE PAD MOVIL NOBUTECH
SAMSUNG 40" LED SMART 40F5500, FULL HD TECLADO SLIM GENIUS LUXEMATE I200 USB NEGRO
SAMSUNG 50" LED 50F5000, FULL HD TECLADO GENIUS KB-06X-KB200 / 110 PS/2 NEGRO
SAMSUNG 46" LED SMART 46F5500, FULL HD TECLADO GENIUS KB-06X-KB200 / 110 USB NEGRO
SAMSUNG 50" LED SMART 50F5500, FULL HD TECLADO ESPAÑOL FLEXIBLE NOBUTECH USB
SONY BRAVIA 32" LED, KDL32R405A HD TECLADO PS/2 NEGRO
SONY BRAVIA 40" LED, KDL40EX459 FULL HD TECLADO USB NEGRO ARGOM
SONY BRAVIA 46" LED, KDL-46R455A FULL HD TECLADO NUMERICO ARGOM
52
SONY BRAVIA 40" 3D, LED, KDL-40HX755 FULL HD TECLADO NUMERICO GENIUS NUMPAD USB
SONY BRAVIA 42" 3D, LED, KDL-42R505A FULL HD TECLADO NUMERICO TARGUS WIRELESS
SONY BRAVIA 47" 3D, LED, KDL-47R505A FULL HD COMBO DE TECLADO Y MOUSE GENIUS PS/2
SOPORTE DE PARED PARA TV LCD 32"-42" COMBO DE TECLADO Y MOUSE GENIUS USB
SONY BLU-RAY 3D BDP-S490 FULL HD COMBO DE TECLADO Y MOUSE GENIUS WIRELESS
SONY GAFAS 3D TDG-BR250 PARLANTES GENIUS NEGROS SP-110 / SP-U115
SONY PSP 3000 PARLANTES NEGROS
SONY PSVITA WIFI VOLANTE GENIUS
SONY PSVITA WIFI + 3G CABLE USB
MEMORIA SONY PSVITA 4GB CELULARES SOLO PARA VENTA A DISTRIBUIDORES
MEMORIA SONY PSVITA 8GB RELOJ SAMSUNG GALAXY GEAR, 4GB MEMORIA, BLUETOOTH, CAMARA, GRIS
MEMORIA SONY PSVITA 16GB RELOJ SAMSUNG GALAXY GEAR, 4GB MEMORIA, BLUETOOTH, CAMARA, NEGRO
MEMORIA SONY PSVITA 32GB SMARTPHONE TITAN MB9500, AZUL, 3G, WI-FI, BLUETOOTH, DOBLE CAMARA, PANTALLA TOUCH 5.3", ANDROID 4.0.3
SONY PSVITA KIT: 4GB, CASE, PROTECTOR DE PANTALLA BLACKBERRY 9220 NEGRO, WI-FI, BLUETOOTH, CAMARA, TECLADO QWERTY
CABLE DE CONEXIÓN HDMI FULL HD BLACKBERRY 9220 AZUL, WI-FI, BLUETOOTH, CAMARA, TECLADO QWERTY
SISTEMAS DE VIGILANCIA BLACKBERRY 9320 BLANCO, 3G, WI-FI, BLUETOOTH, CAMARA, TECLADO QWERTY
CAMARA DE VIGILANCIA Q-SEE QM6007D, TIPO DOMO BLACKBERRY 9380, NEGRO, 3G, WI-FI, BLUETOOTH, CAMARA, TOUCH SCREEN
KIT DE VIGILANCIA Q-SEE QT454-446-5, 4 CAMARAS Y 4 CANALES, GRABADOR CON DISCO DURO DE 500GB
BLACKBERRY 9810, 3G, WI-FI, BLUETOOTH, CAMARA, TOUCH SCREEN, TECLADO SLIDER
PROYECTORES BLACKBERRY Q10, BLANCO, 3G, WI-FI, BLUETOOTH, CAMARA, TOUCH SCREEN, TECLADO QWERTY
PROYECTOR EPSON S12+, 2800 LUMENS, CONTROL REMOTO BLACKBERRY Z10, NEGRO, 3G, WI-FI, BLUETOOTH, CAMARA, TOUCH SCREEN
PROYECTOR EPSON X12, 2800 LUMENS, HDMI, CONTROL REMOTO BLACKBERRY Z10, BLANCO, 3G, WI-FI, BLUETOOTH, CAMARA, TOUCH SCREEN
PANTALLA DE PROYECCIÓN 72" NOKIA 5130, PLATA, BLUETOOTH, CAMARA
PANTALLA DE PROYECCIÓN 86" NOKIA E5-00, NEGRO, 3G, WI-FI, BLUETOOTH, TECLADO QWERTY,CAMARA
IMPRESORAS NOKIA C5-04, NEGRO, 3G, BLUETOOTH, TOUCH SCREEN, CAMARA, SISTEMA OPERATIVO SYMBIAN
IMPRESORA DE ETIQUETAS EPSON LABELWORKS LW-300 SAMSUNG GALAXY Y DUOS S6102, NEGRO, DOBLE CHIP, 3G, WI-FI, ANDROID 2.3, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
IMPRESORA MATRICIAL EPSON LX350 SAMSUNG GALAXY MUSIC DUOS S6012, AZUL, DOBLE CHIP, 3G, WI-FI, ANDROID 4.0, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
53
CINTA EPSON FX890 SAMSUNG GALAXY ACE S5830, BLANCO, 3G, WI-FI, ANDROID 2.2, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
IMPRESORA LASER SAMSUNG ML 2165 SAMSUNG GALAXY ACE S6802, BLANCO, DOBLE CHIP, 3G, WI-FI, ANDROID 2.3, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
IMPRESORA LASER COLOR HP CP1025NW SAMSUNG GALAXY ACE PLUS S7500, BLANCO, 3G, WI-FI, ANDROID 2.3, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
IMPRESORA INYECCION HP D1000 SAMSUNG GALAXY ACE II I8160, BLANCO, 3G, WI-FI, ANDROID 2.3, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
MULTIFUNCIONES SAMSUNG GALAXY ADVANCE I9070, BLANCO, 3G, WI-FI, ANDROID 2.3, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
MULTIFUNCION CANON PIXMA MG2220 SAMSUNG GALAXY S III MINI I8190, BLANCO, 3G, WI-FI, 8 GB, ANDROID 4.1, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
MULTIFUNCION HP 2050 SAMSUNG GALAXY S4 MINI I9190, BLANCO, 3G, WI-FI, 8 GB, ANDROID 4.2, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
MULTIFUNCION HP 2515 SAMSUNG GALAXY S4 MINI I9190, NEGRO, 3G, WI-FI, 8 GB, ANDROID 4.2, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
MULTIFUNCION EPSON CON SISTEMA DE TINTA ORIGINAL L210 SAMSUNG GALAXY S4 MINI DUOS I9192, BLANCO, 3G, WI-FI, 8 GB, ANDROID 4.2, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
MULTIFUNCION EPSON CON WI-FI Y SISTEMA DE TINTA ORIGINAL L355 SAMSUNG GALAXY S4 I9500, BLANCO, 4G, WI-FI, 16 GB, ANDROID 4.0, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
ACCESORIOS VARIOS SAMSUNG GALAXY S4 I9500, NEGRO, 4G, WI-FI, 16 GB, ANDROID 4.0, BLUETOOTH, TOUCH SCREEN, GPS, CAMARA
SCANNER BENQ 5000, FLATBED, 1200 DPI SONY ERICSSON HAZEL, ROJO, 3G, WI-FI, BLUETOOTH, CAMARA, TECLADO QWERTY SLIDER
COMBO ATX (CASE, TECLADO, MOUSE OPTICO, PARLANTES) SONY ERICSSON XPERIA X10 MINI PRO, ROJO, 3G, WI-FI, ANDROID, BLUETOOTH, CAMARA, PANTALLA TOUCH, TECLADO QWERTY SLIDER
FUENTE DE PODER 525 W UPS ALTEK 725 VA
FUENTE DE PODER 650 W HEADSET ALTEK
FUENTE DE PODER 750 W HEADSET GENIUS HS-02B
REGULADOR ALTEK 1600 VA HEADSET GENIUS GHP-200V
3.1.3 SELECCIÓN DE LA INFORMACIÓN
La selección de la información ya ha sido previamente establecida y se ha mostrado en el
punto anterior para no redundar datos, se ha tomado en cuenta exclusivamente lo necesario para
acoplarlo en la página web; en casos exclusivos ponemos por ejemplo en los videos el texto
recopilado para ponerle voz y grabarlo como audio. En el contenido va los enlaces del menú
lateral con la información base de la empresa; como vemos a continuación:
QUIENES SOMOS
Fundada en 1998, por un grupo de Ingenieros recién graduados en la UCACUE, con el nombre
de DGACNET empezó la empresa a funcionar; con el paso del tiempo se fueron formando otras
54
empresas por los socios y de esa manera se reestructura para dar paso a la nueva empresa
denominada: COMPUFLASH "SOLUCIONES INFORMATICAS"; La cual es una empresa con
vocación de servicio, cuyo objetivo es atender las demandas de sus clientes respecto a sus
sistemas e infraestructuras informáticas y proveer a las mismas de soluciones profesionales ante
los imparables cambios que experimentan las Tecnologías de la Información. COMPUFLASH
consolida su permanencia en el mercado a través de un equipo multidisciplinar experto gracias a
que ofrece cobertura a las nuevas necesidades generadas en el mundo informático.
MISION
Brindar servicios profesionales de informática con la más alta calidad y profesionalismo nuestros
clientes, utilizando las últimas tecnologías en software, hardware de punta y personal eficiente
con amplia experiencia. Para un mejor trato y resultado de nuestros trabajos. Siempre a la orden
de nuestros clientes porque nuestro prestigio nos precede. De una manera profesional y
satisfactoria porque nuestro trabajo es nuestra pasión le brindamos a usted la mayor garantía de
un trabajo garantizado para todo tipo obra a realizar.
VISION
Trabajamos bajo un esquema de mejora continua e innovación; nos enfocamos en detectar
necesidades y generar nuevos servicios dentro de nuestro mercado, con lo cual buscamos
consolidarnos como la empresa más importante de asistencia lógica y técnica en nuestra ciudad,
fomentando el empleo y generando crecimiento personal y profesional de nuestros trabajadores.
Las asociaciones juegan un rol fundamental en la solución y practica de problemas o daños en
los clientes, puesto que es más sencillo valerse de la experiencia adquirida por tantos años.
Como dijimos anteriormente en los servicios esta la información de redes, hardware y
software, que detalla los servicios en sí y en parte aporta al usuario conocimientos de sistemas;
para irlo enredando en las terminales del conocimiento.
En marcas con las que trabajamos se encuentran todos los productos que podríamos pedir
a nuestros distribuidores para venderlos a nuestros clientes, lo visualizamos ahí para no
confundirnos con los productos de catálogo en existencia.
En recurso tenemos la estructura de la empresa en sus integrantes, los recursos físicos con
los que contamos y los recursos lógicos:
55
Figura 3.1.7 Estructura básica de los integrantes de Compuflash
Ahora continuemos con los recursos físicos que contiene la empresa en el área de
hardware:
56
Figura 3.1.8 Recursos físicos del área de hardware.
Y por último veamos los recursos lógicos para el mantenimiento de computadoras:
Figura 3.1.9 Recursos físicos del área de hardware.
Y para terminar este punto ponemos el certificado de calidad, que es solamente la imagen
del RUC que nos sirve para demostrar que el negocio está totalmente legalizado.
57
Figura 3.1.10 Recursos físicos del área de hardware.
3.1.4 ANÁLISIS DE LA INFORMACIÓN
Nos hemos dado cuenta que la información es más informal de lo que pensábamos,
mucha de ella la tuvimos que ir recopilando personalmente con cada empleado de su propia
boca; para luego irla analizando en conjunto y sacar la precisa de todos ellos.
Además podemos destacar que mucha de la información se fue recopilando por nuestra
propia iniciativa para así poder dar un mayor resalte a la página web de la empresa Compuflahs
Soluciones Informáticas.
Todo lo que se ha puesto en este trabajo teórico acerca de la información ha sido como
anteriormente dijimos analizada, justificada y lista para poder utilizar en la página web de la
práctica preestablecida.
3. 2 DISEÑO
3.2.1 PLANIFICACIÓN
58
El diseño de nuestro proyecto se basa en la creación del temario como estructura básica
conceptual y en cuanto a la práctica tenemos un esquema específico que nos da la pauta para el
diseño de nuestra página web.
3.2.2 DIAGRAMACIÓN UML
a) Diagrama Básico
Vamos desde el inicio del diseño de nuestro proyecto de investigación práctico, en donde
especificamos las bases para luego poder proyectarnos a los detalles de cada uno: desde
Egresado hacia el trabajo de investigación práctico, de ahí; va hacia la teoría y la práctica con la
investigación del caso para hacer la página web de la empresa Compuflash.
Figura 3.2.1 Campos básicos.
b) Diagrama Básico Extendido
En este diagrama se extiende un poco la base, mostrando nuevos campos en texto y
práctica; tomando en cuenta que en la teoría (texto), se devela los capítulos y en la práctica se
muestra la tecnología en la que se va a realizar HTML5; además de la empresa que contrato la
realización de la página web.
59
Figura 3.2.2 Campos básicos extendidos.
c) Diagrama de la Teoría Especificada
Los capítulos que son fundamentales en la teoría del proyecto son especificados en este
diagrama, con sus terminales concretas y establecidas. El desarrollo de cada uno fue realizado
con el mayor cuidado y responsabilidad para un trabajo de investigación eficiente.
Figura 3.2.3 Descomposición de la teoría del trabajo de investigación.
60
d) Diseño de la página web
Podemos observar en el siguiente gráfico la estructura principal de la página web, con la
cabecera, menú principal, menú secundario, contenido, propaganda, marcas, videos y el pie de
página; aunque los videos también se pueden considerar como pie de página, pero ya es a diverso
criterio.
Figura 3.2.4 Estructura básica de la página web.
e) Diagrama de Aplicaciones
Todos los programas utilizados para poder desarrollar la página web han sido puestos en
este diagrama para poder visualizar la estructura misma de la página web respecto a este tema en
concreto.
61
Figura 3.2.5 Aplicaciones utilizadas en la práctica.
f) Diagrama de Páginas HTML
Todas las páginas .html que conforman principalmente el proyecto son como sus bases, el
más importante es el index donde comienza todo y en el final al introducir la fecha y el reloj en
la página web esta cambia a: .php, por el código necesario para crear estos atributos. Luego de
esta las siguientes se crean a partir de una base especifica conformada solo por la cabecera, el
ítem (por ejemplo: galería, noticias, etc…) y el pie de página. Solamente el contacte con
nosotros va con todo lo del index, manteniendo los campos estándar; al final se validan las
páginas para dar por terminada la implementación y continuar con las pruebas.
Figura 3.2.6 Páginas .html que conforman el proyecto en su mayor parte.
62
g) Diagrama Carpetas
Aquí en este diagrama podemos ver la secuencia de carpetas contenedoras de todos los
ítems necesarios para poder hacer las páginas .html, como por ejemplo: imágenes (img), fondos
(fon), multimedia (mtm), javascript (js), archivos html (html), estilos css3 (css), iconos (ico),
archivo php (php), proformas (prf). De esa forma se mantiene un orden secuencial.
Figura 3.2.7 Carpetas que contienen los elementos de las páginas html.
h) Diagrama BackUps
En todo proyecto de investigación práctico es imprescindible respaldar la información
como las fuentes de estas en dispositivos externos como: discos duros, memory flash o DVDs.
Ya que se podrían perder o en algún daño de nuestra computadora, o en caso de robo se
extraviaría todo; también es bueno guardar periódicamente a medida de lo que se va avanzando
en diferentes medios como tablet, laptop, móvil, etc…
Figura 3.2. 8 Medios donde se guardan backups del proyecto.
i) Diagrama Dispositivos
63
Terminado el proyecto es hora de las pruebas y para ello es fundamental tener a mano
dispositivos como: celular, tablet, laptop y la Pc donde realizamos el proyecto, para realizar las
comprobaciones del modelo responsive y elástico del estándar HTML5.
Figura 3.2.9 Comprobación de la página web mediante dispositivos.
3.2.3 ESTRUCTURA GENERAL PARA EL PROYECTO
Luego de haber estructurado todos los procedimientos, aplicaciones, dispositivos de
nuestro proyecto, hemos llegado al diseño final o resultante de la página web de la empresa
Compuflash con el estándar HTML5, CSS3 y JavaScript. Con esto tenemos todo planificado
para crear este y otros proyectos en el futuro para ir mejorando paulatinamente.
Figura 3.2.10 Estructura general del trabajo de investigación práctico.
64
Todo lo estipulado y analizado en un proyecto es fundamental en el diseño web, para
poder realizarlo de una forma profesional, sólida y confiable; no es conveniente ejecutar
prototipos sin la planificación del caso con tiempos, diseños, análisis y hasta poner límites y
tiempos de holgura por algún error o tiempo muerto que se pueda dar. El orden secuencial es
básico y fundamental en el estándar HTML nunca debemos olvidar esto en nuestra vida
profesional en todos los ámbitos que se puedan dar en nuestra carrera o en el mundo informático
en sí. Sin más reparo continuemos con el desarrollo de nuestra investigación ejecutando la
práctica:
65
4 DESARROLLO Y PRUEBAS
4. 1 PÁGINA WEB DE COMPUFLASH
4.1.1 DESARROLLO [9]
Para empezar con el diseño en HTML5 necesitamos un servidor eficiente, existen en el
mercado varios de ellos como: WAMPSERVER, APPSERV, VIRTUALMIN, etc… pero hemos
elegido XAMPP porque es un servidor independiente de plataforma de código libre, que te
permite instalar de forma sencilla Apache en tu propio ordenador, sin importar tu sistema
operativo (Linux, Windows, MAC o Solaris) y lo mejor de todo es que su uso es gratuito.
XAMPP incluye además servidores de bases de datos como MySQL y SQLite con sus
respectivos gestores phpMyAdmin y phpSQLiteAdmin; incorpora también el intérprete de PHP,
el intérprete de Perl, servidores de FTP como ProFTPD o FileZilla FTP Serve, etc. entre muchas
cosas más. Si alguna vez has intentado instalar Apache, sabes que no es una tarea fácil, sin
embargo con XAMPP todo es diferente, una de las ventajas de usar XAMPP es que su
instalación es de lo más sencilla, basta descargarlo, extraerlo y comenzar a usarlo, y es una de las
razones fundamentales por lo cual lo elegimos.
¿Para qué sirve?
Como ya lo debes haber deducido, XAMPP (Anexo 1: Instalación del servidor XAMPP) es
una herramienta de desarrollo que te permite probar tu trabajo (páginas web o programación por
ejemplo) en tu propio ordenador sin necesidad de tener que accesar a internet; si eres un
desarrollador que recién está comenzando, tampoco debes preocuparte sobre las configuraciones
ya que XAMPP te provee de una configuración totalmente funcional desde el momento que lo
instalas (básicamente lo extraes).
Sublime Text 2
Está disponible para Windows, OS X y Linux y lo puedes descargar de forma gratuita en
su página oficial (http://www.sublimetext.com/) y utilizarlo el tiempo que desees. Sublime Text
es un editor de texto y editor de código fuente creado en Python, Se distribuye de forma gratuita,
sin embargo no es software libre o de código abierto, se puede obtener una licencia para su uso
ilimitado, pero él no disponer de esta no genera ninguna limitación más allá de una alerta cada
cierto tiempo. [5]
Anexo 2: Características básicas de Sublime Text 2
4.1.2 PERFIL DE COMPUFLASH
Ahora que tenemos todo lo necesario para empezar nuestro proyecto necesitamos conocer
datos de la empresa a la cual haremos una página web como practica de todo lo aprendido y así
cumplir con la meta de un trabajo de monografía eficiente y eficaz.
COMPUFLASH
66
Fundada en 1998, por un grupo de Ingenieros de Sistemas recién graduados en la
UCACUE, con el nombre de DGACNET, empezó la empresa a funcionar; con el paso del
tiempo se fueron formando otras empresas por los socios y de esa manera se reestructura para dar
paso a la nueva empresa denominada: COMPUFLASH "SOLUCIONES INFORMATICAS"; La
cual es una empresa con vocación de servicio, cuyo objetivo es atender las demandas de sus
clientes respecto a sus sistemas e infraestructuras informáticas y proveer a las mismas de
soluciones profesionales ante los imparables cambios que experimentan las Tecnologías de la
Información. COMPUFLASH consolida su permanencia en el mercado a través de un equipo
multidisciplinar experto gracias a que ofrece cobertura a las nuevas necesidades generadas en el
mundo informático.
Misión
Brindar servicios profesionales de informática con la más alta calidad y profesionalismo a
nuestros clientes, utilizando las últimas tecnologías en software, hardware de punta y personal
eficiente con amplia experiencia. Para un mejor trato y resultado de nuestros trabajos; siempre a
la orden de nuestros clientes porque nuestro prestigio nos precede. De una manera profesional y
satisfactoria porque nuestro trabajo es nuestra pasión le brindamos a usted la mayor garantía de
una labor garantizada para todo tipo obra a realizar.
Visión
Trabajamos bajo un esquema de mejora continua e innovación; nos enfocamos en
detectar necesidades y generar nuevos servicios dentro de nuestro mercado, con lo cual
buscamos consolidarnos como la empresa más importante de asistencia lógica y técnica en
nuestra ciudad, fomentando el empleo y generando crecimiento personal y profesional de
nuestros trabajadores. Las asociaciones juegan un rol fundamental en la solución y practica de
problemas o daños en los clientes, puesto que es más sencillo valerse de la experiencia adquirida
por tantos años.
Figura 4.1.1 Logo anterior de Compuflash.
4.1.3 IMPLEMENTACIÓN
Lo primero que tenemos que hacer es reestructurar el logo de la empresa para hacerlo
más profesional e influente a la vista de los clientes y para que la página web quede bien
consolidada desde lo básico. Para ello hemos utilizado varias herramientas como: Photoshop,
PainNet y LogoCreator y el resultado ha quedado de la siguiente manera:
67
Figura 4.1.2 Logo actual de Compuflash.
Al tener el logo listo creamos la portada la cual ira en la cabecera de nuestra página web:
Figura 4.1.3 Portada para la página web de Compuflash.
Ahora estamos listos para empezar con el código HTML para ello lo primero es abrir el
XAMPP para que inicien los servicios de Apache y MySQL, si los servicios se inician
correctamente se visualizara la barra en verde indicando que está en buen funcionamiento o que
se ha levantado correctamente el motor.
Figura 4.1.4 Inicialización de XAMPP.
Luego procederemos a crear una carpeta en la dirección base de instalación de XAMPP,
que es: C:\xampp\htdocs\compuflash; en nuestro caso ya la incluimos como parte de la misma.
En esta carpeta Compuflash ira todo lo correspondiente a nuestra página web: archivos html,
68
imágenes, multimedia, archivos CSS, archivos JS, etc… así tendremos un correcto orden para no
equivocarnos y a la vez ejercer un trabajo eficiente y secuencial.
Figura 4.1.5 Carpeta destinataria Compuflash.
.
Luego procedemos a abrir el Sublime Text y creamos un archivo index.html dentro del
proyecto Compuflash, el index es el inicio base de nuestra página web; el primer paso es crear la
base con todo lo necesario para así poder continuar con las demás.
Figura 4.1.6 Inicio del archivo Index de Sublime Text.
A continuación creamos nuestro código base HTML, el código puede ser variable
dependiendo de cada desarrollador y como hemos mencionado anteriormente HTML5 nos da la
ventaja de juntar etiquetas de una manera más simple.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>COMPUFLASH</title>
</head>
<body>
<header>
<section id="titulo">
<h1 id= "pagina">PAGINA WEB OFICIAL</h1>
</section>
</header>
<figure>
69
<img src="img/logo.jpg">
</figure>
</form>
<body>
</html>
Listado 4.1.1 Código base HTML para la página web Compuflash.
Normalize
Para insertar estilos a nuestras etiquetas necesitamos el normalize.css para dar formato a
nuestra página web, En términos simples Normalize.css es un archivo .css que pone en cero
todas las etiquetas HTML; todo esto con el fin de que tu sitio web se vea igual en todos los
navegadores. Al ser una hoja de estilo, debe ser tratado como una extensión .css y vincularlo en
el <head> de tu sitio web; no tiene nada que ver con JavaScript, o cualquier otra sintaxis alejada
de CSS o HTML. Solamente se descarga el archivo y se lo introduce.
Hablar de instalar normalize.css está incorrecto, lo que realmente haremos es introducir el
archivo en nuestra web; lo cual es muy sencillo, lo primero que haremos es “descargarnos”
normalize.css desde su página oficial (www.normalize.com). Luego de habernos descargado
nuestro archivo, lo debemos guardar con el nombre normalize.css; lo guardaremos en la carpeta
de nuestra web. Ahora lo que haremos es crear el link a nuestro sitio web, para que normalice
visualice nuestra web a todo navegador; para eso creamos el link como una hoja de estilo;
agregamos el siguiente comando entre las etiquetas <head> </head>.
<link rel="stylesheet" href="/comp flash/cuss/normalize.css"/>
Listado 4.1.2 Código para insertar normalize en nuestro proyecto.
Tenemos normalizada nuestra web, lo que hicimos básicamente es obtener el archivo
normalize.css, ponerlo en la carpeta de nuestra web y crear el link vía HTML. Ahora si podemos
crear un nuevo archivo HTML para establecer nuestros estilos a cada sección de nuestro
documento; procedemos a crear un archivo estilos.css en el Sublime Text y luego lo vinculamos
con el index en la cabecera como hicimos con el normalize: (<link rel="stylesheet"
href="/compuflash/css/estilos.css"/>); luego en el documento escribimos el siguiente código:
header
{
background: -webkit-radial-gradient(center, circle, #000000 20%, #610B0B 100%);
background: -moz-radial-gradient(center, circle, #000000 20%, #610B0B 100%);
border: 2px solid Gray;
margin=0;
}
header h1 {
color: #D8D8D8;
color: hsla(255 255 255, 100%, 100%, 0.5);
font-family: Mongolian Baiti;
font-size: 18px;
text-align: center;
text-shadow: #B18904 2.5px 2.5px;}
Listado 4.1.3 Estilos para nuestra cabecera.
70
Ingresamos un fondo degradado con los prefijos webkit y moz como ejemplo de
compatibilidad para los diferentes navegadores; creamos un borde y establecemos los lugares
correspondientes, especificamos la letra y sus características. Para que no existan prefijos
tenemos que trabajar con otra librería.
Prefixfree
Los insoportables prefijos son usados con el fin de disponer ciertas funcionalidades en
CSS3 para distintos navegadores, anteponiéndolos de esta manera en nuestros atributos CSS3
(webkit, moz, etc…). Prefexfree es una librería creada para evitar los prefijos en CSS3, utilizar
Prefix Free es bastante sencillo simplemente debemos descargarlo desde su página web oficial
(www.prefixfree.com); y agregar en nuestra cabecera del proyecto el script oficial insertándolo
antes de </head> de esta manera:
<script src="/comp flash/js/prefixfree.min.js"></script>
Listado 4.1.4 Código link para Prefixfree.
Buscar
Vamos a ingresar un control de búsqueda que funcione con google, solo hay que
vincularlo y crear el código para insertarlo en nuestra página web como una opción:
<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="EL ID DE TU MOTOR DE BÚSQUEDA va
aquí" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Buscar" />
<figure>
<img src="img/logo.jpg">
</figure>
</form>
Listado 4.1.5 Ingreso de la opción de búsqueda mediante código HTML.
Lo que hemos hecho es crear un form con su id correspondiente, vincularlo al
google.com y crear con los inputs para el control de búsqueda y así ingresar texto, con sus
características específicas. Para terminar nuestra cabecera agregaremos un efecto a nuestro texto:
PAGINA WEB OFICIAL para hacerlo dinámico; característica fundamental de HTML5. Para
ello necesitamos crear código en JavaScript. Por tal motivo creamos un nuevo archivo llamado
JavaScript.js y lo agregamos a nuestro proyecto guardándolo en la carpeta de destino,
continuamos con el enlace a el archivo index con: (<script
src="/compuflash/js/javascript.js"></script>), uniéndolo a los demás links creados, en el
escribimos nuestro código correspondiente:
function escribir()
{
var sMensaje="PAGINA WEB OFICIAL";
posicion=0;
71
return function mensaje(){
if (posicion>=0 && posicion<sMensaje.length)
{
texto= sMensaje.substring (0,posicion+1);
$('#pagina').text(texto);
}
else if(posicion==sMensaje.length)
{
posicion=-15;
}
posicion=posicion+1;
} }
Listado 4.1.6 Código JavaScript para crear un efecto en la página web.
Creamos en el listado anterior una función escribir en JavaScript, luego vinculamos el
mensaje de nuestra PAGINA WEB OFICIAL; para crear un bucle que vaya rotando las letras,
dando el efecto de que se estuviera escribiendo una y otra vez. Con esto tenemos lista nuestra
cabecera, abrimos nuestro navegador Chrome en nuestro caso posteamos la dirección:
http://localhost/compuflash/, y cargamos nuestra página y la veremos como se la puede apreciar
en el siguiente gráfico:
Figura 4.1.7 Cabecera de la página web Compuflash.
Menú Principal
Para crear el menú principal necesitamos un modelo profesional para ello requerimos
buscarlo en la web; específicamente en: http://www.designyourway.net, en nuestro caso
elegimos el menú jQuery (mb)Menu 2.7; el cual tenemos que abrir para poder descargarnos los
CSS y los archivos JS. Leyendo el artículo podemos ver la forma de implementación, adhiriendo
el código en nuestro proyecto desde los links, hasta el body y los codecs; así como el código Java
pertinente. Cuando se implementa estas tecnologías las pruebas son fundamentales, el estudio del
código como la acertada interpretación del texto conceptual nos dará el éxito deseado.
Como los menús ya vienen preestablecidos tenemos que irlos personalizando para poder
conocerlos a fondo y saber su estructura y así editar el código sin dañar la estructura
preestablecida, si nos dan más opciones de las que necesitamos tenemos que quitarlas pero con
72
cuidado, caso contrario tenemos que añadir código según sea el caso. Nuestro menú quedará
estructurado de la siguiente manera:
La Empresa: [Origen] = {(Contacte con nosotros), (Noticias), (Galería de imágenes)}.
Servicios que ofrecemos: [Lógicos y Físicos] = {(Hardware), (Software), (Redes y
comunicación), (Venta de productos)}.
Recursos y Capacidades: [Contenido] = {(Recursos Humanos), (Recursos Materiales),
(Equipos)}.
Política de Calidad: [Seleccione una opción] = {(Certificado de Calidad), (Recomendaciones)}.
Introducimos el código necesario para ponerlo en práctica dentro de nuestro body
especificando que se trata del menú principal.
<!--INICIO MENU PRINCIPAL-->
<nav id="menu">
<div id="wrapper" style="width:615px; border:2px solid #1C1C1C; position:absolute;
left:605px; top:350px">
<table width=""border="2px" cellpadding="0" cellspacing="0" bgcolor="#1C1C1C" >
<tr>
<td valign="bottom">
<table border="2PX" cellpadding="0" cellspacing="0" bgcolor="#1C1C1C"
class="container">
<tr>
<td class="myMenu" align="right">
<!-- start horizontal menu -->
<table class="rootVoices" cellspacing='0' cellpadding='0' border='0'>
<tr>
<td class="rootVoice {menu: 'menu_1'}" >La Empresa</td>
<td class="rootVoice {menu: 'menu_2'}" >Servicios que ofrecemos</td>
<td class="rootVoice {menu: 'menu_3'}" >Recursos y Capacidades</td>
<td class="rootVoice {menu: 'menu_4'}" >Politica de Calidad</td>
</tr>
</table></td></tr></table></td></tr></table></div>
<div id="menu_1" class="menu">
<a data-type="title" class="{img: '24-tag-add.png'}">Origen</a> <!-- menuvoice title-->
<a href="/comp flash/contactenos.html" >Contacte con nosotros</a>
<!-- menuvoice with href--><a class="{action: 'document.title=(\'menu_1.2\')'}" >Noticias</a>
<!-- menuvoice with js action-->
<a data-type="separator"> </a> <!-- menuvoice separator-->
<a class="{action: 'document.title=(\'menu_1.4\')', menu: 'submenuIMG', img: '24-book-blue-
check.png'}">Galeria de imagenes</a><!-- menuvoice with js action, image and submenu-->
</div>
<div id="submenuIMG" class="menu">
<a class="{img: 'icon_14.png'}">Imagen 1</a>
<a class="{img: '24-tag-add.png'}">Imagen 2</a>
</div>
<div id="menu_2" class="menu">
<a data-type="title" class="{action: 'document.title=(\'menu_2.1\')', img:
73
'icon_13.png'}">Logicos y Fisicos</a>
<a class="{action: 'document.title=(\'menu_2.2\')'}">Hardware</a>
<a >Softwate</a>
<a class="{img: 'icon_14.png'}">Redes y Comunicación</a>
<a data-type="separator"> </a>
<a class="{action: 'document.title=(\'menu_2.4\')'}">Venta de Preductos</a>
</div>
<div id="menu_3" class="menu">
<a data-type="title" class="{img: '02.png'}">Contenido</a>
<a class="{action: 'document.title=(\'menu_2.4\')'}">Recursos Humanos</a>
<a id="aaa" >Recursos Materiales</a>
<a class="{action: 'document.title=(\'menu_3.4\')'}">Equipos</a>
</div>
<div id="menu_4" class="menu">
<a data-type="title" class="{img: '03.gif'}">Seleccione una Opción</a>
<a img: 'icon_14.png'>Recomendaciones</a>
<a img: 'icon_14.png'>Certificado de Calidad</a>
</div>
</nav>
<!--FIN MENU PRINCIPAL-->
Listado 4.1.7 Estructura básica del menú principal.
Ahora insertamos el código para el estilo se nota que aquí hay código CSS y JavaScript
pero es que en verdad si se puede poner este código para establecerlo desde el index.
<script type="text/javascript">
$(function(){
$(".myMenu").buildMenu({
template:"menuVoices.html",
additionalData:"pippo=1",
menuWidth:250,
openOnRight:false,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:true,
fadeInTime:300,
fadeOutTime:100,
adjustLeft:2,
minZindex:"auto",
adjustTop:10,
opacity:.95,
shadow:false,
hoverIntent:200,
openOnClick:false,
closeOnMouseOut:true,
closeAfter:500,
submenuHoverIntent:100
});
74
});
</script>
</head>
<body>
<header>
Listado 4.1.8 Creando el estilo de nuestro menú principal.
Creamos los links para agregarlos dentro de nuestra cabecera y así integrarlos a nuestro
proyecto para concluir e ir probándolo paso a paso, porque siempre es necesario ir editándolo o
personalizándolo o en su defecto viendo las fallas para que quede óptimo. Si es necesario se
integran los archivos básicos o todos, depende de la preferencia personal.
<link rel="stylesheet" href="/comp flash/cuss/menu_red.css"/>
<script src="/comp flash/js/mbMenu.js"></script>
Listado 4.1.9 Links para el menú principal.
Ahora podemos apreciar el resultado de nuestro menú principal que nos brinda mucho
más profesionalismo a nuestra página web.
Figura 4.1.10 Menú principal.
La razón por la cual escogimos esta forma de menú es porque nos resulta más profesional
que hacerlo en su totalidad, son formas de complementar nuestra investigación, pero a
continuación haremos un menú que sea hecho por nosotros para perfeccionar lo aprendido.
Menú Lateral Izquierdo
Empezaremos a crear el menú izquierdo (según nuestra visión), para ello definimos los
enlaces a tratar: 1) Quienes Somos 2) Misión 3) Visión y 4) Ubicación. Escribimos en
Index.html a continuación de lo anterior el siguiente código:
<section id="menuizquierda">
<nav id="menulateral">
<ul>
<li><a href="#" id="quienessomos">¿QUIENES SOMOS?</a></li>
<li><a href="#" id="mision" >MISION</a></li>
<li><a id="vision">VISION</a></li>
75
<li><a href="#" id="ubicacion">UBICACION</a></li>
</ul>
</nav>
</section>
Listado 4.1.10 Código HTML para crear el menú izquierdo.
Lo que hicimos en el listado 5.6 es crear la sección con el id menuizquierda para indicar
cuál es y darle diseño, lo mismo hacemos con el <nav> y su id menulateral para adherir los <ul>
con los <li> y ahí agregamos los enlaces antes mencionados en letras mayúsculas, ahora nos toca
darle estilo en estilos.css; ahí insertamos el siguiente código:
#menuizquierda{
margin: 0 1em 0 0;
overflow: hidden;
width: 20%;}
Listado 4.1.11 Estilos CSS para el menú izquierdo.
En la sección del #menuizquierda establecemos un margen, un ancho y la ubicación del
menú para un correcto orden preestablecido dentro de la caja. Tambien le damos estilo a nuestro
<nav> para irlo personalizando.
#menulateral
{
background: rgba(0,0,0,1);
border-radius: 1.5em;
box-shadow: rgba(255,255,255,2) 0px 0px 1.5px 2px;
color: #D7DF01;
font-family: Copperplate Gothic Bold;
list-style-type: lower-roman;
margin: 1em 2% 4em 2%;
padding: 0.1em 0;
text-align: left;
width: 96%;
}
#menulateral ul a:hover
{
background-color: rgba(255,255,255,0.8);
border-radius: 0.5em;
color: blue;
}
#menulateral ul li
{
list-style: square;
margin: 0 0 0.5em 0;
}
#menulateral ul li a
{
color: yellow;
display: block;
76
list-style: square;
text-decoration: none;
width: 100%;}
Listado 4.1.12 Estilo para el #menulateral.
En los primeros capítulos explicamos todas las etiquetas y estilos ahora solo los ponemos
en práctica, en este listado le dimos estilo a cada elemento dentro del menú en su defecto. El
resultado de nuestro menú izquierdo queda así:
Figura 4.1.11 Menu Izquierdo (lateral).
Contenido
Vamos a crear una sección para insertar texto conceptual, que nos brinde la oportunidad
de mostrar a los clientes los detalles de la empresa; como por ejemplo: misión, visión, etc…
Comenzamos ingresando el código:
<section id="contenido">
<img id="bienvenida" src="/compuflash/img/bienvenida.png"/>
<p> COMPUFLASH se enorgullece que haya tomado en cuenta nuestros servicios, le
damos la más cordial bienvenida a nuestra página web; en donde usted podrá informarse de
todos nuestros servicios, productos, novedades, etc... Que tenga una experiencia absolutamente
grata y no se olvide de dejar sus pedidos, así como recomendaciones.
</p>
</section>
Listado 4.1.13 Código para la sección contenido.
Como podemos visualizar creamos la sección contenido y le adherimos una imagen y
texto de bienvenida, para que el momento en el que el usuario ingresa a la página vea una
interface amigable. Nos toca darle un estilo para eso ponemos el siguiente código en estilos.css
como ya conocemos:
#contenido
{
background: rgba(300,300,300,1);
border-radius: 1.5em;
box-shadow: rgba(80,80,80,9.5) 5px 5px 10px;
color: black;
font-family: arial;
font-size: 17px;
margin: 2em 1em 2em 0em;
padding: 0 1em 0 1em;
text-align: justify;
77
text-align: center;
width: 50%;
}
#contenido p
{
text-align: justify;
}
#contenido img
{
margin: 1em 0 0 0;
}
#contenido figcaption
{
margin: 0 0 1em 0;
}
Listado 4.1.14 Estilo para la sección contenido.
Para que el texto y las imágenes que se verán en el contenido varíen necesitamos crear
código JavaScript que le dé el dinamismo que requerimos:
$(document).on("ready", inicio);
function inicio()
{
var omensaje=escribir();
setInterval(omensaje,100);
$("#inicio").on("click", transicion);
$("#mision").on("click", misionVision);
$("#vision").on("click", misionVision);
$("#quienessomos").on("click", misionVision);
$("#ubicacion").on("click", misionVision);
}
function misionVision(item){
var opcion=item.currentTarget.id;
if(opcion=="mision"){
texto='<img id="mision" src="img/mision.png"/>'+
'<p id="misiontexto" >Brindar servicios profesionales de informática con la más alta
calidad y profesionalismo'+
'a nuestros clientes, utilizando las últimas tecnologías en software, hardware de punta y
personal'+
'eficiente con amplia experiencia. Para un mejor trato y resultado de nuestros trabajos.
Siempre a la orden de nuestros '+
'clientes porque nuestro prestigio nos precede. De una manera profesional y satisfactoria
porque nuestro trabajo es nuestra'+
'pasión le brindamos a usted la mayor garantia de un trabajo garantizado para todo tipo obra
a realizar.</p>';
$("#contenido").html(texto);
$("#contenido").css({"background-color":"white", "box-
shadow":"rgba(80,80,80,9.5) 5px 5px 10px"});
$("#mision").css({"color":"red"});
$("#vision").css({"color":"yellow"});
78
$("#ubicacion").css({"color":"yellow"});
$("#quienessomos").cuss({"color":"yellow"});
}
else if(opcion=="vision"){
texto='<img id="vision" src="img/vision.png"/>'+
'<p>Trabajamos bajo un esquema de mejora continua e innovación; nos enfocamos en detectar
necesidades y generar nuevos'+
'cservicios dentro de nuestro mercado, con lo cual buscamos consolidarnos como la empresa más
importante de asistencia logica'+
' y tecnica en nuestra ciudad, fomentando el empleo y generando crecimiento personal y
profesional de nuestros trabajadores.'+
' Las asociaciones juegan un rol fundamental en la solución y practica de problemas o daños en
los clientes, puesto que es más'+
' sencillo valerse de la experiencia adquirida por tantos años </p>';
$("#contenido").html(texto);
$("#contenido").css({"background-color":"white",
"box-shadow":"rgba(80,80,80,9.5) 5px 5px 10px"});
$("#vision").css({"color":"red"});
$("#mision").css({"color":"yellow"});
$("#ubicacion").css({"color":"yellow"});
$("#quienessomos").css({"color":"yellow"});
}
else if(opcion=="quienessomos"){
texto='<img id="quienessomos" src="img/quienessomos.png"/>'+
'<p> Fundada en 1998, por un grupo de Ingenieros recién graduados en la UCACUE, con el
nombre de DGACNET'+
' empezó la empresa a funcionar; con el paso del tiempo se fueron formando otras empresas
por los socios y'+
' de esa manera se reestructura para dar paso a la nueva empresa denominada:
<mark>COMPUFLASH "SOLUCIONES
INFORMATICAS";</mark>'+
' La cual es una empresa con vocación de servicio, cuyo objetivo es atender las demandas de
sus '+
' clientes respecto a sus sistemas e infraestructuras informáticas y proveer a las mismas de
soluciones profesionales ante '+
' los imparables cambios que experimentan las Tecnologías de la Información.'+
' COMPUFLASH consolida su permanencia en el mercado a través de un equipo
multidisciplinar experto gracias a que ofrece '+
' cobertura a las nuevas necesidades generadas en el mundo informático. </p>';
$("#contenido").html(texto);
$("#contenido").css({"background-color":"white","box-
shadow":"rgba(80,80,80,9.5) 5px 5px 10px"});
$("#quienessomos").css({"color":"red"});
$("#vision").css({"color":"yellow"});
$("#mision").css({"color":"yellow"});
$("#ubicacion").css({"color":"yellow"});
}
else if(opcion=="ubicacion"){
79
texto='<iframe
src="https://mapsengine.google.com/map/embed?mid=znnsq1cc8Uxo.kUUR__DvXO1w"
width="640"
height="480"></iframe>'
$("#contenido").html(texto);
$("#contenido").css({"background-color":"black","box-shadow":"none"});
$("#ubicacion").cuss({"color":"red"});
$("#vision").cuss({"color":"yellow"});
$("#mision").cuss({"color":"yellow"});
$("#quienessomos").css({"color":"yellow"});
}
$("#contenido").html(texto);
}
Listado 4.1.15 Código JavaScript para crear un proceso de cambio de texto e imágenes dentro de la sección
contenido.
Cada vez que se haga click en el link por ejemplo Misión, saldrá la imagen y el texto
respectivo; se crea la función y mediante un bucle se va determinando un valor condicionado por
para cada caso. Aquí también se incluye la ubicación debido a que también se visualizara en esta
sección pero con un diseño diferente; como se muestra en el listado anterior. El resultado será el
siguiente:
Figura 4.1.12 Interface de bienvenida y la opción de Quienes Somos.
80
Figura 4.1.13 Opción de Misión y Visión del menú izquierdo.
Figura 4.1.14 Opción Ubicación Geográfica del local.
Imágenes Dinámicas
Vamos a crear una galería de imágenes con efectos de cambio de figuras dinámicas, para
ello necesitamos fijar las imágenes e igualar el tamaño de cada una para crear un efecto uniforme
a la hora de la presentación. Empezamos creando el código:
<aside id="derecha">
<figure id="imagenes">
<div id="FotosDerecha">
<img src="/compuflash/img/galeria.jpg"/>
<img src="/compuflash/img/galeria2.jpg"/>
<img src="/comp flash/img/galeria3.jpg"/>
</div>
<figcaption>GARANTIA DE UN TRABAJO EFICIENTE</figcaption>
</figure>
</aside>
Listado 4.1.16 Creación del código para la sección derecha de la galería de imágenes dinámicas.
81
Ahora ingresamos código CSS para dar estilo a nuestro <aside>:
#derecha
{
font-size: 16px;
margin: 2em 0 0 1em;
padding: 0;
text-align: center;
width: 20%;
}
#derecha figure img
{
height: 250px;
width: "100%";
}
Listado 4.1.17 Estilo de la galería de imágenes derecha dinámicas.
Para hacer la galería dinámica necesitamos código JavaScript:
function Desplazar(){
$("#FotosDerecha").cycle({fx:'zoom'});
}
Desplazar();
setInterval(fotos,5000);
Listado 4.1.18 Función desplazar para crear dinamismo para el intercambio de imágenes.
Hecho esto vemos el resultado final de nuestra galería de imágenes dinámicas:
Figura 4.1.15 Galería de imágenes dinámica derecha.
Servicio técnico a domicilio
Esta vez crearemos la sección de servicio técnico, para ello debemos crear una imagen en
un editor de texto como en nuestro caso Photoshop CS6 indicando en ella: el servicio a dar a los
clientes, una imagen comercial, teléfonos, etc…
82
Figura 4.1.16 Propaganda de servicio técnico a domicilio.
Ahora necesitamos agregarle un efecto dinámico en la imagen, lo primero es crear una
imagen con un destello en Photoshop; luego crear otras similares pero con el destello en
diferentes lugares de la imagen para crear una secuencia de imágenes para crear la animación.
Figura 4.1.17 Secuencia de imágenes con el destello diagonal.
Ahora nosotros hemos utilizado la página web Picasion para agregarle un efecto rápido y
sencillo; para ello seguimos los siguientes pasos:
1) Dirígete al sitio web de Picasion, sube las imágenes que quieras animar de tu computadora,
cámara web o directamente de la web.
2) Ajusta el tamaño deseado y la velocidad para tu animación en el menú desplegable debajo del
cuadro de carga. Haz clic en Crear una animación para generar el GIF.
3) Utiliza los códigos de incrustación generados para mostrar tu animación en páginas Web y
blogs, o guarda el archivo en tu computadora con las opciones de pantalla.
83
Figura 4.1.18 Interface para crear el gif animado en Picasion.
Al terminar el efecto nos toca el último paso para esta sección, hacer a la imagen un
enlace para mostrar otra página web en donde se explique detalladamente los servicios que
ofrece la empresa; escribimos el siguiente código en el index.html ubicándolo debajo del menú
izquierdo.
<figure>
<a href="proformas/domicilio.htm"><img src="/comp flash/img/domicilio6.gif"/></a>
</figure>
Listado 4.1.19 Creando la sección Servicio técnico y el enlace que conlleva.
Como podemos observar el enlace lleva a la página web domicilio.htm para ello creamos
esta página en Word editando el diseño en general para luego guardarlo como una página web.
Luego solo nos queda visualizarlo e ir adaptándolo porque en algunos explorados va cambiando
la forma de mostrarlo.
Figura 4.1.19 Ubicación de la sección Servicio Técnico y archivo Word con la información del
Servicio Técnico.
84
Oferta o Promoción
Buscamos una imagen gif animada para colocarla en esta sección indicando que existe
dicha promoción y para llamar la atención del usuario, además agregamos un texto con
<figcaption> para apoyar la promoción; le damos un borde redondeado y le hacemos un enlace
como la sección anterior para crear otra página web que de las especificaciones del equipo o
dispositivo que este de oferta. Dicho esto empezamos con el código:
<section id="promocion">
<figure>
<a href="proformas/promocion.htm"><img src="/compuflash/img/promocion.gif"/>
<figcaption>LAPTOPS EN OFERTA VALIDO SOLO POR UN MES</figcaption>
</a>
</figure>
</section>
Listado 4.1.20 Creando la sección de oferta dentro del body.
Si tenemos la información necesaria para la promoción empezamos a crear nuestra página
web haciendo un archivo Word pero guardándolo como página web como anteriormente ya lo
realizamos; entonces nos quedará así:
Figura 4.1.20 Sección Promoción y Pagina web con la especificación.
Marcas con las que trabajamos
Tenemos que mostrar una lista de productos que poseemos y que podemos obtener
mediante nuestros distribuidores, para que los clientes al ingresar a la sección de marcas puedan
elegir la que le gusta y su producto preferido; esa es la idea principal, por tal motivo empecemos
a hacerla realidad.
<figcaption id="marcatitulo">MARCAS CON LAS QUE TRABAJAMOS</figcaption>
<section id="marca">
85
<figure id="foto1" class="marca" >
<a href="proformas/aoc.htm"><img src="/comp flash/img/foto1.jpg"/></a>
</figure>
<figure id="foto2" class="marca">
<a href="proformas/canon.htm"><img src="/comp flash/img/foto2.jpg"/></a>
</figure>
<figure id="foto3" class="marca">
<a href="proformas/dell.htm"><img src="/comp flash/img/foto3.jpg"/></a>
</figure>
<figure id="foto4" class="marca">
<a href="proformas/epson.htm"><img src="/comp flash/img/foto4.jpg"/></a>
</figure>
<figure id="foto5" class="marca">
<a href="proformas/genius.htm"><img src="/comp flash/img/foto5.jpg"/></a>
</figure>
<figure id="foto6" class="marca">
<a href="proformas/hp.htm"><img src="/comp flash/img/foto6.jpg"/></a>
</figure>
<figure id="foto7" class="marca">
<a href="proformas/intel.htm"><img src="/comp flash/img/foto7.jpg"/></a>
</figure>
<figure id="foto8" class="marca">
<a href="proformas/kingston.htm"><img src="/comp flash/img/foto8.jpg"/></a>
</figure>
<figure id="foto9" class="marca">
<a href="proformas/lexmark.htm"><img src="/comp flash/img/foto9.jpg"/></a>
</figure>
<figure id="foto10" class="marca">
<a href="proformas/samsung.htm"><img src="/comp flash/img/foto10.png"/></a>
</figure>
<figure id="foto11" class="marca">
<a href="proformas/sony.htm"><img src="/comp flash/img/foto11.jpg"/></a>
</figure>
<figure id="foto12" class="marca">
<a href="proformas/toshiba.htm"><img src="/comp flash/img/foto12.jpg"/></a>
</figure>
<figure id="foto13"img class="marca">
<a href="proformas/windows.htm"><img src="/comp flash/img/foto13.jpg"/></a>
</figure>
<figure id="foto14" class="marca">
<a href="proformas/linux.htm"><img src="/comp flash/img/foto14.jpg"/></a>
</figure>
</section>
Listado 4.1.21 Creando el código para la sección marcas.
En el listado anterior lo que hicimos es crear la sección marcas con enlace a una nueva
página web en donde se muestre los productos de cada marca respectivamente; se ha puesto la
imagen de cada marca para que se pueda diferenciar y se le ha dado un id para independizarlos, y
por último se hace referencia a la clase marca [.marca{width: 14%;}] en donde se fijan las
imágenes a un porcentaje para hacer la página responsive (ósea, que se pueda minimizar de
86
forma proporcional; como se dijo en anteriores capítulos). Continuamos con el estilo de esta
nueva sección para ello introducimos el siguiente código en nuestro estilo.css:
#marca
{
background: -webkit-linear-gradient(top, #000000 50%, 3D0202 90%);
background: -moz-linear-gradient(top, #000000 50%, 3D0202 90%);
border: white 2px solid;
border-radius: 1.5em;
display: inline-block;
list-style: none;
margin: 1em 0 3em 0;
padding: 1em;
text-align: center;
text-decoration: none;
vertical-align:top;
width: 90%;
}
#marca ul li a
{
text-decoration: none;
}
#marca figure
{
padding: 0 -0.3em 1em 0;
margin: 0 -0.3em 1em 0;
}
#marcatitulo
{
color: white;
font-family: Mongolian Baiti;
font-size: 24px;
margin: 1em 0 0 0;
padding: 3em 0 -1em 0;
text-align: center;
}
Listado 4.1.22 Estilo CSS para la sección marcas.
Cada vez que el usuario haga clic en el enlace de la imagen respectiva de cada marca se
conducirá a una página web, que nos dará el detalle de los productos de cada marca; para esto
tenemos que crear esas páginas, darles un estilo diferente a cada una y llenarlas con los ítems
contenedores. Se crean las páginas en Word como se hicieron en servicio a domicilio y
promoción, y luego el enlace respectivo como esta en el listado 5.17. Para ello solo creamos el
archivo en Word, le damos estilo, llenamos la hoja/s con los datos y lo guardamos como página
web; hecho esto el resultado queda de la siguiente manera:
87
Figura 4.1.21 Sección Marcas con las que trabajamos.
Videos
Para que la página quede mucho más profesional hemos puesto videos, que sirvan como
propaganda y se puedan compartir en las diferentes redes sociales y para dar una introducción de
los servicios que ofrecemos. Para ello utilizamos la etiqueta <video>.
88
<section id="video">
<h1>COMPUFLASH A LA ORDEN</h1>
<video controls="controls" width="360" height="300" preload poster="img/poster.jpg">
<source src="/comp flash/mtm/hardware1.webm" type="video/webm" />
<source src="/comp flash/mtm/hardware1.ogg" type="video/ogg" />
<source src="/comp flash/mtm/hardware1.mp4" type="video/mp4" />
</video>
</section>
<section id="video2">
<h1>COMPUFLASH AL DIA</h1>
<video controls="controls" width="360" height="300" preload poster="img/poster.jpg">
<source src="/comp flash/mtm/hardware.webm" type="video/webm" />
<source src="/comp flash/mtm/hardware.ogg" type="video/ogg" />
<source src="/comp flash/mtm/hardware.mp4" type="video/mp4" />
</video>
</section>
Listado 4.1.23 Código para la creación de los videos de la página web.
Se ha creado el código para dos videos: Compuflash a la orden y Compuflash al dia,
Estos especificaran todos los servicios y posibilidades que ofrece Compuflash como empresa de
sistemas informáticos y hardware. Se le ha dado un tamaño y un poster de presentación creado
en Photoshop, se ha puesto en diferentes formatos para que cojan en los navegadores principales.
Para crear el sonido utilizamos una aplicación de lectura de texto para crear el sonido del
video, este es Balabolka; establecemos el texto, elegimos la voz y guardamos el archivo como
video.wmv.
Figura 4.1.22 Interface de Balabolka con el texto elegido.
89
Para completar el sonido agregamos unos efectos como una explosión y sonido
instrumental en el primer video y un efecto de avión despegando en el segundo video, luego
mezclamos todo en Nero SoundTrax, como se puede ver a continuación:
Figura 4.1.23 Interface de Nero SoundTrax con los sonidos utilizados.
Para terminar exportamos a archivo de audio guardándolo como .wmv porque es el
formato reconocido y estandart de Windows. Ya definimos el sonido ahora crearemos una
presentación en PowerPoint especificando las imágenes (normales y gifs animados para la
interpretación de los efectos) y el sonido que ya hicimos, creamos la secuencias de efectos de
entrada, énfasis y salida en algunos casos y guardamos todo como video de Windows media para
subirlo a la página web con el código antes especificado.
90
Figura 4.1.24 Presentación realizada en PowerPoint.
Como resultado final, concluidos los videos y subidos a la página se verán de la siguiente
manera:
Figura 4.1.25 Videos subidos a la página principal.
Enlaces de redes sociales.
Como ya sabemos las redes sociales se ha convertido en un fenómeno mundial por tal
motivo es necesario tener cuentas que nos ayuden a comunicarnos con nuestros clientes de una
forma secundaria ya que no es lo mismo que tener una página web propia, por eso se ha creado
esta sección de enlaces a las principales redes sociales. Creamos enlaces a Yahoo, Twitter,
Outlook y Facebook:
91
Figura 4.1. 26 Paginas públicas más conocidas para crear los enlaces.
Ahora nos toca hacer los enlaces creando el código necesario, para ello definimos en
orden los enlaces:
<nav id="piedepagina">
<figure>
<figcaption id="efecto">
<ul>
<li>
<a href="http://profile.yahoo.com/WXUSEMFTSY2FYUI5DHZKDBKKQY/"
id="recomendaciones" >
<figure>
<img src="/comp flash/img/yahoo.png" width="100" height="55"/>
<figcaption>YAHOO</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://twitter.com/COMPUFLASH4" id="enlaces">
<figure>
<img src="/comp flash/img/enlaces.png" width="180" height="40"/>
<figcaption>TWITTER</figcaption>
</figure>
</a>
</li>
<li>
<ahref="https://snt150.mail.live.com/default.aspx?id=64855&owa=1&owasuffix=owa%2f"
92
id="outlook" >
<figure>
<img src="/comp flash/img/outlook.png" width="100" height="40"/>
<figcaption>OUTLOOK</figcaption>
</figure>
</a></li>
<li><a href="https://www.facebook.com/compuflash.company.9" id="facebook">
<figure><img src="/comp flash/img/facebook.png" width="100" height="38"/>
<figcaption>FACEBOOK</figcaption></figure></a>
</li>
</ul></figcaption></figure>
</nav>
Listado 4.1.24 Código creado para la sección pie de página.
Luego le damos un estilo y para ello crearemos una plataforma con fondo, borde en
imagen y además le agregaremos efectos a las imágenes (dar la vuelta en forma circular a las
manecillas del reloj) como al texto (aumenta el zoom de cada letra) en cada elemento:
#piedepagina
{
list-style: none;
margin: 3em auto 0 auto;
width: 80%;
}
#piedepagina img
{
width: 20%;
}
#piedepagina ul
{
background-image: url("../img/fondo.jpg");*/
list-style: none;
text-align: center;
border: 15px;
border-image: url("../img/fondo.jpg") 40 stretch;
}
#piedepagina ul li
{
text-decoration: none;
display: inline-block;
margin: 0.5em 0;
width: 22%;
}
Listado 4.1.25 Estilo predefinido para la sección pie de página.
Realizado esto vemos el resultado en nuestra página web, claro se puede ir modificando
los valores para que vaya quedando como mejor se visualiza:
93
Figura 4.1.27 Enlaces a las paginas publicas más utilizadas por los usuarios.
Finalización del Pie de Página
Para complementar el pie de página le agregaremos un botón para compartir en Facebook
nuestra página web, esto hará que se extienda la publicidad de la empresa en cuestión.
Agregamos el código en nuestro pie de página:
<section>
<button><a href="http://www.compuflash.com"
data-layout="button_count" send="true">
Compartir en Facebook</a></button>
</section>
Listado 4.1.26 Código para compartir en Facebook.
La etiqueta <button> nos sirve para crear el botón estándar en HTML5, se crea el enlace
y la cuenta de las comparticiones; y por último el texto que aparecerá en el botón.
Ahora crearemos un texto del copyright para cuidar los derechos de autor de nuestra
empresa empleadora, Para ello creamos el código al final de nuestro pie de página:
<figure id="copyright">
<img src="/comp flash/img/copyright.png"/>
<figcaption id="derechosreservados">Derechos Reservados 2014</figcaption>
<figcaption id="derechosreservados2">La página, el logo y cualquier producto de
COMPUFLASH, son marcas registradas de COMPUFLASH. Solamente pueden ser
intervenidos por sus representantes.
</figcaption>
</figure>
Listado 4.1. 27 Copyright 2014 Compuflash.
Hecho esto le añadimos un estilo para complementar y diseñar el fin del pie de página:
#copyright
{
margin: 2em 4em;
color: white;
}
Listado 4.1.28 Estilo de Copyright.
Terminado nuestro pie de página el resultado quedará de la siguiente manera:
94
Figura 4.1. 28 Pie de página.
Ítems del Menú Principal
Contacte con nosotros
En el primer bloque Empresa/Origen tenemos luego como primer enlace la opción
Contacte con nosotros; lo que se quiere hacer aquí es crear una página básica en donde este como
contenido en el medio los campos de contáctenos: Nombre, Email, Asunto y Mensaje. Así el
usuario puede comunicarse con nosotros para cualquier solicitud o recomendación y por ultimo
hacemos un botón Enviar para que nos llegue un email a nuestro dominio y podamos responder.
Para esto creamos una nueva página web de la original index.html poniéndole el nombre
Contacto, procedemos a eliminar los campos que no nos hagan falta como el contenido
específico para poder poner ahí los campos de contacto. Escribimos el código para crear la
sección contáctenos:
<section id="contenido">
<img id="contactoicono" src="/comp flash/img/contactenos.jpg"/>
<figcaption id="contactotitulo"><strong>¡CONTACTENOS!</strong></figcaption>
<form id="contacto" method="POST" action="/comp flash/php/mailCompuflash.php">
<table>
<tr><td>
<label class="espacio" name="lblNombre">Nombre:</label>
</td><td>
<input class="espacio" name="nombre" type="text" placeholder="Ingrese su nombre"></input>
</td></tr>
<tr><td><label class="espacio" name="lblEmail">Email:</label>
</td><td>
<input class="espacio" name="email" type="text" placeholder="Ingrese su email"></input>
</td></tr><tr><td>
<label class="espacio" name="lblAsunto">Asunto:</label>
</td><td>
<input class="espacio" name="asunto" type="text" placeholder="Ingrese su asunto"></input>
</td></tr><tr><td>
<label class="espacio" name="lblMensaje">Mensaje:</label>
</td><td>
<textarea name="mensaje" class="espacio" rows="3" cols="30" placeholder="Ingrese su
mensaje"></textarea>
95
</td></tr><tr>
<td colspan="2">
<input id="botonenviar" name="boton" type="submit" value="Enviar"></input>
<td>
</tr>
</table>
</form>
</section>
Listado 4.1.29 Código para crear la sección Contáctenos.
En este listado se puede apreciar que se ha creado unas etiquetas como sus campos
respectivos con un mensaje que indica lo que tiene que hacer el usuario, para así darle la
facilidad de entenderlas y por último el botón de Enviar y la imagen para hacerle a esta sección
más amigable; para que así, se mande el mensaje y los datos del cliente. Luego le damos un
estilo para personalizarlo, con las filas, las columnas y los espacios que vayan ocupando:
#botonenviar
{
margin: 1em 1em 3em 7em;
padding: 0 3em 0 3em;
}
#contacto
{
width: 100%;
margin: 0 0 0 6em;
padding: 0 2em;
text-align: left;
}
Listado 4.1.30 Estilo de la sección Contacte con nosotros.
Terminado esto solo nos falta crear el enlace en el menú principal en la sección
correspondiente para vincularlo a la nueva página Contacto (<a
href="/compuflash/contacto.html" >Contacte con nosotros</a>) y vamos a la imagen que nos
muestre como quedo nuestra sección Contacte con nosotros:
Figura 4.1.29 Sección Contáctenos resultante.
96
Noticias
En esta sección pondremos un acordeón que nos muestre unas imágenes con su
respectivo texto, dándonos noticias actualizadas del mundo informático; para esto buscamos en
la web el acordeón que nos guste y que se apegue a los requerimientos especificados (Slidorion).
Procedemos a descargarnos los archivos correspondientes, y el siguiente paso es crear una nueva
página básica de la principal con la cabecera y el pie de página para adaptar las noticias en el
medio de estos, la nueva página se llamara noticias.html, hacemos el enlace en la página
principal: <a href="/compuflash/noticias.html">Noticias</a>;
Para tener acceso directo a ella, luego creamos los enlaces a los archivos CSS y JS que son
necesarios para ejecutar el acordeón:
<link rel="stylesheet" href="/comp flash/cuss/estyle.css"/>
<link rel="stylesheet" href="/comp flash/cuss/slidorion.css" />
<link rel="stylesheet" href="/comp flash/cuss/reset.css" />
<script src="/comp flash/js/jquery.js"></script>
<script src="/comp flash/js/jquery.easing.js"></script>
<script src="/comp flash/js/jquery.slidorion.min.js"></script>
Listado 4.1.31 Referencias a los archivos CSS y JS.
Luego ingresamos el código HTML en el body de la página web noticias:
<div id="header"><h1>NOTICIAS</h1></div>
<div id="slidorion" class="slidorion">
<div class="slider">
<div class="slide"><img src="/comp flash/img/noticias/ibm.jpg" /></div>
<div class="slide"><img src="/comp flash/img/noticias/seguridad.jpg" /></div>
<div class="slide"><img src="/comp flash/img/noticias/lentes.jpg" /></div>
</div>
<div class="accordion" id="acordion">
<div class="header">SUPERCOMPUTADORA</div>
<div class="content">
<p>IBM anunció el jueves que invertirá más de mil millones de dólares en su
supercomputadora Watson para crear su
propia división mercantil y una nueva sede en el corazón de Nueva York.
La empresa de computación con sede en Armonk, dijo que la nueva unidad de la firma
estará dedicada al desarrollo y
comercialización del proyecto...</p>
<p>IBM TENDRA SUPERCOMPUTADORA CON DIVISION PROPIA</p>
</div>
<div class="header">INSEGURIDAD INFORMATICA</div>
<div class="content">
<p>En la actualidad se puede tener acceso a nubes híbridas que combinan servicios
privados y públicos
Se puede elegir una solución que permita integrar toda la información de la compañía
sin correr el riesgo de espionaje o
robo de información, o contratar una Nube que sea amigable con los usuarios.</p>
<p>INSEGURIDAD INFORMATICA PROPICIA USO DE NUBES PRIVADAS</p>
</div>
97
<div class="header">TEGNOLOGIA DE PUNTA</div>
<div class="content">
<p>Las Google Glass, conectadas a Internet, responden a órdenes de voz y, a veces a
simples guiños para tomar fotos y
hacer videos, o leer y enviar mensajes, por ejemplo, con otras muchas aplicaciones en
desarrollo. El dispositivo es
considerado como uno de los productos más prometedores en la electrónica.</p>
<p>LENTES INTERACTIVOS GOOGLE GLASS SERAN COMERCIALIZADOS</p>
</div></div></div>
<div id="container" style="text-align:center">
<h3>Noticias más importantes en el mundo informático</h3>
</div>
Listado 4.1. 32 Código HTML para la creación de la sección Noticias.
Aquí hemos ingresado los títulos, subtítulos, imágenes y los textos correspondientes a las
noticias, solo es cuestión de darnos cuenta de los campos específicos; y por ultimo ponemos el
código JavaScript debajo del pie de página:
<script>
$(function() {
$('#slidorion').slidorion();
});
</script>
Listado 4.1.33 Listado 4-1-33 Código JavaScript para la sección Noticias.
Solo nos queda personalizarlo si queremos dejarlo a nuestra manera para ello buscamos
los estilos y los cambiamos o agregamos estilo propio, Y veremos el resultado final en esta
imagen:
Figura 4.1.30 Resultado Final de la sección Noticias.
98
Galería de imágenes
En esta sección expondremos las imágenes de la empresa su presidente y socios, así
como la infraestructura de la misma y hasta empleados laborando. Para este propósito
necesitamos un acordeón el cual nos toca buscar en la web para descargarlo y adaptarlo a nuestra
página web, así como lo hicimos con el menú principal. Para este caso elegimos una galería
lateral con una presentación maximizada a un lado, lo que tenemos que hacer es descargar los
archivos CSS (galleriffic-2.css, basic.css) y JS (jquery.galleriffic.js, jquery.opacityrollover.js,
jquery-2.0.3.min.js) que necesitamos enlazándolos en una copia de index.html:
<link rel="stylesheet" href="/comp flash/cuss/basic.css" type="text/cuss" />
<link rel="stylesheet" href="/comp flash/cuss/galleriffic-2.css" type="text/cuss" />
<script type="text/javascript" src="/comp flash/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="/comp flash/js/jquery.opacityrollover.js"></script>
<script src="/comp flash/js/jquery-2.0.3.min.js"></script>
Listado 4.1.34 Enlaces a los archivos CSS y JS de la galería.
Pero esta vez dejando solo la cabecera y el pie de página para introducir la galería en la
mitad de la página básica, la nueva página se llamara galería.html por lógica; la enlazamos en el
menú principal para tener acceso a ella (<a href="/compuflash/galeria.html">Galeria de
imagenes</a>). Después escribimos el código HTML en la mitad de la página para ver la galería:
<div id="page">
<div id="container">
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs">
<ul class="thumbs noscript">
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/a.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/1.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/b.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/2.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/c.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/3.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
99
<a class="thumb" name="opt" href="/comp flash/img/galeria/d.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/4.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/e.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/5.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/f.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/6.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/g.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/7.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/h.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/8.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/i.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/9.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/j.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/10.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/k.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/11.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/l.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/12.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/m.jpg"
title="LAPTOP">
<img src="/comp flash/img/galeria/13.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
100
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/n.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/14.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
<li>
<a class="thumb" name="opt" href="/comp flash/img/galeria/ñ.jpg" title="LAPTOP">
<img src="/comp flash/img/galeria/15.jpg" alt="Foto 1" /></a>
<div class="caption">Ing. Walter Criollo</div>
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
Listado 4.1.35 Código HTML para la galería de imágenes.
Para terminar añadimos en la última parte debajo del pie de página el código JavaScript
para animar los clips de la galería de imágenes.
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').cuss({'width' : '300px', 'float' : 'left'});
$('div.content').cuss('display', 'block');
// Establecer un principio de opacidad y agregue
// Estilo adicional para efecto activable
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Inicialice Galleriffic Galería
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
101
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
Listado 4.1.36 Código JavaScript para la galería de imágenes.
De ahí vamos personalizándolo hasta que quede como nos guste; los cambios que se
realicen tendrán que ser hechos en los estilos CSS que referenciamos para nuestra galería. Al
aplastar la tecla F12 nos aparecerá el código HTML en la página web y para buscar sección por
sección vamos descubriendo los nombres respectivos, con darle clic al símbolo de lupa de
también obtenemos una referencia del sitio y luego podemos irle dando estilo como nos parezca.
Nuestra galería queda de la siguiente manera:
Figura 4.1.31 Galería de Imágenes de la empresa y el personal.
102
Para terminar este bloque del menú principal solo creamos un nuevo enlace que nos lleve
a la página principal con todos los ítems de la original (<a
href="/compuflash/index.html">Página Principal</a>), así cada vez que necesitemos volver
tengamos esta opción. Así hemos terminado este primer bloque del menú principal.
Figura 4.1.32 Bloque 1 del Menú Principal.
Segundo Bloque del Menú Principal
Hardware
Para esta sección necesitamos aprender a editar video para ello nos hemos descargado la
aplicación MAGIX Video deluxe 17 Premium, nos descargamos e instalamos la aplicación
dejándola a full para no tener problemas con las licencias; su interface es amigable y fácil de
ejecutar sus comandos. Para cualquier ayuda recurrimos al internet buscando lo que necesitamos,
que esencialmente es cortar, borrar sonido, desplegar y guardar en el formato .wmv de Windows
para no tener problemas con el formato; así sacamos lo que necesitemos de cualquier video
grabado por nosotros o editado de algún otro video.
Figura 4.1.33 Interface de Magix deluxe 17.
103
Teniendo el video necesitamos el sonido y para ello usamos la aplicación antes revisada
en los videos de la página principal que es Balabolca, ingresamos el texto que requerimos para la
sección Hardware y guardamos el sonido en formato .wma para luego juntarlos en el powerpoint
y asi tener los formatos requeridos por este programa, creando una presentación como lo hicimos
antes pero esta vez con video; guardamos en formato .wmv video para luego poder abrirlo con la
aplicación Easy HTML5 Video el cual nos convertira a los formatos requeridos para los
navegadores (OGG, MP4 y WEBM); el momento en que ya tenemos estos videos creamos una
nueva página base (cabecera, menú principal y pie de página). En medio de estos ingresaremos
nuestros video de Hardware, con el siguiente código:
<section id="videohardware">
<video controls="controls" width="660" height="600" preload
poster="img/poster2.png">
<source src="/compuflash/mtm/hardware11.webm" type="video/webm" />
<source src="/compuflash/mtm/hardware11.ogg" type="video/ogg" />
<source src="/compuflash/mtm/hardware11.mp4" type="video/mp4" />
<source src="/compuflash/mtm/hardware11.mp4" type="video/mp4" />
<source src="/compuflash/mtm/hardware11.mp4" type="video/mp4" />
<source src="/compuflash/mtm/hardware11.wmv" type="video/wmv" />
</video>
<h1>MANTENIMIENTO Y ARREGLO FISICO</h1>
</section>
Listado 4.1.37 Código para la sección de Hardware.
Creamos la sección videohardware y le damos luego un tamaño, colocamos un poster y
luego los videos con los diferentes formatos para que sea compatible con los diferentes
navegadores y le damos un título pero esta vez lo colocamos en la parte de abajo para ir
variando. Quedando de la siguiente manera:
Figura 4.1. 34 Sección Hardware de la pestaña Servicios que ofrecemos.
Software
104
La siguiente sección es Software y para ello realizamos los mismos pasos que hicimos
para Hardware, buscamos, editamos o grabamos el video que necesitamos; en esta sección por
ejemplo temas relacionados con software, estableciendo el video que vamos a utilizar y después
creamos el texto para ponerlo en la aplicación Balabolka que hará el sonido en formato .ama y
seguido uniremos todo en una presentación de inicio en PowerPoint, insertando el video y el
sonido y guardándolo como video; después hacemos el mismo video con otros formatos para que
salga en todos los navegadores. Creamos otra página base y agregamos el código de la etiqueta
video para terminar nuestra página software:
<section id="video software">
<video controls="controls" width="660" height="600" preload
poster="img/poster3.png">
<source src="/compuflash/mtm/software1.webm" type="video/webm" />
<source src="/compuflash/mtm/software1.ogg" type="video/ogg" />
<source src="/compuflash/mtm/software1.mp4" type="video/mp4" />
<source src="/compuflash/mtm/software1.mp4" type="video/mp4" />
<source src="/compuflash/mtm/software1.mp4" type="video/mp4" />
<source src="/compuflash/mtm/software1.wmv" type="video/wmv" />
</video>
<h1>MANTENIMIENTO Y ARREGLO LOGICO</h1>
</section>
Listado 4.1.38 Sección de Software.
Se crea el video con el control para el usuario, con su tamaño y poster, y por supuesto los
formatos de video; además el título pero en la parte de abajo. Y el resultado es el siguiente:
Figura 4.1.35 Sección Software de la pestaña Servicios que ofrecemos.
Redes y Comunicación
105
Para esta sección crearemos otro video como los anteriores para no cambiar el formato de
propaganda de los diferentes servicios que presta Compuflash en el área de Hardware, Software
y Redes, Seguimos los siguientes pasos:
Creamos el video grabándolo o editándolo en la aplicación Magix y lo guardamos como .wmv.
Hacemos el texto para redes y lo pegamos en Balabolka para crear el sonido en .wma.
En PowerPoint unimos los archivos con pequeña presentación para darle estilo personalizado,
agregando algún efecto que requiramos y lo guardamos como archivo de Windows Media
Player.
Por ultimo creamos los formatos para los diferentes navegadores en Easy HTML5 Video.
Ahora que ya tenemos el video hecho, ponemos el código para crear el video en la página
web redes.html básica que tenemos que crear como antes lo hicimos para hardware y software.
<section id="videoredes">
<video controls="controls" width="660" height="600" preload
poster="img/poster4.png">
<source src="/compuflash/mtm/redes1.webm" type="video/webm" />
<source src="/compuflash/mtm/redes1.ogg" type="video/ogg" />
<source src="/compuflash/mtm/redes1.mp4" type="video/mp4" />
<source src="/compuflash/mtm/redes1.mp4" type="video/mp4" />
<source src="/compuflash/mtm/redes1.mp4" type="video/mp4" />
<source src="/compuflash/mtm/redes1.wmv" type="video/wmv" />
</video>
<h1>INSTALACION, MANTENIMIENTO Y ARREGLO DE REDES</h1>
</section>
Listado 4.1.39 Sección de Redes y Comunicación
Ahora veamos cómo nos quedó la página redes.html con su interface:
Figura 4.1. 36 Sección Software de la pestaña Servicios que ofrecemos.
106
Venta de Productos
Para terminar este bloque del menú principal realizamos un listado de los productos de
venta en existencia tangible de la empresa, pues los otros productos de marca son ítems que se
pueden pedir para venderlos a los clientes. Para ello creamos una página web en Word y así
poder darle el estilo que queramos personalizándolo, dándole fondo, tipo de fuente, insertando un
logo; editado en Photoshop, etc…. Lo guardamos en Proformas dentro del proyecto para seguir
con el orden especifico y que todo esté en secuencia, por si se necesite buscar o editar algún
archivo.
Hacemos un inventario de los productos de la empresa en existencia, sin contar con los ya
vendidos por supuesto, y lo pasamos a la laptop para pegarlo en el archivo Word, dándole un
estilo específico y culminando así este informe de productos en existencia. Quedándonos de esta
manera:
Figura 4.1. 37 Página web de Catálogo de Productos en existencia.
Y de esta manera hemos terminado el bloque de Servicios que ofrecemos (Lógicos y
Físicos), aunque tome bastante trabajo hacer e editar los videos es necesario para crear una
página web amigable y de calidad lo demás son tareas que ya hemos visto y que no hay que
redundar en el texto para no hacerlo más largo.
Figura 4.1.38 Bloque de Servicios que ofrecemos del Menú Principal.
107
Bloque de Recursos y Capacidades
Recursos Humanos
Empezamos un nuevo bloque del menú principal llamado Recursos y Capacidades, el
primer ítem es Recursos Humanos; aquí estructuraremos toda la ramificación de Compuflash,
desde el gerente hasta los socios programadores. Para esto empezamos creando una página web
básica y la referenciamos a la página principal como a las demás (<a
href="/compuflash/personal.html">Recursos Humanos</a>). Iniciamos creando el código para
esta sección:
<section class="personal">
<figure>
<img src="/compuflash/img/personal/gerente.jpg">
</img>
<figcaption id="presidente">
<strong>ING. WALTER GUSTAVO CRIOLLO MALDONADO</strong></br></br><p>
Gerente de compuflash. Emprendedor de varias iniciativas de cambio a favor de la empresa
que sustentan el desarrollo productivo de la región.</p>
</figcaption>
</figure>
<section id="nivel2" >
<figure>
<img src="/compuflash/img/personal/disenio.jpg"></img>
<figcaption class="nombrepersona">
<strong>ING. GEOVANNI EUGENIO MOROCHO GUAZHIMA</strong></br></br>
<p> Ing. Diseño encargado de construir la interfaz de los sitios web de nuestros clientes.
Trabaja desde el año 2009 hasta la fecha creando los portales de instituciones
importantes.</p>
</figcaption>
</figure>
<figure>
<img src="/compuflash/img/personal/ventas.jpg"></img>
<figcaption class="nombrepersona">
<strong>ING. ANDRÉS SERVIO ILLESCAS JARAMA</strong></br></br>
<p> Ing. de Sistemas y Jefe del departamento de hardware. Se especializa en buscar
soluciones óptimas y a un precio asequible para nuestros clientes.</p>
</figcaption>
</figure></section>
<section id="nivel3" >
<figure><img src="/compuflash/img/personal/socio.jpg"></img>
<figcaption class="nombrepersona">
<strong>ING. DANILO ALBERTO MOROCHO VALLADAREZ</strong></br></br>
<p> Jefe del área de software (Programador), Encargado de la realización de trabajos y el
mantenimiento de los mismos, capacitación, venta y planificación.</p>
</figcaption></figure>
108
<figure>
<img src="/compuflash/img/personal/programador.jpg"></img>
<figcaption class="nombrepersona">
<strong>ING. ANDRÉS LEÓN </strong></br></br>
<p>Programador de aplicaciones ambientes, Jefe Programador. Encargado del área de
sistemas, cumple como socio en entornos de trabajo de investigación, </p>
</figcaption>
</figure>
</section>
</section>
Listado 4.1.40 Código para la sección del personal humano.
Creamos las secciones para cada integrante desde la cabeza hasta el final, ingresando la
foto de cada uno como su descripción, todos Ingenieros de Sistemas con su nombre respectivo;
para darle estilo a esto necesitamos ponerle un background de fondo para darle más elegancia,
también ubicarlas separarlas y ordenarlas; además darle a la imagen y al texto un estilo único, y
así lo vamos personalizando para que quede todo de una manera correcta, ahora revisemos el
código para dar estilo al personal de Compuflash:
#presidente
{
text-align: center;
}
#nivel2 figcaption p{
display: none;
margin: 0 auto;
text-align: justify;
width: 60%;
}
#nivel3 figcaption p{
display: none;
margin: 0 auto;
text-align: justify;
width: 60%;
}
#nivel2 figcaption:hover p{
display: block;
}
#nivel3 figcaption:hover p{
display: block;
}
#nivel2 figure img{
height: 300px;
width: 250px;
overflow: hidden;
}
#nivel2 figure{
display: inline-block;
margin: 3em 1% 3em 1%;
vertical-align: top;
109
width: 45%;
}
#nivel3 figure img{
height: 300px;
width: 250px;
overflow: hidden;
}
#nivel3 figure{
display: inline-block;
margin: 3em 1% 3em 1%;
vertical-align: top;
width: 45%;
}
#nivel2 figcaption{
text-align: center;
width: 100%;
}
#nivel3 figcaption{
text-align: center;
width: 100%;
}
#nivel2 figcaption img{
overflow: hidden;
width: 100%;
}
#nivel3 figcaption img{
overflow: hidden;
width: 100%;
}
Esta parte es una clase que por orden es mejor ponerlo en el último del estilo para no
confundirnos:
.personal{
background-image: url("../img/fondiu.jpg");*/
border-image: url("../img/fondo.jpg") 40 stretch;
}
.personal figure, #nivel2 figure, #nivel3 figure{
height: 400px;
width: 250px;
}
.personal figure:hover figcaption p, #nivel2 figure:hover figcaption p, #nivel3 figure:hover
figcaption p
{
display: block;
}
.personal figcaption p{
display: none;
margin: 0 auto;
text-align: justify;
110
width: 100%;
}
.personal figcaption{
text-align: justify;
width: 100%;
}
.personal figure img{
border: 1px solid white;
border-radius: 0.5em;
box-shadow: rgba(255,255,255, 0.8) -2px -2px 2px 2px;
margin: 1em auto ;
width: 80%;
}
.personal figure{
margin: 0 auto;
}
Listado 4.1.41 Personificación de la página personal.html.
Hecho esto retocamos los detalles que siempre saben presentarse para que todo quede
como esperamos, con el hover creamos un efecto para que cuando el cursor pase por la imagen o
el nombre del personaje en cuestión se muestra la descripción de forma automática; de la misma
manera que a todos los integrantes de Compuflash, luego solo nos queda visualizar el resultado:
Figura 4.1. 39 Personal de Compuflash.
Físicos
En esta sección tenemos la obligación de mostrar a nuestros usuarios todas las
herramientas físicas con las que contamos para el arreglo e uso de sus dispositivos a configurar o
reparar, pues así el usuario conoce que Compuflash es una empresa seria y de garantía
comprobada: Comencemos no se diga más; empezamos creando una página web base solo con la
cabecera y el pie de página para conformar en el centro, unos marcos con los que ingresaremos la
111
imagen de cada producto y la descripción a su derecha. Esa es la idea principal pues ahora vamos
manos a la obra: Escribiremos el código para crear la sección de las herramientas de hardware
utilizadas en la empresa Compuflash.
<h1>HERRAMIENTAS BÁSICAS DE HARDWARE</h1>
<section class="materiales">
<figure>
<img class="foto" src="/compuflash/img/materiales/caja.jpg"/>
<figcaption class="descripcion">
<h5>CAJA DE HERRAMIENTAS</h5>
Juego de destornilladores, pinzas, herramientas básicas (playo, corta frio, cinta, sierra,
linterna, multimetro, soldadora electrónica, estaño, brocha, agenda digital o cuaderno), pasta
térmica, pendrive, tornillos y jumpers, Batería (pilas) 2032, CDS Y DVDS limpios, limpiadores,
aire comprimido, herramientas multiusos, etc....),
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/brazalete.jpg"/>
<figcaption class="descripcion">
<h5>BRAZALETE ANTIESTÁTICO</h5>
Tocar el chasis para descargar la carga estática del cuerpo o simplemente quieres ir por lo
seguro, no debe faltar esta herramienta básica para el área de Hardware. En Compuflash
tomamos todas las medidas de seguridad para no dañar ningún componente y por ende para
beneficio de nuestros estimados clientes.
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/redes.jpg"/>
<figcaption class="descripcion">
<h5>KIT COMPLETO PARA REDES</h5>
Pinza de impacto (ponchadora), Crimpeadora, probador de cables, pela cables, Alicate de corte,
conectores RJ45. Los trabajos con redes normalmente son puntuales y solicitados por el cliente a
cualquier hora por tal motivo es indispensable que el técnico deba tener en su taller este kit.
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/soplador.jpg"/>
<figcaption class="descripcion">
<h5>SOPLADOR</h5>
Esta es una herramienta muy importante para el arreglo de computadoras, se debe tener
mucho cuidado pues la presión demasiado fuerte puede dañar los dispositivos de la Pc o laptop;
solo gente especializada debe manejar este tipo de herramienta, no es recomendable aventurarse
en la limpieza de nuestros equipos.
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/fuente.jpg"/>
<figcaption class="descripcion">
<h5>TEST DE FUENTES DE PODER</h5>
112
Herramienta que permite descartar fallas en la fuente de un computador. Es mejor que
cargar con una fuente de repuesto encima para pruebas. Con esta herramienta se garantiza un real
análisis de comprobación de nuestras fuentes, para evitar diagnósticos erróneos y enfocarnos en
el verdadero problema.
</figcaption></figure>
<figure><img class="foto" src="/compuflash/img/materiales/switch.jpg"/>
<figcaption class="descripcion">
<h5>SWITCH KVM</h5>
En un área fija de trabajo, esta herramienta no puede faltar, simplifica las conexiones,
reduce espacios ya que con un solo monitor, teclado y mouse operas más de un equipo mediante
un switch. Además podemos realizar trabajos simultáneos. En nuestra empresa usamos los usb
ya que son plug&play.
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/convertidor.jpg"/>
<figcaption class="descripcion">
<h5>CONVERTIDOR IDE/SATA a USB</h5>
Muy importante esta herramienta, nos permite hacer descarte de los puertos IDE/SATA de
una tarjeta madre o un cable defectuoso, realizar respaldos de manera rápida y es bastante
cómodo para transportar (y no es costoso). Aunque se vea de una manera simple es vital para
nuestro trabajo.
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/externo.png"/>
<figcaption class="descripcion">
<h5>UNIDADES EXTERNAS</h5>
Un disco duro portátil, también una unidad DVD portátil nos es de mucha utilidad, ciertos
equipos no tienen unidades de DVD y así resolvemos el problema. Nos es de mucha utilidad
sobre todo para el caso de las notebooks, no incluye ningún lector, ciertamente también se puede
utilizar pendrive para la instalación del S.O. pero a nosotros nos va muy bien con unidades DVD
externas. Es importante tener más equipos como Monitor, memorias RAM, cables, discos y
cualquier otro equipo que nos pudiera servir.
</figcaption>
</figure>
<figure>
<img class="foto" src="/compuflash/img/materiales/servidor.png"/>
<figcaption class="descripcion">
<h5>SERVIDOR DE DATOS Y APLICACIONES</h5>
Dependiendo del área de trabajo y del equipo servidor a disponer se puede dar muchos usos.
En nuestro caso tenemos un PC que hace labores de servidor de archivos donde hay muchas
aplicaciones extendidas. En un área de mayor trabajo un servidor real es necesario para las
actualizaciones fuera de línea (ahorra ancho de banda), respaldo de imágenes de S.O. (ghost, disc
image, imagen de windows, etc.), respaldo de archivos, servidor virtual, etc. Todo depende de las
labores en el área de trabajo.
</figcaption>
</figure>
113
<figure>
<img class="foto" src="/compuflash/img/materiales/area.png"/>
<figcaption class="descripcion">
<h5>AREA DE TRABAJO</h5>
Es recomendable que tengamos un área de trabajo cómoda donde podamos hacer pruebas y
el desplazamiento de equipos de manera organizada, para ello lo mejor es un mesón o escritorio
largo que tenga suficiente iluminación con las herramientas a la mano. El área de trabajo de
nuestra empresa laboran técnicos eficientes, hay suficientes tomas de corriente accesible, un
router con red local y conexión a internet. En cada "estación de trabajo" se pueden operar 2 o
más computadores simultáneamente con el KVM.
</figcaption>
</figure>
Listado 4.1.42 Código para la sección material de hardware.
Damos el texto que nos especifique la utilización del producto por parte de la empresa y
su función principal, todos los comandos ya lo sabemos por lo estudiado hasta ahora. Ahora
requerimos un estilo para ello lo agregamos en estilos.css el código requerido.
.materiales figure{
border: 1px solid white;
border-radius: 0.5em;
display: inline-block;
padding: 0.5em;
vertical-align: top;
width: 40%;
}
.materiales .descripcion{
width: 40%;
text-align: left;
}
.materiales .descripcion, .materiales .foto{
display: inline-block;
vertical-align: middle;
}
.materiales .foto{
border-radius: 0.5em;
margin: 2em 2% 1em 1%;
overflow: hidden;
width: 40%;
}
Listado 4.1.43 Código para dar estilo a la sección material de hardware.
Hecho esto observemos el resultado:
114
Figura 4.1. 40 Página web hardware.html.
Remodelación del Menú Principal
En este punto de la monografía hemos visto la opción de mejorar el menú principal para
una superior presentación, pero esta ya queda a voluntad del diseñador en nuestro caso hemos
visto un nuevo diseño que sea responsive y disegn que son dos características básicas en
HTML5, por eso nos hemos bajado y reacomodado un nuevo diseño con sus librerías en CSS y
JavaScript; como lo hicimos en el primer menú anteriormente visto, luego solo lo
personalizamos con una nueva imagen que nos indique que es el menú principal y listo ya
tenemos nuestro nuevo y mejorado menú; veámoslo:
Figura 4.1.41 Menú Principal actual.
En este nuevo menú reacomodamos las pestañas y contenido achicándole los nombres
para una más simple visión y comprensión de los usuarios que lo utilicen; en el primero nos
queda: La Empresa (Contáctenos, Noticias, Galeria y Home); en el segundo: Servicios (Ventas,
Hardware, Software y Redes), tercero: Recursos (Humanos, Físicos y Lógicos), y por ultimo:
Política de Calidad: (Recomendaciones y Autentificación).
Lógicos
El último punto de nuestra pestaña Servicios son los recursos lógicos con que trabaja
Compuflash, claro los más importantes para la recuperación y arreglo del software y también la
combinación con el hardware recordando que todo trabaja en equipo y eso conforma los
115
dispositivos. Empecemos con la creación como ya estamos acostumbrados de una página web
básica para ponerla como materiales2.html y con esto continuamos con el código
correspondiente:
<h1>HERRAMIENTAS BÁSICAS DE SOFTWARE</h1>
<section class="materiales">
<figure><img class="foto" src="/compuflash/img/materiales/aplicaciones.jpg"/>
<figcaption class="descripcion">
<h5>APLICACIONES DIVERSAS</h5>
Todo tipo de programa desde los sistemas operativos, antivirus, editores de texto, diseño,
programación, editores de sonido, editores de imagenes, editores de videos, navegadores,
traductores, actualizaciones, plugins, cracks, administradores de descargas, juegos, base de datos,
etc...
</figcaption></figure>
<figure><img class="foto" src="/compuflash/img/materiales/windows.jpg"/>
<figcaption class="descripcion">
<h5>PROGRAMAS DESATENDIDOS</h5>
Los sistemas operativos modificados que llevan los programas básicos ya en su base y
que no contienen seriales ni configuraciones son los llamados desatendidos, y en nuestro caso es
muy importante porque ahorra tiempo de instalación y acelera el proceso de actualización de los
equipos de cómputo;
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/hirens.jpg"/>
<figcaption class="descripcion">
<h5>HIRENS BOOT CD</h5>
Aquí se encuentra de todo: reparar discos, particionar, imagen, restaurar claves... la lista
es interminable, por eso es una excelente utilidad que la utilizamos en Compuflash, Nosotros lo
integramos con el windows desatendido en nuestro DVD. Todo este tipo de herramientas dan
soluciones eficientes.
</figcaption></figure>
<figure><img class="foto" src="/compuflash/img/materiales/drivers.jpg"/>
<figcaption class="descripcion">
<h5>DISCOS DE DRIVERS</h5>
Ahorran el trabajo de tener que descargar los drivers. Aunque también con el disco de
Hirens se hacen respaldos. En Compuflash hacemos uso de todas las herramientas posibles. Una
herramienta que nos permite descubrir un driver que no logramos instalar DevID, en esta web
colocamos el ID del hardware buscado.
</figcaption></figure>
<figure><img class="foto" src="/compuflash/img/materiales/virtual.jpg"/>
<figcaption class="descripcion">
<h5>VIRTUAL BOX</h5>
Siempre es bueno realizar pruebas antes de lanzarse con el usuario final, con estos
programas creas máquinas virtuales y puedes realizar pruebas. Recientemente hemos cambiado a
Virtual Box ya que es mejor en PCs personales de SO 64 bits, responde de manera más eficiente,
cargando menos aplicaciones en el arranque en comparación con el VmWare.
116
</figcaption></figure>
<figure><img class="foto" src="/compuflash/img/materiales/linux.jpg"/>
<figcaption class="descripcion">
<h5>DISCOS DE LINUX</h5>
Los discos de Linux también pueden ser utilizados para otras funciones como recuperar
datos del usuario en un sistema operativo dañado, o para particionar y formatear un sistema que
ha tenido algún problema con Live CD de Knoppix es una buena herramienta si con windows no
puedes dar con la solución. Hoy el software libre tiene una gran importancia.
</figcaption></figure>
<figure><img class="foto" src="/compuflash/img/materiales/wpi.jpg"/>
<figcaption class="descripcion">
<h5>WPI</h5>
(Windows Post Install), es una aplicación donde podemos ejecutar de manera más
productiva y personalizada nuestros programas desatendidos, normalmente viene con los
windows desatendidos, pero también se puede crear tu propio WPI. En nuestro caso descargamos
las últimas versiones, las integramos con el WPI y las llevamos a un pendrive.
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/ninite.jpg"/>
<figcaption class="descripcion">
<h5>NINITE</h5>
Es una excelente herramienta aportada por "efasoft", esta aplicación nos permite
seleccionar de un conjunto de aplicaciones las que necesitamos para ser instaladas de manera
desatendida en el computador, el único requisito es Internet, ya que descarga sus últimas
versiones y funciona. Aunque siempre hay que actualizarse.
</figcaption>
</figure>
<figure><img class="foto" src="/compuflash/img/materiales/remota.jpg"/>
<figcaption class="descripcion">
<h5>GESTIÓN REMOTA</h5>
Para nosotros que realizamos soporte remoto. Por el momento utilizamos Logmein Free
que lamentablemente ahora está limitado a 10 clientes. Estamos en búsqueda de una alternativa
gratuita que tenga tanto desempeño como logmein. Pero es mejor tratar con software libre ya que
ahora es mejor.
</figcaption></figure>
<figure><img class="foto" src="/compuflash/img/materiales/navegador.jpg"/>
<figcaption class="descripcion">
<h5>INTERNET/NAVEGADORES</h5>
El acceso a internet es vital para un negocio de sistemas, Si se sabe utilizar generalmente
se consigue respuesta al problema desconocido. Para ello necesitamos los navegadores, el mejor
en estos momentos es google chrome y el buscador más utilizado es Google; Los usuarios y sus
experiencias son importantes.
</figcaption></figure></section>
Listado 4.1.44 Código para la sección recursos lógicos.
117
Hemos creado el código para recursos lógicos igual que los hicimos con los físicos, solo
cambiamos los ítems ya que permanecen a la misma categoría solamente difiere en la esencia;
pero ambos son recursos por tal motivo decidimos dejarlos con el mismo estilo para que el
usuario no se confunda a la hora de visualizarlo. Como dijimos el estilo es el mismo y está sujeto
a la misma clase que los recursos físicos así que no hace falta redundar en el código pues por
ende va con el de la página anterior. Ahora solo nos queda ver el resultado con los materiales y la
descripción de las herramientas de software usadas por Compuflash:
Figura 4.1.42 Página web materiales2.html.
Y con esto hemos terminado el bloque de Recursos:
Figura 4.1.43 Bloque de recursos de la empresa Compuflash.
Política de Calidad
Hemos llegado al último bloque de nuestro menú principal y en este nos toca revisar la
política de calidad de la empresa con el primer contenido que será: Recomendaciones y el
segundo y final: Autentificación.
Recomendaciones
118
En esta página web pondremos a nuestros mejores clientes y proveedores que cuentan
con la confianza necesaria para dar una recomendación de la empresa con la veracidad del caso,
hemos querido incluir este ítem por que las referencias comerciales de la experiencia adquirida a
través del tiempo será develada para nuestros usuarios de la página para que conozcan acerca de
nosotros sin ninguna duda del trabajo que realiza Compuflash.
El primer paso es crear la página web copiándole de la base no hace falta redundar en los
pasos ya hechos, solo cambiamos el nombre por: recomendaciones.html y con esto podemos
proseguir con el código para nuestra pestaña respectiva:
<section>
<h1 class="titleRecomendacion">REFERENCIAS COMERCIALES</h1>
<figure class="clientes">
<h3>ELECTRICIDAD Y ELECTRONICA</h3>
<img class="foto" src="/compuflash/img/recomendaciones/electrica.png"/>
<figcaption class="descripcion2">
Hace cinco años que Compuflash me ha brindado servicio de mantenimiento, como
venta de equipos con el mayor profesionalismo y eficacia en cada ocasión por tal motivo
recomiendo a todos los usuarios conectados a esta página comercial de la empresa Compuflash
que contraten sus servicios ya que son eficientes.
</figcaption></figure>
<figure class="clients">
<h3>COMPURAM</h3>
<img class="foto" src="/compuflash/img/recomendaciones/compuram.png"/>
<figcaption class="descripcion2">
Nosotros distribuimos los productos que Compuflash nos pide y como ya
conocemos la garantia que es tratar con esta seria empresa, estamos siempre dispuestos a
colaborar con ellos y brindarles a sus clientes los mejores productos; Damos fe de la eficiencia y
eficacia de Compuflash soluciones informáticas ya que somos sus distribuidores.
</figcaption></figure>
<figure class="clientes">
<h3>FERRETERIA MULTICOMERCIO</h3>
<img class="foto" src="/compuflash/img/recomendaciones/multicomercio.png"/>
<figcaption class="descripcion2">
Dado el auge de la informática y los sistemas en estos días, ya no se puede estar
desactualizados de la tecnología; ya que los inventarios, facturas, historiales, pagos, etc... deben
estar procesados para crear backups y proteger la información, tanto de los productos como los
clientes y Compuflash nos brinda todo eso, de una manera profesional y responsable.
</figcaption></figure>
<figure class="clientes">
<h3>DIGITAL MATE</h3>
<img class="foto" src="/compuflash/img/recomendaciones/digital.png"/>
<figcaption class="descripcion2">
El crecimiento de nuestra empresa nos ha dado la pauta para modernizarnos y mejorar los
procesos de nuestro negocio; necesitamos sistemizar todas las actividades de compra y venta.
Como poder tener el mantenimiento de nuestros equipos con esta empresa llamada Compuflash
119
que nos ha sido muy cumplidora con todo su personal y la ayuda en cualquier ambito de la
informática.
</figcaption>
</figure>
<figure class="clientes">
<h3>VICENTE MARTINEZ JARA</h3>
<img class="foto" src="/compuflash/img/recomendaciones/vicente.png"/>
<figcaption class="descripcion2">
Como padre de familia y al estar al cuidado de los estudios de mis hijos, he podido
darme cuenta de lo importante que es la tecnología en estos días y lo desactualizado que me
encuentro; por tal motivo he contactado con Compuflash quien no solo me brinda productos,
sino me da mantenimiento y enseñanza de la informática.
</figcaption>
</figure>
<figure class="clientes">
<h3>TECNOMEGA</h3>
<img class="foto" src="/compuflash/img/recomendaciones/tecnomega.png"/>
<figcaption class="descripcion2">
Quiero recomendar muy especialmente al personal tan educado y profesional de
Compuflash ya que todo este tiempo me brindado asesoria y mantenimiento preciso a nuestros
equipos en las oficinas de nuestro trabajo. Tengo que dar todas las recomendaciones positivas
para los nuevos clientes que pueden sumarse en el futuro.
</figcaption></figure></section>
Listado 4.1.45 Código para la sección referencias comerciales.
Le agregamos el estilo para complementar el código anterior y personalizarlo de una vez
por todas, tal como lo hemos venido haciendo a lo largo de nuestra página comercial para la
empresa Compuflash.
.titleRecomendacion{
font-size: 1.4em;
}
.clientes{
height: 350px;
}
.clientes h3{
font-size: 0.8em;
}
.foto{
margin: 0, auto;
height: auto;
width: 90%;
display: block;
}
.descripcion2{
font-size: 0.8em;
}
Listado 4.1.46 Estilo para la sección referencias comerciales.
120
Vemos el resultado después de personalizarlo, alinearlo y probarlo; por supuesto
incluyendo las imágenes y la recomendación de nuestros clientes y proveedores con su debida
identificación:
Figura 4.1.44 Página web recomedaciones.html.
Autentificación
En esta parte pensamos en mostrar el certificado de legalización de la empresa
Compuflash con una breve descripción de su origen en la parte de abajo con un fondo
establecido. La razón es para que el usuario vea y no desconfia que Compuflash es una empresa
seria con todos los requerimientos legales para su correcto funcionamiento; sin más preámbulos
comencemos con la creación de la página y su espacio en el medio para nuestra imagen de
certificación:
<section>
<h1>CERTIFICADO DE LEGALIDAD</h1>
<figure>
<img class="fotodoc" src="/compuflash/img/recomendaciones/ruc.jpg"/>
<figcaption id="textodoc">
<h4>Desde hace diez años que fue creado D´GACNET por un grupo de ingenieros con una
visión del futuro próspero y servicial, desde hace cinco años que actualizo a Compuflash para
mejorar los servicios al usuario, con mejores productos y software de primera.</h4>
</figcaption>
</figure>
</section>
Listado 4.1.47 Código de la sección autentificación.
121
Démosle el estilo pertinente:
.fotodoc{
width: 70%;}
#textodoc{
background-image: url("../img/recomendaciones/ruc2.png");*/
text-align: justify;
padding: 0.5em 4em;}
Listado 4.1.48 Estilo para la sección autentificación.
Bueno, con esto veamos el resultado y recordemos que es el la última parte para nuestro
menú principal y este bloque de política de calidad:
Figura 4.1.45 Página web ruc.html.
Y el bloque final:
Figura 4.1.46 Bloque de Política de Calidad.
122
Fecha y Reloj
Para mejorar la apariencia de nuestra página y optimizarla decidimos agregarle unos
bloques a los lados del título principal que nos de la fecha y la hora exacta en tiempo real y
aunque al agregarlo se tenga que incluir código php y no concierne a esta investigación;
decidimos en hacerlo pero solo en la página principal para que no tengan que cambiar todas las
páginas web de nuestro proyecto. Para empezar con nuestro reloj cambiamos la página
index.html por index.php para poder ingresar código php, luego de ello empezamos con el
código php para coger los datos del servidor, mostrarlos y hasta traducirlos a español:
Vamos a agregar a estos datos en la parte de arriba del título a los lados, por tal motivo se
aumentará el código de la sección título:
<header>
<section id="titulo">
<?php
//Obtiene la fecha del servidor:
date_default_timezone_set("America/Guayaquil");
//obtiene el día de la semana
$dia=date("D");
//Declaramos una variable para imprimir el día en español:
$fecha="";
//switch Verifica y carga el d'ia
switch ($dia) {
case 'Mon':
$fecha= "Lunes";
break;
case 'Tue':
$fecha= "Martes";
break;
case 'Wed':
$fecha= "Miércoles";
break;
case 'Thu':
$fecha= "Jueves";
break;
case 'Fri':
$fecha= "Viernes";
break;
case 'Sat':
$fecha= "Sábado";
break;
case 'Sun':
$fecha= "Domingo";
break;
default:
$fecha="";
break;
};
123
//Imprime la fecha en pantalla:
echo '<h3 id="fecha">'. $fecha.', ' . date("d-M-Y") .'</h3>';
echo '<h1 id= "pagina">PAGINA WEB OFICIAL</h1>';
echo '<h3 id="reloj">' . date("H:i:s") . '</h3>';?>
</section>
Listado 4.1.49 Código PHP ingresado en index para la creación estática de la fecha y el reloj.
En los comentarios se va explicando a detalle para qué sirve el código en cuestión, así
que no hacen falta más explicaciones; se captura la fecha y la hora estática pero necesitamos que
sea en tiempo real. Así que para ello necesitamos código JavaScript para que se vuelva dinámico
el tiempo en sí; vamos al código con su descripción oportuna:
function IniciaReloj()
{
//recupera la hora y separa con los campos: fecha y hora
var separa=$("#reloj").text().split(':');
//Inicia la funcion de reloj
tiempo=reloj(separa[0],separa[1],separa[2]);
//ejecuta cada segundo el reloj
setInterval(tiempo,1000);
}
//closure (function dentro de otra función) reloj.
function reloj(hh,mm,ss)
{
hora=parseInt(hh);
minuto=parseInt(mm);
segundo=parseInt(ss);
return function()
{
var str_Hora="";
var str_Minuto="";
var str_Segundo="";
segundo=segundo+1;
// Si segundo es 60 pone segundo en 0 y suma un minuto.
if(segundo>=60)
{
segundo=0;
minuto=minuto+1;
}
//Si minuto es 60 pone minuto en 0 y suma una hora.
if(minuto>=60)
{
minuto=0;
hora=hora+1;
}
//Si hora es 24 pone la hora en 0 y refresca la página para actualizar la fecha.
if(hora>=24)
{
location.reload();
124
}
str_Hora=hora;
str_Minuto=minuto;
str_Segundo=segundo;
//por estetica cuando la hora, minuto o segundo es menor a 10
//Agrega un cero para tener siempre dos dígitos en cada valor.
if(hora<10)
{
str_Hora="0"+str_Hora;
}
if(minuto<10)
{
str_Minuto="0"+str_Minuto;
}
if(segundo<10)
{
str_Segundo="0"+str_Segundo;
}
//muestra en pantalla la hora
$("#reloj").text(str_Hora+":"+str_Minuto+":"+str_Segundo);}
Listado 4.1.50 Código JavaScript para dinamizar el reloj y concretar la fecha.
Ahora veamos el resultado final:
Figura 4.1.47 Cabecera de la página web con fecha y hora incluida.
4.1.4 DATOS Y PRUEBAS
Responsive Design [3]:
Un diseño adaptable deja de serlo si cuando lo visualizas desde un móvil o tablet ves que
las imágenes y los vídeos sobresalen de la página, por lo que debemos ver cómo hacer que se
adapten a distintos tipos de pantalla los contenidos multimedia (imágenes y vídeos de HTML5 y
texto).
Las formas que comentaré para adaptar imágenes, texto y vídeo son básicas y
probablemente en algunas ocasiones se necesite hacer un diseño más específico que podremos
hacer con @media quieres, pero el lado positivo de estos métodos es que son adaptables al ancho
del contenedor, independientemente del ancho de pantalla (por lo que en ciertos tamaños puede
que nos venga bien hacer un contenedor principal y una barra lateral y el vídeo que esté en el
contenedor se adaptará a él), por ejemplo:
La regla @media
125
La regla @media permite que empotremos media quieres directamente en nuestras hojas
de estilo. De esta manera mejoramos el rendimiento de la página al no tener que cargar archivos
CSS adicionales para los diferentes dispositivos. Para utilizar las reglas @media lo único que
tenemos que hacer es crear nuestra hoja de estilos y cuando queramos definir un conjunto de
reglas de estilo específicas para un dispositivo determinado utilizar la sintaxis: @media screen
and (max-width:1000px ) and ( ¨¨ ) { ... }. El efecto es el mismo pero minimizamos la carga de
archivos a un único archivo que incluya todas nuestras reglas CSS.
Adaptar imágenes
Para crear diseños muy optimizados puede ser importante usar varias imágenes distintas,
una con un tamaño superior y otra con uno más ligero, pero me voy a centrar en el uso de una
misma imagen (que en la medida de lo posible debería de estar optimizada) y se adaptará como
nosotros queramos, pudiendo hacer que se comporten de las siguientes formas las imágenes:
Ocupar el ancho de la página: puede ser útil para cabeceras o imágenes principales y lo haremos
estableciendo su ancho al 100%.
img {
width:100%;}
Listado 4.1.51 Ancho total para una imagen.
Tener una imagen con un tamaño máximo: en este caso la imagen tendrá un tamaño que
no sobrepasará, pero cuando se disminuya el tamaño del contenedor se encogerá adaptándose a
la página y nos puede servir de ejemplo usarla para un blog, donde puede que usemos en alguna
ocasión una imagen un poco más grande (por ejemplo una infografía) y no queremos ni hacerla
más estrecha ni recortarla.
img {
width:100%;
max-width:400px;}
Listado 4.1. 52 Ancho máximo de una imagen.
Tener las imágenes con su tamaño original: en este último caso puede que tengamos una
serie de imágenes de distintos tamaños y queremos conservar sus tamaños originales pero que se
adapte al ancho del contenedor o de la pantalla y como en el caso anterior nos puede servir para
un blog con un diseño adaptativo o con versión móvil (ya que se varían igual en la versión de
escritorio y adaptaría al ancho en la móvil).
img {
max-width:100%;}
Listado 4.1. 53 Ancho total máximo de una imagen.
Esto se llama Diseño Elástico pues las imágenes y hasta los textos en una caja se van
adaptando al tamaño de la pantalla.
Adaptar vídeos
Cuando queremos adaptar vídeos tenemos dos tipos de vídeos que adaptar, el primer tipo
son los vídeos de HTML5 y por otro lado los vídeos de servicios externos que debemos de
incrustar su código, que normalmente es un <iframe> (servicios como YouTube, Vimeo, etc…)
126
HTML5
En este caso no hay ningún tipo de complicación, es como si usásemos un elemento
<img>, es decir, podemos aplicar todo lo que he explicado antes para tratar un elemento
<video>. Adaptar el vídeo al ancho total de la página (recordemos que esto también se puede
poner en práctica en web móviles, por lo que no sería un problema que se hiciese muy grande):
video {
width:100%;}
Listado 4.1.54 Tamaño total de video.
Ahora haremos que tenga el tamaño máximo que queramos y cuando no coja en la página
se hará más pequeño:
img {
width:100%;
max-width:640px;}
Listado 4.1.55 Adaptación de la imagen.
Servicios externos (Yotutube, Vimeo…)
Al usar este tipo de vídeos con etiquetas <iframe> se complica mucho más el poder hacer
que se adapten estos vídeos, y para conseguirlo hay que hacer todo un ritual (esperemos que
HTML5 se imponga rápido ante este tipo de vídeos). En nuestro caso como ya sabemos los
videos fueron creados y editados por nosotros mismo, así que no tenemos ningún problema y
esto no nos corresponde.
Hay algunas cosas que no son tan fáciles de hacer para que se adapten a todo tipo de
pantalla, pero se puede acabar consiguiendo y les recomiendo si van a poner en práctica alguno
de estos métodos para hacer que se visualicen bien estos elementos multimedia en todo tipo de
pantalla es que se haga el CSS necesario y lo dejes siempre accesible para que les resulte más
fácil adaptar todo. Procedemos al diseño elástico aunque si se dieron cuenta en toda esta
investigación en la mayoría de los casos ya se ha puesto un ancho especifico en las imágenes y
en el texto, por eso complementamos los que nos faltan haciendo las pruebas en diferentes
dispositivos como por ejemplo: móvil, tablet, laptop, etc… Con los diferentes navegadores y
luego procedemos al diseño responsive para acoplar las cajas dentro del HTML para que se
ajusten y tengan una vista apropiada y ordenada en cualquier dispositivo que el usuario utilice:
/*CONDIONES RESPONSIVE DESIGN*/
@media screen and (max-width:1200px){
.materiales .descripcion{
font-size: 0.65em;}}
Listado 4.1.56 Condición Responsive para la clase materiales.
Así como hemos visto este ejemplo en la clase .materiales tenemos que establecerlo en
las demás clases y secciones del proyecto, no podemos poner todos porque repetiríamos el
127
código completo y se haría muy extenso por tal motivo solo mostramos esta corta sección para
dar un ejemplo del responsive design.
Anexo 3 Fotos de la comprobación de la página web.
Comprobación
Para revisar que nuestro proyecto haya quedado completamente bien para poder
presentarlo y exponerlo necesitamos hacer unas pruebas de toda la página web, es necesario en
nuestro caso verificar:
Correcto funcionamiento de toda la página en general.
Revisar que los menús con sus enlaces estén bien direccionados.
Verificar que cada sección de la página este completa.
Que el diseño esté terminado satisfactoriamente.
Hacer las pruebas del diseño elástico; agrandando y achicando la ventana del navegador, para
revisar el comportamiento de las imágenes como el texto en caja.
Hacer las pruebas del responsive design de la misma manera anterior, pero esta vez revisando el
reajuste de las secciones, imágenes, texto, etc…
Luego de esto, vamos a optimizar los recursos utilizados y eliminar los que no estemos
utilizando; para eso vamos a nuestra carpeta base y revisamos cada subcarpeta con todos sus
elementos para cernirlas por completo y bajar el peso del proyecto y así optimizarlo. Las
revisiones cogen mucho tiempo pero es indispensable realizarlo y no solo eso sino hacerlo
perfectamente bien en cada cambio, una revisión a la página para ver que no se desconfigure o
hallamos eliminado algún elemento necesario.
Otro punto es el tamaño de las imágenes sobre todo en las páginas en donde hay varias de
ellas, pues la optimización de las mismas constituye el tamaño homogéneo, el formato estándar,
que no esté pixelada, etc…
Para continuar vamos al texto, hay que revisar que estén correctamente escritos para no
hacer un papelón en la web.
Otra prueba que tenemos que hacer es abrir el proyecto en los navegadores más utilizados
para que se vea igual, pero como los navegadores varían en sus estructuras es difícil dejarlo un
100% pero tenemos que procurar terminarlo lo más parecido posible, eso se realiza con los
complementos que revisamos en la teoría en los primeros capítulos (moz- ms- webkit, etc.), en el
caso de los archivos media también hay que poner en el código los diferentes formatos que
acepten los navegadores. Es verdad que el prefixfree debe realizar esto, pero en la práctica hay
algunos aspectos que no puede evitar como los estándares que cada navegador tiene, pues estos
no reconocen comandos HTML en su totalidad o lo tienen en versiones anteriores.
4.1.5 FINALIZACIÓN
Al terminar nuestra investigación práctica previa a la graduación de Ingeniería de
Sistemas, tenemos que recordar detalles que a la larga resultaron fundamentales a la hora de
hacer y concluir nuestro trabajo; como por ejemplo crear respaldo de la información a cada ciclo
concluido, revisar las referencias y realizar una investigación eficiente que pueda ayudar al
estudiantado en el futuro; Seguir siempre un orden establecido y no darse por vencido en ningún
128
sentido, darle tiempo a lo más importante para luego seguir las referencias y acabar cada meta
hasta llegar al objetivo.
A continuación unas reglas que nos podrían ayudar en un futuro inmediato. Para
desarrollar esta importante cualidad en tu vida, sigue estos pasos [1]:
1. Primero, reconoce en qué áreas de tu vida te falta disciplina, Repasa cuáles son las
consecuencias de tu indisciplina: los problemas de salud, los apuros económicos, los conflictos
familiares, etc. Piensa en cómo estos afectan tu vida, robándote felicidad y paz mental, ahora
visualiza con lujo de detalles; cómo sería tu vida sin esos problemas. Comprobarás que la
disciplina, lejos de incomodarte, te libera para vivir tu vida sin preocupaciones y sin la espada de
Damocles de todo lo que tienes por hacer, colgando sobre tu cabeza. Cuando actúes de una
manera disciplinada descubrirás que tienes más tiempo, energía y paz mental para disfrutar de la
vida y cumplir con tus obligaciones.
2. Anota qué pasos debes dar para comportarte de una manera disciplinada en esta área.
Por ejemplo: “Debo crear un presupuesto de mis gastos mensuales y separar el tiempo necesario
para hacer el trabajo”.
3. Crea tu plan de acción, este consiste de un paso a paso de cómo actuarás de ahora en
adelante en esta etapa de tu vida: es importante que no te extralimites al comienzo, sé realista. Si
hasta ahora no logras. Tus metas deben ser accesibles y alcanzables, para ir construyendo sobre
ellas, la disciplina es como un músculo que debes ejercitar día a día para que vaya
fortaleciéndose.
4. Aprende a controlar la adicción a la gratificación instantánea, que es la gran enemiga
de la disciplina. “Esta oferta es demasiado buena para dejarla pasar; el mes que viene empiezo a
trabajar en mi monografía. Todas estas excusas corroen tu resolución y te alejan de tus metas;
mira esa tarea como una labor no negociable; algo que tienes que hacer, te guste o no, cuando le
das muchas vueltas en la cabeza, te agotas antes de comenzar; como el famoso dicho de la
marca, no lo pienses: ¡simplemente hazlo!
5. Sigue el plan durante los días establecidos, que es la cantidad de tiempo que toma fijar
un hábito, de acuerdo con los expertos; si fallas antes de las tres semanas, vuelve a comenzar
desde el comienzo hasta llegar al final.
6. Elimina la voz negativa y escucha la positiva, si antes nunca conseguiste mantenerte
firme o dentro de tu presupuesto, quizás hay dentro de ti una voz negativa que a cada rato te lo
recuerda, o que te hace creer que el fracaso es inevitable. Reconoce esa voz y recuerda que es
solo un pensamiento en tu cabeza que te desmotiva y trata de llevarte a la zona de confort, que no
es otra cosa que la rutina de siempre. Pero ya conoces los beneficios de ser disciplinado; calla esa
voz y suplántala con la voz positiva, la que te recuerda que si te mantienes firme en tus
propósitos, alcanzarás tus metas.
7. Lleva una agenda donde anotar tu progreso y sobre todo tus recaídas; es importante
que veas cualquier desviación de tus planes como un bache, no como una derrota. Si pecas con
un error, esto no quiere decir que tu trabajo está arruinado para siempre; acepta el fallo, aprende
de él y vuelve al plan inmediatamente; “Si te caes siete veces, levántate ocho”. A fin de cuentas,
la disciplina no es otra cosa que la consistencia.
129
HTML5 como estándar estará finalizado en 2014 [7]:
El W3Consortium ha hecho un cambio de rumbo considerable con el tan usado estándar
HTML5, decidiendo sacar en 2014 a este estándar de la fase “experimental“, y lo curioso no es
que se vaya a tardar dos años en reconocer a HTML5 como estándar, sino que se esperaba su
lanzamiento par 2022. Tenemos que recordar que dentro de este estándar no solo está la sintaxis
(<nav>, <video>) ni CSS3, sino que se incluyen todas las herramientas como almacenamiento
local, Canvas, SVG, WebSocket y todas esas cosas que visualmente no están, pero que en las
entrañas de nuestros navegadores empiezan a funcionar, por todo esto es por lo que se están
tomando con calma la definición final de HTML5.
Por esta razón a finales de año se publicará HTML 5.0 Candidate Recommendation
donde se excluirán características inestables, controvertidas y con problemas de
interoperabilidad, que se irán puliendo y serán incluidas en la versión siguiente del estándar (en
la versión 5.1 de HTML, para 2016). El rumbo de HTML5 a partir de ahora será en búsqueda de
mejoras pero por partes, teóricamente no deberíamos volvernos a encontrar un boom de
novedades como el que ha orquestado HTML5, sino ir añadiendo funcionalidades
progresivamente en versiones posteriores de HTML5.
130
CONCLUSIONES
Se ha concluido que HTML5 es el futuro del diseño web y que ya existen otras
aplicaciones que nos facilitan el uso de este estándar.
La información de la empresa Compuflash ha quedado por primera vez ordenada y
presentada en al página web que hemos realizado.
La acoplación de HTML5 con CSS3 y JavaScript hace la fórmula perfecta para el futuro
de la web y aunque haya muchas cosas por pulir, ya se ha dado un paso gigantesco.
La página web de compuflash ha sido un paso importantísimo para la proyección de
prosperidad presente y futura de la empresa.
El hecho de que CSS3 dé la oportunidad de crear efectos sin programación es sensacional
de una manera tan fácil como poner un comando y los datos respectivos.
Con la página web se proyecta a tener muchos más clientes, ya que los usuarios pueden
ver toda la información acerca de la empresa.
Con código JavaScript y PHP se avanzado bastante en la programación accesible al
desarrollador sin tener que sufrir tanto en la implementación de plugins y otros complementos.
Los navegadores que reciben diferentes formatos de video y audio y no se ponen de
acuerdo con un modelo común.
Existe falta de información precisa y constante en el mercado.
131
RECOMENDACIONES
Es mejor considerar a HTML5 como una realidad y lo mejor que se puede hacer es
diseñar en código, para así aprender todas las ventajas y desventajas o aspectos a mejorar con
HTML5.
Es importante tener actualizada la información de la empresa para asi evitar el astio de
los clientes, proveedores y socios.
Para entender la unificación de estas tecnologías es mejor hacerlo solos con ayuda del
internet y de las diferentes anécdotas de los desarrolladores web.
Toda empresa profesional debe tener una página web que represente su profesionalismo,
sus servicios eficientes y sus productos actualizados.
Es recomendable ejecutar estos comandos comprobarlos, combinarlos y cambiarlos de
valor para ir conociendo todo lo que se puede realizar con CSS3.
La atracción de clientela nueva para una empresa siempre será la mejor opción una
pagina web bien implementada.
La parte de JavaScript es mejor conocerla a fondo y con calma ya que es la parte en
donde se programa y se da verdadero dinamismo al diseño web.
Lo recomendable sobre los navegadores es incorporar la librería prefixfree que nos
evitará tener que poner los complementos de cada uno, los que falten se tiene que ir probando y
poniéndolos manualmente (-moz-os-webkit-o). Además es recomendable tener las versiones más
actualizadas de los navegadores, para asi ir conociendo las mejoras y acoplaciones.
Con respecto a la información sobre el estándar HTML5, CSS3 y JavaScript, lo más
recomedable es ir probando todo lo que se va investigando; asi vemos si es una realidad y va ha
servir en algún momento.
132
REFERENCIAS BIBLIOGRAFÍCAS
(1) ABOUT.COMVida sana; Reglas para tener disciplina y obtener las metas que te traces en la
vida,. Recuperado el 2014; About.com; de http://vidasana.about.com/od/Superacion-
personal/a/7-Reglas-Para-Tener-Disciplina.htm.
(2) ALVAREZ, Miguel Angel y ALVAREZ, Sara; Manual de CSS 3; Recuperado el
03/11/2013; http://www.desarrolloweb.com
(3) CAMPOS, Oscar; Introducción a las reglas @media de CSS3, GENBETA:dev Desarollo y
software; Recuperado el 05 de julio de 2011; de http://www.genbetadev.com/desarrollo-
web/introduccion-a-las-reglas-media-de-css3
(4) CASTILLO CANTÓN, Alejandro; Manual de HTML5 en español; Recuperado el 2013, de
http://www.theproc.com
(5) FALASCO, Roxana; Guía definitiva Sublime Text 2, Recursos y tutoriales sobre desarrollo
HTML5; Recuperado el 2013, http://falasco.org/guia-definitiva-sublime-text-2.
(6) GAUCHAT, Juan Diego; El gran libro de HTML5 CSS3 y Javascript; MARCOMBO
Ediciones técnicas; Recuperado el 2013, de www.minkbooks.com.
(7) GUTIÉRREZ, Pedro; HTML5 como estándar estará finalizado en 2014, , GENBETA: dev
Desarollo y software, Recuperado el 30 de noviembre de 2013, de
http://www.genbetadev.com/desarrollo-web/html5-como-estandar-estara-finalizado-en-2014.
(8) SINTES, Marco Bartolomé; Curso Instalación de XAMPP en Windows; Recuperado el 23 de
Septiembre de 2013, de http://www.mclibre.org.
(9) TORDECILLA, Sergio Palacio; Mantenimiento de una computadora; BLOGS, Recuperado
el 2011; de http://mantenimientosdeunapc.blogspot.com/2011/11/que-es-xampp-y-para-que-
sirve.html.
133
ANEXOS
Anexo 1 Instalación del servidor XAMPP [8]
Antes de instalar un servidor de páginas web es conveniente comprobar si no hay ya uno
instalado; para ello, es suficiente con abrir el navegador y escribir la dirección http://localhost. Si
no se obtiene un mensaje de error es que hay algún servidor de páginas web instalado.
Figura 1.1 Comprobación de servidor. [8] [1]
En esta monografía como ya lo hemos dicho se utilizará uno de estos paquetes
WAMP/LAMP que se llama XAMPP. Estos apuntes están preparados para la versión XAMPP
1.8.3 (del 29 de agosto de 2013), que incluye Apache 2.4.4, PHP 5.5.3, MySQL 5.6.11 y otras
utilidades, y que se puede descargar con este servidor. Una vez obtenido el archivo de instalación
de XAMPP, hay que hacer doble clic sobre él para ponerlo en marcha. Las imágenes que se
muestran a continuación corresponden a la instalación de XAMPP 1.8.3 en Windows 7 (a partir
de XAMPP 1.8.3, XAMPP no se puede instalar en Windows XP ya que PHP 5.5 no se puede
instalar en Windows XP). Al poner en marcha el instalador XAMPP nos muestra dos avisos:
El primero aparece si en el ordenador hay instalado un antivirus y el segundo aparece si
está activado el Control de Cuentas de Usuario y recuerda que algunos directorios tienen
permisos restringidos:
Figura 1.2 Mensajes de precaución antes de la instalación de XAMPP. [8] [2]
A continuación se inicia el asistente de instalación. Para continuar, hay que hacer clic en
el botón "Next" y luego los componentes mínimos que instala XAMPP son el servidor Apache y
134
el lenguaje PHP, pero XAMPP también instala otros elementos. En la pantalla de selección de
componentes puede elegirse la instalación o no de estos componentes, para este curso se necesita
al menos instalar MySQL y phpMyAdmin.
Figura 1.3 Comienzo de la instalación de XAMPP. [8] [3]
En la siguiente pantalla se puede elegir la carpeta de instalación de XAMPP, la carpeta de
instalación predeterminada es C:\xampp; si se quiere cambiar, hay que hacer clic en el icono de
carpeta y seleccionar la carpeta donde se quiere instalar XAMPP. Para continuar la configuración
de la instalación, hay que hacer clic en el botón "Next", la siguiente pantalla nos ofrece
información sobre los instaladores de aplicaciones para XAMPP creados por Bitnami; para que
no se abra la página web de Bitnami, habría que desmarcar la casilla correspondiente.
Figura 1.4 Elección del archivo destino y aprobación de Bitnami. [8] [4]
Para empezar la instalación de XAMPP, hay que hacer clic en el botón "Next" en la
pantalla siguiente y a continuación, se inicia el proceso de copia de archivos, que puede durar
unos minutos.
135
Figura 1.5 Proceso de inicio de copia de archivos. [8] [5]
Una vez terminada la copia de archivos, se muestra la pantalla que confirma que XAMPP
ha sido instalado, hay que hacer clic en el botón "Finish". Para no abrir a continuación el panel
de control de XAMPP hay que desmarcar la casilla correspondiente.
Figura 1.6 Finalización del proceso de Instalación. [8] [6]
El panel de control de XAMPP
Este panel se divide en tres zonas: 1) La zona de módulos, que indica para cada uno de
los módulos de XAMPP: si está instalado como servicio, su nombre, el identificador de proceso,
el puerto utilizado e incluye unos botones para iniciar y detener los procesos, administrarlos,
editar los archivos de configuración y abrir los archivos de registro de actividad. 2) La zona de
notificación, en la que XAMPP informa del éxito o fracaso de las acciones realizadas. 3) La
zona de utilidades, para acceder rápidamente.
136
Figura 1.7 Interface del servidor XAMPP. [8] [7]
Para poner en funcionamiento Apache, hay que hacer clic en el botón Start
correspondiente a Apache, pues este abre puertos en el ordenador (por primera vez), el
cortafuegos de Windows pide al usuario confirmación; para poder utilizarlo hace falta al menos
autorizar el acceso en redes privadas:
Figura 1.8 Inicialización de Apache y restricción de Firewall. [8] [8]
Si el arranque de Apache tiene éxito, el panel de control mostrará el nombre del módulo
con fondo verde, su identificador de proceso, los puertos abiertos (http y https), el botón "Start"
se convertirá en el botón "Stop" y en la zona de notificación se verá el resultado de las
operaciones realizadas. Si se abre el programa "Firewall de Windows con seguridad avanzada",
en el apartado de Reglas de entrada pueden verse las nuevas reglas añadidas.
Figura 1.9 Iniciar Apache y muestra de las reglas de entrada en Firewalls. [8] [9]
137
Para comprobar que todo funciona correctamente, hay que escribir en el navegador la
dirección http://localhost, al abrir la página por primera vez, XAMPP pedirá seleccionar el
idioma; una vez elegido el idioma, se mostrará la página de configuración de XAMPP:
Figura 1.10 Comprobación de funcionamiento del servidor. [8] [10]
Panel de Control de XAMPP
Al panel de control de XAMPP se puede acceder mediante el menú de inicio "Todos los
programas > XAMPP > XAMPP Control Panel" o, si ya está iniciado, mediante el icono del área
de notificación. Para cerrar el panel de control de XAMPP hay que hacer clic en el botón Quit;
el botón Cerrar en forma de aspa no cierra realmente el panel de control, sólo lo minimiza, si se
ha minimizado el panel de control de XAMPP, se puede volver a mostrar haciendo doble clic en
el icono de XAMPP del área de notificación. Haciendo clic derecho en el icono de XAMPP del
área de notificación se muestra un menú que permite mostrar u ocultar el panel de control,
arrancar o detener servidores o cerrar el panel de control.
Figura 1.11 Configuración en el área de notificación. [8] [11]
Editar archivos de configuración
Los dos archivos principales de configuración son los archivos httpd.conf (Apache) y
php.ini (PHP). Para editarlos se puede utilizar el panel de control de XAMPP, que los abre
138
directamente en el bloc de notas. Para ello hay que hacer clic en el botón "Config"
correspondiente a Apache y hacer clic en el archivo que se quiere editar.
Figura 1.12 Configuración de Apache y PHP. [8] [12]
Iniciar, detener y reiniciar servidores
A veces es necesario detener y reiniciar los servidores. Por ejemplo, los archivos de
configuración de Apache se cargan al iniciar Apache; si se modifica un archivo de configuración
de Apache (httpd.conf, php.ini u otro) mientras Apache está en marcha. Si al modificar el
archivo de configuración hemos introducido errores, el servidor no será capaz de iniciarse, si no
sabemos encontrar el origen del problema, se recomienda restaurar los archivos de configuración
originales, de los que se aconseja tener una copia de seguridad.
Para poner en funcionamiento Apache (u otro servidor), hay que hacer clic en el botón
"Start" correspondiente, si el arranque de Apache tiene éxito, el panel de control mostrará el
nombre del módulo con fondo verde, su identificador de proceso, los puertos abiertos (http y
https), el botón "Start" se convertirá en un botón "Stop" y en la zona de notificación se verá el
resultado de las operaciones realizadas; para detener Apache hay que hacer clic en el botón
"Stop" correspondiente a Apache.
Figura 1.13 Funcionamiento del servidor. [8] [13]
Si la parada de Apache tiene éxito, el panel de control mostrará el nombre del módulo
con fondo gris, sin identificador de proceso ni puertos abiertos (http y https), el botón "Stop" se
convertirá en un botón "Start" y en la zona de notificación se verá el resultado de las operaciones
realizadas. Para reiniciar de nuevo Apache habría que volver a hacer clic en el botón "Start"
correspondiente a Apache.
139
Instalación de servicios
Si queremos que un servidor arranque como servicio, es decir, que se ponga en marcha
cada vez que arrancamos el ordenador, hay que marcar la casilla Service correspondiente; si el
servicio se instala correctamente, se indica en el panel inferior. Los servicios instalados se
indican con una marca verde en la columna Service.
Figura 1.14 Instalación de servicios. [8] [14]
Al reiniciar el ordenador, el panel de control de XAMPP indica los servicios arrancados.
Bueno ahora tenemos nuestro servidor instalado, arrancado y configurado; el siguiente paso para
nuestra investigación es tener un buen editor de texto. Podríamos utilizar el bloc de notas de
Windows pero es muy ordinario para HTML5, por tal motivo vamos a utilizar el Sublime text
que es mucho más completo y recomendable.
Anexo 2 Características básicas de Sublime Text 2 [5]
Sublime Text es un editor de texto y editor de código fuente creado en Python
desarrollado originalmente como una extensión de Vim, con el tiempo fue creando una identidad
propia, por esto aún conserva un modo de edición tipo vi llamado Vintage mode.
Figura 2.1 Interface de Sublime Text 2
140
Sublime Text 2 se puede personalizar completamente, dispone de multitud de plugins
gratuitos que puedes descargar y utilizar, nada más abrir el programa verás una interfaz
minimalista, en el centro se encuentra el código, a la izquierda una barra lateral donde podrás ver
los archivos abiertos, entre otras cosas que explicaré más adelante y a la izquierda una barra
lateral llamada minimapa donde podrás ver tú código, y navegar con facilidad por él,
desplazándote al punto exacto donde quieres ir sin necesidad de utilizar el scroll.
Figura 2.2 Barra lateral de sublime text. [5] [2]
Sublime Text 2 Primeros pasos
La barra lateral de la izquierda, llamada SideBar (para ocultarla o mostrarla simplemente
pulsa Ctrl+K+B en Windows/Linux o Cmd+K+B en Mac) te permite visualizar los archivos
abiertos actualmente, pero puedes extender su uso a un explorador de archivos instalando el
plug-in SideBar Enhancements. Una de las opciones indispensables y la que debes aprenderte
nada más instalar Sublime Text 2 es "Goto Anything", que te permitirá localizar los archivos
rápidamente, prueba pulsando Ctrl+P en Windows/Linux o Cmd+P en Mac. Al empezar a
escribir unos cuantos caracteres empezarán a filtrarse aquellos archivos que coinciden en parte
con el nombre que has escrito, si quieres visualizar su contenido tienes que entrar dentro del
archivo con que te desplaces con las flechas del teclado; obtendrás una vista previa en el editor,
cuando estés seguro de que ese es el archivo que quieres abrir simplemente clickea o pulsa
[Enter] sobre él. Además Goto Anything no sólo te permitirá localizar archivos fácil y
rápidamente sino que también podrás desplazarte hasta una línea al escribir: [Numero], si en
lugar de los dos puntos introduces @ verás los métodos utilizados anteriormente y con # podrás
buscar en el interior del fichero.
A continuación te dejo un par de ejemplos, para que te sea más fácil recordar lo que
hemos aprendido hasta ahora de Goto Anything: Ctrl+P, Cmd+P y escribir '#search' Buscará
dentro del archivo la palabra 'search" y Ctrl+P, Cmd+P y escribir '@print' Ir al método 'print'
141
Figura 2.3 Goto Anything búsqueda e impresión. [5] [3]
Trabajar con proyectos
Para trabajar aún mejor con proyectos en Sublime Text 2, hay dos maneras:
1) File > Open (Ctrl+P, Cmd+O), de esta forma Sublime Text 2 se iniciará con la carpeta elegida
como base para tu trabajo, de forma que todas los comandos ejecutados como "Goto Anything" o
"Búsqueda Avanzada" se realizarán en base a la carpeta abierta.
2) Existe la posibilidad de combinar las carpetas y archivos en proyectos, selecciona una carpeta
y/o archivos y selecciona en el menú superior Project > Save Project As... Puedes crear tantos
proyectos como necesites y para alternar entre uno y otro sólo has de ir a Project > Switch
Project in Windows... A medida que añadas, más carpetas o archivos nuevos al proyecto se
guardarán automáticamente, incluso la posición del cursor.
Gestión de etiquetas
Otro de los puntos fuertes de Sublime Text 2 es su built-in, un motor de auto-completado
para etiquetas HTML, CSS, entre otros lenguajes, que te permitirá desarrollar sitios webs más
cómodamente; ya que dispone de autocerrado y autocompletado de etiquetas. Por ejemplo si
creas un documento nuevo de HTML y comienzas a escribir texto y pulsas tabulador, el editor te
completará y cerrará la etiqueta, así mismo si escribes: div.content y pulsas tabulador, el editor
escribirá por ti: <div class="content"></div> y lo mismo pasa con los identificadores, si escribes
div#main y pulsas tabulador el editor escribirá por ti: <div id="main"></div>. Otra característica
interesante es que si no cierras las etiquetas el auto-cerrado lo puedes realizar con Alt+.
(Cmd+Alt+.).
En el caso de CSS es algo parecido, basta con empezar a escribir unos pocos caracteres
para que el editor los reconozca; por defecto ya trae algunos predefinidos como mt y tabulador
para crear margin-top, pt y tabulador creará padding-top, etc.
142
Figura 2.4 Autocompletado de Sublime Text. [5] [4]
Personalizar Sublime Text 2
Como ya has podido leerlo anteriormente, Sublime Text es la herramienta perfecta de
desarrollo, nada más instalarla dispones de muchas ayudas a la hora de programar, auto-
completado, búsqueda, etc… pero si aun así quieres personalizar detalles como colores, skins,
teclas rápidas, también puedes hacerlo.
Cambiar el skin en Sublime Text 2
Por defecto nada más instalar y abrir el programa se mostrará con el skin Monokai, que
tiene fondo negro con letras claras. Si quieres cambiar de skin sólo tienes que acceder a:
Preferences > Color Scheme > y seleccionar un skin hasta encontrar uno que te guste, yo prefiero
utilizar el "Mac Classic". Sí has probado todos y ninguno te convence siempre puedes
descargarte más esquemas de color o bien crear uno propio.
Package Control
Uno de los plug-ins fundamentales que has de instalar nada más abrir Sublime Text 2 es
Package Control. Package Control, tal y como su nombre indica es un gestor de paquetes que te
permite instalar fácilmente cientos de plugins; a día el repositorio dispone de más de 500 plugins,
su instalación es muy sencilla, simplemente has de ir a la página de instalación de Package
Control copiar el comando que aparece remarcado con fondo gris, pegarlo en la consola de
Sublime text 2 y pulsar Enter, puedes acceder a la Consola de Sublime Text utilizando el atajo de
teclado Ctrl+` o Cmd+` si estás en Mac, si lo prefieres puedes ir directamente desde el menú
View > Show Console.
Una vez completada la instalación, puedes acceder al Package Control pulsando
Ctrl+Shift+P o Cmd+Shift+P, si escribes Package podrás ver todas las opciones disponibles del
Package Control; para instalar un nuevo paquete deberás seleccionar "Installa Package", puede
que tarde unos segundos, a continuación te mostrará una lista de todos los plugins disponibles a
instalar (si uno de los plugins ya se encuentra instalados no te lo mostrará en la lista de
instalación). Si deseas eliminar un plugin lo único que has de hacer es seleccionar Remove
package.
143
Figura 2.5 Package Control en acción. [5] [5]
Otro plugin indispensable es SideBarEnhancements, que transforma la barra lateral (el
SideBar que comentamos anteriormente) en un gestor de archivos, te permitirá renombrar
archivos, duplicarlos, borrarlos, o incluso abrirlos en otra aplicación. Su utilización es muy
sencilla, una vez instalado sólo has de hacer click derecho sobre un archivo y escoger la acción a
aplicar.
Figura 2.6 Opciones de SideBarEnhancements. [5] [6]
Si navegas por la web de Package Control, encontrarás la lista de plugins disponibles.
Explicar cada uno de ellos aquí daría para crear un libro de Sublime Text 2, así que comentaré
algunos de los más interesantes. Plugins de Sublime Text 2 recomendados para desarrollo web:
jQuery, HTML5, Linter, Prefix, LESS y Git.
Cambiar la configuración general y los atajos de teclado
Si por ejemplo estás acostumbrado a utilizar cualquier otro editor donde para buscar en
vez de Ctrl+F es Ctrl+B, puedes editar cómodamente los atajos de teclado y ponerlos a tu gusto,
no hay nada que Sublime Text 2 no te permita realizar y/o modificar. Para modificar un atajo de
teclado o bien añadir uno nuevo, lo único que has de hacer es seleccionar el menú superior:
Preferences > Key Bindings Default o Key Bindings User. Te recomiendo que modifiques Key
Bindings User, puedes copiar el contenido que quieras modificar del Key Bindings Default y
pegarlo en Key Bindings User, más que nada porque si escribes el del Usuario y luego no te
convence siempre puedes volver al de por defecto.
144
Figura 2.7 Cambio de atajos en ST2. [5] [7]
Lo mismo ocurre con la configuración general del programa, en Settings Users y en
Settings Default tienes disponible la configuración del programa. Tal y como te recomendaba
anteriormente es conveniente que las modificaciones las realices sobre Settings Users; para
localizar la configuración puedes acceder a través del menú superior en Preferences > Settings
Default o Settings Users.
Figura 2.8 Configuración de usuario. [5] [8]
Snippets
Llegamos a la parte más interesante de Sublime Text 2 los Snippets, estos son pequeños
fragmentos de códigos guardados en archivos individuales que te permitirán insertar de forma
fácil y rápida partes de código simplemente escribiendo una palabra y pulsando tabulador, o bien
asignándole una combinación de teclas. Por defecto el programa ya cuenta con unos cuantos
snippets por defecto por ejemplo "lorem" prueba a abrir un nuevo documento (Ctrl+N o Cmd+N)
y escribir lorem y luego tabulador. Los snippets además te permiten definir la posición del cursor
cuando se insertan, además de desplazarte por las diferentes partes de fragmento insertado,
pulsando tabulador.
Crear snippets puede ser relativamente sencillo todo depende de lo que quieras que realicen. Las
posibilidades son infinitas y el único límite es tu imaginación.
145
Figura 2.9 Configuración de usuario. [5] [9]
Compatibilidad con los navegadores
Antes de comenzar el proyecto es preciso especificar que navegador nos conviene utilizar
ya que todos los navegadores tienes diferentes compatibilidades con HTML5, cada quien
conforma sus plugins de diferente manera; por tal motivo razonaremos al respecto. Cuando
trabajamos con HTML5 surge un tema que genera dudas y que puede complicar nuestros
proyectos si no lo sabemos manejar; sí hablamos de la compatibilidad y en esta monografía
veremos cómo resolverlo. En notas anteriores les he contado sobre las bondades de HTML5,
pero siempre queda en el aire flotando el tema: ¿qué tan compatible es este futuro estándar en
pleno 2014?
En términos generales debemos decir que ningún navegador es 100% compatible con
todas las características de HTML5 y CSS3, esta regla se mantiene aún hoy y seguirá por un
tiempo, hasta que se estandaricen todas sus características; claro que en este sentido
encontraremos navegadores que presentan mayor compatibilidad que otros. Para comprender un
poco mejor esto, debemos saber que HTML5 comenzó a transitar su ruta hacia la estandarización
en el año 2008, con sus primeros borradores, en el 2009 algunos navegadores comenzaron a
ofrecer soporte a determinadas características, aunque recién en los años siguientes
encontraríamos un soporte más extendido. Las versiones más recientes de los navegadores más
populares del mercado soportan HTML5; entre ellos: Internet Explorer 9 (muy mejorada en
IE10), Firefox 9, Chrome 16, Safari 5.1 y Opera 11.60.
Varios de estos navegadores cuentan con soporte para HTML5 en versiones anteriores,
especialmente las surgidas entre 2010 y 2011, en el caso de IE; las versiones 6, 7 y 8 no tienen
soporte para HTML5. El primero en dar compatibilidad en esta familia ha sido Internet Explorer
9, lanzado oficialmente en el año 2011, una buena herramienta para saber el nivel de soporte de
HTML5 es el HTML5 Test. Además de ofrecernos un puntaje global, nos indica el soporte de
HTML5, ítem por ítem, del navegador que estamos usando para pasar el test.
146
Figura 2.10 Test de soporte HTML5 en los navegadores. [5] [10]
Cómo resolver la compatibilidad con HTML5
Seguramente esta es una de las grandes preguntas a resolver, la clave está en detectar
características soportadas por el navegador; primero es probable que no necesitemos utilizar
todas las características de HTML5 en todos nuestros proyectos. Lo que debemos hacer,
mediante JavaScript, es detectar si la característica que estamos incluyendo es soportada por el
navegador,
una librería Open Source que nos simplifica mucho este camino es Modernizr. De una forma
sencilla, nos permite incluirla en nuestras páginas y comprobar la compatibilidad con el
navegador, junto con Modernizr podemos utilizar otra librería llamada yepnope, la cual nos
facilitará el trabajo de realizar nuestra estructura condicional para indicar que contenido utilizar
si hay soporte HTML5 en el navegador o qué hacer en caso contrario.
Figura 2.11 Comprobación de código HTML5 en los navegadores. [5] [11]
Finalmente, tendremos la posibilidad de escribir nuestra solución para el caso en que no
encontremos compatibilidad; en algún caso podrá ser un código JavaScript, un CSS alternativo o
bien un fallback a una película Flash en el caso de video y audio. Si buscamos hacer más corto
este camino, podremos utilizar HTML5 Cross Browser Polyfills, estas librerías están basadas
generalmente en HTML, CSS y especialmente en JavaScript. Dentro de las soluciones que
encontraremos se destacan alternativas para audio, video, formularios, geolocalización, SVG,
Canvas, Web Storage, Web Sockets, Web Workers, entre otras. Los navegadores de última
generación soportan HTML5, pero ninguna en su totalidad, por lo cual es importante detectar
características a la hora de usar HTML5, Finalmente; la plataforma móvil, en especial los
147
dispositivos iOS y Android de alga gama, son una gran tentación para exprimir HTML5 al
máximo. Esto quiere decir que todo fluye hacia el mismo lugar, en otras palabras, este año
tendremos un gran crecimiento en el uso de HTML5 por lo cual es indispensable saber al
respecto.
Anexo 3 Fotos de la comprobación de la página web.
La página web se ha realizado tanto en computadora personal como en una laptop, y se
puede visualizar en ellas sin ningún problema:
Figura 3.1 Foto tomada a la pantalla de un Pc.
Figura 3.2 Página web mostrada en una laptop.
Si queremos visualizar la página en otros dispositivos con HTML5, lo podemos realizar
sin ningún problema; ya que con el model responsive todo el contenido se va adaptando y con las
imágenes elásticas todo se va dismuyendo si lo necesita y viceversa.
148
Figura 3. 3 Página web visualizada en un celular de forma vertical.
Figura 3.4 Página web visualizada en un celular de forma horizontal.
Lo mismo podemos hacer con una tablet ya que también se adapta a este tamaño o a otros
dependiendo de su marca y dimensión.
149
Figura 3. 5 Página web visualizada en una tablet de forma horizontal.
Figura 3.6 Página web visualizada en una tablet de forma vertical.
Por ultimo veamos la página web en diferentes y principales navegadores pues en cada
uno de ellos tiene que servir exactamente, pues no se sabe el navegador que el usuario vaya a
utilizar:
150
Figura 3.7 Página web visualizada en el navegador Mozila Firefox.
Figura 3.8 Página web visualizada en el navegador Google Chrome.
151
Figura 3.9 Página web visualizada en el navegador Internet Explorer.
Anexo 4 Manual de Usuario (El manual de usuario viene grabado y adjuntado en un disco
en forma de video,).
152
