SlideShare una empresa de Scribd logo
Universidad Gerardo Barrio
Facultad:
Ciencia y tecnología
Alumno:
SERGIO ALEXIS GUERRERO BARAHONA
Nombre del docente:
Carla Milagro López
Tarea:
Portafolio
Fecha de entrega
29/04/15
PRINCIPIOS DE USABILIDAD WEB
En el diseño de productos y software, los usuarios pagan de antemano y
experimentan la usabilidad después.
En la web, los usuarios experimentan primero la usabilidad y pagan
después.
Las expectativas infladas de los usuarios de la tecnología Internet puede
ser difícil de satisfacer.
Un sitio web puede atender una infinidad de perfiles de usuario. Construir
un sitio web orientado a audiencias no es fácil.
La mayoría de los sitios web requieren estar operativos en un corto lapso
de tiempo y esto dificulta el nivel de rigor de varias actividades del proceso
Sitios Web – Situación Actual.
Un sitio web es una entrada a la información de las organizaciones, sus
productos y servicios.
Debe ser un reflejo de las necesidades de los usuarios-clientes a quienes
sirve.
Pero el diseño y desarrollo web, generalmente es hecho en base a la
tecnología o estructura, objetivos del negocio; más que por lo que el usuario
necesita.
Recientemente han comenzado a comprender la importancia de la
usabilidad.
.
5 CARACTERÍSTICAS DE LA USABILIDAD.
Facilidad de aprender.
Eficacia de uso.
Facilidad del sistema para ser recordado.
Frecuencia y severidad del error.
Satisfacción subjetiva.
Diseño Web Líquido o Fluido.
Una web tiene diseño líquido o fluido cuando su tamaño se ajusta a la
dimensión horizontal de la pantalla de forma automática y sin necesidad de
una barra de desplazamiento horizontal.
El diseño se expande al ancho disponible en la pantalla, porque el tamaño
de los distintos elementos es un porcentaje del total disponible de la
pantalla.
DISEÑO WEB PARA MÓVILES
En el caso de crear un sitio web para ser accedido desde dispositivos
móviles o en pantallas pequeñas, se debe considerar un diseño y otros
aspectos como: la disposición de contenidos, cantidad de contenidos,
criterios de accesividad, pero de imágenes y archivos.
Criterios de accesibilidad: menús y rutas de navegación
SEGURIDAD DE LA INFORMACIÓN.
Conjunto de políticas, procedimientos, tecnologías y personas que
pretenden minimizar el nivel de riesgo de que sea comprometida alguna de
las características de la información.
Riesgo.
Probabilidad que tiene un activo de ser comprometido por parte de una
amenaza.
Características de la información
Bajo la perspectiva de seguridad de la información, las características
básicas son:
Autenticación.
Confidencialidad.
No Repudio.
Integridad.
Disponibilidad.
SEGURIDAD INFORMÁTICA.
Componente de la seguridad de la información definido como un
conjunto de políticas y mecanismos tecnológicos que pretenden garantizar
la confidencialidad, integridad y disponibilidad de los recursos de un sistema
informático.
VULNERABILIDAD.
Debilidad presente en un sistema informático que permite que sus
componentes y la información que procesa pueda ser comprometida.
Según la jerga de la seguridad informática una vulnerabilidad también es
conocida como un agujero de seguridad.
HACKERS.
El sustantivo hacker es un neologismo utilizado para referirse a personas
expertas en varias o una rama técnica relacionada con la informática
(programación, redes de computadores, sistemas operativos, hardware de
voz/datos, etc…).
A nivel tecnológico el termino hacking se usa para referirse al arte
informático de descubrir y solucionar problemas que atenten contra la
seguridad de un sistema o aplicación.
El sustantivo cracker (Criminal hacker) hace referencia a personas que
usan las técnicas de hacking con fines ofensivos.
LA CULTURA DEL HACKER
El hacker desea saber cada vez más.
Su obsesión por aprender es enfermiza.
Existen grandes comunidades a nivel mundial:
Grupos.
Foros.
Canales de chat.
Algunas motivaciones para los hackers:
Curiosidad.
Desafío.
Ideales.
Lucro.
Ganar respeto en la comunidad.
PRINCIPIO DE USABILIDAD WEB.
Usabilidad En este artículo trataremos algunos de los conceptos que se
deberíentener en cuenta a la hora de realizar un sitio web.
Resumen: Aunque estos principios pueden parecer muy generales son la
base de la disciplina y de su extrapolaciónón y perfecta comprensaón
permite resolver cualquier casoíéticaconcreta.
El diseño de sitios web deben seguir los siguientes principios:
Anticipaciónón, el sitio web debe anticiparse a las necesidades del usuario.
Autónomaía, los usuarios deben tener el control sobre el sitio web. Los
usuarios sienten que controlan un sitio web si conocen su situaciónón en un
entorno abarcable y no infinito.
Los colores han de utilizarse con precauciónón para no dificultar el acceso a
los usuarios con problemas de distanciaón de colores (aprox. un 15% del
total).
Consistencia, las aplicaciones deben ser consistentes con las expectativas
de los usuarios, es decir, con su aprendizaje previo.
Eficiencia del usuario, los sitios web se deben centrar en la productividad
del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas
con mayor número de pasos son más rápidas de realizar para una persona
que otras tareas con menos pasos, pero más complejas.
Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Ley de Bitsindica que el tiempo para alcanzar un objetivo con el ratoón
esta en funciaón de la distancia y el tamaño del objetivo.
A menor distancia y mayor tamaño más fácalidadpara usar un mecanismo
de interacciónón.
Reduceón del tiempo de latencia. Hace posible optimizar el tiempo de
espera del usuario, permitiendo la realizaciónón de otras tareas mientras se
completa la previa e informando al usuario del tiempo pendiente para la
finalizaciónón de la tarea.
Aprendizaje, los sitios web deben requerir un mínimo proceso de
aprendizaje y deben poder ser utilizados desde el primer momento.
El uso adecuado de metáformasfacilita el aprendizaje de un sitio web, pero
un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
La protecciónón del trabajo de los usuarios es prioritario, se debe asegurar
que los usuarios nunca pierden su trabajo como consecuencia de un error.
Legibilidad, el color de los textos debe contrastar con el del fondo, y el
tamaño de fuente debe ser suficientemente grande.
Seguimiento de las acciones del usuario. Conociendo y almacenando
informaciónón sobre su comportamiento previo se ha de permitir al usuario
realizar operaciones frecuentes de manera más rápida.
Interfaz visible. Se deben evitar elementos invisibles de navegaciónón que
han de ser inferidos por los usuarios, menúús desplegables, indicaciones
ocultas, etc.
Otros principios para el diseño de sitios web son:
a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo
esfuerzo y unos resultados máximos.
b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el
usuario comete un error el sistema ha de solucionar el problema, o en su
defecto sugerir varias soluciones posibles, pero no emitir respuestas que
meramente informen del error culpando al usuario.
c) En ningúnún caso un sitio web puede venirse abajo o producir un
resultado inesperado. Por ejemplo no deben existir enlaces rotos.
d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un
sitio web es un téreinopeligroso, cuantomayor sea el número de acciones
que un usuario pueda realizar, mayor es la probabilidad que cometa un
error. Limitando el número de acciones al público objetivo se facilita el uso
de un sitio web.
e) Los usuarios no deben sufrir sobrecarga de informaciónón. Cuando un
usuario visita un sitio web y no sabe dóndecomenzar a leer, existe
sobrecarga de informaciónón.
f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque
pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la
consistencia entre los diseños facilita al usuario el uso de un sitio.
g) Un sitio web debe proveer de un feedback a los usuarios, de manera que
éestossiempre conozcan y comprendan lo que sucede en todos los pasos
del proceso.
DISEÑO WEB LÍQUIDO O FLUIDO
Diferencias entre diseño líquido y diseño responsivo
Cada día accedemos más a internet a través de teléfonos y tabletas.
Cuando analizamos las métricas de nuestros clientes del sector de la
hostelería nos encuéntranos(mayo 2012) que aproximadamente el 40% de
las visitas a sus webs se realizan a través de teléfonos móviles. En clientes
más tradicionales observamos (octubre 2012) incrementos mensuales del
19% en el acceso a su web con dispositivos móviles.
En España el 56% de los teléfonos móviles son Smartphone(somos el
segundo país del mundo con un porcentaje tan alto). En 2015 seremos uno
de los primeros paíseisdel mundo en donde habráá más accesos a internet
desde dispositivos móviles (Smartphoney tabletas) que desde ordenadores
de escritorio. Adaptar nuestras webs a las pantallas de los dispositivos
móviles resulta ya más que necesario.
Diseño líquido o fluido (liquid or fluid layout). Una web tiene diseño líquido o
fluido cuando su tamaño se ajusta a la dimensiónón horizontal de la pantalla
de forma automática y sin necesidad de una barra de desplazamiento
horizontal (scroll). El diseño se expande al ancho disponible de la pantalla
porque el tamaño de los distintos elementos (div) es un porcentaje del total
disponible (100%) de la pantalla.
El problema surge en pantallas muy grandes como por ejemplo una TV Full
HD de 1.920 x 1080 px porque el diseño se desajusta y aparecen grandes
espacios en blanco. Pero también sufren problemas las pantallas con
resoluciones inferiores a 1.024 px de ancho (tablets en posición portrait y
móviles en posición landscape) porque las imágenes se miniaturizan y los
textos se vuelven ilegibles. Si para evitar estos problemas se fija un ancho
mínimo aparecen las barras de scroll de desplazamiento horizontal.
Retícula de diseño líquido o fluido
Como muestra la imagen, para obviar estos problemas los diseñadores
crean versiones de layouts según la pantalla donde se vaya a visualizar la
web: pantalla de televisión, ordenador de escritorio, tablet, móvil.
Layout con un ancho mínimo de 1.420 px para pantallas Full HD TV hasta
1.980 px
Layout con un ancho mínimo de 1.236 px y un máximo de 1.420 px para
ordenadores de escritorio con una alta resoluciónón de pantalla (por
ejemplo un iMac)
Layout con un ancho mínimo de 986 px y un máximo de 1.235 px para
ordenadores de escritorio normales
Layout para tablets con un ancho mínimo de 720 px en posiciónvertical
(portrait) y un máximo de 985 px para tablets en posición
horizontal(landscape)
El principal problema de un diseño líquido es el mantenimiento de diferentes
versiones de CSS. En una web con 16 páginas es más o menos fácil. Pero
un sietede comersecon más de 5.600 referencias vivas en permanente
actualizaciónón (alta y baja de productos, versiones de color, tamaño, etc.)
es realmente un suplicio.
Diseño responsiva. Se basa en la retícula (normalmente de 960 px de
ancho) que se divide en un número igual de columnas ya sean pares o
impares. Estas columnas pueden ser también eláséticas(un porcentaje del
ancho total) que hacen un ajuste aún más fino al dispositivo. La hoja de
estilos CSS3 define por medio de media quieresen queé pantalla se
visualizará la páGinaen función de una serie de parámetros como:
Ancho y alto de la ventana del navegador (width, high)
Orientaciónón del dispositivo (puede ser portrait o landscape, es decir
vertical u horizontal)
Aspect-ratio (proporciónón entre el ancho y el alto de la pantalla por ejemplo
16:9)
Grid (número de columnas que muestra)
Resoluciónón del dispositivo (densidad de píxeles que muestra la pantalla)
Color (número de colores que representa la pantalla)
Hay cuatro parámetros más(monochrome, device aspect-ratio, color-index,
scan) que ayudan a definir con mayor exactitud el dispositivo
Responsivagrid
Responsivaweb designEn función del ancho de la pantalla del dispositivo los
bloques div se ordenan y jerarquizan, de tal manera que los elementos que
estamos viendo en la imagen superior se verían en un dispositivo móvil en
una columna ordenada en la que todos los elementos tendrían el mismo
ancho.
LAS VENTAJAS DEL DISEÑO RESPONSIVOSON:
Con una misma web (un sólo HTML y CSS) se cubren todas las
resoluciones de pantalla
Se reducen los costes de creaciónón y mantenimiento de una web, se
acorta el desarrollo
Optimizaciónón SEO, sólo hay una URL, se ahorran las redirecciones a
otros layouts (mobile.dominio.com)
Todos los usuarios disfrutan del mismo contenido (suele ser frustrante
obtener versiones light de las webs)
De esta manera el diseño responsivanos proporciona una visualizaciónón
controlada de la página, muy similar a la que nos ofrece el diseño de ancho
fijo.
DISEÑO WEB HIBRIDO
DISEÑO HÍBRIDO CON CSS
La maquetaciónón de una páginaweb utilizando hojas de estilo en cascada
(css) puede hacerse mediante diseños híbridos, es decir, combinando las
diferentes opciones de maquetaciónón con css:
Diseñosde ancho fijo (utilizan píxeles).
Diseñosde ancho variable, llamados diseños «líquidos» o «fluidos» (utilizan
porcentajes).
Diseñoseláéticos(utilizan «em»).
Los diseños híbridos combinan las tres opciones anteriores y representan la
mejor opciónón para que nuestros diseños sean compatibles tanto con
cualquier resoluciónón (tamaño) de pantalla como con cualquier tamaño de
letra. Al utilizar «em» y «porcentajes», ambas unidades relativas, para las
medidas de fuentes y cajas, cuando aumentamos o disminuimos el tamaño
de fuente en el navegador, o el tamaño de pantalla se redimensiona
automáticamente el tamaño de todos los elementos de la página y se
respeta nuestro diseño original.
Por tanto, este diseño es el ideal si pretendemos que nuestra «web» se
visualice correctamente en todo tipo de plataformas y/o dispositivos
(teléfonos móviles, celulares, ordenadores portátiles, ordenadores de
sobremesa, tabletas, etc.).
Por ejemplo, en un diseño híbrido con dos columnas, una de ellas se
expresará en porcentajes (%) para que se adapte al tamaño de la ventana
del navegador y la otra se expresará en «em» para que se adapte al tamaño
del texto.
DISEÑO WEB PARA MÓVILES
Cuando empiezas en el mundo del diseño web, tarde o temprano te
encontrarás con la necesidad de adaptar tus páginas web a los dispositivos
móviles. Actualmente cuando el número de usuarios que navegan por
internet a través de su Smartphoneha crecido considerablemente respecto
hace unos pocos años, es muy posible que un cliente te pida adaptar su
web para las pantallas móviles.
Esas capas de contenido e imágenes que diseñaste para tu última web y
que desde el navegador de tu ordenador se ve a las mil maravillas, se
descuadran o carecen de sentido en una pantalla de 320 pixeles.
Toca darle un repaso a tus hojas de estilo, a continuaciónón algunos
consejos y trucos útiles para subsanar esos posibles problemas y adaptar el
diseño de tu web, manos a la obra:
Media Quieres
Las media quieresincluidas en CSS3, te permiten filtrar estilos según rangos
de resoluciónón de pantalla en pixeles, pudiendo utilizar una media query
para los estilos específicos de tu web en la versión móvil.
Por ejemplo, dentro de un archivo.css podrías tener:
Estilos CSS que adaptan el diseño de tu web a dispositivos con pantallas de
un máximo
De490 pixeles de ancho */
}
De esta forma, estos estilos serian aplicados exclusivamente a los
dispositivos móviles sin la necesidad de cargar una hoja de estilo adicional.
También podría utilizarse una media query para cargar un archivo css solo
para determinadas resoluciones, basta con añadir entre las etiquetas
<Head></head>:
<link rel="stylesheet" type="text/css" media="only screen and (min-device-
width: 300px)
And(max-device-width: 480px)" href="movil.css" />
En este ejemplo, el archivo movil.css solo será utilizado si el dispositivo que
se conecta a la web tiene una resoluciónón a lo ancho de entre 300 y 480
pixeles.
Utilizar medidas de tamaño relativas
Cuando colocas una imagen o cualquier otro elemento puede ser tentador
usar una medida en pixeles.
Estas visualizando la web en tu navegador de escritorio y defines un
imagen con una anchura de 700px, se ve perfectamente, pero puedes no
ser consciente de que con ese ancho la imagen se descuadra en la versión
adaptada para móviles de tu web, debido al menor ancho de pantalla.
Siempre que te sea posible, utiliza una medidarelativa, en vez de la
propiedad width: 700px, utiliza porcentajes. Si utilizas width: 50%, la imagen
utilizará para desplegarse el 50% del espacio disponible dentro de la capa
en que se encuentre, reduciéndose o adaptándose el tamaño de la imagen
automáticamente según el tamaño de la pantalla en la que se visualice. Es
una de las técnicas a seguir dentro de lo que se conoce como
responsivadesign.
Otra medida útil para definir el ancho y el alto es em, pues es proporcional
al tamaño de la fuente tipográfica que ve el usuario.
Herramientas para visualizar tu web en distintos dispositivos
Captura de pantalla de screenflyPara poder validar y visualizar el diseño de
tu web adaptado para distintas resoluciones de pantalla existen
herramientas como screenfly.
Introduciendo la URL de tu página podrás comprobar cómo se ve tu web en
multitud de dispositivos, distintas marcas de Smartphoney tablets. Junto con
el siempre imprescindible Firebug podrás editar los estilos y comprobar en
vivo cómo va quedando el diseño de la versión móvil de tu sitio web.
Llevo un tiempo utilizando screenfly y el resultado ha sido satisfactorio, pero
existen otras alternativas interesantes como responsinator.
Aquíí termina la primera parte de esta mini-guía, la semana que viene
nosvemos en la segunda y última parte.
PATRONES DE DISEÑO CREACIONALES
Actionscript Masters Otros tutoriales por nestorrente.
Despuésés de la breve introducciónón a los patrones de diseño, llega el
momento de explicar los patrones de diseño creacionales.
Los patrones de diseño creacionales se centran en resolver problemas
acerca de cómo crear instancias de las clases de nuestra aplicaciónón. A
continuaciónón nos centraremos en cada uno de ellos.
Abstract Factory
El patrón Abstract Factory o Fábrica Abstracta resuelve el problema de
crear familias de objetos. Veamos un ejemplo típico de este patrón:
Imaginemos que estamos trabajando con Interfaces Gráficas de Usuario
(GUI). Pensemos que, en nuestro programa, tenemos las clases Ventana y
Botón. Pongamos, por ejemplo, que tenemos 2 interfaces diferentes: una
con colores claros y otra con colores oscuros.
Esto nos llevarívaa tener 4 clases:
Ventana Clara
Ventana OscuraBotonClaro
BotonOscuro
Cuando elusuario decida trabajar con colores claros, se deben crear
instancias de Ventana Claray BotonClaro. Sin embargo, si el usuario decide
utilizar la interfaz de colores oscuros, deberíamos crear instancias de
Ventana Oscuray BotonOscuro. La forma más básica de hacerlo sería de
esta manera:
Esto implicaría realizar una comprobación de la interfaz seleccionada cada
vez que se quiera crear una Ventana o un Boton.
La mejor opciónón en este caso sería utilizar el patrón Abstract Factory.
En este patrón se crean ciertas clases adicionales llamadas fábricas. Estas
clases son las encargadas de crear los diferentes tipos de ventanas y
botones. Veamos un ejemplo de su estructura:
Identifiquemos cada clase del diagrama con las clases de nuestro ejemplo:
Cliente: Parte del programa que utilizará las fábricas y productos. Podría ser
el archivo .fla principal, por ejemplo.
IProductoA: Interfaz que define un ejemplo de producto. Se
corresponderíacon la clase Ventana de nuestro ejemplo.
ProductoA1 y ProductoA2: Los diferentes tipos de ese producto.
Se corresponderían con la clases VentanaClara y VentanaOscura.
IProductoB: Interfaz que define otro ejemplo de producto. Se correspondería
con la claseBoton de nuestro ejemplo.
ProductoB1 y ProductoB2: Los diferentes tipos de ese producto. Se
corresponderían con la clases BotonClaro y BotonOscuro.
IFabrica: Interfaz que define las funciones de creación de productos. En
nuestro ejemplo podría llamarse InterfazGrafica y definiría las funciones
crearVentana():Ventana y crearBoton():Boton.
Fabrica1 y Fabrica2: Clases encargadas de crear los productos. En nuestro
ejemplo, serían InterfazClara (que crearía instancias de VentanaClara y
BotonClaro) e InterfazOscura (que crearía instancias de VentanaOscura y
BotonOscuro).
Cabe señalar que podría haber más tipos de productos (Ventana, Boton,
Icono, etc.) y más familias de estos (InterfazClara, InterfazOscura,
InterfazAzul, InterfazRoja, etc.).
Una vez utilizado el patrón, el código anterior quedaría así:
Código :
// A la hora de seleccionar la interfaz
var GUI:InterfazGrafica = new InterfazClara(); // o new InterfazOscura();
// A la hora de crear un botón
GUI.crearBoton();
// A la hora de crear una ventana
GUI.crearVentana();
Según el tipo de InterfazGrafica instanciada, se crearán ventanas/botones
de un tipo u otro dinámicamente, sin necesidad de comprobar a mano qué
interfaz gráfica se está utilizando.
Builder
El patrón Builder o Constructor se utiliza cuandoqueremos crear un producto
que tiene diferentes partes. El siguiente ejemplo, basado en este otro, lo
ilustra mejor:
Imaginemos la cocina de una pizzería donde se hacen pizzas. Las pizzas
constan de varias partes (masa, salsa y relleno), y podríamos tener 2
cocineros, cada uno especialista en un tipo de pizza.
El patrón Prototype o Prototipo resuelve el problema de duplicar objetos ya
creados con anterioridad. Veamos un pequeño ejemplo de este patrón:
Imaginemos que tenemos un programa de dibujo por ordenador en el cual
podemos crear círculos y cuadrados. Cuando se crea un círculo, éste tiene
un radio de 50 píxeles y es de color rojo. Sin embargo, podemos
redimensionar el círculo y cambiar su color. Cuando se crea un cuadrado,
tiene 50 píxeles de lado y es de color azul. Hasta aquí todo perfecto.
Imaginemos ahora que el usuario decide crear un círculo y modifica su color
y tamaño. Acto seguido, el usuario decide hacer una copia de dicho círculo.
El código sería el siguiente:
Uno de los problemas más inmediatos de hacerlo de esta manera es que, si
se añaden nuevos atributos a la clase Circulo, habría que modificar el
código en cada lugar donde se haya hecho una copia de un Circulo.
El patrón Prototype añade un método que permita crear una copia de un
objeto. Veamos un ejemplo de su estructura:
Identifiquemos cada clase del diagrama con las clases de nuestro ejemplo:
Cliente: Parte del programa que utilizará lasfábricas y productos. Podría ser
el archivo .fla principal, por ejemplo.
IPrototipo: Interfaz que define el método clonar():IPrototipo. En nuestro
ejemplo podría ser una clase llamada IObjetoGrafico.
Prototipo1 y Prototipo2: Las diferentes clases que implementarán el método
de clonación. Se corresponderían con la clases Circulo y Cuadrado de
nuestro ejemplo.
Una vez utilizado el patrón, el código anterior quedaría así:
Código :
var circuloNuevo:Circulo = circuloExistente.clonar();
Si ahora quisiéramos añadir nuevos atributos a la clase Circulo, sólo habría
que modificar el método clonar():IPrototipo de la clase Circulo.
Por último, debe saberse que hay 2 tipos de clonación de objetos: profunda
y superficial. Imaginemos un objeto A que contenga una referencia a un
objeto B. Una clonación profunda haría que la copia del objeto A
referenciase a una copia del objeto B. Por el contrario, una clonación
superficial haría que la copia del objeto A apuntase al mismo objeto B que el
objeto A original. Esto se entiende mejor con este ejemplo gráfico.
Singleton
El patrón Singleton se utiliza para no permitir que existan múltiples
instancias de una clase, sino solamente una. Veamos un pequeño ejemplo
de este patrón:
Imaginemos un programa que, al hacer click en un icono de ayuda, cree una
ventana nueva con los documentos de ayuda del programa. Normalmente,
si el usuario hiciese click en el botón nuevamente, se abriría una nueva
ventana, y así sucesivamente.
Sin embargo, podríamos desear que, si la ventana de ayuda ya ha sido
abierta, no se abra de nuevo. Para ello recurriríamos a un patrón Singleton,
que aseguraría la existencia de una única ventana de ayuda en todo
momento.
Veamos un ejemplo de la estructura del patrón Singleton:
Identifiquemos cada clase del diagrama con las clases de nuestro
ejemplo:
Cliente: Parte del programa que utilizará las fábricas y productos. Podría ser
el archivo .fla principal, por ejemplo.
Singleton: Clase que se quiere instanciar una sola vez. Se corresponde con
la clase VentanaAyuda de nuestro ejemplo.
La forma de implementar el patrón Singleton en este ejemplo sería dotando
a la clase VentanaAyuda de un método estático
getInstancia():VentanaAyuda que comprobase si ya existe una instancia
VentanaAyuda o si, por el contrario, se debe crear. De esta manera, el
código para crear una nueva VentanaAyuda sería el siguiente:
Código :
var ayuda:VentanaAyuda = VentanaAyuda.getInstancia();
Sin embargo, debemos evitar que el usuario pueda crear instancias de
VentanaAyuda mediante el constructor new VentanaAyuda(). La forma
idónea de hacerlo es declarando el constructor como privado, de modo que
no pueda ser llamado desde fuera de la clase VentanaAyuda. El problema
es que ActionScript, de momento, no permite la declaración de
constructores privados. Podemos solucionarlo de la siguiente manera:

