Dedicatoria

El Proyecto de investigación la dedicamos a

nuestras familias por el apoyo realizado a lo
largo de la carrera, lo cual ha permitido la
conclusión de nuestros estudios.
Agradecimiento

Agradecidas con Dios por la vida que nos ha

dado, y agradecidas con el Instituto Técnico
Comercial Superior INCOS - El Alto, que como
institución nos abrió las puertas para nuestra
formación y profesionalización en el área de
Secretariado Ejecutivo.
 CAPITULO III

PROPUESTA DE INNOVACIÓN

3.1. Estructura General

Página web como medio de información en atenciòn al cliente en la Dirección de

Ferias y Mercados de la ciudad de El Alto

3.1.1. Objetivo de la propuesta

Identificar, planificar y clasificar la información de los diferentes tramites que se

realizan en la Dirección de Ferias y Mercados.

Diseñar una página web como medio de información en atención a los usuarios en
la dirección de ferias y mercados.

3.1.2. Contenido Temático

3.1.2.1. Servicios que ofrece la Dirección de Ferias y Mercados de la Ciudad de El

Alto
 Pago de Patentes: Es la emisión de proforma o liquidación para el pago de
Patentes Municipales de Actividades Económicas registradas en el Padrón
Municipal de Contribuyentes, ya sea de personas naturales, unipersonales
o jurídicas, en la forma, medios, plazos y lugares establecidos por la
Administración Tributaria Municipal del Gobierno Autónomo Municipal de El
Alto.
La cual se paga anualmente una vez que el Gobierno Municipal emite la
Resolución Administrativa que establece las fechas de vencimiento
determinando cada uno de los incentivos (descuentos). Pasada la fecha de
vencimiento, la deuda tributaria incluye multas e intereses, calculados de
acuerdo al Código Tributario vigente.

 Cambios de Nombre: Corresponde a la autorización municipal mediante la

cual se permite que un nuevo contribuyente ejerza la actividad lucrativa en
el local, una vez haciendo el trámite correspondiente y aprobado la
 solicitud, la otra persona será quien adquiera la patente que se encontraba
vigente.
Para lo cual, la persona que va a hacer el cambio de nombre no debe
contar con ninguna deuda en el sistema de contribución pe pago de
patentes.

 Autorización para asentamientos colectivos: Corresponde a la

autorización municipal mediante la cual se permite asentamientos
colectivos ya sea de ferias que son algunos días a la semana o
asentamientos permanentes que son a partir de horarios determinados, los
cuales una vez haciendo el trámite correspondiente con su respectivo
Directorio y realizadas las inspecciones del lugar donde se desarrollará el
asentamiento el cual no debe obstaculizar la circulación de peatones y
vehículos se procederá a la aprobación o negación de la autorización.

 Autorización para asentamiento temporal y/o eventual: Corresponde a

la autorización municipal mediante la cual se permite asentamientos
colectivos en determinadas fechas festivas, los cuales una vez haciendo el
trámite correspondiente con su respectivo Directorio y realizadas las
inspecciones del lugar donde se desarrollará el asentamiento el cual no
debe obstaculizar la circulación de peatones y vehículos se procederá a la
aprobación o negación de la autorización.

 Autorización para asentamiento temporal de manera individual:

Corresponde a la autorización municipal mediante el cual se permite
asentamientos temporales de manera individual en un determinado espacio
público, para lo cual una vez haciendo el trámite correspondiente y
realizadas las inspecciones del espacio donde se desarrollará el
asentamiento se procederá a la aprobación o negación de la autorización,
misma que tiene una vigencia de 45 días.
3.1.3. Recursos Materiales y humanos a utilizar

Recursos Materiales Cantidad

Computadora 1
Programas de páginas web 1
Programas de Word y Power Point 1
Hojas bon tamaño word 200
Anillados 6
Celular 2
Bolígrafos 10
Internet 2
Agenda 1

3.1.4. Resultados esperados o impacto social

Rapidez en la atención a los usuarios, debido a Una vez estructurado la

información en la página web informativo es una base directa entre la
secretaria y el público.
Mediante el proyecto se obtiene resultados satisfactorios, para el beneficio
de los usuarios como para el personal de la institución.
El usuario puede acceder fácilmente a la información con esta herramienta
virtual.
La aglomeración y la espera de personas por recabar información ya no es
parte en las Instalaciones de la Dirección de Ferias y Mercados del
Gobierno Autónomo de El Alto.
Se logra encontrar información a detalle de cada tramite que desee realizar
el usuario.
Usuarios complacidos por el nuevo método factible de información.
 La página web informativo será conocido por los usuarios que necesiten y
