Live Tools: Herramienta de Diseño en linea

Ui Parade - Live Tools

Live Tools

Live Tools nos brinda la posibilidad de generar botones, formularios, iconos y ribbons (cintas) que luego de finalizados pueden descargarse en distintos formatos, correspondientes a cada uno de ellos para aplicar sobre el diseño que se encuentren realizando.

Generador de Botones

En el caso de los botones, pueden modificar todas las características implícitas de un botón, como tamaño, degradados, sombras y textos para luego generar el html contenedor o bien utilizar el CSS que también se realiza a través de este sistema.

Live Tools - Button Builder

Constructor de Formularios

En el caso de los formularios, creo que puede ser una excelente forma de finalmente lograr obtener un diseño atractivo de forma rápida, el único problema es que solo posee dos campos más los botones, y no permite agregar más. Por lo que solo resultará útil en el caso de necesitar formularios de ingreso, registro de newsletter o similares.

Live Tools - Form Builder

Iconos

El creador de iconos te permite cargar iconos 16x16px y editarlos, el cual puedes exportar en formato PNG o generar código Base64.

Live Tools - Icon Builder

Cintas

La opción para generar cintas nos ofrece varias opciones, de la misma forma que lo hace con los botones, podremos acceder a las características principales necesarias para lograr una buena vista modificando texto, colores, tamaños y degradados.

Live Tools - Ribbon Builder

Sitio: Live Tools

Anuncios

Red TicBolivia

redticbolivia La Red Ticbolivia es una asociación multisectorial sin fines de lucro conformada por 24 organizaciones afiliadas a nivel nacional, entre asociaciones de base, entidades no gubernamentales, empresas privadas, universidades y entidades gubernamentales, que aplican las Tecnologías de Información y Comunicación (TIC) en favor del desarrollo humano sostenible.

enbolivia.com como socio fundador ha brindado apoyo en diversos temas a los socios de la Red durante varios años. Los trabajos incluyen consultorías, cursos y principalmente desarrollo de sitios y sistemas con componente Web.

Como parte de la estrategia comunicacional de la Red TicBolivia se vió por conveniente renovar el diseño del sitio Web. El nuevo sitio Web cuenta con diversas funcionalidades, todas orientadas a mostrar de mejor manera el trabajo de la Red TicBolivia. Cuenta con diversas secciones que facilitan información al usuario en diversos formatos, por ejemplo para conocer las novedades de la Red TicBolivia el usuario puede visitar la sección de noticias ó la de eventos. El sitio Web además cuenta con un gran número de recursos interactivos, entre los que cabe destacar los recursos  de audio y video, los cuales pueden ser vistos en una galería y compartidos a través de las redes sociales, todo desde el mismo sitio.

SEGURIDAD INFORMATICA

seguridad_inf (1)La seguridad informática es una disciplina que se encarga de proteger la integridad y la privacidad de la información almacenada en un sistema informático. Sinembargo, no existe una técnica que permita asegurar la seguridad de un sistema al 100%.

Un sistema informático puede ser protegido desde un punto de vista lógico (con el desarrollo de software) o físico (vinculado al mantenimiento eléctrico, por ejemplo). Por otra parte, las amenazas pueden proceder desde programas dañinos que se instalan en la computadora del usuario (como un virus) o llegar por vía remota (los delincuentes que se conectan a Internet e ingresan a distintos sistemas).Entre las herramientas más usuales de seguridad informática, se encuentran los programas antivirus, los cortafuegos o firewalls, la encriptación de la información y el uso de contraseñas (passwords).

nube_seguridadUn sistema seguro debe ser íntegro (con información modificable sólo por las personas autorizadas), confidencial (los datos tienen que ser legibles únicamente para los usuarios autorizados), irrefutable (el usuario no debe poder negar las acciones que realizó) y tener buena disponibilidad (debe ser estable).