Más contenido relacionado

La actualidad más candente

Accesibilidad vs usabilidad
Accesibilidad vs usabilidadAccesibilidad vs usabilidad
Accesibilidad vs usabilidadSol Escobar
 
Web 2.0 vs web 3.0
Web 2.0 vs web 3.0Web 2.0 vs web 3.0
Web 2.0 vs web 3.0
JuanSalvadorGonzlezM
 
CSS ICAP 2007
CSS ICAP 2007CSS ICAP 2007
CSS ICAP 2007
qweos
 
interfaz
interfazinterfaz
interfaz
andresalex
 
A5 a favor09
A5 a favor09A5 a favor09
A5 a favor09
Sergio Llabrés
 
Evolucion de la WEB
Evolucion de la WEBEvolucion de la WEB
Evolucion de la WEB
ale22AG
 
Evolucion de la WEB
Evolucion de la WEB Evolucion de la WEB
Evolucion de la WEB
ale22AG
 
Capitulo2
Capitulo2Capitulo2
Pautas de accesibilidad cognitiva web.
Pautas de accesibilidad cognitiva web.Pautas de accesibilidad cognitiva web.
Pautas de accesibilidad cognitiva web.
José María
 
Cuadro comparativo.
Cuadro comparativo.Cuadro comparativo.
Cuadro comparativo.
Omarandresca2907
 
