Últimas entradas del blog

Probando Bootstrap 3

2014-02-17 - Categorías: General

Cada vez menos ordenadores de sobremesa visitan las páginas web. Se venden ingentes cantidades de dispositivos que no son los clásicos ordenadores como tablets, smartphones, smart TV.. Los visitantes de una web necesitan que la página sea compatible con todo tipo de dispositivos. Bootstrap de Twitter está muy de moda, a fecha de hoy van por la versión 3.1.1 así que aprovechando para ponerme al día les dejo éste post. Al grano..

Bootstrap de Twitter es un framework de desarrollo para hacer aplicaciones web compatibles con todo tipo de dispositivos. El modelo de desarrollo cambia totalmente al modo habitual porque se da preferencia a los dispositivos móviles siendo su adaptación primera, antes que para escritorios de ordenador. Para verlo claro más abajo veremos cómo el mismo menú en caso de tener una pantalla ancha se verá en horizontal como en la imagen de arriba. Si tenemos una pantalla estrecha se visualizará desplegándose hacia abajo para que quepa todo.
Lo mismo sucede con el resto de las páginas diseñadas con Bootstrap, se adaptan según cambia el tamaño del navegador. Así tendremos una web que se puede ver correctamente en cualquier dispositivo.

Esbozando la web

Para que sea lo máximo posible compatible necesitamos utilizar el estándar HTML5 con lo que la primera estructura quedará así:
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Probando Bootstrap Twitter</title>
 
    </head>
    <body>
 
    </body>
</html>
Es importante saber que con la metaetiqueta «viewport» definimos la escala inicial de la página. Ésto se utiliza para agrandar o disminuir con la función de zoom de los navegadores.

Añadiendo los archivos externos

Prefiero descagar los archivos de las páginas oficiales (getbootstrap.com) y usarlos dentro del proyecto en cuestión. Pero para simplificar ésta primera plantilla he puesto los CDN. Será necesario tener conexión a Internet para ejecutar la web y se vean el aspecto estilo Bootstrap. Si los incluyes dichos archivos no será necesario Internet. Añadimos dentro del <head> lo siguiente:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https:///netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Ésto simplemente enlaza a los archivos públicos que tenemos en Internet. Te ahorras espacio usando los CDN, pero dependes de que dichos archivos estén disponibles para que tu web funcione correctamente.

Algunos componentes para probar

A continuación he puesto un menú de navegación y tres paneles, uno simple, otro con título y un tercero con título con estilo de cabecera. Añadiendo en el body lo siguiente tendremos la barra de navegación que viene en la documentación oficial:
        <nav class="navbar navbar-default" role="navigation">
            <!-- El logotipo y el
            icono
            que despliega el menú se
            agrupan
            para mostrarlos mejor en
            los
            dispositivos móviles -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Desplegar navegación</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Logotipo</a>
            </div>

            <!-- Agrupar los enlaces
            de
            navegación, los
            formularios y
            cualquier
            otro elemento que se
            pueda
            ocultar al minimizar la
            barra
            -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Enlace #1</a>
                    </li>
                    <li>
                        <a href="#">Enlace #2</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #1 <b class="caret"></b> </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">Acción #1</a>
                            </li>
                            <li>
                                <a href="#">Acción #2</a>
                            </li>
                            <li>
                                <a href="#">Acción #3</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Acción #4</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Acción #5</a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Buscar">
                    </div>
                    <button type="submit" class="btn btn-default">
                        Enviar
                    </button>
                </form>

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#">Enlace #3</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #2 <b class="caret"></b> </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">Acción #1</a>
                            </li>
                            <li>
                                <a href="#">Acción #2</a>
                            </li>
                            <li>
                                <a href="#">Acción #3</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Acción #4</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
Incluyendo dentro del body también lo siguiente tenemos los tres paneles citados:
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-body">

                    <h1>¡Hola Mundo!</h1>

                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    ¡Hola Mundo!
                </div>
                <div class="panel-body">
                    Contenido del panel
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">¡Hola Mundo!</h2>
                </div>
                <div class="panel-body">
                    Contenido del panel
                </div>
            </div>
        </div>
Nota que los paneles están dentro de un <div class=»container»>. Éste div contenedor se suele usar para el contenido de la web, alinea lo que tengas dentro, para algunos componentes es necesario si no puede que no se vean bien.

Ahora es el momento de probar con un móvil el fichero, o con una tablet. Si quieres verlo claro directamente en el ordenador puedes estrechar horizontalmente el navegador con la página cargada y verás cómo se modifica el aspecto.

Usando archivos incluidos en el proyecto

Si descargamos y descomprimimos los archivos de la página oficial getbootrap.com, tendremos tres directorios con todos los archivos necesarios menos jQuery. jQuery lo podemos descargar de su página oficial http://code.jquery.com/jquery-2.1.0.min.js y copiarlo al directorio js. Ahora tendremos un directorio /css otro /fonts y un tercero /js con todo incluido. En éste caso viendo los archivos que tengamos según la versión podremos incluir en la cabecera el código siguiente:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Mira que las rutas relativas a los archivos sean correctas y que dichos archivos estén en su sitio, sino no funcionará.