De todas formas, como en la mayoría de los ámbitos de la seguridad, lo esencial sigue siendo la capacitación de los usuarios. Una persona que conoce cómo protegerse de las amenazas sabrá utilizar sus recursos de la mejor manera posible para evitar ataques o accidentes. En otras palabras, puede decirse que la seguridad informática busca garantizar que los recursos de un sistema de información sean utilizados tal como una organización o un usuario lo ha decidido, sin intromisiones.

Causas

seguridad-informatica2 Entre las causas más destacables, se encuentran: robo de identidad, falsificación de datos, ataques de virus informáticos, entre otras. Por esos motivos es que surge la seguridad informática. Aquí también entran lo que son las amenazas causadas por el hombre o la naturaleza (amenazas físicas), como desastres naturales, incendios accidentales, etc.

Medidas de prevención

Para prevenir el ataque de un virus, troyano, gusano, etc. Se recomienda lo siguiente:

  • Utilización de aplicaciones de protección: cortafuegos, antivirus, antiespías, etc.
  • Encriptación de la información y uso de contraseñas.
  • Capacitación a los usuarios de un sistema.
  • Capacitación a la población general sobre las nuevas tecnologías y las amenazas que pueden traer.

Consecuencias

Las consecuencias que se pueden presentar en los equipos dependerán del tipo de Virus cada uno de ellos tiene las siguientes características:

  • Auto-Reproducirse para poder obtener copia de ellos mismos sin que el usuario brinde su autorización
  • Poder para alojarse en algunos programas no necesariamente dentro del que lo portaba. Dañar disquetes o discos pues tienden a sobrecalentarlos para que estos disminuyan su tiempo de vida. Memoria RAM Baja Lentitud en el equipo. Impiden que se ejecuten ciertos archivos. Perdida de archivos o bases de datos. Pueden aparecer archivos extraños que no se encontraban antes del contagio. Es necesario Reiniciar los equipos a menudo.
  • En cuanto a amenazas físicas, causadas tanto por el hombre como por la naturaleza, se puede llegar a perder parcial o completamente el equipo de cómputo, viéndose en la necesidad de tener que reemplazar las piezas perdidas o, en su defecto, todo el equipo.

Protocolo de seguridad

seguridad-web Se recomienda que antes de aventurarse por el “mundo” virtual, se tengan instalados en su ordenador una serie de softwares que le ayudaran a evitar en su mayoría, a los virus, troyanos, gusanos, spam, etc. No le garantizan protección al 100 %, pero sí proporcionan seguridad en su gran mayoría.

Automáticamente nuestro software nos avisará si hay alguna amenaza, y lo que se deberá de hacer será eliminarla y hacer un escaneo de nuestro ordenador.

Después de: Realizar una revisión exhaustiva al computador en busca de más amenazas, y en la medida de que nuestro ordenador haya sido dañado, realizar un formateo.

Super.bo

Es un sistema creado por la Cámara Nacional de Comercio para fomentar el desarrollo del comercio electrónico en Bolivia desarrollado por enbolivia.com.

superboSUPER.BO es una plataforma informática en el que los emprendedores o empresarios pueden diseñar y abrir su Tienda Virtual de manera rápida, fácil y económica, promocionando sus productos y servicios en Internet.

El desarrollo incluye una solución adecuada para el comercio electrónico, porque contempla servicios complementarios e integrales en este ámbito de negocios, tales como:

  • Pasarela de pagos
  • Medios de envío y distribución
  • Marketing electrónico
  • Capacitación en comercio electrónico, marketing electrónico y redes sociales
  • Asesoría integral en comercio electrónico
  • Y mucho más…

SUPER.BO es parte de una gama de servicios de comercio electrónico de la Cámara Nacional de Comercio, tales como:

  • Sistema de Información para la Internacionalización de Empresas – Negocios.bo
  • Sello de Confianza – Controle.bo
  • Marketing por correo electrónico – MailMercurio.bo
  • Tarjeta empresarial de descuentos – Empresario.bo
  • Entre otros.

