Curso básico para Asistente Web

TECNICO ASISTENTE WEB

PROCESO DE TRABAJO.

Funciones de Asistente Web:

1. Identificar las partes que conforman un sitio.
2. Conocer al cliente, sus necesidades y calcular como cobrar
3. Investigar a la competencia de tus clientes y recuperar información.
4. Bocetar y desarrollar propuestas.
5. Hacer edición básica de contenidos del sitio.
6. Armar un sitio web en una plataforma sencilla.
7. Presentar tu propuesta al cliente.

DESCRIPCION DE LOS ELEMENTOS DE UN PORTAL WEB

Sitio Web es una colección de páginas de internet relacionadas y comunes a un

dominio de internet en la World Wide Web (WWW).

Un dominio es la dirección única que identifica al sitio en toda la red y está formado
por triple “w” punto, nombre de la organización punto y el tipo de organización, ya sea de
gobierno (.gob), proveedor de red (.net), institución educativa (.edu), de negocios o
empresarial (.com), militar (.mil) y organización (.org).

1. Primeramente debemos registrar un dominio, existen sitios web que realizan

esta función incluso de manera gratuita si alojas tu sitio web.
2. Contratar Hosting (alojamiento u hospedaje). Existen empresas que ofrecen
hosting en servidores mediante planes, para que puedas acceder y almacenar tu
información, para almacenar tu información en el hosting, primero debes tener
una interfaz de administración remota o un software que te permita transferir
archivos locales desde tu computadora hacia el servidor web, normalmente se
usan protocolos de transferencia como FTP, FTPS, SFTP y software como
Filezilla, entre otros.
3. Diseño del sitio web. Es el paso en el que se crean y esquematizan los textos,
imágenes, videos y sonidos que estarán en el sitio y como se presentarán
visualmente, para diseñar el sitio debemos tener en cuenta la estructura y
arquitectura del sitio web.
4. Programación del sitio web. Se realiza la programación por medio de lenguajes
entendibles por los navegadores, como HTML, PHP, CSS, etcétera. Un

1
 Curso básico para Asistente Web

explorador web o navegador, permite ver sitios web en la red de información

que están en un servidor, así como descargar información y otros.
5. Publicar el sitio Web. En este último paso a través del protocolo de
transferencia de datos FTP en una interfaz de administración remota o un
software, se transfiere el sitio web desde tu computadora hacia el servidor web
para que esté disponible en internet.

Un sitio web debe contar con las siguientes características:

 Actualización periódica.
 Fácil accesibilidad y uso.
 Debe estar dado de alta en buscadores como Google para la promoción y
publicidad de la página.
 Aparecer en los primeros lugares de los resultados del motor de búsqueda.

Los 3 factores principales para el diseño de un sitio web son:

 Accesibilidad. Desde cualquier tipo de velocidad de conexión, y dispositivos
 Usabilidad. Interacción fácil.
 Posicionamiento del sitio web.

USO DE LOS PRINCIPALES FORMATOS BASICOS DE INTERNET

El formato de archivo es una manera estandarizada de codificar la información que contiene un

archivo digital.

Los tipos de formatos especifican la manera en que los bits de información de un archivo se
guardan en el disco duro y la forma en que son por la computadora.

En una página web se pueden utilizar texto, imagen, audio y video, para cada uno de estos
existen tipos de formatos de archivos que nos ayudan a identificarlos unos de otros, sin embargo,
estamos limitados por las velocidades de conexión y compatibilidad con los navegadores más
utilizados.

Para imagen los formatos más comunes son:

 BMP. Imágenes de ata calidad.
 GIF. Imágenes animadas.
 JPG. Imágenes de peso ligero.
 PNG. Imágenes con transparencias.

Para video:
 FLV. Para Youtube y Flash.

2
 Curso básico para Asistente Web

 MPEG4. Para iTunes y Quick Time.

 WEBM. Para video en HTML5.
 WMV. Para Windows Media Player.

Para Audio:
 AAC
 WAV
 MIDI
 MP3
 OGG
 VORBIS

Para contenidos mixtos de texto e imagen:

 PDF