Institucion educativa ciudad modelo kate y jake
Institucion educativa ciudad modelo kate y jakeInstitucion educativa ciudad modelo kate y jake
Institucion educativa ciudad modelo kate y jakekatriusca
 
Informatica
InformaticaInformatica
Gestion del conocimiento, Web 2.0 y Licencias Creative Commons
Gestion del conocimiento, Web 2.0 y Licencias Creative CommonsGestion del conocimiento, Web 2.0 y Licencias Creative Commons
Gestion del conocimiento, Web 2.0 y Licencias Creative Commonsaricastillo17
 
Herramientas De La Web 2.0 Y Virtualidad Muy Real
Herramientas De La Web 2.0 Y Virtualidad Muy RealHerramientas De La Web 2.0 Y Virtualidad Muy Real
Herramientas De La Web 2.0 Y Virtualidad Muy Real
Freddy Ronal Benavidez Núñez
 
Presentacion Accesibilidad Web
Presentacion Accesibilidad WebPresentacion Accesibilidad Web
Presentacion Accesibilidad Web
Daniel Torres Burriel
 
Generacion de las web
Generacion de las webGeneracion de las web
Generacion de las web
jeferson162019
 
Web 1.0 wed 2.0 wed 3.0
Web 1.0 wed 2.0 wed 3.0Web 1.0 wed 2.0 wed 3.0
Web 1.0 wed 2.0 wed 3.0
victorpoveda22
 
Accesibilidad web.
Accesibilidad web.Accesibilidad web.
Accesibilidad web.
José María
 

La actualidad más candente (20)

Accesibilidad vs usabilidad
Accesibilidad vs usabilidadAccesibilidad vs usabilidad
Accesibilidad vs usabilidad
 