Para los consumidores (internautas), SUPER.BO es el supermercado electrónico ideal y confiable donde puede realizar sus consultas y compras de productos y servicios que necesita.

Impress.js – Una librería JS para realizar atractivas presentaciones

Impress JS es una librería que tiene una finalidad simple, realizar presentaciones atractivas con unas cuantas líneas de código HTML y que aprovecha el poder de CSS3, transformaciones 3D y HTML5. Esta alternativa es soportada por las últimas versiones de Google Chrome, Safari y Firefox, se realizó las pruebas en Internet Explorer 10 pero este navegador no lo interpreta correctamente.

A continuación un ejemplo simple de lo que se puede hacer con esta librería.

  1. Primero descargamos la librería desde GitHub https://github.com/bartaz/impress.js/
  2. Creamos un archivo HTML

    <html lang="es">
    <head>
    <title>Impress Demo</title>
    </head>
    <body>
    </body>
    </html>
  3. Agregamos la librería JS, realizamos la llamada a la función inicializadora y creamos un DIV con el atributo ID con valor “impress”.
    <html lang="es">
    <head>
    <title>Impress Demo</title>
    </head>
    <body>
    <div id="impress">
    </div>
    <script type="text/javascript" src="impress.js"></script>
    <script type="text/javascript">impress().init();</script>
    </body>
    </html>
  4. Hasta aca tenemos un código que no hace nada pero es la estructura básica para generar las presentaciones con impress.js.
  5. Agregamos los sliders de nuestra presentación con la ayuda de etiquetas DIV y con el atributo class igual a “step”.

    <head>
    <title>Impress Demo</title>
    </head>
    <body>
    <div id="impress">
    <div class="step">
    <h1>enbolivia.com</h1>
    <p>www.enbolivia.com</p>
    </div>
    </div>
    <script type="text/javascript" src="impress.js"></script>
    <script type="text/javascript">impress().init();</script>
    </body>
    </html>
  6. Ya está listo nuestro primer slider, no olviden que por defecto la presentación es cíclica es decir que cuando se llegue al último slider volverá al primero.
  7. Agregamos 4 sliders más para dar más interacción a la presentación
    <div data-x="1000">
    <p> Los mejores sitios Web en internet</p>
    </div>
    <div data-x="1000" data-z="2000">
    <p>en Bolivia y el mundo</p>
    </div>
    <div data-x="1000" data-z="1000" data-rotate-y="-90">
    <p> M&aacute;s de 280 clientes</p>
    </div>
    <div data-x="2000" data-scale="2">
    <p>Visitenos en http://www.enbolivia.com</p&gt;
    </div>
  8. A continuación un detalle de los 4 sliders agregados recientemente:
    • En el slider 1 se agregó el atributo “data-x”, este atributo permite especificar donde se posicionará el elemento DIV, la posición indicada será centrada de forma automática, es decir tendremos un movimiento horizontal de izquierda a derecha de 1000 pixeles hasta que el DIV quede centrado.
    • En el slider 2 se agregó también el atributo “data-z”, este atributo permite especificar donde se posicionara el elemento DIV en el tercer eje de la 3ra dimensión, en este caso se mostrará un alejamiento de los objetos de la presentación 2000 pixeles de la posición original.
    • En el slider 3 se agregó el parámetro “data-rotate-y”, con un valor de -90, este atributo permite que todos los objetos de la presentación giren 90 grados en sentido contrario a las agujas del reloj.
    • Finalmente en el slider 4 se agrega el valor “data-scale”, este valor permite escalar el contenido del elemento DIV duplicando su tamaño (x2).
  9. Finalmente agregamos algo de estilos para diferenciar mejor los cambios
    <style type="text/css">
    .step {
    width: 400px;
    height: 400px;
    border: 3px solid #119988;
    padding: 10px;
    font-size: 20px;
    font-family: "arial";
    background-color: #aaeeee;
    }
  10. El resultado final será similar al siguiente
    Impress resultado final

Como verán la creación de sliders es muy sencilla, pero no se queda allí, la librería es muy poderosa, este ejemplo es solo para fines demostrativos, si desean obtener mayor información del uso de esta librería pueden visitar el sitio https://github.com/bartaz/impress.js/wiki/Examples-and-demos

Nueva técnicas para text-indent

Existe una técnica muy conocida en el diseño web para ocultar el texto en la página, agregando una propiedad CSS a la indentacion “text-indent” el valor negativo -9999px. Esto mueve el texto hacia el lado izquierdo de la pagina sin generar la barra de desplazamiento inferior del navegador y ocultándolo de la mirada del visitante. Como desventaja, llega a ser perjudicial para el SEO ya que se está tratando de ocultar el contenido de los visitantes del sitio.

css

Ahora, veamos un ejemplo práctico. Dentro de un diseño Web, se necesita incluir el logotipo de la empresa en el título de la pagina, para ello utilizaríamos lo siguiente:

Text_indent_01

El problema con esto es que no se tiene las palabras clave del sitio Web en el título de la página, aunque, puede añadir un título a través del atributo alt, pero no tiene tanto peso, como lo sería, tener su título en una etiqueta h1 de la página.

Pero si se utiliza una etiqueta h1 no se puede agregar una imagen en el logotipo, la única manera de lograr esto es agregar la imagen como background de la etiqueta h1 y tener el texto dentro de la etiqueta h1. Esto nos lleva a otro problema, que ahora se tendrá tanto el logotipo y el texto en el título sitio Web.

Aquí es donde la técnica text-indent:-9999px entra en acción, si se agrega esta regla al archivo CSS, entonces se puede lograr tener el logotipo de su sitio Web y el texto dentro de la etiqueta h1.

Text_indent_02

Text_indent_03

Esta técnica funciona bien, pero la desventaja es que tiene un impacto en el rendimiento del navegador. Ademas cuando la resolución es muy grande, el texto fuera de la pantalla, llegaría a verse. Se pensaría que el  incremento del valor (a más de -9999) seria la solución, pero nada más falso, ya que eso nuevamente acarrearía el inconveniente del rendimiento del navegador.

Nueva técnica

Text_indent_04

Esto coloca el texto de la página, sin importar el tamaño ni la resolución de la página. Ademas se añade la propiedad nowrap por lo que el texto siempre seguirá fluyendo fuera de la página y nos aseguramos de que cualquier desborde del texto seguirá escondido.

Una de las ventajas (diferencias) de esta técnica, es que el rendimiento aumenta porque hay menos cosas para el navegador debe interpretar.

Agencia – AFKA

Página principal

Página principal agencia – AFKA

El sitio Web www.afkaphotos.com es el sitio desarrollado para la Agencia – AFKA por enbolivia.com. Es un sitio enfocado en publicitar las fotografías que son propiedad de la agencia, estas fotografías son consideradas entre las mejores de Boliva. El sitio tiene la posibilidad de agrupar fotografías por categorías y por sesión, cada fotografía cuenta con un nombre y descripción como pie de foto.

Una de las funcionalidades más novedosas implementadas sobre la Galería fotográfica es la Descarga con seguridad, mediante esta funcionalidad únicamente usuarios registrados podrán recibir el enlace de descarga enviado por el administrador del sistema una vez que se haya pagado el derecho de descarga.

Además el sitio de la Agencia AFKA cuenta con las siguientes características:

24 horasPagina restringida, solo para usuarios con cuenta de clientes donde se listan  las fotografías del día.

Archivo: Listado de sesiones fotográficas agrupadas por categorías, donde cada sesión cuenta con N fotografías en su detalle. El usuario cliente puede navegar y descargar la fotografía que mas le llamo la atención.

Fotógrafos: Listado de fotógrafos empleados de la agencia AFKA. El detalle muestra el currículum del fotógrafo juntamente con su galería de fotografías.

