Posts etiquetados ‘web’

Cuantas veces has iniciado un proyecto web y cuando crees que todo está bien lo pones en producción y te das cuenta que las cosas no funcionan correctamente.

Hablemos de proyecto web: Portal de E-commerce, biblioteca digital, servicio de informaciones, etc.

Algo muy importante dentro de cualquier proyecto que involucre sistemas informáticos es el proceso de certificación o QA (Quality Assurance).

Quality Assurance (aseguramiento de la calidad), es una serie de actividades a realizar que te permitirán asegurar la calidad del  sistema que estás implementando. El proceso de QA debe cumplir con dos principios fundamentales “Adaptarse al propósito”, es decir el producto final debe ser adecuado al propósito para el cual se está desarrollando y suplir las necesidades planteadas; el otro principio es “Bien a la primera”, no quiere decir que todo debe funcionar a la perfección desde el comienzo, sino, que en el proceso de QA se deben eliminar los errores.

Parte de la premisa del proceso de QA es destruir el sistema o aplicación hasta lograr que falle, de esta forma podremos abarcar todas las posibilidades y cerrar cada posible fisura en nuestro sistema.

¿En que parte de nuestro proyecto debe ir QA?

Puede ser incluido de forma intermedia durante el proceso de desarrollo, pero es 100% recomendable que una vez finalizada esta parte se inicie el proceso de “aseguramiento de la calidad”.

 

QA process

QA process

Para desarrollar el proceso de QA se debe contar con los siguientes elementos:

  1. Documento de requerimientos: Donde se especifica lo que se desea del sistema a desarrollar.
  2. Documento de diseño o desarrollo: Donde se explica claramente como fue desarrollado el sistema, que elementos conforman el total del sistemas y como funcionan estos.
  3. Plan de certificación: Donde se especifica la estrategia a seguir para las pruebas que se harán, componentes necesarios para desarrollar las pruebas y set de datos.
  4. Plan de pruebas: Se debe tener claridad y enumerar cada una de las pruebas a las que se someterá el sistema tomando en cuenta el comportamiento esperado, de esta forma determinaremos si hay errores y se podrá solicitar la corrección.

Más adelante explicaré como desarrollar cada etapa del proceso de QA, diseñar casos de prueba y los tipos de pruebas que podemos usar, por ahora les dejo esto a modo de introducción.

Saludos y hasta la próxima.

Hoy quiero dar un ejemplo del uso de estas excelentes propiedades de css3.

Antes para poder hacer un diseño con un recuadro de bordes redondeados era un tremendo dolor de cabeza, usando imágenes para cada esquina o una imagen de fondo, cuando hacías una sección expansible empezaban los problemas, porque se desarmaba todo y peor si se te ocurría agregarle una sombra para “que se va más bonito”.
Hoy la solución definitiva viene de la mano de la propiedad border-radius de css3, es muy sencilla de usar y la voy a explicar a continuación.

Esta sentencia se aplica directamente a un div y es parte del conjunto de propiedades border para las capas, al igual que otras propiedades puede aplicarse completa a todo un div con una sola instrucción o afectar al div con valores distintos a cada esquina, ejemplo:

border-radius: 10px; hara que el div al que le aplicamos el estilo redondee sus esquinas con una curva de 10 píxeles.

border-radius: 10px 5px 10px 5px; dará como resultado un div con diferentes tipos de curvas en cada esquina, siguiendo esta lógica:

border-radius: 10px (esquina superior izquierda) 5px (esquina superior derecha) 10px (esquina inferior derecha) 5px (esquina inferior izquierda);

Un ejemplo sería lo siguiente:

Código html:
<div class=”borde”> Esta es una prueba de bordes redondos con css3</div>

Código css:
.borde{
   float: left;
    width: 400px;
    height: 240px;
    padding: 20px 10px 20px 40px;
    border: 1px solid #999999;
    background-color: #DAE6B1;
    color: #848582;
    border-radius: 15px;
}