¿Por qué estos formatos son ligeros?

Porque permiten la compresión de información innecesaria del archivo, disminuyendo la
calidad en el proceso. La compresión se puede llevar a cabo fácilmente en programas comunes de
edición digital de imagen, audio o video como Photoshop, Fireworks, Audacity, Audition, Premiere
y FinalCut, entre otros.

Siempre que se comprime debe de haber un balance entre el peso y la calidad final del archivo.
Podemos convertir archivos a otro formato siempre y cuando sean del mismo tipo, de imagen a
imagen, de video a video o de audio a audio, utilizando programas comerciales, gratuitos o en
línea tales como www.online-convert.com.

CONCEPTOS DE AUDIO DIGITAL

El micrófono convierte la señal acústica en una señal eléctrica, el micrófono tiene una lámina o
un cristal que al recibir la señal acústica vibra u oscila al ritmo de la voz o de la música provocando
que el valor de la resistencia cambie, gracias a este dispositivo se obtiene una señal eléctrica que
varía su frecuencia y su amplitud.

Una señal como esta ~ es conocida como senoide, tiene una cresta positiva y otra en sentido
contrario, ambas forman una circunferencia, al dar la vuelta una señal se dice que completa un
ciclo, si una señal completa 3 ciclos en un segundo, se dice que oscila con un valor de 3 ciclos por
segundo, esto se conoce como frecuencia y se mide en ciclos por segundo o Hertz, si la señal
completó 20 ciclos en un segundo, se dice que la señal tiene 20 ciclos por segundo o 20 Hz.

Una señal audible varía su frecuencia entre 20 y 20000 Hz. A menor frecuencia se generan los
sonidos graves, por el contrario a mayor frecuencia se generan los sonidos agudos.

3
 Curso básico para Asistente Web

La manipulación de la señal de audio analógica es muy compleja, es necesario digitalizarla, el

dispositivo que realiza esta acción es un circuito integrado.

Compresión de la voz. Para digitalizar la voz es necesario tomar muestras de la señal analógica,
entre más muestras se tomen mayor será la fidelidad de la señal digital, cada muestra se
representa en un código binario, este código se puede representar en ocho o dieciséis bits, entre
más bits se podrán guardar más muestras, por ejemplo, un estándar indica que se tomen 44,100
muestras por segundo a una señal de audio y se codifique cada muestra en 16 bits, lo que quiere
decir que puede tener 65,536 valores diferentes en cada muestra.

El Instituto de Estandarizaciones ISO por sus siglas en inglés, es encargado de definir los
estándares, veamos dos ejemplos:

MPEG-1: 32, 44.1 o 48 khz, esto es 32000, 44100 o 48000 veces por segundo.
MPEG-2: Toma muestras por 16000, 22000 o 48000 veces por segundo.

¿Por qué la compresión?

El problema es de transmisión de un dispositivo y otro, si te paras en frente de una pared y

dices una palabra, esta rebotará y escucharás dos palabras, una que tu mismo generaste y otra
que rebota en la pared, si el retraso no fue significativo no lo notarás, cuando te alejes y las
condiciones son las adecuadas escucharás la segunda señal de voz, esto se llama eco. El Eco se
produce cuando la señal tiene un retraso igual o mayor a 10 milisegundos, aproximadamente a 17
metros de distancia de la pared, si transmites una cantidad muy grande de muestra puedes
generar retraso y por la tanto degradar la señal de audio, por la tanto se utiliza la compresión de
audio, esta compresión ha sido estudiada de tal manera que para reproducir una señal
muestreada no es necesario transmitir todas las muestras sino las más significativas para que el
receptor pueda predecirlas.

Cada formato tiene variantes por ejemplo el formato MP3 utiliza la velocidad de muestreo de
41100 veces por segundo, sin embargo, utiliza la tasa de 128 a 320 kbit para la compresión.

Los formatos que se emplean en la actividad para audios son bastantes y variados, algunos de
ellos son:

Los que no tiene compresión como .wav, .aif, .CDA y .AIFF.