se les facilite la información de forma rápida y segura.
La secretaria cuenta con más tiempo para realizar las tareas asignadas en
la institución.
No se encuentra reclamos por parte de los usuarios a cerca de los
requisitos para sus trámites.
Dominio y adaptación de la página web por los usuarios.

3.3. Presupuesto

DESCRIPCIÓN CANTIDAD COSTO

Hojas bond tamaño carta 200 20 Bs.

Impresión 230 230 Bs.

Anillados 6 38 Bs.

Bolígrafos 10 10 Bs.

Fotocopias 40 10 Bs.

Servicios Profesionales 1 1000 Bs.

TOTAL 1308 Bs.

PLAN DE EJECUCIÓN

Elaboración de una página web como medio de información en atención al cliente en la

Dirección de Ferias y Mercados de la ciudad de El Alto.

1. SECCIÓN:
  Identificar las necesidades y requerimientos de información de los usuarios,
para determinar los contenidos y funcionalidades de la página web.

Para identificar estas necesidades se realizó una encuesta a los representantes de

los usuarios, el cual nos dio como resultado que un 85% de los mismos requieren
más información sobre los requisitos de los distintos trámites que se realizan en la
Dirección de Ferias y Mercados.

2. SECCIÓN

 Clasificar la información de los diferentes trámites que se realizan en la

Dirección de Ferias y Mercados.

Los trámites que se realizan en esta dirección son los siguientes:

 Pago de Patentes
 Cambios de Nombre
 Autorización para asentamientos colectivos
 Autorización para asentamiento temporal y/o eventual
 Autorización para asentamiento temporal de manera individual

3. SECCIÓN
 Diseñar una página web para la atención al cliente en la Dirección de
Ferias y Mercados.

1ro debemos saber:

Direcciones Web

¿Cómo accedemos a un ordenador concreto?

Cada servidor en Internet tiene un identificador único, denominado dirección IP.
Las direcciones IP clásicas son secuencias de 4 números entre 0 y 255 (de
32bits) (más grandes en ipv6 de 128bits)

Conocer la IP De una página web

  Si estás en Windows. Haz clic en el icono (ventana Windows = inicio) con
el botón derecho y luego sobre la opción Ejecutar.
 Se abre una ventana en la que debes escribir el comando (cmd)
 Esto abrirá una ventana con la línea de comandos
 Escribe la expresión siguiente: ping www.google.es
Aparece la siguiente respuesta, donde se muestra la IP correspondiente al
nombre que has escrito.

Ventana “Línea de Comandos” en Windows

El conocido buscador Google se encuentra en esta dirección: 172.217.23.99 ó

216.58.198.3 por lo que poniendo ese valor en un navegador web podré acceder a
esa página.

Para terminar de componer la dirección, se suele preceder de un identificador del

protocolo, que para las páginas web es http o https (en el caso de páginas
seguras). En el ejemplo anterior, la dirección completa quedaría así:

http://www.google.es

HERRAMIENTAS PARA EL DISEÑO HTML

Editor de texto: Esta aplicación no hace falta instalarla porque ya viene incluida
en los sistemas operativos: Linux (gedit), Windows (Bloc de notas), etc.
Navegador: Aplicación necesaria para ver las páginas que estamos creando.
Todos los ordenadores cuentan con ellos. Es recomendable Firefox, pero también
podemos tener Chrome. Así podemos visualizar la página en distintos
navegadores.

DESCARGA: Firefox y Chrome

Editor Visual de HTML: Podemos disponer de este tipo de editores para poder
ver la apariencia que va teniendo nuestra página web sin necesidad de recurrir al
navegador. Aunque éste es necesario siempre. Utilizaremos la aplicación Blue
Griffon, que es gratuita, multiplataforma y de código abierto.

Descarga la versión apropiada para tu sistema operativo.

DESCARGA: BlueGriffon

Editor de imágenes: Como la web es muy visual, a veces nos encontraremos con
la necesidad de editar alguna imagen o generar algún pequeño título para
nuestros contenidos. Para ello necesitaremos un programa que nos permita
realizar este tipo de edición. Podremos contar, por ejemplo, con The Gimp, una
aplicación gratuita, de código abierto y multiplataforma para edición de imágenes.

Para Windows debemos descargar la última versión y proceder a instalarla. Si

estamos trabajando con algún sistema Linux, instalaremos Gimp desde las
herramientas de instalación de aplicaciones, ya que está disponible en todas las
distribuciones.