Esto nos da como resultado un recuadro con los bordes redondeados a 20px.

Ejemplo de border-radius

Aplicando algunos estilos más y con un buen gusto para diseñar podemos lograr aplicaciones gráficas en nuestros sitios muy buenas, cómo por ejemplo un formulario con bordes redondos y sombra utilizando box-shadow.
El css base queda así:

border: solid 2px #999999;
border-radius: 15px 0px 15px 0px;
box-shadow: 2px 2px 5px #999999;
background: #DAE6B1;

Y el resultado final queda de la siguiente forma, el código lo pueden descargar desde aquí:

Formulario cssPor último decir que estas propiedades de css3 son soportadas por Firefox, Chrome, Safari y Opera, Internet Explorer no, la nueva versión creo que sí, no voy a explicar como realizar esto en Explorer, porque es perder el tiempo.

Chrome FlashLas conspiraciones están de moda, hemos escuchado más de alguna por la televisión o internet, pero cuando se hacen reales no sabemos como reaccionar.

La noticia viene directamente desde el sitio de Adobe, es así, lo pueden leer aquí.

Adobe y Google han decidido unirse en un nuevo desarrollo tecnológico, de tal manera que Flash vendrá incluido en el navegador Chrome, no se necesitará más instalar Flash por separado, sino que viene como parte del software.

¿Cómo se logra esto? A través de una API especial conocida como pepper PPAPI (Pepper Plugin API), que es un plugin multiplataforma,  de esta manera al instalar el navegador, flash ya está incorporado y se actualiza automáticamente cuando sea necesario.
El problema se presenta porque Firefox no incluirá esta API en su desarrollo, por lo que en un plazo no lejano los usuarios de este maravilloso navegador no tendrán actualizaciones ni soporte para Flash; ¡¡Ojo!! que esto sólo es en Linux, para otros sistemas la instalación de Flash seguirá disponible tal cual se hace hoy.
La pregunta que nace ahora es ¿Por qué Mozilla no quiere trabajar con un pepper plugin?, eso es lo que dice en su sitio. ¿Por qué estas 2 compañías se unen en tal acción conspirativa? Es algo difícil de entender, ¿Por qué sólo en Linux?

La conspiración se inició, de esta manera nos arrinconan y obligan a migrar de navegador, ya nos hicieron dependientes de Flash y sin Flash ¿qué haremos? La esperanza viene de la mano de HTML5, puede ser que en un futuro próximo no necesitemos Flash y podamos disfrutar de Firefox con toda libertad, aún cuando Google Chrome es un muy buen navegador, el hecho de coartar la libertad de escoger es lo que nos pone incómodos.

ías

Language icon

Creo que todos aquellos que trabajamos desarrollando sitios y sistemas web nos hemos encontrado con un problema cuando estamos desarrollando un sitio que estará disponible en más de un idioma, como representar de forma gráfica el cambio de idioma y que el usuario comprenda como hacer el cambio.
El problema surge porque la tendencia es a representar un idioma con una bandera, pero estas representan países y no lenguajes, o simplemente escribir el nombre del idioma, pero se hace dificil al querer representar mediante una imagen la posibilidad de acceder a diferentes idiomas, por ejemplo para cambiar a ingles algunos usan una bandera de Estados Unidos y otros una bandera de Gran Bretaña, pero ¿qué pasa con Canada? o con ¿Australia? Definitivamente la bandera no es una buena opción.

Aquí es donde nace la iniciativa de Language Icon, para suplir la necesidad de representar el cambio de idioma de forma estandar sin necesidad de referirse a algún país en específico, sino simplemente al idioma.
Para más información pueden visitar la página del proyecto www.languageicon.org, donde también podrán descargar un set de iconos en diferentes colores y las versiones vectoriales de este.

Personalmente creo que es una muy buena iniciativa que todos debieramos apoyar.