Resumiendo

Entonces el archivo completo de pruebas con los archivos necesarios incluidos en el directorio del proyecto quedará tal que así:
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Probando Bootstrap Twitter</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>

        <nav class="navbar navbar-default" role="navigation">
            <!-- El logotipo y el
            icono
            que despliega el menú se
            agrupan
            para mostrarlos mejor en
            los
            dispositivos móviles -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Desplegar navegación</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Logotipo</a>
            </div>

            <!-- Agrupar los enlaces
            de
            navegación, los
            formularios y
            cualquier
            otro elemento que se
            pueda
            ocultar al minimizar la
            barra
            -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Enlace #1</a>
                    </li>
                    <li>
                        <a href="#">Enlace #2</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #1 <b class="caret"></b> </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">Acción #1</a>
                            </li>
                            <li>
                                <a href="#">Acción #2</a>
                            </li>
                            <li>
                                <a href="#">Acción #3</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Acción #4</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Acción #5</a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Buscar">
                    </div>
                    <button type="submit" class="btn btn-default">
                        Enviar
                    </button>
                </form>

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#">Enlace #3</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #2 <b class="caret"></b> </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">Acción #1</a>
                            </li>
                            <li>
                                <a href="#">Acción #2</a>
                            </li>
                            <li>
                                <a href="#">Acción #3</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Acción #4</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="container">
            <div class="panel panel-default">
                <div class="panel-body">

                    <h1>¡Hola Mundo!</h1>

                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    ¡Hola Mundo!
                </div>
                <div class="panel-body">
                    Contenido del panel
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">¡Hola Mundo!</h2>
                </div>
                <div class="panel-body">
                    Contenido del panel
                </div>
            </div>
        </div>

    </body>
</html>
Si todo ha ido bien debemos de ver la página como la de la imagen de al lado cuando hacemos la ventana del navegador estrecha. Espero haber resumido correctamente la documentación oficial como para poder empezar a jugar con el framework Bootstrap.

Sólo me queda decir que los ejemplos de componentes que he puesto los he sacado de la documentación oficial, en ella estan todos los que hay disponibles. Como por ejemplo el uso de rejillas, las fuentes para los pequeños gráficos incluidos, y un largo etcétera..

Saludos!

Validación de páginas web

2014-02-09 - Categorías: General
Hace tiempo que no escribo, parece que estoy olvidándome de la programación pero no es así. He estado bastante liado, tal vez demasiados proyectos o demasiado «querer hacer». El que mucho abarca poco aprieta, o el que mucho aprieta poco abarca :S así que espero seguir escribiendo, aunque sea los fines de semana.

En éstos días he estado viendo cómo se puede medir la calidad de una página web. Desde un punto de vista se puede medir la cantidad y calidad de los algoritmos que trabajan en la parte servidor, sus funciones o servicios que dan. Por otro lado tenemos las validaciones de la parte cliente, si cumple con los estándares de los lenguajes..

Unos chequeos que podemos hacer para validar la parte cliente:
Otras herramientas: http://www.w3.org/QA/Tools/
Con ésto ya hay para hacerle algunos checkeos automáticos. Son pocas las webs que cumplen con todos los estándares, pero la organización mundial donde se organiza todo ésto está ahí haciendo su trabajo, queda de nuestra mano todo lo demás sino te arriesgarás a que la web pueda no funcionar bien en algunos navegadores. Ten en cuenta también que cumpliendo con la accesibilidad le hecharás una mano a personas que tienen problemas visuales, a los que necesitan traductores automáticos, de otras culturas, y un largo etcétera. La accesibilidad es algo muy importante y se nos pueden pasar por alto.
Por otro lado tenemos también los criterios de diseño como por ejemplo: «Si algo es un botón que parezca un botón.» no le pongamos una imagen con luces intermitentes.. ésto ya es otro tema, a ver si pronto tengo tiempo.. Si estás leyendo ésto gracias por haber llegado hasta aquí 🙂
Un saludo!

Redes sociales de Internet: qué son y cómo usarlas

2014-01-22 - Categorías: General
Una red social, es una estructura donde los elementos conectados en su mayor parte son personas que establecen relaciones. Se interrelacionan estableciendo lazos de diversa naturaleza: relaciones personales, familiares, de trabajo, por distribución geográficas, gustos, aficiones, etcétera.
Son una forma muy eficiente y práctica de relacionarse, estableciendo nuevos contactos, manteniendo y comunicando todo tipo de información.

Principales