Web 2.0 vs web 3.0
Web 2.0 vs web 3.0Web 2.0 vs web 3.0
Web 2.0 vs web 3.0
 
CSS ICAP 2007
CSS ICAP 2007CSS ICAP 2007
CSS ICAP 2007
 
interfaz
interfazinterfaz
interfaz
 
A5 a favor09
A5 a favor09A5 a favor09
A5 a favor09
 
Apuntes
ApuntesApuntes
Apuntes
 
Articulo Accesibilidad
Articulo AccesibilidadArticulo Accesibilidad
Articulo Accesibilidad
 
Evolucion de la WEB
Evolucion de la WEBEvolucion de la WEB
Evolucion de la WEB
 
Evolucion de la WEB
Evolucion de la WEB Evolucion de la WEB
Evolucion de la WEB
 
Capitulo2
Capitulo2Capitulo2
Capitulo2
 
Pautas de accesibilidad cognitiva web.
Pautas de accesibilidad cognitiva web.Pautas de accesibilidad cognitiva web.
Pautas de accesibilidad cognitiva web.
 
Cuadro comparativo.
Cuadro comparativo.Cuadro comparativo.
Cuadro comparativo.
 
Institucion educativa ciudad modelo kate y jake
Institucion educativa ciudad modelo kate y jakeInstitucion educativa ciudad modelo kate y jake
Institucion educativa ciudad modelo kate y jake
 
Informatica
InformaticaInformatica
Informatica
 
Gestion del conocimiento, Web 2.0 y Licencias Creative Commons
Gestion del conocimiento, Web 2.0 y Licencias Creative CommonsGestion del conocimiento, Web 2.0 y Licencias Creative Commons
Gestion del conocimiento, Web 2.0 y Licencias Creative Commons
 
Herramientas De La Web 2.0 Y Virtualidad Muy Real
Herramientas De La Web 2.0 Y Virtualidad Muy RealHerramientas De La Web 2.0 Y Virtualidad Muy Real
Herramientas De La Web 2.0 Y Virtualidad Muy Real
 
Presentacion Accesibilidad Web
Presentacion Accesibilidad WebPresentacion Accesibilidad Web
Presentacion Accesibilidad Web
 
Generacion de las web
Generacion de las webGeneracion de las web
Generacion de las web
 
Web 1.0 wed 2.0 wed 3.0
Web 1.0 wed 2.0 wed 3.0Web 1.0 wed 2.0 wed 3.0
Web 1.0 wed 2.0 wed 3.0
 
Accesibilidad web.
Accesibilidad web.Accesibilidad web.
Accesibilidad web.
 

Destacado

E portafilio andres guillermo narvaez trespalacios grupo 182
E portafilio andres guillermo narvaez trespalacios grupo 182E portafilio andres guillermo narvaez trespalacios grupo 182
E portafilio andres guillermo narvaez trespalacios grupo 182
memo38
 
Paradoxo no Crescer: Infantil,Baixa Estatura Linear- Hipotireoidismo Após Fas...
Paradoxo no Crescer: Infantil,Baixa Estatura Linear- Hipotireoidismo Após Fas...Paradoxo no Crescer: Infantil,Baixa Estatura Linear- Hipotireoidismo Após Fas...
Paradoxo no Crescer: Infantil,Baixa Estatura Linear- Hipotireoidismo Após Fas...
Van Der Häägen Brazil
 
Portafolio_Salvador_Sosa
Portafolio_Salvador_SosaPortafolio_Salvador_Sosa
Portafolio_Salvador_Sosa
Salvador Sosa
 
Portafolio compromiso clase 1
Portafolio compromiso clase 1Portafolio compromiso clase 1
Portafolio compromiso clase 1julyana_pa
 
educomunicacion2010
educomunicacion2010educomunicacion2010
educomunicacion2010
educacion
 
Portafolio del alumno
Portafolio del alumno Portafolio del alumno
Portafolio del alumno
Carolina Rodriguez
 
Portafolio Presentación - Shirley Carreño Rojas
Portafolio Presentación - Shirley Carreño RojasPortafolio Presentación - Shirley Carreño Rojas
Portafolio Presentación - Shirley Carreño Rojas
Shirley Carreño Rojas
 
Portafolio de presentación
Portafolio de presentaciónPortafolio de presentación
Portafolio de presentación
Myportafolio
 
Portafolios
PortafoliosPortafolios
Presentacion de portafolio de biquimica
Presentacion de portafolio de biquimicaPresentacion de portafolio de biquimica
Presentacion de portafolio de biquimicaximenayrichard
 
Portafolios de trabajo
Portafolios de trabajo Portafolios de trabajo
Portafolios de trabajo danniemnz
 
EVALUACIÓN DE LA MATERIA
EVALUACIÓN DE LA MATERIAEVALUACIÓN DE LA MATERIA
EVALUACIÓN DE LA MATERIA
Norma Valencia
 
Portafolio de servicios cige consultores
Portafolio de servicios cige consultoresPortafolio de servicios cige consultores
Portafolio de servicios cige consultores
CIGE Consultores
 
Taller de lectura y redacción ejemplo
Taller de lectura y redacción ejemploTaller de lectura y redacción ejemplo
Taller de lectura y redacción ejemploCarolina Rodriguez
 
Portafolio Macarena Lagreze
Portafolio Macarena LagrezePortafolio Macarena Lagreze
Portafolio Macarena Lagrezemakitamoskita
 
Portafolio profesional Nahitsory Gonzalez
Portafolio profesional Nahitsory GonzalezPortafolio profesional Nahitsory Gonzalez
Portafolio profesional Nahitsory Gonzalezngdeleon
 
Ejemplo de portafolio de evidencias
Ejemplo de portafolio de evidenciasEjemplo de portafolio de evidencias
Ejemplo de portafolio de evidencias
Zobeyda Delgado
 
PORTAFOLIO EDUARDO MARTINEZ
PORTAFOLIO EDUARDO MARTINEZPORTAFOLIO EDUARDO MARTINEZ
PORTAFOLIO EDUARDO MARTINEZ
EMARTINEZBETA
 
PORTAFOLIO DIANA FRANCIA G.O. ARTISTA PLÁSTICA
PORTAFOLIO DIANA FRANCIA G.O. ARTISTA PLÁSTICAPORTAFOLIO DIANA FRANCIA G.O. ARTISTA PLÁSTICA
PORTAFOLIO DIANA FRANCIA G.O. ARTISTA PLÁSTICA
Diana Francia G.O. Artista Plástica
 

Destacado (20)

E portafilio andres guillermo narvaez trespalacios grupo 182
E portafilio andres guillermo narvaez trespalacios grupo 182E portafilio andres guillermo narvaez trespalacios grupo 182
E portafilio andres guillermo narvaez trespalacios grupo 182
 
Trabajo final portafolio
Trabajo final portafolioTrabajo final portafolio
Trabajo final portafolio
 
Paradoxo no Crescer: Infantil,Baixa Estatura Linear- Hipotireoidismo Após Fas...
Paradoxo no Crescer: Infantil,Baixa Estatura Linear- Hipotireoidismo Após Fas...Paradoxo no Crescer: Infantil,Baixa Estatura Linear- Hipotireoidismo Após Fas...
Paradoxo no Crescer: Infantil,Baixa Estatura Linear- Hipotireoidismo Após Fas...
 
Portafolio_Salvador_Sosa
Portafolio_Salvador_SosaPortafolio_Salvador_Sosa
Portafolio_Salvador_Sosa
 
Portafolio compromiso clase 1
Portafolio compromiso clase 1Portafolio compromiso clase 1
Portafolio compromiso clase 1
 
educomunicacion2010
educomunicacion2010educomunicacion2010
educomunicacion2010
 
Portafolio del alumno
Portafolio del alumno Portafolio del alumno
Portafolio del alumno
 
Portafolio Presentación - Shirley Carreño Rojas
Portafolio Presentación - Shirley Carreño RojasPortafolio Presentación - Shirley Carreño Rojas
Portafolio Presentación - Shirley Carreño Rojas
 
Portafolio de presentación
Portafolio de presentaciónPortafolio de presentación
Portafolio de presentación
 
Portafolios
PortafoliosPortafolios
Portafolios
 
Presentacion de portafolio de biquimica
Presentacion de portafolio de biquimicaPresentacion de portafolio de biquimica
Presentacion de portafolio de biquimica
 
Portafolios de trabajo
Portafolios de trabajo Portafolios de trabajo
Portafolios de trabajo
 
EVALUACIÓN DE LA MATERIA
EVALUACIÓN DE LA MATERIAEVALUACIÓN DE LA MATERIA
EVALUACIÓN DE LA MATERIA
 
Portafolio de servicios cige consultores
Portafolio de servicios cige consultoresPortafolio de servicios cige consultores
Portafolio de servicios cige consultores
 
Taller de lectura y redacción ejemplo
Taller de lectura y redacción ejemploTaller de lectura y redacción ejemplo
Taller de lectura y redacción ejemplo
 
Portafolio Macarena Lagreze
Portafolio Macarena LagrezePortafolio Macarena Lagreze
Portafolio Macarena Lagreze
 
Portafolio profesional Nahitsory Gonzalez
Portafolio profesional Nahitsory GonzalezPortafolio profesional Nahitsory Gonzalez
Portafolio profesional Nahitsory Gonzalez
 
Ejemplo de portafolio de evidencias
Ejemplo de portafolio de evidenciasEjemplo de portafolio de evidencias
Ejemplo de portafolio de evidencias
 