Los que si tienen compresión y que son propietarios mp3 , .AAC, mp4 y wma y los que son
libres GSM y VOX.

ELIMINACION DE RUIDO

4
 Curso básico para Asistente Web

El ruido es un sonido desagradable que varía la amplitud de la señal del sonido y la deforma en
el sentido eléctrico y auditivo.

Para reducir el ruido en una grabación debes estar en un lugar aislado o utilizar un micrófono
de tipo cardioide que es unidireccional y muy sensible a los sonidos que llegan por su parte frontal,
para grabaciones especiales como la de recolectar sonidos del medio ambiente, se recomienda
usar el micrófono omnidireccional porque capta todos los sonidos ambientales.

Aunque una grabación tenga ruido se puede eliminar usando un editor de audio digital (como
Audacity).

COMO INTEGRAR AUDIO A UNA PAGINA WEB

Para integrar un archivo de sonido a tu página web o blog, primero súbelo a un servicio de
almacenamiento de archivos en línea, por ejemplo, SoundCloud, donde te registras y creas una
cuenta, ya que te registraste selecciona la opción para subir tus archivos, se abrirá una página
nueva que te permite seleccionarlos, después escribe la información que te piden y salva, ahora se
abrirá un cuadro con la información de tu archivo guardado, selecciona la opción que se muestra
para ir a tu sonido, aparecerá una nueva ventana con tu archivo cargado. Si ya tienes el código
HTML del sonido vamos a introducirlo en una publicación en este caso de blog (Blogger).

CONCEPTOS DE IMÁGENES DIGITALES

La edición digital de imágenes se refiere al retoque y modificaciones que se realizan

comúnmente en gráficos, fotos o documentos digitales con la finalidad de mejorarlos.

La edición de imagen puede ir desde eliminar las fallas que se producen durante la toma de
fotografías y/o escaneo, sobreexposición, baja exposición, falta de contraste, ruido en la imagen,
efecto en los ojos rojos, hacer un fotomontaje hasta la restauración de imágenes dañadas.

Tipos de imágenes digitales

Imágenes de mapa de bits. Están formadas por una serie de puntos llamados pixeles, cada uno
de los cuales tiene información de color y luminosidad, una característica principal es que al
modificar el tamaño de la imagen, la coloración y distribución de los pixeles se altera, dando como
resultado una imagen deformada.

Imágenes vectoriales. Los objetos que forman la imagen están constituidos por trazos
geométricos autónomos, líneas, curvas, polígonos, etcétera, definidos por ciertas funciones
matemáticas, vectores, que determinan sus características, forma, color, posición, tamaño, etc.
Una de las características principales es que los trazos que forman la imagen pueden modificarse
sin alterar la imagen completa, su principal ventaja es que las imágenes vectoriales son

5
 Curso básico para Asistente Web

independientes de la resolución del monitor, ya que al ampliar o reducir la imagen, la

computadora vuelve a calcular las coordenadas de los vectores permitiendo ampliar la imagen sin
sufrir el efecto de pixeleado.

Algunas características que debes tomar en cuenta a la hora de editar imágenes son:

Resolución (PPP o DPI). Es la calidad con que se una imagen digitalizada. La resolución de una
imagen para presentarse en la pantalla es de 72 a 130 ppp, si es para imprimir será una resolución
aceptable de 150 a 300 ppp para imprimir a cuatro colores, en la actualidad hay equipos que
imprimen a más de 2400 ppp.

Color de la imagen. Puede ser monocromática (un solo color), blanco y negro, en escala de
grises, RGB combina los colores primarios aditivos para trabajarse con luz (rojo, verde y azul),
dando como resultado los colores cian, magenta y amarillo, este modo de color se usa para formar
las imágenes a color y presentarlas en la pantalla a color con combinaciones de hasta 16.7
millones de colores. CMYK, este se basa en la combinación de los colores sustractivos para los
pigmentos (cian, magenta, amarillo y negro) este modo de color lo utilizarás para cuando quieras
imprimir tus imágenes a colores.

Tipos de formatos

Los más utilizados son:

GIF Graphics Interchange Format. Este formato se usa cuando la imagen tiene tonos no
continuos o grandes cantidades de un solo color, lo puedes utilizar para publicaciones en la web,
ya que comprime las imágenes digitales disminuyendo el tiempo de transferencia, su
inconveniente es que solo se usa una paleta de 256 colores (8 bits, RGB).

BMP Bit Mapped Picture. No sufre pérdidas de calidad, resulta adecuado para que guardes
imágenes que posteriormente manipularás, el incoveniente de usarlo es que puedes tener un
archivo final muy pesado ya que maneja una paleta de 16.7 millones (hasta 24 bits, RGB).

JPG o JPEG Joint Photographic Expert Group. Lo puedes usar para almacenar imágenes o
fotografías de tono continuo, también admite una paleta de hasta 16.7 millones de colores (hasta
24 bits, RGB, CYMK), puedes usarlo para publicar imágenes en la web, ya que utiliza un método de
alta compresión con el inconveniente de que puede perder calidad.

PNG Portable Network Graphics. Posee características iguales que los formatos GIF y JPEG
como la técnica de indexación para crear colores transparentes, es un formato gráfico basado en
un algoritmo de compresión sin pérdida, por lo que también puedes utilizarlo en la web, emplea
una paleta de 24 bits con 16.7 millones de colores.

6
 Curso básico para Asistente Web

Requerimientos mínimos por parte de la computadora

2 gigabytes de memoria RAM

Disco duro de 80 Gb
Procesador Intel Core i3/Athlon X2 AMD
Tarjeta gráfica mínimo de 1 Gb (en caso de que se quiera mejorar el rendimiento)

ELABORACION DE UN PORTAL WEB

El primer paso es obtener un hosting y un dominio:

Hosting. Es el almacén de memoria en la red. Tipos de contratación de hosting: alojamiento y

hospedaje.
Dominio. Dirección de internet conocida como dirección IP, esta dirección por lo regular es
dinámica y cambia frecuentemente, cuando desarrollas una página debes tener una IP fija, esto se
llama adquirir o comprar un dominio, el dominio es el nombre de tu página web.

Tu proveedor de internet te lo puede ofrecer de manera gratuita o con algún cargo extra. Su
costo aproximado es de 11 dólares mensuales e incluye el hosting y el dominio.

El siguiente paso es elegir el software o aplicación en la que realizarás la página web, aunque
puede ser más sencillo utilizar las aplicaciones que te ofrece tu proveedor de hosting.

ELEMENTOS DE DISEÑO GRAFICO

Ayuda de Estudio Fundamentos Básicos de teoría del color y tipografía.

Significado de los colores en nuestra cultura:

Blanco. Pureza, limpieza.

Negro. Poder, elegancia.
Rojo. Pasión, atención.
Naranja. Energía, vibrante.
Amarillo. Alegre, alerta.
Verde. Natural, saludable.
Morado. Realeza, sabiduría.
Azul. Lealtad, paz.

Armonía del color

La teoría del color, nos muestra las variantes que existen para armonizar los colores usando
como herramienta el círculo cromático.

7
 Curso básico para Asistente Web

Colores complementarios. Como rojo y verde, son utilizados para generar un aspecto vibrante,
aunque son malos para colocar texto.
Colores análogos. Se encuentran contiguos en la rueda de color, son agradables a la vista, se
elige un color dominante, un segundo para apoyar y un tercero junto con negro, blanco o gris para
acentuar.
Colores en triada. Son muy vibrantes, se debe dejar dominar un color y utilizar los otros dos
para acentuar.
Colores complementarios divididos. Son a menudo una buena opción para los principiantes, ya
que son muy fáciles de combinar.
Colores tetraédicos. Combinan cuatro colores dispuestos en pares complementarios, funciona
mejor con un color dominante, se debe prestar atención al equilibrio entre los colores cálidos y
fríos.
Colores en cuadrado. Similar al anterior, pero con los cuatro colores espaciados
uniformemente alrededor del círculo cromático.

Patrones y texturas

Para dotar de profundidad al sitio web se utilizan elementos como patrones y texturas, para
generar los fondos que sirven como base para la distribución de colores en la pantalla, los
patrones son pequeñas imágenes de carácter sencillo que son repetidas tanto en los ejes X y Y de
la pantalla, son muy ligeros en cuanto al peso del archivo y ofrecen una forma muy eficiente de
rellenar fondos de forma rápida considerando conexiones a internet lentas.

Por otra parte las texturas son más complejas, se repiten al igual que los patrones, sin
embargo, las texturas tienen una mayor tendencia a la aleatoriedad y permiten mayor variedad en
su diseño, un ejemplo muy utilizado de textura es el ruido. Estos patrones o texturas pueden ser
creados con programas de diseño o edición de imágenes tales como GIMP, Photoshop, Fireworks,
Paint.net entre otros.

Tipografía

Es muy importante, ya que aunque los colores provoquen sensaciones y ayuden a crear un
ambiente óptimo para el cliente, las personas entran principalmente a un sitio para leer texto. Por
lo anterior hay que tener en cuenta elementos de la tipografía como espaciado, alineación,
jerarquía, escala, número de fuentes diferentes, espaciado de línea y peso visual de las fuentes.
Cada uno de estos parámetros determina la personalidad del sitio web.

Reglas de tipografía a considerar

 Lee tu texto ¿es legible?

 Coloca texto real, no de relleno. Que el texto real sea semejante al producto final, no
coloques texto de relleno o Lorem ipsum.

8
 Curso básico para Asistente Web

 Muestra una buena jerarquía.

 Pon especial atención a la tipografía micro y macro, utilizando la macro para enfatizar
ideas o palabras y la micro para texto que sea fácil de leer.
 Cuida el color de la fuente.
 Se consistente en las páginas del sitio, esto es, consistencia en la tipografía, el orden y
estilo, debe ser homogéneo.
 No abuses del texto centrado.
 Cuida los signos que usas.
 Utiliza fuentes del tipo Sans Serif (sin adornos ni remates)
 No utilices más de cuatro fuentes.

Para la selección de fuentes puedes recurrir a sitios que permiten su libre uso comercial, como
es el caso de Typekit o Google Fonts.

ELABORACIÓN DE BOSQUEJOS DE PÁGINAS WEB

Antes de desarrollar una página web es necesario realizar un bosquejo, el cual te ayudará a
representar su diseño y estructura de forma muy sencilla y a esquematizar los detalles necesarios
de cómo se visualizará en el navegador una vez terminada y montada en un servidor.

En un bosquejo puedes plasmar detalles como cuántas columnas, dónde vas a colocar las
imágenes que tan grande serán las letras, de qué color será el fondo, cómo serán los menús de
navegación, cuáles serán las ligas a sitios externos y lo más importante, cómo va a interactuar el
usuario con la página.

Aspectos a considerar en la elaboración de un bosquejo

 Regla de los tercios. Ésta dice que la sección más importante de nuestra página web,
debe ocupar dos tercios del total del espacio disponible y lo restante deberá ocupar un
tercio del total, por ejemplo, en los dos tercios puedes colocar elementos a resaltar,
como imágenes y texto importante y los links o enlaces en el tercio restante.

 Equilibrio. Recuerda que cada elemento de tu página tendrá un peso inicial, de acuerdo
a su tamaño y color, por lo que debes cuidar que todos estos elementos se encuentren
correctamente colocados y alineados de tal manera que tu página quede balanceada.

 Texto. En un bosquejo lo que se busca es la esquematización del contenido de tu

página por ello no interesa el contenido en sí, por tal razón el texto lo puedes
representar mediante líneas o trazos de diferente tamaño, utilizando tamaños de letras
adecuados y claridad de los textos en la versión final de tu diseño para facilitar la
lectura.

9
 Curso básico para Asistente Web

 Color. A través de éste se puede manipular el subconsciente de las personas

causándoles un efecto agradable al ver tu página web.

 Navegación. Se deben considerar en el bosquejo los espacios donde se pondrán los