DESCARGA: Gimp

Aplicación FTP: Cuando nuestra web esté terminada, necesitaremos transferirla

a un servidor de FTP para que esté visible en Internet. Para ello, emplearemos
una aplicación de FTP. Filezilla cumple con los requerimientos necesarios.

DESCARGA: Filezilla
 Versiones Portables: Como trabajamos en distintos ordenadores, podemos llevar
nuestros trabajos y estos programas en un USB. Los programas son archivos ZIP
que pueden ser descomprimidos en el ordenador o en el USB y ser ejecutados en
ese lugar.

Portable Ubuntu: BlueGriffon

Portable Windows: BlueGriffon

Portable Gimp

ETIQUETAS HTML
Con el lenguaje HTML damos forma al texto y al resto de elementos de una página
web mediante etiquetas como ya sabemos. Las etiquetas HTML son marcas,
escritas entre corchetes angulares (< >)

Esquema de una etiqueta html

< etiqueta atributo =” valor” > contenido </etiqueta>

Donde:

 Etiqueta: es el nombre de la etiqueta <etiqueta>. </etiqueta> (indica final de

la etiqueta)
 Atributo: característica que modifica el comportamiento de una etiqueta.
Siempre se pone dentro de la etiqueta de apertura. No todas las etiquetas
tienen atributo.
 Valor: Es el valor que damos al atributo para modificar el comportamiento
de una etiqueta.
 Contenido: Texto al que queremos dar formato.

El conjunto de las dos etiquetas con su atributo y el texto contenido en su interior

conforman un elemento HTML.

Existen, también, ETIQUETAS SIN CIERRE, SIMPLES. Por ejemplo:

• <br/> Salto de línea dentro de un párrafo

• <hr/> Dibuja una línea recta a lo largo de la página. Puede añadirse
<hr align=center width='75%'/>, para establecer una alineación y un ancho de
línea
• <img scr = “imagen”/> Inserta una imagen en el documento
ESTRUCTURA DE UNA PÁGINA WEB
Para que un fichero de texto sea interpretado como un documento html por el
navegador, debe tener esta estructura:

• Entre <HTML> y ></HTML> se inicia

• el documento y se acaba
• Tiene dos partes: <HEAD> <HTML>
<HEAD> Debemos guardarlo
y </HEAD> (cabecera) y <TITLE> con la extensión .htm o
la otra <BODY> y .html y en formato de
</TITLE>
texto plano.
</BODY> (cuerpo)
</HEAD>

• Entre <HEAD> y </HEAD> <BODY>

se escribe información de
</BODY>
la página (título, hojas de
</HTML>
estilo, codificación usada
…)
La parte <HEAD> se puede omitir.
• Entre <TITLE> y </TITLE> se coloca el título de la página, que aparecerá en la
barra del navegador y que puede contener espacio, tildes y cualquier carácter.
• Entre <BODY> y </BODY> está el cuerpo del documento, es decir, el
contenido: texto, imágenes, vídeos, etc...

Elementos de HEAD

En la sección de HEAD de la página HTML, se pueden indicar algunos parámetros

de la página como:

• Título (texto que aparece en la barra del navegador): <TITLE>Mi página

Web</TITLE>
• Descripción de la página: <meta name = “description” content = “página de
prueba”>
• Palabras claves: <meta name = “keywords” content = clave1, clave2, claver3”>
• Juego de caracteres: <meta http-equiv=”content-Type” content=”text/html;
charset=UTF-8”>

Codificación de los caracteres: Para que el navegador pueda reconocer los

acentos, espacios vacíos, se establece el set de caracteres. En Chrome, desde
Personalizar Chrome (botón parte derecha superior, tres rayas), luego Más
herramientas/codificación.

Si utilizas el editor BlueGriffon al ejecutarlo, aparece la figura de la siguiente

página:

BlueGriffon es un editor visual wysiwyg (what you see is what you get) que se
traduce como “lo que ves es lo que obtienes”, pues no hace falta abrir el
navegador para probar cada pequeño cambio que realicemos en la página web.

El programa que descargáis de la web oficial, es autoejecutable, no es necesario

instalarlo.

Entorno de BlueGriffon

1. Para comenzar, haremos clic en el botón + (crear una nueva pestaña).

Aparecerá un espacio en blanco en el que podemos escribir el texto que
queramos. Aquí no debemos escribir etiquetas; la aplicación se encargará
de incorporarlas por nosotros. Para pegar el código de etiquetas HTML
deberás tener activada la pestaña de código fuente.

Ejemplo primero.html