Dependiendo de la naturaleza de las relaciones se pueden diferenciar los principales usos que se les está dando. Nombrarlos todos es una tarea interminable, ya que dada la naturaleza de las relaciones sociales que se pueden establecer no acabaríamos nunca.
Entre las principales redes sociales de Internet a fecha de hoy tenemos Facebook, Twitter, Google+, Linkedin, Instagram, Pinterest.. en la zona occidental del globo. Todas tienen características propias que las diferencian y son mejores para algunas cosas.

Características

Analizarlas todas en profundidad necesitaría de un estudio detenido sobre cada una por lo que vamos a citar las principales diferencias.
  • Facebook, caracterizada por su uso general para todo tipo de propósitos: familiar, amistad, trabajo, etcétera. Se pueden compartir fotos, vídeos, ficheros, comentarios, etcétera.
  • Twitter, red de difusión de pequeños mensajes de 140 caracteres. Se pueden compartir fotos, vídeos y enlazar con webs externas.
  • Google+, cuya principal característica es que enlaza todo tipo de contenidos. De igual manera que Facebook, y usando el ecosistema de servicios de Google, podemos comunicarnos mediante mensajes, emails, compartir información de Blogger, fotos de Picasa y videos de YouTube.
  • Linkedin, destaca por su uso para trabajo, estableciendo relaciones laborales entre las personas. Es buena en estructurar dicha información, facilitando las relaciones entre personas laboralmente afines.
  • Instagram, orientadaa compartir imágenes comentándolas. Destacan los retoques fotográficos que se les pueden dar.
  • Pinterest, parecida a Instagram, nos facilita enormemente compartir imágenes. Destaca la facilidad que da para organizar temáticamente tus fotos.
En líneas generales sin entrar en tecnicismos sobre conectores, grado de centralización, cohesión.. éstas son las principales. Se podrían establecer una principal diferenciación entre redes de propósito general, como Facebook o Google+, y las orientadas a ciertos usos o tareas. Existen todo tipo de redes temáticas como por ejemplo para cinéfilos, lectores, amantes de la música, gatos..

Curioso

Destaca la «teoría de los seis grados de separación». Propuesta en 1930 por el escritor húngaro Frigyes Karinthy. En la cual se establece la hipótesis de que dos personas cualesquiera de la Tierra están conectados por una cedena de conocidos de máximo cinco intermediarios.
Facebook ha realizado en 2011 un estudio relacionado estableciendo que el 99,6% de las personas de su red cumplen la teoría de los seis grados, bajando incluso la media a menos de cinco los grados de separación.

Resumiendo

La forma de relacionarnos está cambiando, las redes sociales de Internet estan pasando a formar parte de nuestras vidas. Lo queramos o no, se estan convirtiendo en una prolongación de nuestros cuerpos con la que podemos comunicarnos y relacionarnos con el resto de seres humanos. Estan ahí y parece que han llegado para quedarse.
Un saludo.

Joomla! equilibrio entre potencia y flexibilidad

2014-01-10 - Categorías: General
Un CMS es un gestor de contenidos para una web, un software para administrar su web. Como todo buen software debe tener flexibilidad y muchas opciones, eso nos da la potencia.

¿Has visto el nuevo panel de administración de la nueva versión de Joomla 3.2?

Es un gestor muy potente:
  • Gran cantidad de extensiones, plantillas de diseño.
  • Buena documentación en Internet.
  • Comunidad de usuarios muy grande.
  • Compatible por defecto con dispositivos móviles.
  • Gestión de usuarios con roles, privilegios, permisos, grupos..
  • Sistema de actualización automatizado.
  • Adaptable por defecto a muchos tipos de web.
  • Y un largo etcétera.
Un saludo!

Drupal, un gestor de contenidos muy flexible

2014-01-10 - Categorías: General
Drupal es otro sistema gestor de contenido (CMS). Es software que se instala en una web para gestionarla. Se dice que está hecho por programadores y orientado para programadores, de ahí su flexibilidad y potencia. Se puede hacer de todo con Drupal.

La imagen es del panel de control, buscando actualizaciones..

Algunas de sus características

  •   Excepcionalmente flexible.
  •   Compatible con varias bases de datos, entre ellas MySQL, PostgreSQL y SQLite.
  •   Muchas extensiones, plantillas de diseño, utilidades, aunque pocas en comparación con los otros dos principales WordPress y Joomla!
  •   Al principio difícil de aprender pero muy potente después.
  •   Impresionante comunidad de desarrolladores con gran cantidad de documentación.
  •   Grandes cambios se vienen con la versión 8, aún en desarrollo.
  •   Y un largo etcétera.
La web: https://drupal.org/

Un saludo.

PHP siguiente nivel (editado)