enlaces de navegación como son menús, hipervínculos y cualquier otro mecanismo que
permita al usuario pasar de una ventana a otra de una forma rápida y sencilla. Los
puntos más importantes que se deben tener en cuenta son tener un sistema de
navegación principal y constante en todo el sitio, tener sistemas de navegación
secundarios entre páginas dependiendo de la ubicación del usuario para menús e
hipervínculos debes utilizar nombres cortos y sencillos, el usuario debe saber donde se
encuentra en todo momento, las tareas más comunes deberán realizarse de una
manera más simple. Un punto importante que debes tener presente en todo
momento, es que tu página debe ser un sitio predecible, es decir, los hipervínculos
deben llevar a contenidos que el usuario espera encontrar.

ELABORACIÓN DE PÁGINAS WEB DE NEGOCIOS

Información básica.

 Nombre de la empresa.
 Giro del negocio.
 Datos de contacto.
o Teléfono
o Dirección física
o Ciudad
o Correo electrónico
o Horarios de atención
 Logotipo, imágenes y fotos
 Descripción resumida
o Producto o servicio

ELABORACIÓN DE UN SITIO WEB INFORMATIVO

Tiene como objetivo presentar información veraz basada en hechos, por lo general su dirección
de internet termina con edu, org o net, porque muchas de estas páginas están patrocinadas por
instituciones educativas, agencias gubernamentales u organizaciones independientes.

El primer paso para desarrollar una página informativa es la recopilación de información sobre
la organización, después plantea una propuesta de mapa inicial que tendrá cambios durante el
diseño del sitio. Decide que secciones deben incluirse, la razón de ser de la página debe plasmarse

10
 Curso básico para Asistente Web

en la misión, visión y los valores claves de la organización, elige los elementos gráficos que deben
incorporarse como fondos, fuentes tipográficas, fotografías, botones e iconos, enlaces, animación
y movimiento.

MANTENIMIENTO A UNA PÁGINA WEB

 Poder ocupar mejores posiciones en los buscadores.

 Evitar ser bloqueada por navegadores nuevos.
 Utilizarla como una herramienta de ventas y no como un adorno.

Mantenimiento básico

 Revisión periódica del correcto funcionamiento de la página web.

 Resolución de problemas debido al paso del tiempo.
 Actualizar imágenes, textos, archivos, etc.
 Actualización de ofertas, productos y servicios.
 Actualización de catálogos.
 Actualización de precios.
 Añadir nuevas noticias o comunicados.
 Insertar banners publicitarios.

Mantenimiento avanzado

 Insertar secciones en la página web.

 Posicionamiento web como estrategia de ventas.
 Mantenimiento de publicidad de campañas de pago.
 Creación e inserción de nuevas páginas estáticas dentro de la web.
 Diseño de banners animados.
 Creación de boletines informativos.
 Mejorar la funcionabilidad de elementos mediante programación.
 Corrección de errores de seguridad.
 Corrección de problemas no detectados durante la fase de desarrollo y pruebas.
 Copia de seguridad periódica de las bases de datos.

SEGURIDAD DE INFORMÁTICA

 Disponibilidad. Se refiere a que la información y los recursos informáticos, estén

siempre disponibles para cubrir los requerimientos del negocio y evitar pérdidas por su
ausencia.
 Integridad. La información debe ser confiable, completa y protegida de modificaciones
no intencionales y no organizadas por la propia organización.

11
Curso básico para Asistente Web

 Confidencialidad. La información debe protegerse de su revelación no autorizada.

Clasificación de la información

Se divide en tres niveles: Confidencial, Interna y Pública.

Control de acceso a la información.

Prácticas básicas de seguridad web (páginas programas con PHP)

 Registro de usuarios y contraseñas seguras.

 Limita el número de intentos de acceso.
 Utiliza sólo conexiones seguras (SSL) en los servidores donde se hospedan los sitios.
 Solicita contraseña cuando se realicen tareas administrativas importantes en el
sistema.
 Rastrea el paso a los datos (origen y destino)
 Filtra los datos de entrada a las bases de datos.
 Identifica los datos de salida de las bases de datos.

12