PORTAFOLIO EDUARDO MARTINEZ
PORTAFOLIO EDUARDO MARTINEZPORTAFOLIO EDUARDO MARTINEZ
PORTAFOLIO EDUARDO MARTINEZ
 
PORTAFOLIO DIANA FRANCIA G.O. ARTISTA PLÁSTICA
PORTAFOLIO DIANA FRANCIA G.O. ARTISTA PLÁSTICAPORTAFOLIO DIANA FRANCIA G.O. ARTISTA PLÁSTICA
PORTAFOLIO DIANA FRANCIA G.O. ARTISTA PLÁSTICA
 

Similar a Sergio alexis guerrero portafolio

ing.software
ing.softwareing.software
ing.software
Enrique Reyes
 
Usabilidad y accesibilidad web
Usabilidad y accesibilidad webUsabilidad y accesibilidad web
Usabilidad y accesibilidad web
Efrain Herrera Jimenez
 
Accesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webAccesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webpaoloarevaloortiz
 
Usabilidad1
Usabilidad1Usabilidad1
Usabilidad1
15220201
 
La web, características y evolución de la web 1.0-2.0 y 3.0
La web, características y evolución de la web 1.0-2.0 y 3.0La web, características y evolución de la web 1.0-2.0 y 3.0
La web, características y evolución de la web 1.0-2.0 y 3.0
MelanyMoreno26
 
Principios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la RedPrincipios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la RedJose Maria Diaz
 
Portafolio
PortafolioPortafolio
Portafolio
Mario Martinez
 
Usabilidad Web Leonardo Chaparro
Usabilidad Web Leonardo ChaparroUsabilidad Web Leonardo Chaparro
Usabilidad Web Leonardo Chaparro
leonardochaparrosanchez
 
Web 2.0 y web3.0
Web 2.0 y web3.0Web 2.0 y web3.0
Web 2.0 y web3.0Marco Cueva
 
La usuabilidad
La usuabilidadLa usuabilidad
La usuabilidad
puracastillo
 
Usabilidad Web: ¿Capricho o Necesidad?
Usabilidad Web: ¿Capricho o Necesidad?Usabilidad Web: ¿Capricho o Necesidad?
Usabilidad Web: ¿Capricho o Necesidad?
Searchmediafb
 
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Alexa Zárrate
 
Interfaces de usuario
Interfaces de usuarioInterfaces de usuario
Interfaces de usuario
Maximiliano Destro
 
Las webs
Las websLas webs
Accesibilidad web
Accesibilidad webAccesibilidad web
Accesibilidad web
Daniel Acosta
 

Similar a Sergio alexis guerrero portafolio (20)

ing.software
ing.softwareing.software
ing.software
 
Usabilidad y accesibilidad web
Usabilidad y accesibilidad webUsabilidad y accesibilidad web
Usabilidad y accesibilidad web
 
Accesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la webAccesibilidad y usabilidad de la web
Accesibilidad y usabilidad de la web
 
Usabilidad1
Usabilidad1Usabilidad1
Usabilidad1
 
La web, características y evolución de la web 1.0-2.0 y 3.0
La web, características y evolución de la web 1.0-2.0 y 3.0La web, características y evolución de la web 1.0-2.0 y 3.0
La web, características y evolución de la web 1.0-2.0 y 3.0
 
Este
EsteEste
Este
 
Principios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la RedPrincipios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la Red
 
Portafolio
PortafolioPortafolio
Portafolio
 
Usabilidad Web Leonardo Chaparro
Usabilidad Web Leonardo ChaparroUsabilidad Web Leonardo Chaparro
Usabilidad Web Leonardo Chaparro
 
Web 2.0 y web3.0
Web 2.0 y web3.0Web 2.0 y web3.0
Web 2.0 y web3.0
 
Diseño web
Diseño webDiseño web
Diseño web
 
Clase no 3
Clase no 3Clase no 3
Clase no 3
 
La usuabilidad
La usuabilidadLa usuabilidad
La usuabilidad
 
Usabilidad Web: ¿Capricho o Necesidad?
Usabilidad Web: ¿Capricho o Necesidad?Usabilidad Web: ¿Capricho o Necesidad?
Usabilidad Web: ¿Capricho o Necesidad?
 
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
 
Interfaces de usuario
Interfaces de usuarioInterfaces de usuario
Interfaces de usuario
 
Usabilidad Web
Usabilidad WebUsabilidad Web
Usabilidad Web
 
Las webs
Las websLas webs
Las webs
 
Presentación1
Presentación1Presentación1
Presentación1
 
Accesibilidad web
Accesibilidad webAccesibilidad web
Accesibilidad web
 

Más de Sergio Alexis Guerrero

Características de los sistemas operativos sergio 8
Características de los sistemas operativos sergio 8Características de los sistemas operativos sergio 8
Características de los sistemas operativos sergio 8Sergio Alexis Guerrero
 
Unidad 3 procesamiento de los datos sergio 5
Unidad 3  procesamiento de los datos sergio 5Unidad 3  procesamiento de los datos sergio 5
Unidad 3 procesamiento de los datos sergio 5Sergio Alexis Guerrero
 
Unidad 2 antecedentes históricos de las computadoras sergio 3
Unidad 2 antecedentes históricos de las computadoras sergio 3Unidad 2 antecedentes históricos de las computadoras sergio 3
Unidad 2 antecedentes históricos de las computadoras sergio 3Sergio Alexis Guerrero
 
Introduccion al mundo de la computacion sergio 1
Introduccion al mundo de la computacion sergio 1Introduccion al mundo de la computacion sergio 1
Introduccion al mundo de la computacion sergio 1Sergio Alexis Guerrero
 
Introduccion al mundo de la computacion sergio 1
Introduccion al mundo de la computacion sergio 1Introduccion al mundo de la computacion sergio 1
Introduccion al mundo de la computacion sergio 1Sergio Alexis Guerrero
 
Características de los sistemas operativos sergio 8
Características de los sistemas operativos sergio 8Características de los sistemas operativos sergio 8
Características de los sistemas operativos sergio 8Sergio Alexis Guerrero
 
Dispositivos de entrada alamcenamiento procesamientos de datos sergio 6
Dispositivos de entrada alamcenamiento procesamientos de datos sergio 6Dispositivos de entrada alamcenamiento procesamientos de datos sergio 6
Dispositivos de entrada alamcenamiento procesamientos de datos sergio 6Sergio Alexis Guerrero
 
Unidad 3 procesamiento de los datos sergio 5
Unidad 3  procesamiento de los datos sergio 5Unidad 3  procesamiento de los datos sergio 5
Unidad 3 procesamiento de los datos sergio 5Sergio Alexis Guerrero
 
Generaciones de las computadoras sergio 4
Generaciones de las computadoras sergio 4Generaciones de las computadoras sergio 4
Generaciones de las computadoras sergio 4Sergio Alexis Guerrero
 
Unidad 2 antecedentes históricos de las computadoras sergio 3
Unidad 2 antecedentes históricos de las computadoras sergio 3Unidad 2 antecedentes históricos de las computadoras sergio 3
Unidad 2 antecedentes históricos de las computadoras sergio 3Sergio Alexis Guerrero
 

Más de Sergio Alexis Guerrero (20)

Sergio alexis
Sergio alexisSergio alexis
Sergio alexis
 
Vision
VisionVision
Vision
 
Expo ing.softwarejenny
Expo ing.softwarejennyExpo ing.softwarejenny
Expo ing.softwarejenny
 
Planificacion saha copia
Planificacion saha   copiaPlanificacion saha   copia
Planificacion saha copia
 
Planificacion saha copia
Planificacion saha   copiaPlanificacion saha   copia
Planificacion saha copia
 
Documento de vision
Documento de visionDocumento de vision
Documento de vision
 
Sergio alexis
Sergio alexisSergio alexis
Sergio alexis
 
Sergio alexis
Sergio alexisSergio alexis
Sergio alexis
 
Características de los sistemas operativos sergio 8
Características de los sistemas operativos sergio 8Características de los sistemas operativos sergio 8
Características de los sistemas operativos sergio 8
 
Software de sistema sergio 7
Software de sistema sergio 7Software de sistema sergio 7
Software de sistema sergio 7
 
Unidad 3 procesamiento de los datos sergio 5
Unidad 3  procesamiento de los datos sergio 5Unidad 3  procesamiento de los datos sergio 5
Unidad 3 procesamiento de los datos sergio 5
 
Unidad 2 antecedentes históricos de las computadoras sergio 3
Unidad 2 antecedentes históricos de las computadoras sergio 3Unidad 2 antecedentes históricos de las computadoras sergio 3
Unidad 2 antecedentes históricos de las computadoras sergio 3
 
Introduccion al mundo de la computacion sergio 1
Introduccion al mundo de la computacion sergio 1Introduccion al mundo de la computacion sergio 1
Introduccion al mundo de la computacion sergio 1
 
Introduccion al mundo de la computacion sergio 1
Introduccion al mundo de la computacion sergio 1Introduccion al mundo de la computacion sergio 1
Introduccion al mundo de la computacion sergio 1
 
Características de los sistemas operativos sergio 8
Características de los sistemas operativos sergio 8Características de los sistemas operativos sergio 8
Características de los sistemas operativos sergio 8
 
Software de sistema sergio 7
Software de sistema sergio 7Software de sistema sergio 7
Software de sistema sergio 7
 
Dispositivos de entrada alamcenamiento procesamientos de datos sergio 6
Dispositivos de entrada alamcenamiento procesamientos de datos sergio 6Dispositivos de entrada alamcenamiento procesamientos de datos sergio 6
Dispositivos de entrada alamcenamiento procesamientos de datos sergio 6
 
