Professional Documents
Culture Documents
BLOQUE I.
PLANEAR Y DISEAR EL
MAQUETADO A PARTIR DE LOS
REQUERIMIENTOS DEL CLIENTE.
CONOCIMIENTOS
Define cada
Etapas
de
sistemas.
HABILIDADES
ACTITUDES
VALORES
una de
anlisis
BLOQUE I
PROBLEMTICA SITUADA
La empresa La vuelta al mundo es una Agencia de viajes la cual fue creada
hace 4 aos y hasta el momento ha tenido un desarrollo discreto, este ao se
han propuesto crecer. Como primer paso han reubicado el local ya que se
encontraba en una zona poco comercial y era muy pequeo; ahora se
encuentran en un local ms grande en un reconocido centro comercial de la
ciudad de Mxico. El propietario requiere darse a conocer por todos los medios
de publicidad pero no cuenta con una pgina Web para llegar a mucho ms
personas.
Se han puesto en contacto contigo para que le construyas una pgina donde
ofrezcas todos sus servicios y los telfonos de la agencia para que los puedan
contactar. En el primer encuentro con el cliente, ste te entrega uno de los
folletos que mand a hacer, con el fin de que obtengas toda la informacin
respecto a destinos, paquetes, costos y promociones, asimismo le gustara que
incluyeras imgenes de las ciudades a las que tiene servicio y los principales
sitios de inters en stas, incorporando enlaces a las pginas de turismo de los
estados, as como un enlace al correo electrnico de la agencia.
del cliente.
FASE 2. Disear la pgina Web mediante la elaboracin de una maqueta que cumpla
con los requerimientos del cliente.
3. Desarrollo
Durante la etapa del Desarrollo es nicamente el planteamiento de lo realizado
en la etapa anterior, y es recomendable tener juntas peridicas con el cliente
para saber que se esta llevando el proyecto por el camino deseado por la
marca o empresa.
4. Implementacin
Esta etapa consiste en subir el sitio a un servidor Web para su lanzamiento.
ANALISIS DE SISTEMAS.
Es un conjunto o disposicin de procedimientos o programas relacionados de
manera que juntos forman una sola unidad .Un conjunto de hechos, principios
y reglas clasificadas y dispuestas de manera ordenada mostrando un plan
lgico en la unin de las partes. Un mtodo, plan o Procedimiento de
clasificacin para hacer algo. Tambin es un conjunto o arreglo de elementos
para realizar un objetivo predefinido en el procesamiento de la Informacin.
Esto se lleva a cabo teniendo en cuenta ciertos principios:
LOS SISTEMAS DE INFORMACIN llevan a cabo cambios en 4 aspectos
.1.- Trabajo ms Inteligente. Facilitan la operacin eficiente, de oficinas, banca
electrnica funciones de contabilidad. Nuevas ideas y tecnologas son los
factores del xito.
2.- Fusin global de empresas. Funciones de la bolsa, bienes races. Estaban
separadas por leyes. La transaccin real es de informacin. Se crearon
sistemas de informacin que involucran dinero, acciones y propiedades.
3.- Ideas e informacin. Antes lo ms importante era el uso del capital, dinero
y recursos. Hoy son las ideas y el uso de la informacin
.4.- Usuarios trabajadores de la informacin. El 28% de los sueldos es
manufactura. El resto es para manejo de informacin. Utilizan, crean,
administran la informacin. Usuarios. Un sistema ayuda a trabajar con mayor
eficiencia.
PRESENTACIN Y MAQUETACIN
Uno de los pilares bsicos de la accesibilidad es separar el contenido de la
presentacin, por tanto, el contenido de una pgina Web no depende ni
funcionalmente, ni semnticamente de los estilos que se utilicen para
presentarlo. Es decir, que una pgina Web se entienda de igual modo si se
acceda a travs de un navegador tradicional, en modo texto, pantallas
monocromticas, un lector de pantalla, un dispositivo mvil, etc. De este
modo, una vez estructurado adecuadamente el contenido del sitio, es
necesario organizar la presentacin a travs de los estilos e insercin de
elementos decorativos. La eleccin de un estilo uniforme a lo largo del sitio
Web ayuda a las personas con discapacidad para el aprendizaje y la lectura,
pero tambin facilita la navegacin a todos los usuarios. De este modo, si dos
enlaces textuales se presentan de manera distinta, el usuario puede no
REVISIN
Una vez finalizado el proceso de construccin del sitio Web, es necesario
revisar y comprobar los requisitos de accesibilidad. Asimismo, debe leerse el
contenido ntegro para garantizar que el lenguaje empleado sea lo ms sencillo
posible para llegar al mayor nmero posible de usuarios. En la revisin puede
ser til emplear un lector de pantalla para navegar por el sitio y as comprobar
que se accede a todo contenido y no se pierde ninguna informacin ni
funcionalidad
ANEXO 2.
CONCEPTO DE BOCETO
Para que la idea sobre un sitio web se materialice en un diseo hay un paso
imprescindible: bocetar. El boceto, layout, o mock up es una representacin
visual simplificada de los elementos visuales que contendr la pgina o sistema
web y tiene dos objetivos bien definidos:
ANEXO 3.
MAQUETACIN WEB.
Maquetacin es la distribucin de los elementos en nuestra pgina. Piensa en
una pgina web cualquiera. Seguro que distingues algunos elementos, como
encabezados, columnas, mens laterales, etc.
CONSTRUCCION DE UNA MAQUETA WEB (Dreamweaver)
Hace unos aos, la maquetacin de las pginas web se realizaba utilizando
tablas (<table>). Una vez entendido este proceso poda resultar sencillo,
aunque si no se dominaban las tablas, poda convertirse en algo tedioso. El
problema de las tablas es que generaban un pgina muy encorsetada, y el
cdigo se volva complejo de entender. Adems, algunos buscadores
encontraban problemas al analizar la estructura de la pgina.
Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza
utilizando capas (<div>), tambin llamadas divisiones o contenedores. La
colocacin de las capas en la pgina se realiza a travs de CSS. Esto
permite, por ejemplo, que podamos pasar de un diseo con un men lateral
a otro con el men en la parte superior, slo cambiando la hoja de estilos.
Ejemplos de maquetacin
La maquetacin contiene la siguiente estructura
ACTIVIDADES INFORMATICA
http://willyfigueroa.wordpress.com/2009/05/10/actividades-para-informatica/
GRUPO:
FECHA
PUNTAJE
II.
1. contenido y estructuracin,
2. presentacin y maquetacin
3. revisin
4. maquetar una pgina web
A) 1,2,3,4
B) 2,3,4,1
C) 4,3,2,1
D) 3,2,1,4
III.
ETAPA
CARACTERISTICA.
1. contenido y estructuracin
2. presentacin y maquetacin
B. Identificar
los
elementos
de
estructura bsicos: encabezados,
listas, prrafos, tablas de datos,
etc.
3. revisin
RESPUESTA
a) 1A, 2B, 3C, 4D
b) 1B, 2A, 3D, 4C
c) 4A, 1B, 3C, 4D
arborescencia), as como
y
b) Maquetacion
su
c) Interfaz
interfaz grfica
ergonoma).
d) Folleto
b) Maquetacion
c) Interfa
z
d) Folleto
b) Table
c) Ol
d) Dv
b) Diseo
de
Sistemas
.
c) Estudio
de
Sistema|
d) Mantenimiento
del sistema
a) Analisis
de
sistemas
b) Diseo
de
Sistemas
.
c) Estudio
Sistema|
de
d) Mantenimiento
del sistema
IV.
de
b) Diseo
de
Sistemas
.
c) Estudio
Sistema
de
d) Mantenimiento
del sistema
______________________________________
Es el proceso de
planificar, reemplazar o complementar un sistema existente. Pero es necesario
comprender el viejo. Utilizar las computadoras para hacer el trabajo mas
eficiente.
______________________________________Es
el
proceso
de
clasificacin e interpretacin de hechos, diagnostico de problemas y empleo de
la informacin para recomendar mejoras al sistema. Cul es el flujo de
informacin en todo el sistema.
______________________________________Esta
acumulacin
informacin es la que precede a todas las dems actividades del anlisis.
de
CONOCIMIENTOS
PGINA
HABILIDADES
WEB
CON
LENGUAJE
ACTITUDES
VALORES
HTML
El
alumno
emplea
las El alumno maneja cada El
alumno muestra
Etiquetas HTML y Scripts.
una de las etiquetas y una actitud reflexiva
las aplica a la pgina.
en la creacin de su
pgina web.
El alumno define que son El alumno emplea las El alumno manipula
Hojas de estilo (CSS).
hojas de estilo.
cada uno de los
estilos a la pagina
web.
maqueta diseada
ANEXO 4.
QU SON LAS HOJAS DE ESTILO O CASCADING STYLE SHEETS?
CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada que es un lenguaje que describe la presentacin de los documentos
estructurados en hojas de estilo para diferentes mtodos de interpretacin, es
decir, describe cmo se va a mostrar un documento en pantalla, por
impresora, por voz (cuando la informacin es pronunciada a travs de un
dispositivo de lectura) o en dispositivos tctiles basados en Braille.
Para qu sirve?
CSS es una especificacin desarrollada por el W3C (World Wide Web
Consortium) para permitir la separacin de los contenidos de los documentos
escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento
con las hojas de estilo, incluyendo elementos tales como los colores, fondos,
mrgenes, bordes, tipos de letra..., modificando as la apariencia de una pgina
web de una forma ms sencilla, permitiendo a los desarrolladores controlar el
estilo y formato de sus documentos.
Cmo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los
elementos en los documentos estructurados, y que forman la sintaxis de las
hojas de estilo. Cada regla consiste en un selector y una declaracin, esta
ltima va entre corchetes y consiste en una propiedad o atributo, y un valor
separados por dos puntos.
Selector
Ejemplo:
h2 {color: green;}
h2 ---> es el selector
{color: green;} ---> es la declaracin
color ---> es la propiedad o atributo
green ---> es el valor
Selector
El Selector especifica que elementos HTML van a estar afectados por esa
declaracin, de manera que hace de enlace entre la estructura del documento
y la regla estilstica en la hoja de estilo.
Declaracin
La Declaracin que va entre corchetes es la informacin de estilo que indica
cmo se va a ver el selector. En caso de que haya ms de una declaracin se
usa punto y coma para separarlas.
Propiedad o Atributo y Valor
Dentro de la declaracin, la Propiedad o Atributo define la interpretacin del
elemento asignndosele un cierto Valor, que puede ser color, alineacin, tipo
de fuente, tamao..., es decir, especifican qu aspecto del selector se va a
cambiar.
TRES TIPOS DE ESTILOS
La informacin CSS se puede proporcionar por varias fuentes, ya sea adjunto
como un documento por separado o incorporado en el documento HTML, y
dentro de estas posibilidades destacan tres formas de dar estilo a un
documento web:
Hoja de Estilo Externa
La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo
con el cdigo HTML al cal estar vinculado a travs del elemento link, que debe
ir situado en la seccin head. Es la manera de programar ms eficiente, ya que
separa completamente las reglas de formato para la pgina HTML de la
estructura bsica de la pgina.
Hoja de Estilo Interna
La Hoja de Estilo Interna est incorporada a un documento HTML, a travs del
elemento style dentro de la seccin head, consiguiendo de esta manera
separar la informacin del estilo del cdigo HTML.
Estilo en Lnea
El Estilo en Lnea sirve para insertar el lenguaje de estilo directamente dentro
de la seccin body con el elemento style. Sin embargo, este tipo de estilo no se
recomienda pues se debe intentar siempre separar el contenido de la
presentacin.
1. Hojas de estilo: una base para el marcado semntico
Una hoja de estilo es un conjunto de especificaciones que declara cmo deben
mostrarse los componentes de una pgina web, es decir, cmo debe
interpretar el navegador, a efectos de presentacin visual, los distintos
2. REGLAS
Una regla CSS se compone de tres partes:
1. Selector
2. Propiedad
3. Valor
Una regla simple organiza los tres componentes anteriores de acuerdo a la
siguiente estructura:
selector {propiedad: valor;}
Por ejemplo, la regla siguiente evita que un elemento marcado con h1
aparezca en negrita.:
h1 { font-weight: normal; }
Una regla puede contener ms de una propiedad con sus respectivos valores,
separadas entre ellas por punto y coma (se considera una buena prctica
aadir tambin punto y coma al final). Ejemplo:
h1 { font-weight: normal; color: red;}
Una regla puede dar formato a ms de un elemento a la vez, separando estos
mediante comas. Ejemplo:
h1, h2, h3, h4 { font-weight: normal; color: red; }
3. Declaracin
Las reglas de las hojas de estilo se pueden declarar en tres sitios distintos:
1. En la pgina web
2. En un archivo externo
3. En un elemento
En los casos 1 y 2, las reglas de declaran con la misma sintaxis (que es la que
ya hemos visto). En el caso nmero 3, hay una sintaxis especfica ya que se
declara dentro de un elemento (X)HTML y debe respetar sus convenciones.
Adems, cada forma de declaracin necesita el procedimiento de vinculacin
especfico que se muestra a continuacin.
En la pgina web
La hoja de estilo se declara en la seccin head, dentro del elemento style. Por
ejemplo:
LOS SCRIPTS
Un script es un programa insertado dentro del documento HTML y que es
interpretado y ejecutado por el navegador del usuario. Por tanto estos
programas se ejecutan en el ordenador del usuario bien sea directamente (al
leer la pgina) o cuando se produce un suceso o evento particular, como puede
ser el pulsar sobre un enlace o mover el ratn o cargar una imagen...
Estos scripts permiten crear pginas dinmicas, modificar el comportamiento
normal del navegador, validar formularios, realizar pequeos efectos visuales,
etc... Sin embargo, conviene recordar que se ejecutan en el navegador del
usuario y no en la mquina donde estn alojadas, por lo que no podrn realizar
cosas como manejar bases de datos. Esto hace que los contadores (por
ejemplo) se deban realizar de otra manera, utilizando programas CGI (escritos
en lenguajes como Perl o PHP).
El primer lenguaje usado para crear scripts fue el JavaScript de Netscape.
Nacido con la versin 2.0 de este navegador y basado lejanamente en la
sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces ejerca
Netscape en el mercado de navegadores permitieron que se popularizara y
extendiera su uso.
Internet Explorer de Microsoft, comenz a soportar este lenguaje en su versin
3.0, pero al mismo tiempo introdujo otro lenguaje con las mismas funciones: el
VBScript, una derivacin de BASIC. Pero este intento no lleg muy lejos, y el
http://www.elcodigo.net/taller/javascript/indices.html
ANEXO 5
CONCEPTO DE NAVEGADOR
Un navegador web o explorador web (del
ingls, navigator o browser) es una
aplicacin software que permite al
usuario
recuperar
y
visualizar
documentos de hipertexto, comnmente
descritos en HTML, desde servidores web
de todo el mundo a travs de Internet.
Esta red de documentos es denominada
World Wide Web (WWW). Cualquier
navegador actual permite mostrar o
ejecutar grficos, secuencias de vdeo,
sonido,
animaciones
y
programas
diversos adems del texto y los
hipervnculos o enlaces.La funcionalidad bsica de un navegador web es
permitir la visualizacin de documentos de texto, posiblemente con recursos
multimedia incrustados. Los documentos pueden estar ubicados en la
computadora en donde est el usuario, pero tambin pueden estar en
cualquier otro dispositivo que est conectado a la computadora del usuario o a
travs de Internet, y que tenga los recursos necesarios para la transmisin de
los documentos (un software servidor web). Tales documentos, comnmente
denominados pginas web, poseen hipervnculos que enlazan una porcin de
texto o una imagen a otro documento, normalmente relacionado con el texto o
la imagen.
Podemos utilizar esa ruta para llamar a la imagen desde cualquier sitio (ya se
en nuestro dominio o en otro).
Ruta Relativa:
La ruta relativa llama al mismo archivo pero DESDE el lugar donde estamos
parados, es decir que solo funciona dentro de nuestro dominio. Por ejemplo: si
nosotros estamos en el directorio principal y queremos insertar la foto desde el
index la ruta relativa DESDE el index sera: imagenes/miperro.jpg
Nosotros ya estabamos en comocrearunsitioweb.com/ solo habia que entrar a
una carpeta llamada imagenes y buscar la foto. Ahora supongamos que
estamos dentro de una categoria llamada "articulos" y queremos insertar la
foto, la ruta relativa DESDE ese punto sera: ../imagenes/miperro.jpg
Los dos puntos antes de la barra (../) significa un paso hacia atrs, porque
teniamos que salir de la carpeta "articulos" y entrar a la carpeta "imagenes"
donde esta la foto.
ELEMENTOS MULTIMEDIA
Una pgina Web puede tener distintos tipos de elementos interactivos y
multimedia. Un elemento interactivo es un elemento que puede cambiar
dependiendo de cmo acte el usuario. Un elemento multimedia puede ser
un sonido, una cancin, una animacin, un vdeo...
Ambos tipos de elementos pueden darle vida a una Web, pero utilizar en
exceso esta clase de elementos har que la carga de nuestra Web sea lenta
y engorrosa, por lo que los visitantes podran perder el inters. Por lo tanto,
hemos de usarlos con mesura.
Existen objetos que son una mezcla de ambos, como son las animaciones
Flash. Estas animaciones pueden incluir sonidos e imgenes, y adems ser
interactivas.
Un problema comn, adems de la lentitud de carga, es la
compatibilidad. No todos los efectos son soportados por todos los
navegadores, en especial por los navegadores ms antiguos. FrontPage nos
ofrece algunas ayudas para resolver este problema. En general, si un
navegador no soportara un efecto en particular, sencillamente lo ignora,
por lo que en general nuestra Web podr seguir siendo visitada, aunque sin
ese efecto.
FECHA
PUNTAJE
I.
a) Scripts
b) HTML
c) Navegador
11. indica la direccin completa del archivo sin importar donde estemos.
a) Ruta Absoluta
b) Ruta Relativa
c) Ruta interna
12.llama al mismo archivo pero DESDE el lugar donde estamos parados, es
decir que solo funciona dentro de nuestro dominio.
a) Ruta Absoluta
b) Ruta Relativa
c) Ruta interna
CONOCIMIENTOS
HABILIDADES
ACTITUDES
Y
VALORES
El alumno define y explica las El alumno selecciona a El alumno mantiene
funciones de un servidor Web. un
proveedor
de una actitud critica en
servicios y sube su seleccionar
al
pgina.
proveedor de servicios
de internet.
El alumno define
y explica El alumno emplea el
las funciones de protocolos protocolo para subir
de comunicacin.
archivos.
El alumno define el concepto
de un Proveedor de servicio
de alojamiento Web.
PRODUCTO 6.
Obtener una cuenta de usuario con el proveedor del servicio de alojamiento
Web considerando elementos de seguridad.
Realizar la carga de archivos en el servidor pblico o privado por medio del
protocolo de transferencia de archivos (FTP).
ANEXO 6.
SERVIDOR WEB.
Un servidor web es un programa que se ejecuta continuamente en un
computador, mantenindose a la espera de peticiones de ejecucin que le har
un cliente o un usuario de Internet. El servidor web se encarga de contestar a
estas peticiones de forma adecuada, entregando como resultado una pgina
web o informacin de todo tipo de acuerdo a los comandos solicitados. En este
punto es necesario aclarar lo siguiente: mientras que comnmente se utiliza la
palabra servidor para referirnos a una computadora con un software servidor
instalado, en estricto rigor un servidor es el software que permite la realizacin
de las funciones descritas.
El servidor vendra a ser la "casa" de los sitios que visitamos en la Internet.
Los sitios se alojan en computadores con servidores instalados, y cuando un
usuario los visita son estas computadoras las que proporcionan al usuario la
interaccin con el sitio en cuestin. Cuando se contrata un plan de alojamiento
web con una compaa, esta ltima proporciona un servidor al dueo del sitio
para poder alojarlo; al respecto hay dos opciones, optar por un "servidor
dedicado", lo que se refiere a una computadora servidora dedicada
exclusivamente al sitio del cliente (para aplicaciones de alta demanda), o un
"servidor compartido", lo que significa que un mismo servidor (computadora +
programa servidos) se usar para varios clientes compartiendo los recursos.
Gracias a los avances en conectividad y la gran disponibilidad de banda ancha,
hoy en da es muy comn establecer los servidores web dentro de la propia
empresa, sin tener que recurrir a caros alojamientos en proveedores externos.
Esto es posible gracias a Apache, uno de los mejores y el ms utilizado entre
los servidores Web que existen. Apache ha construido una gran reputacin
entre los servidores web gracias a su gran estabilidad, confiabilidad y el gran
aporte del grupo de voluntarios que planean y desarrollan todo lo relativo a
esta plataforma, desde la documentacin hasta el mismo cdigo en si.
PROTOCOLO DE COMUNICACIN.
Los protocolos de comunicaciones son las reglas y procedimiento utilizados en
una red para establecer la comunicacin entre los nodos que disponen de
acceso a la red. Los protocolos gestionan dos niveles de comunicacin
distintos. Las reglas de alto nivel definen como se comunican las aplicaciones,
mientras que las de bajo nivel definen como se transmiten las seales por el
cable.
Funciones Principales de los Protocolos
Servicios de hosting
Hay una amplia variedad de servicios de hosting. El ms bsico es el hosting
de archivos (alojamiento web u hospedaje web), donde se pueden alojar
las pginas de los sitios web y otros archivos va ftp o una interfaz web. Los
archivos se muestran en la web tal cual o sin mucho procesado. Muchos
proveedores de Internet ofrecen este servicio de forma gratuita a sus clientes.
El alojamiento web es normalmente gratuito, patrocinado por anunciantes, o
barato.
Normalmente el alojamiento web slo es suficiente para pginas web
personales. Un sitio web complejo necesita un paquete ms avanzado que
proporcione soporte para bases de datos y plataformas de desarrollo de
aplicaciones (ej. PHP, Java, y ASP. NET). Estas permiten que los clientes
escriban o instalen scripts para aplicaciones como foros y formularios. Para el
comercio electrnico tambin se requiere SSL.
El proveedor de hosting puede tambin proporcionar un interfaz web (ej.
panel de control) para manejar el servidor web e instalar los scripts as como
otros servicios como e-mail.
TIPOS DE HOSTING
El hosting se puede dividir en varios tipos generales:
http://www.nixiweb.com/
http://www.zobyhost.com/
PROTOCOLO DE TRANSFERENCIA
'File Transfer Protocol' (FTP) o Protocolo de Transferencia de Archivos sirve
para que los usuarios accedan a los ficheros informticos situados en un
servidor mediante un programa. Este protocolo abierto, que al igual que el
HTTP (el que rige la Web) permite que ordenadores con distintos sistemas
operativos se comuniquen, se utiliza actualmente con frecuencia tanto para
manejar sitios web y blogs como para acceder a repositorios de programas de
cdigo libre.
Se utiliza actualmente con frecuencia tanto para manejar sitios web y blogs
como para acceder a repositorios de programas de cdigo libre
Cuando se emplea FTP una parte dispone de un programa servidor, mientras
que la otra cuenta con un software cliente, que es el que suelen utilizan los
usuarios normales. Una vez establecida la conexin, se visualiza la estructura
de archivos mediante carpetas, tanto del ordenador local como del servidor, y
se pueden realizar diversas acciones sobre los archivos como descargarlos,
subirlos, renombrarlos, borrarlos o modificar los permisos de acceso de cada
uno de ellos.
FECHA
PUNTAJE
1. Un
_______________________________________es
un
programa que se ejecuta continuamente en un computador,
mantenindose a la espera de peticiones de ejecucin que le har un
cliente o un usuario de Internet.
II.
Hosting
imgenes.
Hosting
compartido
Hosting gratuito
Hosting dedicado
III.
refleje
de
las