Noticias: Listado de noticias o acontecimientos ocurridos que son de importancia. En su detalle contiene su respectiva galería de fotografías.

Noticias del día: Listado de noticias registradas del día. En su detalle contiene su respectiva galería de fotografías.

Fotoreportajes: Listado de foto-reportajes donde en su interior se visualiza una descripción del foto-reportaje y su respectiva galería de fotografías.

Pagina representativa de la agencia

Pagina representativa de la agencia

Las fotografías pueden ser únicamente descargadas por clientes de la agencia.

Todas las paginas y fotografías cuentan con la opción de : Share, Like de facebook y twiter que permiten mayor publicidad e interacción para la pagina y las fotografías.

Las tecnologías empleadas para el sitio son: CSS3, jquery, 960 GS, Cufon, HTML5 Boilerplate,  prettyphoto, plugins Redes sociales Facebook y twiter, WSP administrador de contenidos.

Galería de fotografías de Fotógrafo AFKA

Galería fotografías de Fotógrafo AFKA

Gestión de proyectos web con PMBOK

project_management

La finalidad de la gestión de proyectos web es encontrar las técnicas necesarias para planear, organizar, motivar,  supervisar  y  coordinar todos los recursos disponibles para conseguir proyectos de software de alta calidad. Esto implica la interacción entre conocimiento, tecnología, entorno, estructuras, procesos, servicios y productos.  Para la gestión de proyectos web puede emplearse la guía  PMBOK Project Management Body of Knowledge , esta guía es un estándar en la administración de proyectos que  describe las mejores prácticas que se implementan en la gestión y manejo de proyectos  desarrollado por el Project Management Institute (PMI).

¿Cómo aplicar PMBOK en la gestión de proyectos web?

El PMBOK se aplica a cualquier gestión de proyectos, ya que es una guía de la cual nosotros decidimos los elementos que queremos implementar, esto dependiendo de las necesidades de nuestro proyecto. Para la creación de un proyecto web de la misma manera tenemos distintas áreas y necesidades que gestionar, ya que tiene actividades, tiempos de presentación, costos, grupos de trabajo y un objetivo que lograr (el producto final).

En un proyecto web se debe gestionar el personal con el fin de optmizar la preparación en la organización del software; ayudando a atraer, motivar y retener el talento necesario para mejorar su capacidad de desarrollo de software.

Se deben definir los objetivos del proyecto, es decir las metas generales, identificar los datos primarios, funciones y comportamientos que caracterizan al problema,  considerar las soluciones alternativas, tener claro los objetivos y requerimientos que el cliente esta proponiendo.

Depende del jefe de proyecto y de la necesidad de este el escoger las mejores herramientas para nuestra gestión de proyectos web, es acá donde la guía PMBOK entra en acción proporcionandonos información util ,las mejores practicas de empresas exitosas que nos proveen a travez del PMBOK  conocimiento valioso.

PMBOK tiene 5 grupos básicos de procesos que pueden aplicarse de la siguiente manera a un proyecto web:

pmbok-processes

  1. Iniciación.- Documentar las necesidades del proyecto y evaluar con el cliente los requirimientos necesarios. Identificar las actividades que deben realizarse para producir el producto final.
  2. Planificación.- Involucra la especificación de objetivos y metas para un proyecto web y las estrategias, políticas, planes y procedimientos para alcanzarlos. Todo proyecto web debe partir con un plan para evitar las incertezas sobre el proyecto y fuentes externas, enfocandose en las metas que se desean lograr. Definir las actividades especificas que deben realizarse , su secuencia , duración y quienes estaran a cargo de cada tarea que se planeó.
  3. Ejecución.-  En esta fase se debe completar el trabajo definido es decir el desarrollo del sistema y cumplir con los requisitos que se acordaron para la conclusión del proyecto.
  4. Seguimiento y Control.- Es la fase en la que se realiza el seguimiento para poder identificar posibles problemas, en esta fase tambien se realiza el mantenimiento del proyecto web.
  5. Cierre.-  En esta fase se finaliza toda las actividades para cerrar formalmente el proyecto, realizando la presentación del producto final , y haciendo el cierre del contrato. Cuando los objetivos de un proyecto son alcanzados se entiende que un proyecto esta completo.

«“Buenas prácticas” no quiere decir que los conocimientos descritos deban aplicarse siempre de manera uniforme en todos los proyectos: el equipo de dirección del proyecto es el responsable de determinar lo que es apropiado para cada proyecto determinado.» Guía del PMBOK®

“Graph Search” el tercer pilar de Facebook

Las personas usan Facebook cada día y descubren cosas gracias a sus amigos y los negocios y marcas con los que están conectados. Bien sea viendo una recomendación de un amigo sobre una película en su sección de noticias, recibiendo una oferta especial de la página de Facebook de su tienda favorita o probando un nuevo juego que un amigo acaba de jugar, las personas reciben información relevante a través de sus conexiones en Facebook.

Lanzamiento

Además de descubrir cosas en su sección de noticias, las personas en Facebook también buscan información a través de las páginas: de hecho, más de 150 millones de visitas a las páginas de negocios y marcas en Facebook ocurren cada día.

Presentamos una nueva forma de navegar por estas conexiones y hacerlas más útiles. Lo llamamos “búsqueda en la gráfica de Facebook” y hoy comienza con una versión de prueba limitada. En este momento, solo está disponible en inglés.

Leer más

Cómo capturar imágenes de tu sitio web

Muchas veces por algún motivo; ya sea éste realizar un manual de nuestro sitio, realizar alguna observación sobre un punto específico de la página web o simplemente  reportar algun mal funcionamiento del sistema. ¿Cómo puedo capturar y enviar esta pantalla? ¿Cuánto pesará lo capturado? ¿Cómo puedo enfocarlo en lo que quiero mostrar? serán algunas preguntas que nos surgen al instante.

La salida más fácil entonces será capturar con el teclado toda la pantalla del monitor, luego algunos enviarán esta misma pantalla como adjuntos sin editar, otras personas optarán por pegarlo en un word y ahi recortar (que no reduce tamaño de la imagen en cuanto a peso). Otras ingresarán a paint y recortarán la imagen.

Al final estos archivos pesan mucho y hacen que el mail que queremos enviar tarde en enviarse o supere los adjuntos generalmente de 2MB.

Por lo cual veremos qué alternativas tenemos.

Plugins para navegadores

Screen Capture

Una soluciona práctica para Chrome que nos permite guardar imágenes pero también poder resaltar segmentos (esta herramienta fue desarrollada por #google)

Selection_045

SCREEN

ScreenGrab

Muchos seguro conocerán “ScreenGrab” plugin muy potente en firefox que captura pantalla, que fue descontinuado por las múltiples actualizaciones del navegador pero consiguió que los fans de la misma publicarán versiones corregidas manteniéndola con vida hasta ahora. Capaz de capturar segmentos, parte visible y toda la página. No soporta contenido flash. Permite guardar o solo copiar

Pearl Crescent Page Saver Basic

De manejo más simple, pero no permite captura de segmentos

Pixlr Grabber

La ultima opción (que me parece interesante) porque ademas nos permite enviar la imagen a un editor online pixlr.com donde podemos manejar capas quitar colores y hacer una edición profesional como si usáramos photoshop.

Escritorio

Shutter

Finalmente quiero hablarles de una herramienta para escritorio para aquellos que usan linux

shutter2 shutter

  • Captura escritorio entero
  • Captura de ventanas independientes
  • Captura de zona a selección libre
  • Capturar página web completa
  • Capaz de capturar desplegables y menús contextuales.
  • Opción para capturar el texto de ayuda, como el que aparece cuando pasamos el ratón por encima de un icono.


y puedes editar la imagen guardarla o solo copiar directamente a documento.

Espero les haya gustado el articulo y les sea de utilidad.

Escrito por: Gaston Nina