Unidad 3 procesamiento de los datos sergio 5
Unidad 3  procesamiento de los datos sergio 5Unidad 3  procesamiento de los datos sergio 5
Unidad 3 procesamiento de los datos sergio 5
 
Generaciones de las computadoras sergio 4
Generaciones de las computadoras sergio 4Generaciones de las computadoras sergio 4
Generaciones de las computadoras sergio 4
 
Unidad 2 antecedentes históricos de las computadoras sergio 3
Unidad 2 antecedentes históricos de las computadoras sergio 3Unidad 2 antecedentes históricos de las computadoras sergio 3
Unidad 2 antecedentes históricos de las computadoras sergio 3
 

Último

c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptxc3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
Martín Ramírez
 
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernándezPRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
Ruben53283
 
corpus-christi-sesion-de-aprendizaje.pdf
corpus-christi-sesion-de-aprendizaje.pdfcorpus-christi-sesion-de-aprendizaje.pdf
corpus-christi-sesion-de-aprendizaje.pdf
YolandaRodriguezChin
 
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNETPRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
CESAR MIJAEL ESPINOZA SALAZAR
 
El lugar mas bonito del mundo resumen del libro
El lugar mas bonito del mundo resumen del libroEl lugar mas bonito del mundo resumen del libro
El lugar mas bonito del mundo resumen del libro
Distea V región
 
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
AracelidelRocioOrdez
 
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdfINFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
Alejandrogarciapanta
 
Productos contestatos de la Séptima sesión ordinaria de CTE y TIFC para Docen...
Productos contestatos de la Séptima sesión ordinaria de CTE y TIFC para Docen...Productos contestatos de la Séptima sesión ordinaria de CTE y TIFC para Docen...
Productos contestatos de la Séptima sesión ordinaria de CTE y TIFC para Docen...
Monseespinoza6
 
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfUn libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
sandradianelly
 
Fase 2, Pensamiento variacional y trigonometrico
Fase 2, Pensamiento variacional y trigonometricoFase 2, Pensamiento variacional y trigonometrico
Fase 2, Pensamiento variacional y trigonometrico
YasneidyGonzalez
 
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdfAsistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Demetrio Ccesa Rayme
 
Testimonio Paco Z PATRONATO_Valencia_24.pdf
Testimonio Paco Z PATRONATO_Valencia_24.pdfTestimonio Paco Z PATRONATO_Valencia_24.pdf
Testimonio Paco Z PATRONATO_Valencia_24.pdf
Txema Gs
 
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
rosannatasaycoyactay
 
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdfAsistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Demetrio Ccesa Rayme
 
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
pablomarin116
 
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdfTexto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
ClaudiaAlcondeViadez
 
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIAFICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
JavierMontero58
 
Semana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptxSemana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptx
LorenaCovarrubias12
 
Junio 2024 Fotocopiables Ediba actividades
Junio 2024 Fotocopiables Ediba actividadesJunio 2024 Fotocopiables Ediba actividades
Junio 2024 Fotocopiables Ediba actividades
cintiat3400
 
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptxSemana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
LorenaCovarrubias12
 

Último (20)

c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptxc3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
c3.hu3.p3.p2.Superioridad e inferioridad en la sociedad.pptx
 
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernándezPRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
PRÁCTICAS PEDAGOGÍA.pdf_Educación Y Sociedad_AnaFernández
 
corpus-christi-sesion-de-aprendizaje.pdf
corpus-christi-sesion-de-aprendizaje.pdfcorpus-christi-sesion-de-aprendizaje.pdf
corpus-christi-sesion-de-aprendizaje.pdf
 
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNETPRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
 
El lugar mas bonito del mundo resumen del libro
El lugar mas bonito del mundo resumen del libroEl lugar mas bonito del mundo resumen del libro
El lugar mas bonito del mundo resumen del libro
 
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
Septima-Sesion-Ordinaria-del-Consejo-Tecnico-Escolar-y-el-Taller-Intensivo-de...
 
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdfINFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
INFORME MINEDU DEL PRIMER SIMULACRO 2024.pdf
 
Productos contestatos de la Séptima sesión ordinaria de CTE y TIFC para Docen...
Productos contestatos de la Séptima sesión ordinaria de CTE y TIFC para Docen...Productos contestatos de la Séptima sesión ordinaria de CTE y TIFC para Docen...
Productos contestatos de la Séptima sesión ordinaria de CTE y TIFC para Docen...
 
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfUn libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
 
Fase 2, Pensamiento variacional y trigonometrico
Fase 2, Pensamiento variacional y trigonometricoFase 2, Pensamiento variacional y trigonometrico
Fase 2, Pensamiento variacional y trigonometrico
 
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdfAsistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
 
Testimonio Paco Z PATRONATO_Valencia_24.pdf
Testimonio Paco Z PATRONATO_Valencia_24.pdfTestimonio Paco Z PATRONATO_Valencia_24.pdf
Testimonio Paco Z PATRONATO_Valencia_24.pdf
 
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
 
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdfAsistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
 
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.Friedrich Nietzsche. Presentación de 2 de Bachillerato.
Friedrich Nietzsche. Presentación de 2 de Bachillerato.
 
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdfTexto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
 
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIAFICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
FICHA DE EJERCICIOS GRECIA 1º DE LA ESO HISTORIA
 
Semana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptxSemana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptx
 
Junio 2024 Fotocopiables Ediba actividades
Junio 2024 Fotocopiables Ediba actividadesJunio 2024 Fotocopiables Ediba actividades
Junio 2024 Fotocopiables Ediba actividades
 
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptxSemana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
 