2013-12-30 - Categorías: General
Pensaba que ya tenia un buen nivel de conocimiento en la programación PHP. Estaba a mitad de camino entre programar webs desde cero, o usar CMSs y adaptarlos. Indagando, indagando, y bien aconsejado me decidí por aprender a fondo sobre el tema, cómo estan hechos los CMSs, y sobre los frameworks de desarrollo. La idea que tenia en mente era no reinventar la rueda una y otra vez con cada proyecto. Ahora resulta que como dice el dicho, cuanto más aprendo, más veo que me falta por aprender. Es chistoso pero así es, a veces me siento contento de haber aprendido, pero miro hacia adelante, no quiero quedarme atrás, y pienso sobre todo lo que quisiera saber.
Por todo ésto les quiero compartir una serie de enlaces a alimento académico y herramientas. Para todos aquellos que estamos en constante reciclaje, que creo la mayoría de los programadores..

Al grano, los recursos:
  • PHP -> Imprescindible, manuales oficiales sobre el lenguaje de programación PHP.
  • LIBROSWEB -> Muchos libros gratis para la comunidad de programadores. Son libros avanzados sobre XHTML, Symfony, Silex, Composer, Git, CSS y más.
  • Composer -> Es una herramienta con la que podemos instalar de forma automática todo tipo de librerías para aplicaciones PHP. Es un manejador de dependencias. Resumiendo, eliges las herramientas, ejecutas el comando de composer y te instala todas las librerías. Por ejemplo, Symfony y Silex se pueden instalar o actualizar usando Composer.
  • Packagist -> Es el repositorio principal de paquetes para Composer. Podemos consultarlo que probablemente encontremos herramientas que nos agilicen los desarrollos.
  • Symfony -> Framework de desarrollo con una comunidad de habla hispana muy grande, podemos encontrar mucha documentación en Internet.
  • Silex -> Microframework basado en algunos componentes que usa Symfony. Muy sencillo para empezar y potente cada vez más cuando vamos aprendiendo a usar sus componentes.
  • Aptana Studio -> Un entorno de desarrollo basado en Eclipse que seguro que a mas de uno le gustará si lo prueba. Tiene de todo para el desarrollo web desde el punto de vista de un programador. Editor de código bueno, autoformateo de código, autocompletado, resaltado de sintáxis. Y es gratis.
  • PHP, la manera correcta -> Proyecto de documentación sobre buenas prácticas a la hora de programar.
Gracias a Albert por gran parte de la información.
Un saludos y ¡que aproveche!

La base de datos más grande de iconos vectoriales gratis

2013-12-30 - Categorías: General
Se trata de un proyecto libre, hecho por y para diseñadores y desarrolladores, cualquier colaboración seguro que será bien recibida. 
Su fundador, Alejandro Sánchez Blanes, se preocupaba diciendo:

«Por qué no construir una nueva herramienta para encontrar y elegir los iconos sin límites, una herramienta que puede funcionar bien en cualquier proyecto, con el tiempo.»

Flaticon es un almacén de iconos vectoriales que viene de la mano de Freepik, ya muy conocido. Pero en éste caso, se orientan a los iconos, todo tipo de iconos simples y sencillos, los ladrillos para tus trabajos.
Los tenemos ordenados por categorías, autores, packs.. también tenemos un buscador. Podemos ir añadiendo a una cesta todos los iconos que queramos y descargarlos de una vez en un archivo comprimido que se generará automáticamente. Podremos elegir los formatos de Webfont, PNG, SVG o descargar en todos los formatos de una vez.
Por otro lado tenemos disponible un plugin para Photoshop, libre en descarga también en la web. En Jnjsite, como viene siendo habitual, nos gustan los proyectos libres así que aquí les dejamos el enlace a la web:
Un saludo!

Poner tu negocio en «la nube»

2013-12-18 - Categorías: General


No es lo mismo poner un negocio en la nube, que ponerlo por las nubes, o estar en las nubes. Es  lo llamado cloud computing en inglés, se traduce por computación en la nube. Pero ¿qué es eso de la nube? ¿dónde está? ¿no está ya mi web en la nube? ¿qué es exactamente la nube de Internet?

Qué no es

Tradicionalmente, si contratamos espacio para poner una web en Internet, o si conectamos un ordenador a Internet, no estamos montando una nube. Solemos venir contratando este servicio a una empresa que nos alquila una cantidad de espacio, una velocidad del ordenador, una cantidad de visitas posibles (traducido en tasa de transferencia), cantidad de emails almacenados, etcétera…
Todo ésto es lo que no es, lo que se viene haciendo de manera tradicional limitando el uso de lo que ponemos en Internet. Hoy en día podemos encontrar soluciones cloud, en la nube, supuestos servicios en la nube que realmente no lo son. Se está utilizando esta forma de nombrar a la nube porque se vende bien, por eso debemos poner especial cuidado.

Qué sí es

En líneas generales, la nube es un conjunto de servicios que nos ofrece una empresa, los cuales se van ampliando conforme se necesita más. Para que nos entendamos, si tenemos una web y resulta que de repente necesitamos 27 Gigas extra de almacenamiento, si estamos en una nube ésto se amplia automáticamente y pagaremos por la cantidad de espacio que usemos. De igual manera ocurre con todo, tráfico entre la web y los visitantes, velocidad de procesamiento, balanceo de carga en las bases de datos, etcétera.

Es decir, se trata de un sistema escalable automáticamente, que se va aumentando o disminuyendo según es necesario y sólo pagaremos por lo que usemos. Hoy en día hay muy buenas soluciones para ésto y las empresas quieren cada vez más tener éste servicio. Pero no todas lo ofrecen realmente o dan un servicio parcial de lo que realmente es cloud computing.

Terminando

Una nube es un servicio en Internet donde al tener una aplicación web su capacidad para dar servicio aumenta o disminuye automáticamente, es escalable, dando todo el servicio que sea necesario sin colapsarse ni saturarse. De igual manera se paga por lo que se use, ni más ni menos, según las tarifas de cada empresa aumentando los costes o disminuyendo según la cantidad de servicio que se haya dado.
Para citar dos ejemplos de las empresa famosas:
  • Amazon, con sus Amazon Web Services y el Elastic Beanstalk, una solución más que interesante.
  • Google, con su App Engine, simplemente práctico y fácil de usar. 
Un saludo.

Facebook privado

2013-11-22 - Categorías: General
Facebook se está convirtiendo en una herramienta que nos permite mantener el contacto con mucha gente y de una manera muy eficaz. No hay que mitificarlo, pero la realidad es que mucha gente pasa mucho tiempo en las redes sociales, y Facebook va primero en la competición. Dejando al margen las polémicas sobre la falta de privacidad en Internet, sobre lo confiados que podemos llegar a ser a la hora de «compartir nuestra vida», conviene saber que podemos limitar qué se puede ver y quién lo puede ver en ésta red social.

Manos a la obra, nos hemos puesto a trastear todo el Facebook, tocando todos los botones, el resultado de toda ésta aventura ha sido ésta entrada del blog. Vamos al grano.

Configurando la lista de contactos

Para empezar debemos de tener claro que podemos clasificar a nuestros contactos, y en función de ésto verán cierta información o publicaciones sobre nosotros. Algunos tenemos a familiares, amigos del alma, amigos, conocidos, compañeros del trabajo, jefes, clientes, profesores, compañeros de clase, profesores de nuestros hijos, o incluso desconocidos. Muchos con cientos de contactos, ya me es habitual ver gente con más de 500 amigos, 600, 700. Y hasta cierto punto no es razonable mezclar las cosas…

Toda la clasificación de los contactos se hace por lo que Facebook llama listas inteligentes. Es un gran avance y soluciona muchos problemas ocasionados por la falta de privacidad. Las principales son:

  • Con acceso restringido.
  • Conocidos.
  • Amigos.
  • Mejores amigos.
  • Familia.
Podemos hacer otras listas con el nombre que queramos y poner a nuestros contactos en ellas. Éste orden nos va a servir luego para configurar quién ve qué cosas de nuestro Facebook.
En la imagen de arriba podemos ver el famoso botón que tenemos cuando vemos la página o publicación de un amigo, si le damos click se despliega un menú como el de la image. Ahí podemos poner en mejores amigos o en conocidos.

Si le damos a añadir a otra lista, nos saldrá una ventana como la de la imagen de la izquierda, donde podremos poner al contacto en cualquiera de las listas que tengamos definidas. Las listas inteligentes que veremos algunas se crean automáticamente, podemos crear nuevas. Por defecto familia y acceso restringido vienen creadas.

Niveles de privacidad

Para entender la privacidad, tenemos establecidos ciertos niveles de privacidad, parecidos a la clasificación anterior:

  • Acceso restringido.
  • Conocidos.
  • Amigos.
  • Mejores amigos y familia.
La lista de acceso restringido es especial, porque las personas que estén en ésta lista no van a ver casi nada de nosotros, sólo lo que hagamos público. Es decir, sólo verán lo totalmente público, igual que las personas que no están en nuestra lista de amigos. Es el nivel más estricto de privacidad. El siguiente nivel son los conocidos, le siguen los amigos, mejores amigos y familia. A cada siguiente nivel ven lo del anterior más ciertas cosas.
Los familiares y mejores amigos también son un caso especial, porque entre ellos no hay diferenciación en mayor o menor visibilidad. Es decir, un familiar va a ver lo mismo que los amigos y algo más, de igual manera que un mejor amigo. Pero lo publicado para mejores amigos no lo ven los familiares y viceversa. Si queremos publicar algo para mejores amigos y familia tendremos que personalizar la publicación que luego se explica más abajo.

¿Dóndo configuro la privacidad?

Una vez organizados los contactos, ya podemos cambiar la visibilidad de casi todo nuestro Facebook en función de la clasificación que acabamos de hacer. Lo lógico es no publicar lo mismo, o que los clientes de trabajo no anden viendo nuestras fotos privadas de familia o con los amigos. Hay a quién no le importa, pero tenemos la posibilidad de configurarlo.
Para acceder a todas las configuraciones de Facebook debemos hacer click arriba a la derecha en el icono de rueda dentada o en el candado. En el candado tenemos acceso directo a algunas de las configuraciones pero si le damos a ‘Ver más’ podemos acceder al total de configuraciones. Con la rueda dentada, en la opción ‘Configuración de la cuenta’, o ‘Configuración de la privacidad’ llegamos a las mismas configuraciones.

Accediendo veremos lo explicado en las siguientes secciones.

Configuraciónes de privacidad, biografía y etiquetado

Hay muchas opciones para configurar, las pricipales para conseguir un Facebook con control de lo que ponemos las tenemos aquí. Es muy útil comprobar lo que ven otras personas de tu biografía mientras que vamos configurando el sistema, ésto lo podemos ver haciendo click en ‘Ver como’, de las configuraciones en ‘Biografía y etiquetado. En la siguiente imagen tenemos todas las configuraciones, sobran explicaciones, ya que Facebook nos relata para qué sirven.
En la opción de ‘Privacidad’,  tenemos una herramienta bien útil con la que podemos limitar el público de publicaciones antiguas. En versiones anteriores de Facebook venía ocurriendo que teníamos publicado a todo el mundo todo lo que poníamos en Facebook. 
No estoy exagerando, aún a fecha de hoy, veo gente de Facebook que no tengo en mi lista de amigos, de la que puedo ver todos sus datos, fotos, amigos, direcciones, teléfonos, etcétera… Ésto es un peligro porque estamos expuestos a que personas malintencionadas usen ésta información para malos fines. Así que, lo suyo sería limitar las publicaciones antiguas siguiendo las instrucciones.
Cómo indica la opción, podemos configurar quién puede ver las publicaciones que hagamos a partir de ahora. Antiguamente ésto venía siendo público, con lo que cualquiera podría ver nuestras publicaciones. Conviene ponerlo por lo menos para los amigos.
Una opción intersante que tenemos es la de no permitir que los buscadores nos encuentren, o que cualquiera pueda hacernos una petición de amistad. Por ejemplo, si desactivamos que los buscadores nos puedan encontrar, aunque alguien tenga nuestra dirección de Facebook, le saldrá un mensaje como el siguiente:

Ya a gusto de cada uno su configuración.

Publicando

A la hora de poner algo en un muro tendremos la oportunidad de limitar la visibilidad. Eligiendo quién va a poder ver lo que publicamos. Lo mismo podemos hacer a la hora de poner fotos, vídeos o álbumes. Podemos incluso limitar foto a foto quién puede verlas.
Como se puede ver en la imagen, si personalizamos la publicación, podremos elegir entre las listas que tengamos para que puedan verlo. También podremos elegir las personas una a una que podran verlo.
Es interesante que en algunas secciones tenemos un lápiz con el que podemos entrar a editar la privacidad de dicha sección. Cada una tiene su forma de configurarse, los libros, películas, información personal, etcétera. Por su naturaleza cada una es distinta y tenemos las instrucciones donde paso a paso Facebook nos va a indicar cómo configurarlo.
Para terminar es intersante saber que podemos reconfigurar la visibilidad de una publicación ya hecha en nuestro muro. Tenemos un botón como el de la imagen de la derecha con el que podemos cambiarlo. Estado a estado, de todas las publicaciones.

Terminando

Hay muchas configuraciones más, pero las principales para la privacidad son las mencionadas anteriormente. Para más información nos remitimos a la Ayuda de Facebook.

Esperamos que les sirva de ayuda.

Saludos.

Tus archivos en la nube con Mega

2013-11-11 - Categorías: General
Mega con sus 50 Gigas gratis y con la buena calidad de su servicio, vemos que gana puntos en la competición por liderar el almacenamiento en la nube. Reciéntemente, el pasado viernes 6 de noviembre del 2013 ha salido de su fase de pruebas, con una interfaz renovada y algunas nuevas características. En los últimos años estamos viendo como el almacenamiento de los discos duros es mayor y cada vez son más baratos.
En Internet los espacios para correos electrónicos, páginas web, o los servicios de almacenamiento en la nube estan creciendo. Drive que nos ofrece 15 Gigas gratis junto con la cuenta de Gmail para correos electrónicos. Dropbox con 2 Gigas iniciales gratis que vas incrementando realizando ciertas tareas. Skydrive de Microsoft con sus 25 Gigas. Y un largo etcétera..

Un poco de historia

Mega nace de la mano del polémico Kim Dotcom. Un año después del cierre de Megaupload nació Mega.co.nz, ofreciendo su servicio de almacenamiento en la nube. En la primera hora de su lanzamiento en enero del 2013 se registraron alrededor de 100 000 personas, en el primer días más de 1 millón, fué tal el éxito que se llegó a colapsar el servicio. Pero los usuarios han sido conscientes del éxito que tuvo su predecesor, Megaupload, que han sido pacientes y en foros varios se pueden leer buenas referencias al respecto.

Características principales

Analicemos las principales características técnicas de la cuenta gratuita:
– Tenemos disponibles 50 gigas, que podemos usar con todo tipo de archivos en tamaños y en número.
– Siempre todo el servicio se ofrece a través de conexiones HTTPS, es decir, conexiones cifradas. Incluso las transferencias de archivos entre nosotros y Mega se realizan a través de HTTPS.
– Podemos compartir con quien queramos nuestros ficheros haciendo enlaces que podemos enviar a amigos o a quien consideremos.
– Se ha optimizado al máximo la página web, ofreciendo un servicio ágil donde podemos coger y soltar archivos, renombrarlos, moverlos de carpeta, etcétera.
– Sistema por el que se guardan archivos temporales en nuestro ordenador para agilizar su funcionamiento.
– Podemos usar avatares con nuestros contactos.
– Compartir archivos con nuestros contactos.
– Un árbol de directorios mejorado.
– Ahora podemos seguir subiendo o bajando ficheros mientras que navegamos por las secciones.
– Firefox, está tomando la delantera en compatibilidad y prestaciones.
Todo ésto sin instalar nada en nuestro ordenador, sólo con un registrarnos podremos acceder desde cualquier dispositivo que tenga navegador o con sus aplicaciones a los servicios de Mega.

Otras características

Aún en fase beta, tenemos un cliente de sincronización de archivos para Windows, que permite establecer incluso varias carpetas individuales para que se mantengan iguales tanto en la nube como en tu ordenador. En Google Play tenemos una aplicación para sincronizar ficheros entre nuestro Tablet o Smartphone y Mega.
También tenemos disponible el Kit de Desarrollo para crear programas usando su almacenamiento. Mega está cogiendo fuerza con sus políticas empresariales y está dejando atrás su modelo de negocio de Megaupload. Hay programas para trabajar como distribuidor de cuentas pro. Sus versiones de pago parten de casi 100 € al año por 500 Gigas a los casi 300 € al año por 4 Teras, con anchos de banda muy generosos.
Con las pruebas de la cuenta gratuita se ve que el servicio es muy bueno. Las descargas y subidas a la nube son al máximo que nos permite la red.
Después de las polémicas noticias que corren sobre la privacidad en Internet con respecto al ciber-espionaje por parte EEUU y otros organismos internacionales, la población estamos más conscientes de todo ello. Mega no es que tenga un sistema 100% seguro. Decir eso sería como asegurar que es imposible que te caiga un rayo: si nos ponemos a correr con una bateria conectada a una antena en una noche de tormenta eléctrica por una montaña tenemos muchos puntos para conseguir que nos caiga. De todos modos hay que tener en cuenta que los servidores de Mega están montados en Nueva Zelanda, con sus propias leyes. Y los usuarios siempre seremos los últimos responsables de lo que hagamos con nuestros actos, dentro o fuera de Internet.
Después de los casos de acceso a tus archivos por parte de las empresas (por ejemplo Microsoft que revisa tus archivos automáticamente, Google con sus anuncios relacionados..), Mega se ha curado en salud haciendo muy complicado que ellos mismos puedan acceder a tus archivos. Pero no vamos a entrar en temas criptográficos o ciberseguridad porque no es objetivo de éste artículo.

El futuro próximo

Para antes de terminar el año 2013, se prevee el lanzamiento de la aplicación para iOS y que salga de la fase de pruebas el cliente de sincronización https://mega.co.nz/#sync. En 2014 se espera el lanzamiento de un sistema de mensajería y videoconferencia cifrado y basado en la web.
Lento pero a buen ritmo Mega va sorprendiéndonos con la calidad de sus servicios: buen diseño, usabilidad, servicios innovadores.. Hemos leido sobre la venta de música, películas, podríamos especular sobre las posibilidades de los servicios en la nube. Si hay algo claro, es que en Informática si algo que se pueda pensar, normalmente se puede crear, otro asunto es que merezca la pena invertir tiempo en ello o si la ley lo permite.

Resumiendo

Para terminar queda decir que Mega es un servicio como los otros de que ya disponemos, pero que en las pruebas realizadas ha funcionado muy bien, y tiene precios muy económicos en sus versiones de pago. Seguro que Mega seguirá sorprendiéndonos. Y a fecha de hoy, un servidor que les escribe piensa que Mega con sus servicios está ‘tirando del carro’, motivando a que los grandes competidores como Google, Microsoft, Dropbox.. se pongan las pilas y mejoren sus servicios. Al fin y al cabo, todo ésto es bueno y los beneficiados vamos a ser los usuarios, ya seamos clientes gratuitos o de pago.
Me despido dejándoles el enlace a Mega aquí. Saludos.

El ordenador más económico y potente de mundo

2013-10-30 - Categorías: General
Lleva desde el 2006 entre nosotros. Aunque es muy desconocido fuera del ámbito de la informática es una realidad. En España se están comercializando éstos pequeños ordenadores en kits de inicio que parten desde unos 50 € aproximadamente. Tiene la mejor relación calidad-precio del mercado, ya que no hay detrás una empresa con ánimo de lucro, no hay patentes, software de pago, etcétera.. simplemente un circuito integrado con sus accesorios. Y la total libertad para programarlo o configurarlo a nuestro gusto.

Raspberry Pi es un proyecto que arrancó en el ámbito de la educación, creando un pequeño ordenador del tamaño de una tarjeta de crédito. Su precio final es realmente barato, sólo 24 libras el modelo de 256 megas de RAM y por 31 libras el de 512 megas. El modelo B, el más avanzado, corre un procesador a 700 MHzs, tiene USB 2.0, HDMI, conector RCA, salida de audio de 3.5 mm, ranura para tarjeta SD, tarjeta de red integrada.. Opcionales se pueden comprar todo tipo de accesorios como cajas, cámaras, para ampliar los puertos USB, etcétera. Y sus aplicaciones como ordenador para la televisión o cualquier otro uso no tiene límites. El consumo que viene a tener es de sólo 3.5 watios, como una lámpara de LEDs, se puede alimentar con un cable micro USB con un simple cargador de móvil.

Tenemos sistemas operativos compatibles que son distribuciones de Linux totalmente gratuitas y orientadas según el uso que se le vaya a dar: para navegar, para almacenar datos en red con discos duros, cualquier cosa es posible. En la página oficial del proyecto tenemos algunas. Para empezar a funcionar con éste micropc se recomienda empezar por una de éstas. Siendo Linux siempre cabe la posibilidad de modificarlo, y disponemos de todo el código fuente para adaptaciones de todo tipo. La página de descargas es:
Los usos que se le vienen dando a éste ordenador no tiene límites. En enero del 2013 se publicaba un proyecto con el que se construyó un supercomputador barato uniendo en red 64 Raspberry Pi:
Hay testimonios de gente ejecutando LibreOffice y Firefox sin ningún problema. Otro ejemplo, junto con Google, está el proyecto Coder para convertir éste pequeño ordenador en un servidor de aplicaciones muy económico. No hacen falta conocimientos avanzados para montar nuestro propio Raspberry Pi en casa. Cada vez más empresas lo estan comercializando con cajas muy presentables con todo tipo de colores, formas e incluso transparentes. No hay más que coger nuestro buscador de Internet favorito y encontraremos infinidad de resultados. Es un pequeño juguete, y a la vez no tan «juguete». Un proyecto en constante desarrollo y con gran futuro, que seguro que va a dar mucho que hablar.
Para más información nos remitimos a su página oficial: http://www.raspberrypi.org/
Saludos.

Conflictos Javascript entre Mootools y jQuery en Joomla solucionado

2013-09-24 - Categorías: General

Me he pasado horas solucionando los conflictos Javascript de una web. Mi caso ha sido con una plantilla de Joomla 2.5 que usa Mootools y jQuery, además de otras extensiones instaladas y plugins internos que usan Javascript. Total, que se cargaba jQuery varias veces (no hay que hacerlo), el orden de carga de los archivos .js no era el correcto. Y el mayor de mis problemas: tanto Mootools como jQuery hacen uso del símbolo $ para programar. Y para colmo usaba el captcha con Aicontactsafe que no funcionaba por el mismo conflicto con el simbolo $, con lo que todo ésto que acabo de escribir es un lio ¿verdad?

Navegando y mezclando soluciones, la solución es simple:
  • En el código fuente de la plantilla, añades en el <head> lo siguiente antes de cargar otros archivos de Javascript:
<script src="rutadondetienesjquery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
  • Y hay que desactivar la carga de jQuery de cualquier extensión, plantilla, módulo… para evitar que se vuelva a cargar.
Mirando el código fuente de la web puedes comprobar si ya tienes la cabecera correcta y entonces todo debe funcionar. Hay quien dice de desactivar Mootools pero se ha venido usando mucho en Joomla y dejarían de funcionar seguramente muchas cosas.
Espero que sirva, a mi me sirvió después de unas horas buscando la solución 😛
Saludos!

¡Suscríbete a las novedades!

Sólo te enviaré un email cuando haya posts nuevos.

Diseño, programación y gestión de proyectos web
Servidores, microservicios o arquitecturas server-less
Administración de estaciones de trabajo y ordenadores personales
Sistemas embebidos
SEO, SEM y marketing para webs
Consultoría y asesoramiento informático
Diseño, programación y gestión de proyectos web
Servidores, microservicios o arquitecturas server-less
Administración de estaciones de trabajo y ordenadores personales
Sistemas embebidos
SEO, SEM y marketing para webs
Consultoría y asesoramiento informático

© 2024 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.