Sergio alexis guerrero portafolio

  • 1. Universidad Gerardo Barrio Facultad: Ciencia y tecnología Alumno: SERGIO ALEXIS GUERRERO BARAHONA Nombre del docente: Carla Milagro López Tarea: Portafolio Fecha de entrega 29/04/15
  • 2. PRINCIPIOS DE USABILIDAD WEB En el diseño de productos y software, los usuarios pagan de antemano y experimentan la usabilidad después. En la web, los usuarios experimentan primero la usabilidad y pagan después. Las expectativas infladas de los usuarios de la tecnología Internet puede ser difícil de satisfacer. Un sitio web puede atender una infinidad de perfiles de usuario. Construir un sitio web orientado a audiencias no es fácil. La mayoría de los sitios web requieren estar operativos en un corto lapso de tiempo y esto dificulta el nivel de rigor de varias actividades del proceso Sitios Web – Situación Actual. Un sitio web es una entrada a la información de las organizaciones, sus productos y servicios. Debe ser un reflejo de las necesidades de los usuarios-clientes a quienes sirve. Pero el diseño y desarrollo web, generalmente es hecho en base a la tecnología o estructura, objetivos del negocio; más que por lo que el usuario necesita. Recientemente han comenzado a comprender la importancia de la usabilidad. .
  • 3. 5 CARACTERÍSTICAS DE LA USABILIDAD. Facilidad de aprender. Eficacia de uso. Facilidad del sistema para ser recordado. Frecuencia y severidad del error. Satisfacción subjetiva. Diseño Web Líquido o Fluido. Una web tiene diseño líquido o fluido cuando su tamaño se ajusta a la dimensión horizontal de la pantalla de forma automática y sin necesidad de una barra de desplazamiento horizontal. El diseño se expande al ancho disponible en la pantalla, porque el tamaño de los distintos elementos es un porcentaje del total disponible de la pantalla. DISEÑO WEB PARA MÓVILES En el caso de crear un sitio web para ser accedido desde dispositivos móviles o en pantallas pequeñas, se debe considerar un diseño y otros aspectos como: la disposición de contenidos, cantidad de contenidos, criterios de accesividad, pero de imágenes y archivos. Criterios de accesibilidad: menús y rutas de navegación SEGURIDAD DE LA INFORMACIÓN. Conjunto de políticas, procedimientos, tecnologías y personas que pretenden minimizar el nivel de riesgo de que sea comprometida alguna de las características de la información. Riesgo.
  • 4. Probabilidad que tiene un activo de ser comprometido por parte de una amenaza. Características de la información Bajo la perspectiva de seguridad de la información, las características básicas son: Autenticación. Confidencialidad. No Repudio. Integridad. Disponibilidad. SEGURIDAD INFORMÁTICA. Componente de la seguridad de la información definido como un conjunto de políticas y mecanismos tecnológicos que pretenden garantizar la confidencialidad, integridad y disponibilidad de los recursos de un sistema informático. VULNERABILIDAD. Debilidad presente en un sistema informático que permite que sus componentes y la información que procesa pueda ser comprometida. Según la jerga de la seguridad informática una vulnerabilidad también es conocida como un agujero de seguridad.
  • 5. HACKERS. El sustantivo hacker es un neologismo utilizado para referirse a personas expertas en varias o una rama técnica relacionada con la informática (programación, redes de computadores, sistemas operativos, hardware de voz/datos, etc…). A nivel tecnológico el termino hacking se usa para referirse al arte informático de descubrir y solucionar problemas que atenten contra la seguridad de un sistema o aplicación. El sustantivo cracker (Criminal hacker) hace referencia a personas que usan las técnicas de hacking con fines ofensivos. LA CULTURA DEL HACKER El hacker desea saber cada vez más. Su obsesión por aprender es enfermiza. Existen grandes comunidades a nivel mundial: Grupos. Foros. Canales de chat. Algunas motivaciones para los hackers: Curiosidad. Desafío. Ideales. Lucro. Ganar respeto en la comunidad.
  • 6. PRINCIPIO DE USABILIDAD WEB. Usabilidad En este artículo trataremos algunos de los conceptos que se deberíentener en cuenta a la hora de realizar un sitio web. Resumen: Aunque estos principios pueden parecer muy generales son la base de la disciplina y de su extrapolaciónón y perfecta comprensaón permite resolver cualquier casoíéticaconcreta. El diseño de sitios web deben seguir los siguientes principios: Anticipaciónón, el sitio web debe anticiparse a las necesidades del usuario. Autónomaía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situaciónón en un entorno abarcable y no infinito. Los colores han de utilizarse con precauciónón para no dificultar el acceso a los usuarios con problemas de distanciaón de colores (aprox. un 15% del total). Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
  • 7. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas 7. Ley de Bitsindica que el tiempo para alcanzar un objetivo con el ratoón esta en funciaón de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más fácalidadpara usar un mecanismo de interacciónón. Reduceón del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realizaciónón de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalizaciónón de la tarea. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento. El uso adecuado de metáformasfacilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje. La protecciónón del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.
  • 8. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande. Seguimiento de las acciones del usuario. Conociendo y almacenando informaciónón sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida. Interfaz visible. Se deben evitar elementos invisibles de navegaciónón que han de ser inferidos por los usuarios, menúús desplegables, indicaciones ocultas, etc. Otros principios para el diseño de sitios web son: a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos. b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario. c) En ningúnún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo no deben existir enlaces rotos. d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un téreinopeligroso, cuantomayor sea el número de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web. e) Los usuarios no deben sufrir sobrecarga de informaciónón. Cuando un usuario visita un sitio web y no sabe dóndecomenzar a leer, existe sobrecarga de informaciónón.
  • 9. f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio. g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éestossiempre conozcan y comprendan lo que sucede en todos los pasos del proceso. DISEÑO WEB LÍQUIDO O FLUIDO Diferencias entre diseño líquido y diseño responsivo Cada día accedemos más a internet a través de teléfonos y tabletas. Cuando analizamos las métricas de nuestros clientes del sector de la hostelería nos encuéntranos(mayo 2012) que aproximadamente el 40% de las visitas a sus webs se realizan a través de teléfonos móviles. En clientes más tradicionales observamos (octubre 2012) incrementos mensuales del 19% en el acceso a su web con dispositivos móviles. En España el 56% de los teléfonos móviles son Smartphone(somos el segundo país del mundo con un porcentaje tan alto). En 2015 seremos uno de los primeros paíseisdel mundo en donde habráá más accesos a internet desde dispositivos móviles (Smartphoney tabletas) que desde ordenadores de escritorio. Adaptar nuestras webs a las pantallas de los dispositivos móviles resulta ya más que necesario. Diseño líquido o fluido (liquid or fluid layout). Una web tiene diseño líquido o fluido cuando su tamaño se ajusta a la dimensiónón horizontal de la pantalla de forma automática y sin necesidad de una barra de desplazamiento horizontal (scroll). El diseño se expande al ancho disponible de la pantalla porque el tamaño de los distintos elementos (div) es un porcentaje del total disponible (100%) de la pantalla. El problema surge en pantallas muy grandes como por ejemplo una TV Full HD de 1.920 x 1080 px porque el diseño se desajusta y aparecen grandes espacios en blanco. Pero también sufren problemas las pantallas con
  • 10. resoluciones inferiores a 1.024 px de ancho (tablets en posición portrait y móviles en posición landscape) porque las imágenes se miniaturizan y los textos se vuelven ilegibles. Si para evitar estos problemas se fija un ancho mínimo aparecen las barras de scroll de desplazamiento horizontal. Retícula de diseño líquido o fluido Como muestra la imagen, para obviar estos problemas los diseñadores crean versiones de layouts según la pantalla donde se vaya a visualizar la web: pantalla de televisión, ordenador de escritorio, tablet, móvil. Layout con un ancho mínimo de 1.420 px para pantallas Full HD TV hasta 1.980 px Layout con un ancho mínimo de 1.236 px y un máximo de 1.420 px para ordenadores de escritorio con una alta resoluciónón de pantalla (por ejemplo un iMac) Layout con un ancho mínimo de 986 px y un máximo de 1.235 px para ordenadores de escritorio normales Layout para tablets con un ancho mínimo de 720 px en posiciónvertical (portrait) y un máximo de 985 px para tablets en posición horizontal(landscape) El principal problema de un diseño líquido es el mantenimiento de diferentes versiones de CSS. En una web con 16 páginas es más o menos fácil. Pero un sietede comersecon más de 5.600 referencias vivas en permanente actualizaciónón (alta y baja de productos, versiones de color, tamaño, etc.) es realmente un suplicio. Diseño responsiva. Se basa en la retícula (normalmente de 960 px de ancho) que se divide en un número igual de columnas ya sean pares o impares. Estas columnas pueden ser también eláséticas(un porcentaje del ancho total) que hacen un ajuste aún más fino al dispositivo. La hoja de
  • 11. estilos CSS3 define por medio de media quieresen queé pantalla se visualizará la páGinaen función de una serie de parámetros como: Ancho y alto de la ventana del navegador (width, high) Orientaciónón del dispositivo (puede ser portrait o landscape, es decir vertical u horizontal) Aspect-ratio (proporciónón entre el ancho y el alto de la pantalla por ejemplo 16:9) Grid (número de columnas que muestra) Resoluciónón del dispositivo (densidad de píxeles que muestra la pantalla) Color (número de colores que representa la pantalla) Hay cuatro parámetros más(monochrome, device aspect-ratio, color-index, scan) que ayudan a definir con mayor exactitud el dispositivo Responsivagrid Responsivaweb designEn función del ancho de la pantalla del dispositivo los bloques div se ordenan y jerarquizan, de tal manera que los elementos que estamos viendo en la imagen superior se verían en un dispositivo móvil en una columna ordenada en la que todos los elementos tendrían el mismo ancho. LAS VENTAJAS DEL DISEÑO RESPONSIVOSON: Con una misma web (un sólo HTML y CSS) se cubren todas las resoluciones de pantalla Se reducen los costes de creaciónón y mantenimiento de una web, se acorta el desarrollo Optimizaciónón SEO, sólo hay una URL, se ahorran las redirecciones a otros layouts (mobile.dominio.com) Todos los usuarios disfrutan del mismo contenido (suele ser frustrante obtener versiones light de las webs)
  • 12. De esta manera el diseño responsivanos proporciona una visualizaciónón controlada de la página, muy similar a la que nos ofrece el diseño de ancho fijo. DISEÑO WEB HIBRIDO DISEÑO HÍBRIDO CON CSS La maquetaciónón de una páginaweb utilizando hojas de estilo en cascada (css) puede hacerse mediante diseños híbridos, es decir, combinando las diferentes opciones de maquetaciónón con css: Diseñosde ancho fijo (utilizan píxeles). Diseñosde ancho variable, llamados diseños «líquidos» o «fluidos» (utilizan porcentajes). Diseñoseláéticos(utilizan «em»). Los diseños híbridos combinan las tres opciones anteriores y representan la mejor opciónón para que nuestros diseños sean compatibles tanto con cualquier resoluciónón (tamaño) de pantalla como con cualquier tamaño de letra. Al utilizar «em» y «porcentajes», ambas unidades relativas, para las medidas de fuentes y cajas, cuando aumentamos o disminuimos el tamaño de fuente en el navegador, o el tamaño de pantalla se redimensiona automáticamente el tamaño de todos los elementos de la página y se respeta nuestro diseño original. Por tanto, este diseño es el ideal si pretendemos que nuestra «web» se visualice correctamente en todo tipo de plataformas y/o dispositivos (teléfonos móviles, celulares, ordenadores portátiles, ordenadores de sobremesa, tabletas, etc.).
  • 13. Por ejemplo, en un diseño híbrido con dos columnas, una de ellas se expresará en porcentajes (%) para que se adapte al tamaño de la ventana del navegador y la otra se expresará en «em» para que se adapte al tamaño del texto. DISEÑO WEB PARA MÓVILES Cuando empiezas en el mundo del diseño web, tarde o temprano te encontrarás con la necesidad de adaptar tus páginas web a los dispositivos móviles. Actualmente cuando el número de usuarios que navegan por internet a través de su Smartphoneha crecido considerablemente respecto hace unos pocos años, es muy posible que un cliente te pida adaptar su web para las pantallas móviles. Esas capas de contenido e imágenes que diseñaste para tu última web y que desde el navegador de tu ordenador se ve a las mil maravillas, se descuadran o carecen de sentido en una pantalla de 320 pixeles. Toca darle un repaso a tus hojas de estilo, a continuaciónón algunos consejos y trucos útiles para subsanar esos posibles problemas y adaptar el diseño de tu web, manos a la obra: Media Quieres Las media quieresincluidas en CSS3, te permiten filtrar estilos según rangos de resoluciónón de pantalla en pixeles, pudiendo utilizar una media query para los estilos específicos de tu web en la versión móvil. Por ejemplo, dentro de un archivo.css podrías tener:
  • 14. Estilos CSS que adaptan el diseño de tu web a dispositivos con pantallas de un máximo De490 pixeles de ancho */ } De esta forma, estos estilos serian aplicados exclusivamente a los dispositivos móviles sin la necesidad de cargar una hoja de estilo adicional. También podría utilizarse una media query para cargar un archivo css solo para determinadas resoluciones, basta con añadir entre las etiquetas <Head></head>: <link rel="stylesheet" type="text/css" media="only screen and (min-device- width: 300px) And(max-device-width: 480px)" href="movil.css" /> En este ejemplo, el archivo movil.css solo será utilizado si el dispositivo que se conecta a la web tiene una resoluciónón a lo ancho de entre 300 y 480 pixeles. Utilizar medidas de tamaño relativas Cuando colocas una imagen o cualquier otro elemento puede ser tentador usar una medida en pixeles. Estas visualizando la web en tu navegador de escritorio y defines un imagen con una anchura de 700px, se ve perfectamente, pero puedes no ser consciente de que con ese ancho la imagen se descuadra en la versión adaptada para móviles de tu web, debido al menor ancho de pantalla. Siempre que te sea posible, utiliza una medidarelativa, en vez de la propiedad width: 700px, utiliza porcentajes. Si utilizas width: 50%, la imagen utilizará para desplegarse el 50% del espacio disponible dentro de la capa en que se encuentre, reduciéndose o adaptándose el tamaño de la imagen automáticamente según el tamaño de la pantalla en la que se visualice. Es
  • 15. una de las técnicas a seguir dentro de lo que se conoce como responsivadesign. Otra medida útil para definir el ancho y el alto es em, pues es proporcional al tamaño de la fuente tipográfica que ve el usuario. Herramientas para visualizar tu web en distintos dispositivos Captura de pantalla de screenflyPara poder validar y visualizar el diseño de tu web adaptado para distintas resoluciones de pantalla existen herramientas como screenfly. Introduciendo la URL de tu página podrás comprobar cómo se ve tu web en multitud de dispositivos, distintas marcas de Smartphoney tablets. Junto con el siempre imprescindible Firebug podrás editar los estilos y comprobar en vivo cómo va quedando el diseño de la versión móvil de tu sitio web. Llevo un tiempo utilizando screenfly y el resultado ha sido satisfactorio, pero existen otras alternativas interesantes como responsinator. Aquíí termina la primera parte de esta mini-guía, la semana que viene nosvemos en la segunda y última parte. PATRONES DE DISEÑO CREACIONALES Actionscript Masters Otros tutoriales por nestorrente. Despuésés de la breve introducciónón a los patrones de diseño, llega el momento de explicar los patrones de diseño creacionales. Los patrones de diseño creacionales se centran en resolver problemas acerca de cómo crear instancias de las clases de nuestra aplicaciónón. A continuaciónón nos centraremos en cada uno de ellos. Abstract Factory
  • 16. El patrón Abstract Factory o Fábrica Abstracta resuelve el problema de crear familias de objetos. Veamos un ejemplo típico de este patrón: Imaginemos que estamos trabajando con Interfaces Gráficas de Usuario (GUI). Pensemos que, en nuestro programa, tenemos las clases Ventana y Botón. Pongamos, por ejemplo, que tenemos 2 interfaces diferentes: una con colores claros y otra con colores oscuros. Esto nos llevarívaa tener 4 clases: Ventana Clara Ventana OscuraBotonClaro BotonOscuro Cuando elusuario decida trabajar con colores claros, se deben crear instancias de Ventana Claray BotonClaro. Sin embargo, si el usuario decide utilizar la interfaz de colores oscuros, deberíamos crear instancias de Ventana Oscuray BotonOscuro. La forma más básica de hacerlo sería de esta manera: Esto implicaría realizar una comprobación de la interfaz seleccionada cada vez que se quiera crear una Ventana o un Boton. La mejor opciónón en este caso sería utilizar el patrón Abstract Factory. En este patrón se crean ciertas clases adicionales llamadas fábricas. Estas clases son las encargadas de crear los diferentes tipos de ventanas y botones. Veamos un ejemplo de su estructura: Identifiquemos cada clase del diagrama con las clases de nuestro ejemplo: Cliente: Parte del programa que utilizará las fábricas y productos. Podría ser el archivo .fla principal, por ejemplo. IProductoA: Interfaz que define un ejemplo de producto. Se corresponderíacon la clase Ventana de nuestro ejemplo. ProductoA1 y ProductoA2: Los diferentes tipos de ese producto.
  • 17. Se corresponderían con la clases VentanaClara y VentanaOscura. IProductoB: Interfaz que define otro ejemplo de producto. Se correspondería con la claseBoton de nuestro ejemplo. ProductoB1 y ProductoB2: Los diferentes tipos de ese producto. Se corresponderían con la clases BotonClaro y BotonOscuro. IFabrica: Interfaz que define las funciones de creación de productos. En nuestro ejemplo podría llamarse InterfazGrafica y definiría las funciones crearVentana():Ventana y crearBoton():Boton. Fabrica1 y Fabrica2: Clases encargadas de crear los productos. En nuestro ejemplo, serían InterfazClara (que crearía instancias de VentanaClara y BotonClaro) e InterfazOscura (que crearía instancias de VentanaOscura y BotonOscuro). Cabe señalar que podría haber más tipos de productos (Ventana, Boton, Icono, etc.) y más familias de estos (InterfazClara, InterfazOscura, InterfazAzul, InterfazRoja, etc.). Una vez utilizado el patrón, el código anterior quedaría así: Código : // A la hora de seleccionar la interfaz var GUI:InterfazGrafica = new InterfazClara(); // o new InterfazOscura(); // A la hora de crear un botón GUI.crearBoton(); // A la hora de crear una ventana GUI.crearVentana(); Según el tipo de InterfazGrafica instanciada, se crearán ventanas/botones de un tipo u otro dinámicamente, sin necesidad de comprobar a mano qué interfaz gráfica se está utilizando. Builder
  • 18. El patrón Builder o Constructor se utiliza cuandoqueremos crear un producto que tiene diferentes partes. El siguiente ejemplo, basado en este otro, lo ilustra mejor: Imaginemos la cocina de una pizzería donde se hacen pizzas. Las pizzas constan de varias partes (masa, salsa y relleno), y podríamos tener 2 cocineros, cada uno especialista en un tipo de pizza. El patrón Prototype o Prototipo resuelve el problema de duplicar objetos ya creados con anterioridad. Veamos un pequeño ejemplo de este patrón: Imaginemos que tenemos un programa de dibujo por ordenador en el cual podemos crear círculos y cuadrados. Cuando se crea un círculo, éste tiene un radio de 50 píxeles y es de color rojo. Sin embargo, podemos redimensionar el círculo y cambiar su color. Cuando se crea un cuadrado, tiene 50 píxeles de lado y es de color azul. Hasta aquí todo perfecto. Imaginemos ahora que el usuario decide crear un círculo y modifica su color y tamaño. Acto seguido, el usuario decide hacer una copia de dicho círculo. El código sería el siguiente: Uno de los problemas más inmediatos de hacerlo de esta manera es que, si se añaden nuevos atributos a la clase Circulo, habría que modificar el código en cada lugar donde se haya hecho una copia de un Circulo. El patrón Prototype añade un método que permita crear una copia de un objeto. Veamos un ejemplo de su estructura: Identifiquemos cada clase del diagrama con las clases de nuestro ejemplo: Cliente: Parte del programa que utilizará lasfábricas y productos. Podría ser el archivo .fla principal, por ejemplo.
  • 19. IPrototipo: Interfaz que define el método clonar():IPrototipo. En nuestro ejemplo podría ser una clase llamada IObjetoGrafico. Prototipo1 y Prototipo2: Las diferentes clases que implementarán el método de clonación. Se corresponderían con la clases Circulo y Cuadrado de nuestro ejemplo. Una vez utilizado el patrón, el código anterior quedaría así: Código : var circuloNuevo:Circulo = circuloExistente.clonar(); Si ahora quisiéramos añadir nuevos atributos a la clase Circulo, sólo habría que modificar el método clonar():IPrototipo de la clase Circulo. Por último, debe saberse que hay 2 tipos de clonación de objetos: profunda y superficial. Imaginemos un objeto A que contenga una referencia a un objeto B. Una clonación profunda haría que la copia del objeto A referenciase a una copia del objeto B. Por el contrario, una clonación superficial haría que la copia del objeto A apuntase al mismo objeto B que el objeto A original. Esto se entiende mejor con este ejemplo gráfico. Singleton El patrón Singleton se utiliza para no permitir que existan múltiples instancias de una clase, sino solamente una. Veamos un pequeño ejemplo de este patrón: Imaginemos un programa que, al hacer click en un icono de ayuda, cree una ventana nueva con los documentos de ayuda del programa. Normalmente, si el usuario hiciese click en el botón nuevamente, se abriría una nueva ventana, y así sucesivamente. Sin embargo, podríamos desear que, si la ventana de ayuda ya ha sido abierta, no se abra de nuevo. Para ello recurriríamos a un patrón Singleton, que aseguraría la existencia de una única ventana de ayuda en todo momento. Veamos un ejemplo de la estructura del patrón Singleton: Identifiquemos cada clase del diagrama con las clases de nuestro
  • 20. ejemplo: Cliente: Parte del programa que utilizará las fábricas y productos. Podría ser el archivo .fla principal, por ejemplo. Singleton: Clase que se quiere instanciar una sola vez. Se corresponde con la clase VentanaAyuda de nuestro ejemplo. La forma de implementar el patrón Singleton en este ejemplo sería dotando a la clase VentanaAyuda de un método estático getInstancia():VentanaAyuda que comprobase si ya existe una instancia VentanaAyuda o si, por el contrario, se debe crear. De esta manera, el código para crear una nueva VentanaAyuda sería el siguiente: Código : var ayuda:VentanaAyuda = VentanaAyuda.getInstancia(); Sin embargo, debemos evitar que el usuario pueda crear instancias de VentanaAyuda mediante el constructor new VentanaAyuda(). La forma idónea de hacerlo es declarando el constructor como privado, de modo que no pueda ser llamado desde fuera de la clase VentanaAyuda. El problema es que ActionScript, de momento, no permite la declaración de constructores privados. Podemos solucionarlo de la siguiente manera: