spanish developers community

Page 1

Estructuras de datos en C: Pilas Android: Interfaces de usuario

año 0 ­ núm 2 julio 2013

Introducción a la programación de interfaces de usuario. Una aproximación a awt

Instalar xammp en ubuntu

Claves generales para convertir una idea en una app móvil Cómo elegir las redes sociales para tu empresa ¿Batallas de plataformas en postproducción? ¿Cómo evitar que utilicen tu wifi sin permiso?

Wavestack un gran proyecto

Primera aplicación de ruby on rails en Ubuntu Introducción a kivy (parte 1)

Nueva versión de Debian 7.0 "Wheezy"

Distribuciones Linux The Drupal way


Buzon del lector

Cualquier consulta la podéis realizar a través de nuestro correo electrónico: spanishdevcommunity@gmail.com o bien, podéis dejar vuestras cuestiones en cualquiera de las redes sociales que tenéis a vuestra disposición: facebook /spanishdeveloperscommunity twitter @spanishdc

El objetivo de esta publicación no sólo busca transmitir conocimiento que fomenten a través de distintas disciplinas las bondades del software libre, y aunando para ello el esfuerzo conjunto de una serie de profesionales que en mayor o menor medida desarrollan su actividad profesional dentro de este apasionante mundo. Queremos ir más allá poniendo en práctica el saber hacer y los conocimientos y experiencia de nuestros colaboradores resolviendo las dudas que los lectores de ésta publicación o los visitantes a nuestra página web y redes sociales quieran hacernos.. Procuraremos resolverlas todas y lo antes posible. La forma de preguntar es bien sencilla; bien a través de las redes sociales que tenemos abiertas ( facebook, twitter y google+ ), bien a través de la página web o dejando un mensaje en el correo electrónico que hemos dispuesto para las comunicaciones podéis dejar vuestras opiniones, sugerencias o simplemente cualquier duda que os surja sobre el funcionamiento o uso de las diversas aplicaciones y/ frameworks que hay disponible en Internet y que pueden facilitarnos mucho nuestro trabajo a un coste mínimo. Los estudiantes universitarios disponen en esta publicación de una excelente plataforma en la que plantear las dudas que le vayan surgiendo en el estudio de las diferentes asignaturas, e incluso, esta sección estará disponible para escribir sus propias opiniones y experiencias.

2

© 2013 - www.spanishdeveloperscommunity.es


Debian camino de la Estación Espacial Internacional Debian 7 ­Wheezy­ ya está disponible para los interesados en en las administraciones públicas. Debian ha sido escogida para esta clásica distribución GNU/Linux, tras dos años y algunos dar soporte a la red de usuarios en la Estación Espacial Internacional, sustituyendo a Windows XP. meses desde la versión previa. El largo desarrollo de esta nueva versión ha conseguido mejorar la solidez y estabilidad del sistema, ya seguro de por si, haciendo de ella un entorno ideal desde servidores hasta escritorios personales. Además han aumentado de grado de personalización lo cual ha permitido ser la distribución escogida para entes públicos como el Ayuntamiento de Munich ( Alemania ) o como soporte de la infraestructura de la administración pública de la región de Extremadura ( España ).

Según una nota de la Linux Fundation, la United Space Alliance, empresa que da soporte al mantenimiento de los ordenadores de la EEI, el sistema a migrar es la red OpsLAN: "... una red que suministra a la tripulacion de la EEI de capacidades vitales para las operaciones del dia a día ...".

Podéis encontrar más información sobre las novedades de esta nueva versión, así como descargarosla, en las siguientes direcciones web: http:///www.debian.org y http://debian.org / Pero no sólo ha quedado aquí, cuestión ya de por si muy News / 2013 / 20130504. importante porque mejora la productividad y abarata los costes © 2013 - www.spanishdeveloperscommunity.es

3


ÍNDICE

CONTENIDOS PRINCIPALES 01. Editorial 02. WaveStack. Un gran proyecto 03. Distribuciones linux

04. Introducción a la programación de interfaces de usuario. Una aproximación a awt 05. Introducción a Kivy ( parte 1 ) 06. The drupal way 07. Instalar xampp en ubuntu 08. Primera aplicación ruby on rails en ubuntu

09. ¿Cómo eligo la red ­es social ­es en la que participe mi empresa 10. Claves generales para convertir una idea en una app móvil 11. Android: Interfaces de usuario 12. ¿Batallas de plataformas en postproducción? 13. Estructuras de datos en C: Pila 14. ¿Cómo evitar que utilicen tu wifi sin permiso?

Acerca de Spanish

Developers Community es una iniciativa sin ánimo de lucro, dedicada al fomento y difusión del software basado en licencias GPL, Programación de lenguajes de programación, Sistemas Operativos Linux / Android e iOS así como diseño gráfico y redes sociales. Alcanzar nuestro objetivo de una función docente y con la intención de que estos conocimientos puedan aplicarse de una manera práctica en las actividades cotidianas de los estudiantes universitarios, empresarios y autónomos . Spanish developers community se basa en la colaboración desinteresada de profesionales y estudiantes que comparten sus saber­hacer, sus conocimientos teóricos y prácticos con la comunidad informática en Internet. Esta publicación digital se distribuye mensualmente bajo una licencia Creative Commons

Colabora ¿Quieres colaborar con Spanish Developers Community?. Tienes muchas formas de hacerlo:

Envía tu artículo Puedes enviarnos tu artículo a la dirección de correo electrónico:

spanishdevcommunity@gmail.com Colabora en nuestros proyectos Puedes

ayudarnos en los proyectos de canal de youtube, blogs, página web, redes sociales y página web.

responsable del proyecto: Antonio García Prats coordinación y comunicación: Antonio García & Jerobén Guzmán sitio web: www.spanishdeveloperscommunity.es facebook: www.facebook.com/spanishdeveloperscommunity.es twitter: @spanishdc google+: @spanishdc diseño de portada: Antonio García 4

Contactar Puedes contactar conmigo para enviarnos cualquier duda que tengas en el correo electrónico:

antoniogarciaprats@gmail.com

Depósito Legal J 368­2013 © 2013 - www.spanishdeveloperscommunity.es


Editorial

Me congratulo con esta segunda edición del proyecto SPANISH DEVELOPER COMMUNITY, un proyecto que aspira a convertirse en un referente para estudiantes universitarios, para empresarios y en general para cualquiera que esté interesado en estos novedosos temas. Este proyecto nace como un proyecto inspirado por otros trabajos similares ­lo que ya de por sí no supone ninguna novedad per se, aunque si es justo reconocer que los mejores portales y publicaciones más importantes han sido promovidas por autores y profesionales sudamericanos­ para completar unos estudios realizados en Deusto como community manager aunque, con el firme propósito que sobreviviera a una presentación puntual y se desarrollara en el tiempo con el concurso de colaboradores que compartieran su saber hacer, su experiencia profesional y sus conocimientos para beneficio de los demás. El primer paso, por mi parte, es traspasar la frontera de un simple trabajo académico para convertirlo en un proyecto más universal e independiente de la nacionalidad de los colaboradores. ¿Cuáles deberán ser los objetivos de esta publicación?. ¿A qué público debería ir dirigido?. Respondo a estas pregunta observando la necesidad de promover el software libre para numerosas entidades, ya sea a nivel universitario y educativo, como a nivel profesional ­para empresas y entes públicos­, ofreciendo soluciones prácticas a este amplio abanico de personas. Sin embargo, considero que la temática no debe ser rígida sino que tiene contemplar más áreas de la informática: programación, aplicaciones para dispositivos móviles, redes sociales, Linux ... etc. Y por este motivo invito a un número de profesionales que permitan alcanzar este ambicioso objetivo, portal que segurirá abierto para todos los estudiantes y profesionales que deseen colaborar. El primer éxito de este proyecto es conseguir no sólo el apoyo sino también la colaboración de un grupo de profesionales no sólo de España sino también de México y que permiten sacar el primer número de esta publicación en el pasado mes de junio. Este número satisface con mucho mis espectativas iniciales, a pesar de numerosas dificultades. © 2013 - www.spanishdeveloperscommunity.es

Pero este primer éxito, apenas abre un camino para el desarrollo de este proyecto, para la incorporación de nuevos profesionales y expertos al equipo de trabajo. Debo ser consciente de la dificultad del trabajo que queda pendiente, de la integración de un amplio y variado de colaboradores procedente de diversos ámbitos. Espero, además, el comienzo del nuevo curso para presentar en las universidades este fascinante proyecto a fin de crear una comunidad de programadores e informáticos que aporten soluciones creativas para aplicaciones reales. Un medio de comunicación entre universidades no sólo de España y México, a fin de compartir e intercambiar conocimientos procedentes de ambos ámbitos educativos. En fin, un medio de comunicación activo y productivo. Junto con este proyecto, irán vinculados en estrecha colaboración otros medios de comunicación como una página web: www.spanishdeveloperscommunity.es, redes sociales (facebook, twitter y google+), app para dispositivos móviles ... etc que sirvan para facilitar el desarrollo de este proyecto y la comunicación entre profesionales, además de un canal de youtube. Sirva esta editorial para invitar a todos los profesionales interesados en el proyecto en incorporarse al mismo. Para ello, está a disposición de los interesados el correo electrónico spanishdevcommunity@gmail.com. Además, aprovecho de nuevo la ocasión para agradecer a los actuales colaboradores, por que gracias a ellos ha sido posible que SDC haya visto la luz.

Antonio García

5


WAVESTACK: Un gran proyecto

A mediados de 2000, el dúo de EE.UU. The Postal Service lanzo uno de mis discos favoritos de todos los tiempos. Ellos compusieron, grabaron, y editaron sus canciones ... y nunca se conocieron personalmente en el proceso. Enviaron sus partes de la canción a traves de el Servicio Postal de EE.UU. (sí, lo has entendido). En el caso personal de Javier Rosas, el compone con su hermano que vive a seis horas de distancia, y llegan a grabar algo dos veces al año, cuando tienen la oportunidad de verse. Han probado diferentes herramientas online (SkyDrive, dropbox, incluso bitbucket!), Pero se dieron cuenta de que estas herramientas simplemente no están diseñadas para este fin. Y así es como nació WaveStack.

6

© 2013 - www.spanishdeveloperscommunity.es


WaveStack es una plataforma de colaboración de música, donde las canciones se publican en forma de una pila, cada instrumento por separado. Con este enfoque simple, se abre un mundo de posibilidades para los músicos, como la composición de música a distancia y un repositorio centrado en la organización de su proyecto musical. Pero WaveStack no se limita solo a los músicos. En su lugar, sino que también se centra en los ventiladores del músico. Los usuarios pueden interactuar con la canción de su artista favorito, silenciar una pista de instrumento e incluso publicar un cover de la canción y compartirla a través de redes sociales. WaveStack se basa en un enfoque freemium. Los usuarios pueden escuchar canciones públicas y enviar canciones, siempre y cuando se mantengan público también. Con el plan PREMIUM, los músicos puedenn publicar canciones privadas para gestionar los permisos de los miembros de su banda o productores. Además, tienen la posibilidad de vender sus permisos de las pistas .. ./..para que otras personas utilicen comercialmente, ya sea para cubiertas o remixes.

Wavestack TEAM Esta semana se lanzara la Beta oficial de Wavestack asi que registrense en el siguiente link para poder ser los primeros en disfrutar de este excelente servicio http://wavestack.com/inviterequest/create?r=signup

Disfrutenlo! © 2013 - www.spanishdeveloperscommunity.es

7


Linux

Distribuciones linux

Es muy común que nos encontremos en páginas y portales de Internet dedicados a la programación y al software libre listas dedicadas a evaluar las distintas distribuciones linux y elaborar listas de popularidad con las más vendidas y/o descargadas y, habitualmente, estas listas vienen categorizadas, categorías que vienen dadas generalmente por el uso que se le dará a la distribución o bien en qué entorno se va a trabajar con linux.

seguida muy de cerca por la distribución SuSE Enterprise Desktop ( distribución que encuentra en Open SuSE una distribución GNU/Linux totalmente gratuita y con una gran comunidad de seguidores y desarrolladores ). Ambas distribuciones también dominan en los servidores de Empresas y grandes corporaciones.

Distribuciones adecuadas para ordenadores de escritorio, esto es, aquellas que están diseñadas pensando en que los usuarios trabajaran en ordenadores de escritorio y, generalmente para uso privado. La mejor distribución linux o, al menos, la que mejor se adapta a este propósito es Ubuntu, tal vez seguidas muy de cerca por Fedora y Mint ( esta última se ha renovado recientemente con su versión 15 "olivia" ).

El desarrollo gráfico y multimedia cuenta con distribuciones apropiadas para adaptarse a este fin, tales como, ArchLinux, puesto que en ella podremos encontrar miles de paquetes de software.

Si lo que el usuario busca es un dominio de la seguridad ante A vista de pájaro, podemos enumerar algunas de las categorías todo, entonces tendremos que valorar con distribuciones que más comunes en las que vienen clasificadas las distribuciones tienen un énfasis de desarrollo centrado en la seguridad. Entre ellas destacamos Backbox, distribución no demasiado conocida. linux suelen ser las siguientes que indicamos a continuación:

Para los aficionados a videojuegos, también encontramos soluciones con las mejores prestaciones en videojuegos. En general, en casi todas las distribuciones podemos encontrar Las distribuciones especiales para ordenadores portátiles suelen buenas plataformas para el desarrollo de videojuegos. Aunque si dar como ganadora a la distribución Fubuntu, entre cuyas tenemos que dar algún ganador, la más adecuada podría ser mejoras está un 30% de ahorro en el consumo de batería respecto Ubuntu. de otras distribuciones. Una categoría muy actual sería la que está enmarcada en Si los fines que buscamos para nuestra distribución linux es sistemas para dispositivos móviles, y más en los tiempos que usarlo profesionalmente en la empresa, quizás destaca la corren (tabletas, teléfonos inteligentes, ...etc), basados en Linux. conocidísima y popular distribución Red Hat Enterprise Linux y Entre estos podríamos destacar sin duda Android, el cuál está por

8

© 2013 - www.spanishdeveloperscommunity.es


encima de todos; aún así vienen pisando fuerte Tizen o Firefox para nuestro beneficio y comodidad. Es por esto por lo que podemos encontrar distribuciones que no son gratuitas, puesto OS. que tras ella existe toda una corporación empresarial dedicada a Tras haber examinado las principales categorías en las que se desarrollarla con sucesivas versiones, mantener una comunidad y encuadran las principales distribuciones linux, o al menos las ademas crear nuevas soluciones de software que resuelvan más populares, deberiamos volver la vista para analizar cuáles problemas reales y actuales. Es por ello la aparente contradicción son utilizadas habitualmente por las empresas, por la entre descargarnos el sistema operativo de forma gratuita y tener administración pública y por entes educativos. Aqui hay de todo que pagar por una distribución linux particular. y, curiosamente, distribuciones que no son habituales en Internet Afortunadamente, también encontramos una extensísima y que están hechas a medida, por lo que, en consecuencia, no son comunidad de distribuciones gratuitas o a precios francamente demasiado conocidas por el público. Entre las utilizadas en irrisorios disponibles para el usuario de a pie y para las pymes y España podemos encontrarnos con Guadalinex ( Andalucía ­ grandes empresas. especialmente enfocada a la administración en enseñanzas básicas y medias ), GNU/Linex ( en la región de Extremadura ), Así pues, una distribución no es otra cosa que una recopilación Asturix ( del principado de Asturias ), Lliurex ( Valencia ), de programas y ficheros , organizados y preparados para su MoLinux ( en Castilla la Mancha ), MAX ( en Madrid ) y Linkat instalación. Estas distribuciones se pueden obtener a través de ( en Cataluña ). Estas son las principales pero, aquí no acaba la Internet o comprando CDs y DVDs de las mismas, los cuales lista, podemos encontrarnos con otras tales como: Catix, contendrán todo lo necesario para instalar un sistema Linux bastante completo y en la mayoría de los casos acompañado de Kademar, Molinux Zero, .... etc. un programa de instalación que nos auxiliará en la tarea de la Ya, y para terminar con esta enumeración, de distribuciones, y primera instalación. dar así una nota de humor, podemos adentrarnos sin temor en la y... ¿qué es Firefox OS? oscuridad del mundo friki, y encontrarnos alli con algunas de las Abundando, para terminar este artículo, en las últimas novedades más curiosas y raras distribuciones. Enumeremos alguna, del mundo linux, y particularmente en el mundo de los sabedores que con ello vamos a arrancar una sonrisa de nuestros dispositivos móviles, Firefox OS es una de las últimas lectores: Hanna Montana Linux, Ubuntu Satanic Edition ( ¡por novedades. Su nombre clave es Boot to Gecko, y se trata de un Dios! ), Ubuntu Christian Edition, Ubuntu ME, Helal Linux, sistema operativo móvil basado en Linux, de código abierto, y JewLinux y, bueno ... creo que no hace falta hacer muchos más especialmente adaptado a dispositivos smartphones y tablets. comentarios sobre esto.

pero ... ¿y qué son las distribuciones linux?

Hay que tener en cuenta que Linux es un sistema de software libre y de distribución gratuita, por lo que podemos encontrar todos los ficheros y programas necesarios para su funcionamiento en multitud de páginas web de Internet. Es más, existen ya, sites dedicados por entero a una distribución concreta en la que podemos encontrar no sólo éstos ficheros de los que estamos hablando, sino también multitud de información, noticias y tutoriales útiles para el funcionamiento del sistema y una comunidad más o menos amplia, según la popularidad de la distribución en la que podemos encontrar más tutoriales, más información y una enorme cantidad de aplicaciones para resolver todo lo imaginable.

Este sistema operativo está diseñado para permitir a las aplicaciones HTML5 comunicarse directamente con el hardware del dispositivo usando para ello JavaScript y open web API's.

Este sistema operativo posibilita el desarrollo de smartphones donde cada función puede ser desarrollada como una aplicación web. El conjunto de software optimizado de Firefox OS ofrecerá a los usuarios una experiencia personalizada y muy intuitiva.

Una de las principales ventajas que tendrá este sistema operativo frente a la competencia ( Android, iOS ... ) , amén de ser un código totalmente abierto, es que ya dispone de acuerdos con fabricantes y operadoras. Operadores como la española Telefónica se han convertido en uno de sus principales apoyos Sin embargo, la tarea de reunir todos estos ficheros y programas desplegando un amplio catálogo de dispositivos no sólo para necesarios, así como instalarlos en tu sistema, cierto es que cada Europa, sino que también para Sudamérica. vez de una forma más comprensible y menos técnica para el usuario no muy puesto en Linux, puede ser una tarea bastante Otro punto a su favor es que ya cuenta no sólo con una amplia complicada sólo al alcance de especialistas. Es por esto por lo comunidad en Internet, también una amplia tienda de que nacieron las llamadas distribuciones de Linux, o dicho de aplicaciones que, como particularidad, no aceptará pagos con otra manera, empresas y/o organizaciones sin afan de lucro que tarjeta sino que las compras vendrán reflejadas en la factura de la hacían lo que podríamos denominar el "trabajo sucio", siempre operadora que tenga el usuario. © 2013 - www.spanishdeveloperscommunity.es

9


Programación

Introducción a la programación de interfaces de usuario en java, una aproximación a awt Antonio García www.ibidem­network.es

/antgarprats @antgprats

El conjunto de componentes gráficos que posibilitan la interacción entre el usuario del software y la misma aplicación es lo que conocemos como interfaz gráfica de usuario, o por decirlo de otro modo, la forma en que nos comunicamos con el software y le damos instrucciones a fin de que nos devuelva los resultados que esperamos. En este articulo vamos a ver como programar interfaces de usuario muy sencillas, usando para ello el lenguaje de programación Java; conoceremos cuáles son los elementos básicos que componen esta interfaz y explicaremos cómo interactuar con ellos y conseguir que respondan a nuestras peticiones. Será ya responsabilidad del lector combinar todos estos elementos y conseguir con ello interfaces más complejas que respondan a sus necesidades específicas. Puesto que esto sólo es un artículo meramente divulgativo tampoco nos interesa complicarnos demasiado para empezar, ¡ya habrá tiempo de hacerlo!.

10

Comenzaremos explicando algunos conceptos teóricos básicos que nos ayuden a comprender, más adelante, el código que vamos presentando aqui.

¿qué son componentes y contenedores?

Como ya sabemos, las clases en Java están organizadas como un árbol, de forma que unas heredan de otras y, así tambien, sus variables internas y métodos. Todas las clases herendan de Object. En nuestro caso particular, todos los elementos gráficos que componen nuestra interfaz heredan de la subclase Component. Algunos de los ejemplos clásicos de estos elementos visuales son: botones, campos de texto, etiquetas, ... No obstante, hay un elemento especial que agrupa a todos estos elementos gráficos y que heredan de la clase Contaniner ­que a su vez también es una clase de Component­. La responsabilidad de estos container ( o contenedores), es la de contener o agrupar a los demás elementos visuales. Elementos clásicos de esta clase son: Frame, Window y Panel. © 2013 - www.spanishdeveloperscommunity.es


Listado 1 package es.distribflotante.ejemplo;

import java.awt.*; public class df extends Frame { private Button b1, b2; public df () { super ( "Ejemplo 1 distrib. flotante" ); setLayout ( new FlowLayout ()); b1 = new Button ("boton 1"); add(b1); b2 = new Button ("boton 2"); add(b2);

setSize ( 300, 300 ); setVisible ( true ); } public static void main ( String[] args ) { df v = new df (); }

Listado 2 package es.blayout.ejemplo;

import java.awt.*;

public class bl extends Frame { private Button b1, b2, b3, b4, b5; public bl () { super ( "Ejemplo 2 distrib. flotante" ); setLayout ( new BorderLayout ()); b1 = new Button ("boton 1"); add(b1, BorderLayout.NORTH); b2 = new Button ("boton 2"); add(b2, BorderLayout.SOUTH); b3 = new Button ("boton 3"); add(b3, BorderLayout.EAST); b4 = new Button ("boton 4"); add(b4, BorderLayout.WEST); b5 = new Button ("boton 5"); add(b5, BorderLayout.CENTER);

setSize ( 300, 300 ); setVisible ( true ); } public static void main ( String[] args ) { bl v = new bl (); }

© 2013 - www.spanishdeveloperscommunity.es

Así pues, y para ir resumiendo un poco, una interfaz gráfica se monta sobre un Frame y es aquí donde se dispondrán los demás elementos gráficos que, como veremos a continuación, se pueden distribuir siguiendo varios criterios. Los elementos gráficos, se distribuirán dentro del espacio visible del container respetando unas determinadas reglas en cuanto a su distribución. a la cuál, de ahora en adelante denominaremos layout. En general podemos hablar de layout absolutos y relativos, siendo estos últimos mucho más complejos de utilizar que los primeros aunque, por contra, tienen dos ventajas sobre los absolutos, a saber: puesto que los componentes visuales se adaptan siguiendo el layout utilizado, cualquier cambio en el tamaño de la ventana ocasionará que los elementos visuales se adapten y redistribuyan dentro del container. Además trabajar con layouts relativos garantizará que se visualizarán correctamente aún si trabajamos en Linux, Windows o Mac, independientemente del estilo de los componentes gráficos en cada sistema operativo.

awt frente a swing

Java proporciona al programador dos API's con las que trabajar para crear interfaces de usuario y, aunque la más básica y sencilla de usar, ­y es la que emplearé en este artículo­ es además clase base de swing (mucho más compleja que la primera), puesto que nuestro objetivo es meramente ilustrativo y formativo, optaremos por awt, dejando swing para ediciones posteriores. En cualquier caso, es necesario aclarar antes de seguir, que el manejo de eventos y layouts es exactamente igual para ambas API's.

¿cuáles son las principales distribuciones relativas?.

El criterio según el cual distribuiremos nuestros componentes gráficos en la ventana, de forma relativa, según estamos estudiando, se podrá determinar de cuatro formas diferentes: FlowLayout ­ distribuye los elementos gráficos uno al lado del otro, generalmente de forma centrada y en la parte superior de la ventana. BorderLayout ­ una distribución, sin duda, algo más compleja; en este caso divide la ventana en cinco áreas, admitiendo un sólo componente gráfico en cada una de estas áreas. Para llamar a las áreas, como veremos más adelante, se emplearan los nombres de las coordenadas geográficas ( norte, sur, este, oeste y centro ). GridLayout ­ como bien puede suponer el lector, este layout divide el área de visualización en una matriz de n filas por m columnas, todas exactamente del mismo tamaño, admitiendo un

11


componente gráfico en cada una de las celdas. GridBagLayout ­ es una variación del anterior, de forma que cada componente gráfico puede ocupar una o varias filas o columnas.

layout relativos

Nos remitimos al listado 1, en donde exponemos un ejemplo del uso de este layout. Creamos una clase que hereda de Frame, por lo que es un container en donde dispondremos los elementos gráficos necesarios para nuestra interfaz. Por lo que podéis apreciar en una simple inspección tampoco me he complicado demasiado, esta interfaz contiene nada más que dos botones.

Listado 3 package es.blayout.ejemplo;

import java.awt.*;

public class bg extends Frame { private Button b1, b2, b3, b4, b5; public bl () { super ( "Ejemplo 3 distrib. flotante" ); setLayout ( new GridLayout (2, 2)); b1 = new Button ("boton 1"); add(b1); b2 = new Button ("boton 2");

La clase df hereda de Frame cuatro métodos, a saber, add, setLayout, setSize y setVisible.

add(b2);

Este sencillo programa lo que hace es crear un Frame y asignarle como layout FlowLayout. A continuación creamos sucesivamente dos botones y utilizamos el método add para asociarlos al Frame recien creado.

b4 = new Button ("boton 4");

Por último, establecemos el tamaño de la ventana, que para nuestro caso sera de 300 pixeles de lado y la hacemos visible. En el programa principal, tan sólo tenemos que declarar como variable la clase anterior, y crear un espacio de memoria para ella, a fin de poder visualizarla. En el Listado 2, apreciamos ya, con el layout BorderLayout, una serie de diferencias significativas, según hemos comentado anteriormente. Estas diferencias aparecen cuando creamos los cinco botones de nuestra interfaz. En esta ocasión tenemos que especificar cuál será la region en la que vamos a visualizar cada uno de ellos. Por lo demás no hay excesivas diferencias respecto a FlowLayout.

b3 = new Button ("boton 3"); add(b3);

add(b4);

setSize ( 300, 300 ); setVisible ( true ); } public static void main ( String[] args ) { bg v = new bg (); }

capturar eventos

Hasta ahora todos los componentes de las interfaces de usuario que hemos diseñado no hacen nada, incluso si intentamos cerrar la ventana, comprobamos que no responde. Cuando pulsamos un botón o introducimos un texto en un textview, nosotros podemos escucharlos y responder usando los denominados listener (escuchadores).

Un listener es un objeto cuya clase implementa una determinada El último de los layouts que vamos a ver esta tarde, interface, que está relacionado a un componente para que este lo BorderLayout, y tal como apreciamos en el Listado 3, a la hora notifique ante la ocurrencia de un determinado tipo de elemento. de crear nuestro Frame y especificar el layout que vamos a utilizar, tendremos que especificar también de cuantas filas y Vamos a ver un ejemplo práctico, listado 4; comenzaremos con columnas será nuestra matriz. una interfaz muy básica: una ventana con un único botón, al pulsarlo, escribiremos un mensaje en la consola. En este ejemplo en particular, dividimos el área visible de la ventana en cuatro zonas, una matriz de cuatro por cuatro, en cada Vemos que al instanciar el botón, lo relacionamos con la clase una de ellas estará ocupada por uno de los cuatro botones que EscuchaBoton; esta clase implementa la interface ActionListener hemos creado y asociado al Frame. de donde hereda un único método actionPerformed. Cuando el botón detecte que lo presionan notificará a la instancia de ¿Cómo hacer interfaces más complejas?, pues combinando estas EscuchaBoton invocando el método actionPerformed. distribuciones unas con las otras.

12

© 2013 - www.spanishdeveloperscommunity.es


Listado 4

private Button boton; public demoListener () { super ( "Demo" );

package es.eventos.ejemplo;

setLayout ( new FlowLayout ()); addMouseMotionListener (

import java.awt.*;

new EscuchaRaton ());

import java.awt.event.*;

boton = new Button ("boton" ); add ( boton );

public class demoEventos extends Frame {

setSize ( 200, 200 );

private Button boton;

SetVisible ( true

);

public demoEventos () { super ( "Demo Eventos" );

class EscuchaRaton implements MouseMotionListener {

setLayout ( new FlowLayout ());

public void mouseMoved ( MouseEvent e ) {

boton = new Button ("boton"); add(boton);

int distancia=10;

boton.addActionListener ( new EscuchaBoton

Point pMouse = e.getPoint ();

());

dimension = DimBoton=boton.getSize (); Point pBoton = boton.getLocation (); setSize ( 300, 300 ); setVisible ( true );

int difX1 = Math.abs ( pBoton.x-pMouse.x);

}

int difX2 = Math.abs

class EscuchaBoton implements ActionListener {

(( pBoton.x+dimBoton.width)-pMouse.x );

public void actionPerfomed (ActionEvent e ) { System.out.println ("Se presionó un

int difY1 = Math.abs ( pBoton.y-pMouse.y);

botón");

int difY2 = Math.abs }

(( pBoton.y+dimBoton.width)-pMouse.y );

} public static void main ( String[] args ) { new demoEventos();

if

( difX1 < distancia || difX2 <

distancia ||

}

difY1<distancia || difY2 < distancia ) {

un ejemplo práctico

Vamos a pensar en un programa divertido. ¿Cómo podriamos lograr que una ventana cambie de posición cuando el ratón esté llegando al botón para pulsarlo. Es decir, que el usuario no pueda apretar el botón nunca.

Dimension dimVentana = getSize ( );

Para programar esto, tendremos que escuchar un evento de movimiento del ratón. Por cada movimiento del ratón preguntamos por sus coordenadas y las comparamos con las coordenadas del ratón. Si la distancia entre ambas coordenadas es razonablemente cortas, podemos mover la ventana. ¡Veamos!.

(dimScreen,height - dimVentana.height ));

Dimension dimScreen = getToolKit().getScreenSize ();

int y = (int) (Math.random ()*

int x= (int) (Math.random ()* (dimScreen,width - dimVentana.width ));

setLocation ( x, y ); }

Listado 5

}

public void package es.eventos.ejemplo;

import java.awt.*;

mouseDragged ( MouseEvent e ) {}

}

public void static main ( String[] args ) {

import java.awt.event.*; newDemoListener ( ); public class demoListener extends Frame {

© 2013 - www.spanishdeveloperscommunity.es

}

13


Programación

Introducción a Kivy ( parte 1 ) Sergio Haro /sharop @percogames

un proco de historia

"Tonight is a wonderful night. I know that i didn't announce Kivy utilizar nativamente con la mayoría de los protocolos de entrada officially yet, but i'll do it in another blog post very soon. You y dispositivos táctiles. just need to know that Kivy is the next PyMT version… " Kivy hace uso del lenguaje KV (KV lang o Kivy Languaje ) para Así se anunció el inicio de Kivy el 8 de enero de 2011, como el desarrollo de interfaces gráficas, esto nos ayuda a realizar una evolución de la librería PyMT (http://pymt.eu/) que permitía prototipos, interfaces de usuario, wigets, etc. de una manera eficiente. KV hace fácil separar el diseño de la interfaz con la la creación de aplicaciones táctiles multiplataforma. capa lógica de la aplicación.

¿y qué es Kivy?

Kivy es una librería Open Source que ayuda en el desarrollo de aplicaciones multiplataforma de una manera rápida y optima, las plataformas en la que se pueden ejecutar aplicaciones desarrolladas con esta librería son: Linux, Windows, Mac OS X, IOS y Android (hasta el momento). Como comentamos al principio, debido a la herencia que tiene con PyMT, Kivy permite el desarrollo de interfaces táctiles, mismas que se pueden

14

La API gráfica de Kivy fue desarrollada sobre OpenGL ES 2 esto a grandes rasgos permite la creación aplicaciones graficas 2D y 3D, la interacción con OpenGL se puede hacer mediante la API o el uso de comando nativos de OpenGL. La radiografía de Kivy es como se aprecia en la figura 1

© 2013 - www.spanishdeveloperscommunity.es


Para clarificar que es lo que pasa internamente les mostrare el esquema del ciclo de vida de aplicaciones de kivy.

Para ahondar en más detalles sobre la arquitectura de Kivy, Ahora veamos otra rutina con un poco más de características: siempre se puede consultar el sitio from kivy.app import App http://kivy.org/docs/guide/architecture.html. from kivy.uix.gridlayout import GridLayout from kivy.uix.label import Label En este artículo no profundizaremos en la instalación de kivy, los from kivy.uix.image import Image

ejemplos que mostrare aquí están probado en Ubuntu y Windows, pero no quiero dejar pasar un detalle importante. En el class PantallaImagen(GridLayout): sitio de Kivy, pueden descargar una máquina virtual de Linux, que les permitirá crear los apk para android. def __init__(self, **kwargs): http://kivy.org/docs/guide/packaging­android.html

la estructura basica de las aplicaciones de Kivy

super(PantallaImagen, self).__init__(**k wargs) Las aplicaciones en Kivy tienen que cumplir con una sencilla self.cols=2 self.add_widget(Label(text='Segunda App estructura, Kivy: Spanish developers community')) self.logo=Image(source='logo.png') 1 Importamos el módulo kivy self.add_widget(self.logo)

2 Importamos el modulo App de kivy.app

3 Creamos una Clase e internamente implementamos el método class SegundaApp(App): build. 4 Instanciamos la clase y hacemos un llamado al método run. El siguiente fragmento de código únicamente imprimirá el texto. import kivy from kivy.app import App class PrimerApp(App): def build(self): print 'Mi primer App Kivy' return if __name__ == '__main__': PrimerApp().run()

© 2013 - www.spanishdeveloperscommunity.es

def build(self): return PantallaImagen(); if __name__ == '__main__': SegundaApp().run()

En este código a diferencia del anterior vemos que en la línea 3 a 5 agregamos widgets que vienen dentro de las librerías. Agregamos un contenedor, una etiqueta y una imagen. En la clase PantallaImagen hacemos el acomodo de todos los componentes dentro de __init__: 1. Definimos el numero de columnas del grid.

15


2. Agregamos el Label con el texto. 3. Definimos la imagen y su ubicación 4. Agregamos la imagen al contenedor. Los pasos siguientes son similares al código anterior:

El resultado que obtenemos es el siguiente:Hasta aquí por el momento, agradeceré me hagan llegar sus dudas o comentarios por correo o via twitter En las siguientes entregas comenzaremos con la integración de KVLang

En el momento de escribir este artículo la versión estable es 1. Dentro de la clase “SegundaApp” llamamos el método build 1.7.1 que especifica el ciclo de kivy. Referencias: 2. Regresamos la clase instanciada PantallaImagen(). blog Kivy planet,(http://kivy.org/planet/) 3. Por ultimo Instanciamos la clase PantallaImagen y llamamos el método Run. Sitio oficial de Kivy http://www.kivy.org

16

© 2013 - www.spanishdeveloperscommunity.es


Actualidad

Una de las compañias clasicas de telefonía móvil, que cuenta con hitos tan importantes como haber sido la primera empresa en desarrollar y sacar al mercado el primer dispositivo de telefonia móvil, está de aniversario, pues hace ya como dos años que fue adquirida por Google. Desde la adquisición, el panorama de la compañía no ha estado demasiado estable, llegando al punto de que filiales como la española cerraron el pasado año, quedando tan sólo las sedes de Francia, Alemania y Reino Unido para competir con el todopoderoso iphone de Apple. No obstante, parece que esta dinámica va a cambiar a partir de ahora con el lanzamiento de un smartphone de gama alta, denominado Moto X, que está dando bastante que hablar en el mundíllo de la telefonía. Este modelo pretende ser la apuesta del fabricante de teléfonos en su vuelta al mercado, o por lo menos eso parece indicar los más de 500 millones que se ha gastado Google para promocionarlo. El tiempo despejará las dudas.

Si tienes un dispositivo Android es muy probable que la opción de que tus datos tengan una copia de seguridad estará activada, lo cuál esta muy bien, puesto que gracias a esta opción podemos tener todos nuestros datos en todos los dispositivos Android de los que dispongamos. Además, por añadidura, si el dispositivo es nuevo, no tendremos que volverlo a configurar para volver a navegar en nuestras conexiones Wifi. El problema es que, al parecer, esta configuración manda nuestras contraseñas en texto plano, y en caso de ser interceptado, ni que decir tiene que consecuencias puede entrañar. Sorprende a propios y extraños este hecho pues el resto de las transferencias de datos están encriptadas y por lo tanto, podemos trabajar de forma segura.El principal caso en el que mandar una contraseña en texto plano es peligroso es en los ataques Man in the Middle, situación que consiste en que el atacante captura las comunicaciones entre dos sistemas y obtiene absolutamente todo lo que ocurre en ellas. Las contraseñas de nuestra red Wifi son un dato que por si solo no tiene ninguna utilidad, pero en conjunción con el nombre y la localización de la red, pueden dar pie a ataques más severos a nuestros dispositivos. Fuente | Bugs 57560 de Android

© 2013 - www.spanishdeveloperscommunity.es

17


Drupal

The drupal way Pablo García www.drupalin.com

/bakinbox

Drupal es un gestor de contentnidos (cms content management system en inglés) como puede ser wordpress o joomla, no voy a entrar en cual es mejor, solo una búsqueda en google drupal vs otro CMS entraríamos en las típicas y absurdas discusiones como la de si los Beatles ­ Rolling, Fifa ­ Pro Evolution Soccer, Mac ­ Windows (todo el mundo sabe que Beatles son los número uno, el Fifa desde las últimas 4 ó 5 versiones es muy superior al Pro y siempre serás más feliz con un Mac que reinstalando Windows cada dos por tres ;) ). Una explicación aunque no muy técnica de gestor de contenidos es aquella web que tienes una parte donde registrarte/incio de sesion y accedes a un panel de administración donde puedes ir metiendo el contenido sin necesidad de ir subiendo los archivos al servidor, un blog, un periódico online o el propio Facebook podrían ser ejemplos de webs que utilizan o son un CMS. Drupal está escrito en el leguaje php y la versión actual es la 7

18

(para ser más especificos la 7.22 al momento de escribir estas líneas). Aunque está próxima la llegada de la versión 8 este verano, pasarán meses hasta la actualización de temas y módulos, por esta razón, no creo que sea buena idea pasarse a la 8 hasta la llegada del 2014 ( aunque eso es más una opinión personal). Para utilizar Drupal no hace falta ser un experto en PHP o Javascript, incluso saber todas estás tecnologías puede ser hasta algo negativo, ¿cómo?, ¿qué he dicho?... bueno primero solo he dicho puede ser negativo, ser un experto en PHP y/o en Javascript es ideal para un desarrollador de Drupal, pero por mi experiencia cuando me toca actualizar un proyecto que no era mío, puedo decir que en un gran porcentaje de los casos LO HAN HECHO MAL. Se que erán buenos programadores, me he puesto a leer su código y son mucho mejores que yo. Pero no basta con ser excelentes programadores y tener unas pequeñas nociones de Drupal, en muchos casos se limitan en hacer una © 2013 - www.spanishdeveloperscommunity.es


instalación de Drupal y unos pocos módulos esenciales y se ­ Busca un módulo que posiblemente haga la funcionalidad que ponen escribir código a tumba abierta, en los módulos en estés buscando, existen más de 20000 módulos gratuitos para cualquier template, etc, etc. Pero ese, no es, como pedantemente poder descargar desde https://drupal.org/project/modules y es se dice "The Drupal Way". altamente probable que no tengas que programarlo a mano la funcionalidad que buscas. “The Drupal Way” es una serie de técnicas o conceptos que aplicamos para sacar ­ Las tps de tu tema son para estructura, muy poco o nada de PHP o Javascrip debes inlcluir dentro, en su mayoría “prints” ­ No tocar el core de Drupal ,esto es lo primero que se aprende, a y condicionales, eso es todo. Aquí es donde siempre encuentro colocar, los nuevos módulos y los nuevos temas dentro del árbol la mayor cantidad de errores, en las tpls POQUITO php. de la carpeta sites (señaladas en verde), y dejar tal cual las carpetas modules y themes del core (en rojo). ­ Ejemplo de texto en page.tpl.php, donde es puede apreciar el © 2013 - www.spanishdeveloperscommunity.es

19


php que se incluye, lugar para crear la estructura de la estructura de la web. ­ En el archivo template.php o creando un módulo, es donde debes meter todo tu programación, todo ese php que cree (siempre y cuando no encuentres un módulo a tu medida de los miles que existen en la web de Drupal.org) En definitiva, si queréis sacar el mejor rendimiento a vuestros Drupales, debéis coordinar escrupulosamente como estructurar lo mejor posible vuestra aplicación, siguiendo el modelo Drupal, de esta forma, core, módulos contribuidos y vuestros temas y plantillas actuarán de una forma sinérgica, en caso contrario los problemas de rendimiento, actualización y con futuras modificaciones está asegurado.hola mundo

20

© 2013 - www.spanishdeveloperscommunity.es


Diseño web

Instalar xampp en Ubuntu

Xampp es un programa muy conocido para los que normalmente desarrollan aplicaciones web, php y mysql orientados a la web; dentro de este programa podemos encontrar una buena cantidad de software tremendamente útil tanto para los desarrolladores que apenas han comenzado su aprendizaje en el diseño y programación de páginas web como para los que ya tienen una amplia experiencia en estos temas. El software que podemos encontrar es: mysql, php, apache, proftp y phpMyAdmin. La instalación en ubuntu es muy sencilla. Enumerando los pasos a seguir, nuestro primer paso nos lleva a descargar el paquete en nuestro ordenador ( de http:// sourceforge.net/projects/ xampp/files/ BETAS/ xampp­linux­x64­1.8.2­beta2­ installer.run/ download. por ejemplo ).

en el sistema: /opt/lampp/lampp start Con esto iniciaremos la ventana por defecto de xampp. Tendremos que tener en cuenta que en las versiones actuales tienen un componente de seguridad que, seguramente, nos impedirá entrar en phpMyAdmin. Para esto tendremos que volver al shell de linux y tipear: /opt/lampp/lampp security Esto establecerá las contraseñas para iniciar el servidor ftp, entrar en xampp y en la base de datos mysql. En fundamental esto para poder trabajar.

Otra cuestión que es importante tener en cuenta, por ejemplo, cuando trabajamos con CMS como Joomla, es que nos surjan problemas referentes a los permisos . Para sortear este problema, tendremos que cambiarlos con la orden chmod. tar xvfz xampp-linux-1.8.1.tar.gz -C /opt Debemos establecer para todos los directorios un permiso completamente abierto para ejecución, lectura y escritura ( esto Esto instalará en el directorio /opt este software bajo el directorio es 777 ) excepto para el directorio /phpMyAdmin que deberá /lampp. ¡Ya está!, ya tenemos este software listo para empezar a tener unos permisos más restrictivos, por ejemplo tan sólo trabajar; tan sólo nos queda probar que el sistema permiso de lectura y ejecución: 755 verdaderamente funciona y que no se ha producido ningún error A continuacion nos iremos a Linux shell y nos loguearemos como root y tipearemos la siguiente orden:

© 2013 - www.spanishdeveloperscommunity.es

21


Programación

Primera aplicación de ruby on rails en ubuntu

La arquitectura de la aplicación creada está bajo el modelo vista ­ controlador. Para hacerlo más comprensible, el modelo será la parte de nuestra aplicación encargada de controlar los datos. Para este ejemplo, no necesitaremos usarlo puesto que no gestionamos datos ni estructuras de datos de ningún tipo, como es obvio. La otra parte es el controlador, que es, por decirlo de Suponemos que ya tenemos instalado sobre ubuntu el framework alguna manera, comunicarse con la vista y a su vez con el ruby on rails; partiendo de esta base, ­nos dirigimos al directorio, modelo, es decir, con los datos, de forma que gestione la desde la ventana del terminal­, en el que crearemos nuestro comunicación entre ambos elementos. Por ultimo la vista será la encargada de mostrar la interfaz al usuario. proyecto y tipearemos En esta edición vamos a comenzar a conocer ruby on rails y veremos de primera mano lo sencillo que es programar en este framework. Nuestro objetivo en esta ocasión será conocer los fundamentos y el entorno de programación en rails 3, dejando para ediciones posteriores conceptos más complejos.

rails new hola_mundo

Para comprobar que el servidor funciona, lo que vamos a ejecutar la instrucción

esto nos va a crear toda la arquitectura de la aplicación. Si hechamos un vistazo al interior del directorio que se ha creado rails server comprobaremos que se han creado varios directorios y, a primera vista, esto puede resultar intimidante, aunque ya veremos que no Con este comando podrá visualizar la aplicación en tu navegador favorito. Para comprobar que todo es correcto no tienes más que es para tanto.

22

© 2013 - www.spanishdeveloperscommunity.es


dirigirte a tu navegador y tipear en el url http://localhost:3000, aparecendo la página por defecto. Pulsando Ctrl+C, cerraremos el servidor y podremos seguir editando nuestra pequeña aplicación.

<html> <head><title>hola mundo rails</title> </head> <body> <h1>Hola Mundo Rails<h1> El siguiente paso que vamos a realizar es crear nuestro propio </body> controlador. Tampoco son necesarios demasiados conceptos, </html> basta con tipear en la ventana de nuestra terminal

Una cosa muy importante antes de volver a arrancar el servidor es diribirse a la carpeta ~/public y borrar el fichero index.html que debe de haber por allí y que corresponde a la vista por Aqui el nombre de nuestro controlador es welcome y generará defecto. Una vez hecho esto, iniciamos el servidor y escribimos nuestra vista index. En ~/hola:mundo/app/controllers, veremos en el url: localhost:3000/welcome/index, apareciendo la página que se nos han creado un archivo denominado que hemos recién creado unas líneas más arriba. welcome_controller.rb, en el que tipearemos todos nuestros controladores de nuestra aplicacion. De momento dejaremos esto Con esto, y poco más, hemos visto como crear nuestro primer como está. controlador y nuestra primera vista. Aún reconociendo que este rails generate controller welcome index

programa no sirve para nada, si al menos nos dá una idea del Lo que nos interesa es dirigirnos al fichero index.html.erb, que funcionamiento de éste framework, haciendolo a partir de ahora se encuentra en la carpeta ~/hola_mundo/app/views, y lo más complejo. editaremos con un editor de texto ­gedit por ejemplo­; borraremos el contenido y agregaremos el siguiente código ¡Lo veremos en el siguiente número!. © 2013 - www.spanishdeveloperscommunity.es

23


Redes sociales

¿Cómo elijo la red/es social/es en la que participe mi empresa? Ángela Escobar www.aticaweb.com

/aticaweb @aticaweb

En el artículo de este mes vamos a seguir introduciéndonos en las redes sociales. Para ello, tenemos que saber los diferentes tipos, elegir la que más nos conviene y que su temática tenga que ver con nuestra marca. Las redes sociales se dividen en tres tipos que a su vez tienen subdivisiones. Hay que tener en cuenta que una red social puede incluirse en distintos tipos, ya que pueden tener diferente uso; así podemos destacar los siguientes tipos: ­ Por Público objetivo o Temática. Las redes se centran en un tipo de usuario o en un tema concreto, dentro de este tipo encontramos: * Redes Sociales Horizontales: En este tipo de redes se incluye todo tipo de usuarios y/o temática, siendo redes de libre acceso. Ejemplos: Twitter, Facebook, Google+ ...

24

© 2013 - www.spanishdeveloperscommunity.es


* Redes Sociales Verticales: Se conciben sobre un eje temático que permite a los usuarios irse uniendo si el tema a tratarles interesa. Ejemplos: LinkedIn ( Se basa en relaciones laborales ), Instagram ( Su tema es la fotografía ), Pinterest ( Otra red social cuyo tema principal es la fotografía a través de tablones y pines ). Vine ( Su tema es el video pero con sólo 6 segundos de duración ), ...

porque nos van a servir de unión diaria con nuestros seguidores, viendo a éstos últimos como posibles o futuros clientes, a la vez que hay que cuidar a los seguidores que ya son clientes.

Para ver el tipo de red social, pongamos un ejemplo: una empresa tiene varias oficinas/tiendas en diferentes localizaciones; además, es una empresa que a menudo tiene gran cantidad de ofertas y varios tipos de productos. ¿En qué tipo de redes se podrían incluir? En primer lugar podríamos incluirlo en Foursquare y Google Place. ¿Por qué? Muy ­ Por la persona. Este tipo de redes permiten la interactuación simple, para que los usuarios puedan tener presente la entre usuarios, pudiendo ser por el contenido publicado o por los localización de las diferentes tiendas/oficinas que posee nuestra gustos, hobbies, actividades, .... Aqui también se produce una empresa. subdivisión: Por inercia caeremos en Facebook y Twitter. En la primera de estas redes hay que tener en cuenta una cosa, hay que crear una Fan Page no un perfil, ya que Facebook dentro de su política incluye que una empresa no puede tener perfil y lo que hace cuando da con una de ellas es eliminarla sin preguntar. El porque de elegir estas redes es que en Twitter podríamos anunciar todas las ofertas de un modo simple, además de tener una mayor comunicación con los usuarios. En Facebook * Redes Sociales de Contenido: Éstas en cambio ampliaremos las ofertas con más imágenes y con más texto tratan de unir a las personas a partir del para poder explicar bien en que consiste. Si también queremos contenido publicado. Por ejemplo: Dipity, ... mostrar al usuario nuestros productos, podríamos crear en Pinterest diferentes tablones en los que incluir las imágenes, ­ Por la geografía. Depende de la localización de los usuarios. un tablón por cada categoría de productos y dentro de los Encontramos dos tipos: tablones los diferentes pines de nuestros productos. * Redes Sociales Humanas: Estas se centran en fomentar la relación entre los distintos usuarios, ya sean por que son conocidos, comparten distintos hobbies, gustos musicales o trabajen / estudien en un lugar. Un ejemplo es Tuenti, Facebook, ...

* Redes Sociales Sedentarias: Cambian en Para esa empresa ya tendríamos redes en las que estar función de los contenidos, las relaciones o los presentes, se trata de ver como quiero comunicar mis noticias, eventos creados. Un ejemplo a tener en cuenta el qué tiempo voy a tener para actualizarlas y ver las Plurk, pero hay muchos más. características de las redes sociales en las que me quiero incorporar para ver si éstas cumplen todos los requisitos del * Redes Sociales Nómadas: Son aquellas que modo de unión con mi público que busco. como su propio nombre indica van cambiando según el lugar dónde se encuentre el usuario y el Para terminar os dejo con el IV Estudio de Redes Sociales de registro que haya realizado. Un ejemplo: IAB Spain con Elogia, en él se pueden ver todos los datos de Foursquare, Google Latitude, ... uso y crecimiento de las redes sociales en España: http://slidesha.re/184iHZ8. En este estudio se pone de Muy bien, ahora que conocemos todos los tipos de redes hay que manifiesto, por ejemplo, la crecida del número de usuarios que ver en cuál de ellas puede encajar mi empresa. Una cosa muy utilizan las redes sociales y el tiempo empleado en las mismas, mportante a tener en cuenta en las redes sociales es la entre otros muchos datos interesantes referentes a las redes actualización y la observación diaria de éstas. Por tanto, no hay sociales y las empresas. que estar en todas las redes sociales por estar, hay que estar

© 2013 - www.spanishdeveloperscommunity.es

25


Aplicaciones móviles

Claves generales para convertir una idea en una app móvil María Ripoll www.yeeply.com

/marieta_mrm @marieta_rm

Se espera que a lo largo de este año el mercado de aplicaciones móviles facture alrededor de 25.000 millones de dólares (cerca de 20.000 millones de euros). Además, se espera que esta cifra alcance la friolera de 46.000 millones de dólares en 2016, lo que supondría más de 35.000 millones de euros. Por tanto, el ámbito de las apps es uno de los ámbitos que más dinero mueve, pero también es uno de los más saturados. Cada día, salen al mercado cientos de aplicaciones, por lo que contar con una buena idea sobre la que desarrollar una app es esencial para que ésta tenga éxito. Para transformar una idea en una buena aplicación móvil, hay una serie de claves que es importante tener en cuenta.

­Analizar el público objetivo: Preguntar a la gente es una de las maneras más inmediatas de llegar al potencial público objetivo. Sin embargo, también es importante buscar los distintos estudios que se hayan podido hacer sobre penetración de dispositivos móviles o uso de apps. De esta manera se puede conocer el mercado de forma más amplia y se puede obtener una idea más aproximada de las características del sector poblacional al que se quiera llegar. ­La competencia: Sus carencias pueden ser las fortalezas de la app en la que se está pensando. También es importante qué compañías están detrás de su desarrollo –para conocer su potencial­ y con qué palabras clave se posicionan en los markets. De esta manera se sabrá hacia qué keywords moverse y qué otras palabras relacionadas se pueden utilizar para diferenciarse y lograr un mejor posicionamiento.

­Preguntar a la gente: Familiares y amigos pueden ayudar a la hora de aportar ideas para una aplicación, o para confirmar la idoneidad de la idea inicial. A lo mejor alguno de ellos propone alguna característica que todavía no tiene ninguna aplicación y ese puede ser el punto diferenciador que una app exitosa ­Plataformas: Cuantas más mejor. Cuantos más sistemas necesita.

26

© 2013 - www.spanishdeveloperscommunity.es


operativos se abarquen a mayor número de usuarios se llegará. Es importante observar el comportamiento del público objetivo al que se quiere llegar, ya que puede haber algún sistema operativo que no les interese y, por tanto, quizá no sea tan urgente trabajar en esa versión de la app.

opta por la gratuidad, se puede recurrir a dos sistemas de monetización: la publicidad, con anuncios que puedan interesar al usuario relacionados con la temática de la aplicación; y los pagos in­App, principales actores del modelo freemium de pago por contenidos extra.

­Uso de funcionalidades: A los usuarios les gusta hacer muchas cosas con su dispositivo, por lo que es interesante que la aplicación utilice varias características del teléfono. Conviene no abusar, sobre todo para no ralentizar el funcionamiento de la app y para que ésta funcione bien en dispositivos de más baja gama.

Finalmente, contar con buenos conocimientos en programación es fundamental para lograr desarrollar una buena aplicación móvil. En el caso de que no se cuente con éstos, siempre se puede recurrir a desarrolladores freelance o empresas de desarrollo, que ofrecerán un servicio de calidad. Para encontrar a este tipo de profesionales, se pueden recurrir a las plataformas de freelancers existentes, como Yeeply (www.yeeply.com), donde se congregan importantes comunidades de desarrolladores, especializados en varios lenguajes y plataformas dentro del desarrollo móvil.

­¿Gratuita o de pago? Una app de pago puede reportar muy buenos beneficios, aunque sí las de la competencia son gratuitas habrá que justificar muy bien en la descripción qué aporta esa app para que merezca la pena pagar por ella. En cambio, si se

© 2013 - www.spanishdeveloperscommunity.es

27


Android

Interfaces de usuario

Para que los usuarios puedan interactuar con las diferentes Activity de la aplicación, éstas ofrecen toda una colección de elementos gráficos que serán capaces de interaccionar a través de distintos eventos generados sobre la pantalla o sobre algunos de los botones del mismo dispositivo móvil.

La manera en que se dispondrán estos widget ­o elementos gráficos­ dependerá en gran medida de los atributos que se especifiquen. Existen una gran cantidad de atributos y, como ya veremos más adelante, algunos de estos atributos tendrán sentido para unas disposiciones ­o layout­, y en otros no.

Una vez que se tiene el fichero con el layout definido, éste se debe procesar mediante una herramienta llamada aapt ( Android Asset Packaging Tool, herramienta de empaquetamiento de activos o recursos ) que generará la correspondiente clase Java de recursos que generalmente se denomina R. Particularmente trabajo con el IDE Eclipse, por lo que no debo preocuparme por esta cuestión ya que este entorno lo hace de forma automática. Por tanto, recomiendo a los lectores a que usen este entorno de Una segunda forma, quizás la más habitual, se podrá crear en desarrollo que, además, es gratuito. tiempo de diseño, pudiéndose además hacer uso de herramientas gráficas disponibles en diferentes IDE's e incluso en programas Comenzaremos por analizar el código del layout generado por la disponibles de forma gratuita en Internet. Ésta será la manera clásica aplicación "hola mundo" que podemos generar fácilmente con Eclipse (listado 1). En primer lugar encontraremos la línea que describiremos en éste artículo. de definición del fichero XML; esta línea será habitual en todos Al igual que ocurre en algunos lenguajes de programación, los los ficheros de este tipo. La siguiente linea es un elemento documentos que especifican el layout, esto es, la disposición de propiamente habitual en este tipo de ficheros ( en particular en los elementos gráficos en las diferentes Activity de nuestra una disposición LinearLayout ); junto con esta línea aparece lo aplicación, en Android se utilizan ficheros de texto en formato que se denomina namespace y que será necesario incluir ). A xml, que contendrá de forma jerarquica cada uno de los continuación aparecerán los distintos elementos gráficos elementos que constituyen la interfaz. Estos archivos se disponen agrupados jerarquicamente y cada uno de ellos con los atributos correspondientes. Veamos uno a uno las disposiciones más en la carpeta res/layout. habituales. En cualquier caso, se pueden crear estas interfaces de dos formas, se puede optar por crearlas en tiempo de ejecución con código java, cuestión que como veremos en otras ediciones puede resultar necesario; p. e.g. crear un diccionario, de forma que dependiendo del idioma el número de botones que representa cada una de las letras del abecedario será distinta, e incluso con distintas letras.

28

© 2013 - www.spanishdeveloperscommunity.es


Listado 1

Listado 2

<?xml version="1.0" encoding"utf-8" ?>

<?xml version="1.0" encoding"utf-8"?>

<LinearLayout xmls:android="schemas.android.com/apk/res/android" android:orientation="vertical"

<LinearLayout xmls:android="schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:orientation="vertical"

android:layout_height="wrap_content">

android:layout_width="match_parent" android:layout_height="match_parent">

<TextView android:layout_width="match_patent"

<TextView

android:layout_height="wrap_content"

android:layout_height="wrap_content"

android:text="@string/hola" />

android:layout_width="match_parent" android:gravity="center"

</LinearLayout>

linearLayout

Vamos a crear un pequeño proyecto que nos ayudará a comprender de una forma sencilla como funciona esta manera de disponer los elementos gráficos de esta forma. Suponemos que el lector ya sabe crear proyectos de este tipo, así que nos centraremos sólo en lo fundamental. Si analizamos el código del listado 2, lo que comprobamos que este layout lo que hace fundamentalmente es disponer los elementos uno al lado del otro. En caso de que usemos el atributo android:orientation="vertical" lo pondrá uno debajo del otro. Para conseguir que se visualicen todos los elementos gráficos en el layout, habrá que tener en cuenta los atributos layout_height y layout_weight. Si le asignamos el atributo "match_parent" ocupará todo el espacio disponible del dispositivo, y si usamos "wrap_content", sólo ocupará el espacio estrictamente necesario del elemento. Lo primero que nos llama la antención en este código es que se anidan varios layout LinearLayout y cada uno de éstos organizará los diferentes elementos gráficos vertical y horizontalmente, según sea necesario. Analicemos detenidamente el código: lo que nos va a mostrar esta interfaz es un formulario con un titulo a la cabeza, una etiqueta con un cuadro de texto en la siguiente línea y por último, abajo de todo un botón. El primer grupo de etiquetas layout agrupa a todos los demás elementos, estos elementos se dispondrán de forma vertical, es decir, uno debajo de otro. Además se especifica que ocupe todo el espacio de nuestro dispositivo ( atributo match_parent ). Los demás elementos vienen agrupados en tres grupos: primero un rotulo, despues un grupo de elementos dispuestos de forma horizontal ( etiqueta y cuadro de texto ) y por último otro grupo © 2013 - www.spanishdeveloperscommunity.es

android:text="formulario" android:textColor="#FF0000/> <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="match_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Nombre: " /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:id="@+id/nameTxt" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:gravity="center|bottom" > <Button android:text="Guardar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/guardarBtn" /> </LinearLayout> </LinearLayout>

29


que contiene únicamente un botón y que también se encuentra Hay que hacer aquí la observación que en Android, y particularmente en esta disposición, las columnas se numeran enmarcado entro otro par de etiquetas ­o tag­ LinearLayout. desde cero en adelante. En el rótulo de la interfaz, integrado en el LinearLayout principal, el rotulo se situa en el centro del layout con la etiqueta TableRow también dispone de atributos que permiten un control gravity, evidentemente para eso será necesario que el ancho, es más específico de la colocación en la tabla. Por ejemplo, un decir la etiqueta layout_width, deberá ocupar todo el ancho del elemento puede ocupar más de una celda; para ello, se deberá dispositivo móvil. Además su color será rojo (#FF0000); no hay hacer uso del atributo android:layout_span o, si por el contrario, deseamos que se ubique en una columna concreta, entonces nada más reseñable. hecharemos mano del atributo android:layout_column. Para En el segundo grupo en el que aparece la etiqueta y el campo de comprender mejor el funcionamiento de ésta disposición os texto, observamos que el LinearLayout dispondrá los elementos dejamos código de ejemplo en el listado 3. en horizontal tal y como deseamos, que aparezca un elemento al lado del otro. Evidentemente, con sólo una inspección visual Listado 3 veremos que el ancho de la etiqueta sólo ocupa es espacio estrictamente necesario mientras que en el campo de texto si se <?xml version="1.0" encoding"utf-8" ?> le permite que ocupe todo el ancho disponible ( el ancho del <TableLayout dispositivo excepto lo que ocupa la etiqueta ). El único elemento xmls:android="schemas.android.com/apk/res/android" android:layout_width="match_parent" nuevo que nos aparece es la etiqueta android:id="@+id/xxx" que android:layout_height="match_parent" se corresponde a la declaración de una variable que se deberá android:stretchColumns="1,2" crear en código Java más adelante, en tiempo de ejecución. El último grupo es interesante. Como podemos ver también dispone los elementos gráficos en horizontal, aunque sólo disponga un botón, y ocupará todo el espacio disponible restante ahora veremos por qué. Nos interesa que el boton aparezca centrado y abajo, es por eso por lo que necesitamos que LinearLayout ocupe todo el espacio restante. Además especificaremos con gravity, mediante pipes, que el / los elementos aparezcan centrados y abajo. No hay mocho más que decir en la etiqueta Botton (botón) pues los atributos ya los hemos explicado en las líneas superiores

tableLayout

Para conseguir este aspecto en la pantalla de nuestro dispositivo lo podemos conseguir también con otro tipo de disposición, en concreto con TableLayout. Existen numerosas diferencias respecto a la disposición anterior. En primer lugar es que este tipo de disposición no tiene el atributo orientation pues to que en realidad no hace falta. Este layout está pensado para disponer los elementos en filas y, aunque es posible agruparlo con otros elementos, lo normal es que TableLayout tenga como hijos elementos del tipo TableRow, que representará una fila. Los atributos de un TableRow dentro de Tablelayout correspondientes a layout_width y layout_height tendrán siempre como valor match_parent y wrap_content respectivamente; por tanto, el control de cómo deberán de visualizarse las columnas recaerá en este caso en los valores de los atributos android:shrinkcolumns y android:stretchcolumns. El segundo de ellos sirve para especificar las columnas que se pueden estirar mientras que el primero, las coluimnas que se pueden encoger.

30

android:shrinkColumns="1">

<TableRow android:id="@+id/tableRow01" android:layout_width="match_parent" android:layout_height"wrap_content" > <Button android:text="boton1" android:id="@+id/btn1" android:layout_height="wrap_content" android:layout_width="wrap_content" /> <Button android:text="boton2" android:id="@+id/btn2" android:layout_height="wrap_content" android:layout_width="wrap_content" /> </TableRow> <TableRow android:id="@+id/tableRow02" android:layout_width="match_parent" android:layout_height"wrap_content" > <Button android:text="boton3" android:id="@+id/btn3" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_span="2" /> </TableRow> </TableLayout>

© 2013 - www.spanishdeveloperscommunity.es


relativeLayout

En éste tipo de disposición, la posición de los elementos gráficos se calcula de manera relativa al contenedor padre y/o a la posición relativa de los demás elementos que conforman la interfaz ­de ahí disposición relativa­. Cuando manejes con soltura este tipo de disposición, estoy seguro de que será tu favorita a la hora de crear las interfaces de la aplicación, teniendo en cuenta además que la anterior, es decir, TableLayout, está en vias de desaparición y la primera que vimos en éste artículo, LinearLayout, en más ocasiones de la cuenta se complica demasiado entorpeciendo su lectura, comprensión y, por supuesto, su depuración en caso de errores. Para este tipo de disposición, es muy importante poner identificadores a todos los elementos, puesto que más tarde deberemos hacer referencia a ellos a fin de recolocar los diferentes elementos y disponerlos correctamente en la interfaz. Si hechamos un vistazo al listado 4, tras la etiqueta, o label inicial, el EditText siguiente lo colocaremos debajo usando para ello el atributo android:layout_below="@id/label". Los dos siguientes elementos son son dos botones colocados bajo el campo de texto y uno al lado de otro. Ya sabemos que atributo usar para ponerlo debajo de otro elemento. Para situarlo a la derecha usaremos android:layout_alignParentRight="true". Para poner el boton "Cancelar" a la izquierda del botón "Ok" se usa android:layout_toLeftOf, y mediante el atributo android:layout_alignTop se alinean. También hemos usado la propiedad android: layout_alignBaseLine, con la que conseguimos obtener una alineación horizontal respecto a la parte media de elemento. Has observado en este ejempo que mediante "pon debajo de", "pon a la izquierda de", ... etc, se pueden realizar de modo muy rápido, y también, de una manera muy sencilla complejas interfaces.

absoluteLayout

Este posiblemente será la disposición que más guste de todos los vistos por su extrema sencillez. La clave para usarla es que se debe de especificar el lugar exacto en el que se van a disponer los diferentes elementos gráficos de la interfaz. Sin embargo, no todo es de color rosa, las distintas resoluciones o tamaños de pantalla de los nuevos dispositivos puede ocasionar que no haya una buena compatibilidad visual; por esto, hay que saber utilizar esta disposición con muchísima prudencia.

Listado 4 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk /res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/label" android:text="Un campo: " android:layout_width="match_parent" android:layout_height="wrap_content" /> <EditText android:id="@+id/entry" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/label" android:background="@android:drawable/editbox _background" /> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="ok" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content"

El ejemplo dispuesto en este artículo para ilustrar esta disposición es el número 5. Lo más significativo de éste listado de código, son las coordenadas de cada elemento que vienen © 2013 - www.spanishdeveloperscommunity.es

31


Listado 4 ­ continuación

Listado 5 ­ continuación

android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="cancelar" />

android:background="@android:drawable/editbox_ background" />

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="otro campo: " android:id="@+id/label2" android:layout_below="@id/ok" android:paddingTop="10dp" /> <EditText android:background="@ android:drawable/editbox_background" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_toRightOf="@id/label2" android:layout_alignBaseline="@id/label2" /> </RelativeLayout>

Listado 5 <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/ res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/TextView1" android:text="Un campo " android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="1dip" android:layout_y="0dip" />

32

<Button android:text="ok" android:id="@+id/boton02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="27dip" android:layout_y="62dip" /> <TextView android:id="@+id/textView02" android:text="otro campo: " android:layout_width= "wrap_content" android:layout_height="wrap_content" android:layout_x="4dip" android:layout_y="116dip" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText02" android:text="" android:layout_x="94dip" android:layout_y="106dip" /> <Button android:id="@+id/boton01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="108dp" android:layout_y="62dp" android:text="cancelar" /> </AbsoluteLayout>

dadas por las propiedades layout_x y layout_y. La pregunta que nos correspondería hacernos ahora es ¿qué pasa si ponemos nuestro dispositivo en posición horizontal?. Pues lo que ocurre es que todos los elementos que pusímos siguen allí, sin recolocarse; la única direrencia que quizás podamos a preciar es que el tamaño de éstos elementos gráficos si que han cambiado, adaptándose a las dimensiones de la pantalla.

© 2013 - www.spanishdeveloperscommunity.es


Créditos este proyecto solamente ha sido posible gracias a la colaboración

Staff

desinteresada y al firme compromiso de:

Antonio García

Ing. Técnico & freelance Gerente Ibidem Network

Jerobén Guzmán

Ing. Sistemas & Profesor en la Universidad Durango

Angela Escobar

Dipl. Estadística e Informática Gerente Atica web

María Ripoll Periodista

Julio Medellin

Comunicador y programador

Sergio Haro

Programador informatico

Responsable del proyecto Antonio García Prats

Coordinadores de comunicacion Antonio García & Jerobén Guzmán


Tecnología

¿Batallas de plataformas en postproducción? Julio Medellín /simus.rex @simusrex

Existe inmensidad de reviews acerca de nuevas computadoras y programas… algunas de uso profesional otras de uso casero, últimamente va más allá del confort sino de la usabilidad. La discusión entre si es mejor el hardware y software de Mac que el de PC con Windows y Linux. Hay que entender que el buen funcionamiento de una máquina tiene que ver con el hardware, software y usuario. Puesto que estamos hablando de un uso complejo y específico de la máquina, y no sólo de navegar por internet o hacer hojas de cálculo y texto, es importante conocer los detalles de la usabilidad entre hardware y software que funcionan como plataforma para correr los demás programas que nos ayudarán a nuestro proyecto audiovisual. En cuanto a hardware, el día de hoy, después de la infinita batalla y un mar de opiniones contrarias, los componentes internos de Mac y PC son prácticamente los mismos, ambos tienen Intel, ambas utilizan Nvidia en tarjeta de video; en PC es un cierto estándar. Por otro lado, depende de qué tan potente es su

34

procesador y cuánto Ram tengan. Dentro de las tarjetas para video hay varias específicas para Adobe u otras con diferentes cualidades y calidades de video. La ventaja con PC es que uno puede seleccionar los componentes individualmente con diferente tipo de presupuestos muchos más específicos y regularmente más baratos; esto si el equipo que se compra no es de marca sino armado. Si bien es cierto que PC tiene una entrada más activa de virus, Mac sufre de un problema logístico en cuanto se llega descomponer su sistema por alguna razón, ahí es hora de mandarla directo a un distribuidor que la pueda reparar… en caso de que uno sea un usuario regular que solamente operará la máquina. Por el contrario, con PC encontrar alguien que repare nuestro equipo es fácil o si se es muy ducho en el tema uno puede reparar el desperfecto sin tener demasiada experiencia, y desde luego resulta más barata su restauración. La desventaja de PC es que los flujos de trabajo a veces son más cortos pues © 2013 - www.spanishdeveloperscommunity.es


muchas veces los programas no son tan estables para quienes no saben configurar adecuadamente tanto el hardware como el software. A pesar de tener qué ver con las herramientas que uno tiene a la mano, también influye el gusto por la interfase, pues ambas hacen lo mismo con diferentes formas intuitivas para el usuario y su presupuesto. Dado a que la programación en los software’s es la misma, realmente no aumenta ni disminuye la capacidad de trabajo del usuario a la hora de ingresar lenguajes en aquellos software’s que lo permiten, como son la mayoría de aquellos que crean efectos, 3D o animación. En la cuestión del audio y video es importante que –a la hora de instalar plugins, hacer render o pasar archivos– todo corra con la mayor rapidez y confiabilidad. Nuestra decisión, si es el caso es comprar equipo para ello, debe de estar basada en el tipo de educación que tenga el operador de la máquina, tanto del hardware como del software, los tipos de proyectos que manejará en el equipo y el presupuesto que tengamos para ello. Teniendo en cuenta que a menudo se da el caso en donde trabajando en equipo algunas veces alguien no maneja el mismo sistema, regularmente hay problemas al traspasar archivos de Mac a PC, y eso es una desventaja sobre todo si hay presión por la entrega del proyecto. Por esto es recomendable que los computadores que se adquieran manejen la misma línea de plataforma, eso ahorrará mucho tiempo y probabilidades de error. Recordemos que regularmente el factor del tiempo puede ser engañoso, así que siempre es una ventaja poder anular la mayor cantidad de probabilidades de error. Realmente es muy sencillo, en cuanto a la producción o postproducción ninguna se escapa de un fallo. Las Mac’s hacen esto las PC’s hacen lo otro. Ambas son buenas para trabajar, y probablemente son tan buenas como el operador. Referente a la facilidad de poder usar cualquier software ya sea de audio o video –pirata o no­ en ambas opciones es igual. La mayoría de

los software’s base están disponibles para ambos casos, como lo es la suite de Adobe, Autodesk, Sony y algunos otros. Pasando a lo alternativo, algunos afirman que Linux es una plataforma más estable que las dos anteriores incluso para el uso rudo que se le da en postproducción, donde se les pone a prueba gravemente a la hora de hacer replays, quick previews o renders con cantidad de efectos. El sistema tiene velocidad, estabilidad y sobre todo es gratuito. Pero su uso no es común, y a los operadores, que usualmente no son programadores, les dificultará el proceso de trabajo cuando necesitan cambiar settings o algunas particularidades más específicas. A no ser que dentro de tu equipo de trabajo cuentes con un experto que pueda sacarte del apuro. No es tan fácil encontrar versiones de programas específicos para esta plataforma. La búsqueda y descarga no es tan sencilla como con sus competidores, en el caso de la piratería, claro está. No es una plataforma a la cual estén enfocados los mercados. Seguramente en un futuro será tomada en cuenta por igual con las otras dos anteriores, sin embargo sigue siendo una gran opción a considerar debido a los buenos reviews que ha recibido en cuanto al desenvolvimiento de programas de postproducción en su plataforma. Esta es una básica apreciación de estos sistemas. Si estás incursionando en el mundo de la producción, la idea principal sería que sigas adelante con la plataforma que ya conoces o con la que acomodes más para poder enfocarte de lleno al programa de postproducción y no al sistema nativo. Desde luego más vale maña que fuerza, así que es bueno tomarte el tiempo considerando tu presupuesto, muchas veces menos es más, pues no es necesario gastar demasiado hoy en día para hacerte de un equipo que te ayude para hacer producciones elementales de edición y musicalización.

Calendario de eventos 18 al 22 de Julio 01­08 de Agosto 11­18 de Agosto 14­16 de Agosto 03­06 de Octubre 21­23 de Octubre 23­25 de Octubre 27­28 de Octubre

OpenSuse Conference Guadec DebConf13 USENIX Security Maker Faire Europe LinuxCon Europe Linux Kernel Summit DebConf13

© 2013 - www.spanishdeveloperscommunity.es

Salónica, Grecia Brno, Rep. Checa Vaumarcus, Suiza Whashinton, EEUU Roma, Italia Edimburgo, R.U Edimburgo, R.U Vaumarcus, Suiza

conference.opensuse.org guadec.org debconf13.debconf.org usenix.org makerfairerome.eu linuxfoundation.org linuxfoundation.org wiki.debconf.org

35


Estructuras de datos

Estructura de datos Pila en C

En la práctica, la mayor parte de la información útil no aparece aislada en forma de datos simples, por el contrario, suele aparecer de forma relacionada y organizada, tanto en formas simples como en formas muy complejas. De esta organización se derivan, además, numerosas ventajas, como puede ser facilitar el acceso y el manejo de los datos más simples. Es por esto que, desde el punto de vista de la programación, entra dentro de lo razonable desarrollar esta idea y buscar en la solución de un problema concreto cuál deberá ser la estructura de datos más adecuada. Como decimos, la elección de la estructura de datos más adecuada es una decisión trascendental pues una elección erronea nos conducirá a una complicación innecesaria de la solución del problema, por no decir que no alcancemos solución alguna. También influirá en la elección del algoritmo que haya usarse para resolver el problema.

36

Deberiamos empezar a recordar que un dato simple y primitivo no está compuesto por estructura alguna a no ser una secuencia de ceros y unos ( es decir, una secuencia de bits ), no obstante, estos datos tienen unas serie de operaciones que, de un modo u otro, lo caracterizan. Una estructura de datos es, a grandes rasgos, una colección de estos datos primitivos cuya característica fundamental es por un lado su organización particular ­y veremos que existen multitud de organizaciones, desde las más simples a las más complejas imaginables­, y por otro lado son las operaciones que es posible hacer con estas estructuras. En otro orden de cosas, llamaremos dato de tipo estructurado a una entidad, unívocamente identificada, constituida por datos de otra naturaleza y que, de acuerdo con unas reglas previamente definidas dan lugar a cada una de las estructuras de datos. Vamos a trabajar con estructuras que, en tiempo de ejecución y © 2013 - www.spanishdeveloperscommunity.es


Especificación de la estructura de datos Pilas Los objetos del tipo Pila almacenan datos p_[tip] -sustituyendo tip por lo cualquier tipo de datos. En este tipo de datos, los elementos serán insertados y borrados en orden L.I.F.O, es decir, último en entrar, primero en salir. En este documentos se especificará las funciones y procedimientos básicos que nos permitan implementar esta estructura de datos básica en lenguaje C. Se establece una precondición, en la cual, la estructura de datos debe de cumplir unas condiciones puesto que en caso de no hacerlo debería devolver un mensaje de error o simplemente salir de la función o procedimiento sin hacer nada; especifica que variables modifica y/o devuelve; y por último, explica qué devuelve o qué hace la función.

Primitivas p_[tip] pila_nueva (); Postcondición: Devuelve una pila nueva que no contienen ningún elemento.

int p_[tip] pila_vacia ( p_[tip] p ); Postcondición: Devolverá un valor distinto de cero si la pila contiene algún elemento y cero en caso de que tenga alguno.

void pila_insertar ( p_[tip] *p, struct p_[tip]_typo e ); Precondición: Debe de haber memoria para el nuevo elemento. Modifica: *p Postcondición: Añade el elemento e en la pila *p.

void pila_elimina ( p_[tip] *p struct p_[tip]_typo *e ); Precondición: La pila, *p no podrá estar vacía Modifica: *p y *e Postcondición: Devuelve en *e el elemento que se ha sacado de la pila *p y a su vez lo elimina de la pila.

void pila_destruye ( p_[tip] *p ); Modifica:; *p Postcondición: Libera la memoria ocupada por la pila *p y a la salida *p apuntará a NULL.

p_[tip] pila_copia ( p_[tip] p ); Precondición: Debe de existir memoria disponible para el nuevo elemento; Postcondición: Devuelve una pila que es copia de la que se le pasa por argumento.

© 2013 - www.spanishdeveloperscommunity.es

37


según las necesidades del problema, puedan adquirir posiciones adicionales de memora y en caso de no ser ya útiles, tener la posibilidad de liberarlas. Esto permitirá que la estructura de datos crezca o disminuya dinámicamente. Las variables y estructuras de datos que reúnen estas condiciones se llaman dinámicas y se representan con la ayuda de un nuevo tipo de dato denominado puntero, esto es aquella variable que indica ( o que almacena ) la dirección de memoria ocupada por otro dato. Los punteros, pues, establecen los enlaces de unión entre los elementos de la estructura permitiendo que en tiempo de ejecución éstas estructuras puedan variar su tamaño. En las estructuras de datos dinámicas, a estos elementos se los suele denominar convencionalmente nodos, y que generalmente están construidos por estrucutras ­o registros­, que contienen el tipo de dato y la información de la dirección al siguiente elemento, esto es, un puntero.

Listado 1 ­ módulo de cabecera #ifndef PILA_[tip]_TYPO #define PILA_[tip]_TYPO struct p_[tip]_typo { int x; }; typedef struct p_[tip]_typo *p_[tip]; p_[tip] pila_nueva (); int pila_vacia ( p_[tip] p ); void pila_insertar ( p_[tip] *p, struct p_[tip]_typo e ); void pila_elimina ( p_[tip] *p, struct p_[tip]_typo *e ); void pila_destruye ( p_[tip] *p ); p_[tip] pila_copia ( p_[tip] p );

La utilización de los punteros ­y cada lenguaje de programación los implementa de una forma particular­, permite que el uso y la construcción de estas estructuras sea muy sencilla. Dependiendo de la relación que exista entre estos nodos hablaremos de estructuras lineales y no lineales. Para empezar con esta serie ocupada por esta estructura de datos y una serie de operaciones, dedicada a la programación de estructuras de datos ­en particular realmente muy básicas, que inserta un elemento en la Pila, saca usando C como lenguaje de programación­, comenzaremos por un elemento de la Pila y crea una copia exacta de la pila. la que posiblemente sea la más sencilla: la Pila. Posiblemente el procedimiento más complejo sea el de copiar la La Pila, como decimos, y como se puede apreciar en los listados pila, no obstante, hay siempre que tener cuidado con los 1 y 2 anexos a este artículo, es una estructura de datos muy procedimientos de insertado y borrado de la Pila a fin que básica. En nuestro caso, hemos construido una pila de números cumpla con la política LIFO. enteros; dejamos a la imaginación del lector generalizarla. Las operaciones principales de la Pila, es decir, insertar elementos y sacar elementos responden a la regla LIFO, es decir, primero en entrar, último en salir. Evidentemente este comportamiento responde a cualquier pila que podáis encontar en el mundo real. Acompañando al código, existe una especificación de la estructura de datos en las que se especifica no sólo las operaciones que vamos a definir en la estructura ( funciones y procedimientos ), sino también las condiciones previas que se deberán cumplir ­en caso de no hacerlo se derivaria a un mensaje de error y se saldria del programa­, las variables que son modificadas y, por último las variables que devuelven el procedimiento o función, si es que devuelve alguna y que podría ser o la estructura de datos misma o un dato primitivo. Las operaciones con que vamos a dotar a esta estructura van a ser las siguientes: una función constructora que inicializa la Pila a NULL, es decir, la declara vacia. Una función auxiliar que comprueba si la pila está o no verdaderamente vacía, y devuelve como resultado un booleano ( verdadero o falso ). Un destructor, o dicho de otro modo, un procedimiento que libera la memoria

38

En general la variable Pila siempre apunta al primer nodo que corresponde con el último elemento insertado, de forma que es relativamente sencillo ­en esta ocasión­ insertar y sacar un elemento, pues tan sólo habra que tener en cuenta que exista memoria para el nuevo elemento a insertar y actualizar la posición del puntero inicial al nuevo nodo, haciendo que este nuevo nodo apunte al que anteriormente ocupaba la primera posición. Para sacar un nodo de la Pila tan sólo tendremos que actualizar el puntero principal al siguiente elemento del que ocupa la primera posición en la estructura y liberar la memoria del elemento que desechamos. En proximas ediciones complicaremos un poco esta estructura permitiendo que ya no sólo el dato primitivo sea un entero, sino que pueda ser cualquier dato proporcionado por el lenguaje de programación C.

© 2013 - www.spanishdeveloperscommunity.es


Listado 2 #include <stdlib.h> #include <stdio.h> #include "pila[tip].h" struct p_[tip]_ele { struct p_[tip]_typo val; struct p_[tip]_typo *sig; } /* -----------------------------p_[tip] pila_nueva ( ) { return NULL; } /* -----------------------------int pila_vacia { p_[tip] p ) { return ( p==NULL); } /* -----------------------------void pila_destruye ( p_[tip] *p ) { p_[tip] viejo; while ( *p ) { viejo = *p; *p = viejo->sig; free ( viejo ); }

p_[tip] viejo; if ( pila_vacia ( *p ) ) { fprintf (stderr, "pila_insertar: la pila estĂĄ vacia\n"); exit(1); } viejo = *p; *e = viejo->val; *p = viejo->sig; free ( viejo ); } /* -----------------------------p_[tip] pila_copia ( p_[tip] p ) { p_[tip] b, corr, viejo; b = NULL; if ( p ) { nuevo = (struct p_[tip]_ele * ) malloc ( sizeof ( struct p_[tip]_ele )); if ( !nuevo ) { fprintf (stderr, " pila_copia: no hay memoria\n" ); exit (1 ); } nuevo->val = p->val; b=corr=nuevo; p=p->sig; while ( p ) { nuevo = (struct p_[tip]_ele* ) malloc (sizeof(struct p_[tip]_ele

} /* -----------------------------void pila_insertar ( p_[tip] *p, struct p_[tip]_typo e ) { p_[tip] nuevo; nuevo=(struct p_[tip]_ele *) malloc(sizeof ( struct p_[tip]_ele )); if ( !nuevo ) { fprintf (stderr, "pila_insertar: no hay memoria\n"); exit(1); } nuevo->val = e; nuevo->sig = *p; *p = nuevo; } /* -----------------------------void pila_elimina ( p_[tip] *p, struct p_[tip]_typo *e ) { Š 2013 - www.spanishdeveloperscommunity.es

)); if ( !nuevo ) { fprintf ( stderr, "pila_copia: no hay memoria\n" ); exit ( 1); nuevo->val = p->val; corr=corr->sig=nuevo; p=p->sig; } corr->sig = NULL; } return ( b ); }

39


Laboratorio práctico

¿Cómo evitar que utilicen tu wifi sin pemiso?

Una de las situaciones más complicadas y desagradables que pueden vivir la mayoría de los usuarios de red Wifi es que algún intruso sin ningún tipo de escrupulos consiga entrar y utilizarla sin permiso. Ésta situación es, además, una situación mucho más real y habitual de lo que pudiera pensarse, de hecho, se pueden encontrar en Internet cumplida información de sistemas para saltarse las medidas de seguridad de una red inhalambrica privada y, por tanto, emplearla como si fuera tuya. Y, aunque muchos usuarios pudieran pensar que lo pero que puede pasar es que la conexión a Internet vaya más lenta, se equivoca completamente; el problema es muy grave y peligroso ya que éste agujero de seguridad puede servir para fisgar los documentos que tengas almacenados ­por ejemplo, puede según la configuración que tengas acceder a tu carpeta Mis Documentos y fisgar el contenido de esta carpeta­, cuando más, ser el responsable de delitos en Internet realizados por terceros, cuestiones que, por muy pocos conocimientos técnicos tengas, el sentido común te dice que es algo que debes evitar. Otra cuestión a tener en cuenta es que, a diferencias de otros ataques referidos a la seguridad, este tipo de ataque es muy sencillo y puede ser realizado por cualquiera sin demasiados conocimientos informáticos. Basta con descargarse algunos de los programas que hay pululando por Internet y tras unos pocos minutos, has roto toda la seguridad y has entrado en Internet y en los datos

40

privados de otra persona. Todo no va ha ser malas noticias, por si te has asustado, tengo que decirte que sí hay solución a este problema o al menos dificultar mucho a los posibles intrusos la tarea. Tan sólo es necesario realizar algunos ajustes en tu router wifi y, en pocos minutos, habrás cerrado la puerta a los que pretendan colarse en redes ajenas. Te lo vamos a explicar paso a paso.

como podemos entrar en la cofiguración del router

Verás lo sencillo que es hacer esto, no necesitarás herramientas de ningún tipo. Entiende que si tienes una conexión telefónica, es posible que este sistema no funcione. La razón de ello es que desde hace poco, los routers se gestionan directamente desde una página web de la propia compañia. Por ello, si no has cambiado recientemente de router prueba primero esto. Lo primero que tienes que hacer es averiguar tu dirección IP y la del router. Deberás encontrar los datos IPv4 y Puerta de enlace predeterminada. ¿cómo hacerlo?. Bueno es fácil encontrar en Internet tutoriales a propósito de esta cuestión pues dependiente del sistema operativo que utilices la forma de acceder a estos sistemas no es en absoluto complicada. Habitualmente, el primero será parecido a 192.168.1.n y la segunda 192.168.1.1. Bien, la primera corresponde a la dirección IP de tu ordenador y la del router de © 2013 - www.spanishdeveloperscommunity.es


tu red wifi. No está de más tomar nota del apartado denominado Dirección Fija que consistirá en seis bloques de dos caracteres. Esa es la dirección MAC que emplearemos más adelante para proporcionar más información, si cabe, en la red. ¡Comenzamos a trabajar!. Abrimos nuestro navegador favorito y escribimos en la barra de direcciones la IP del router que como hemos comentado, podrá tener la forma 192.168.1.1 y pulsamos ENTER. En este momento, quizás, te solicitarán un password y un login para acceder a la configuración del router. Puedes encontrar esta información en la documentación que acompañaba al router o simplemente en Internet. Puedes probar a escribir "admin" en ambos casos, ¡fijate lo sencillo que es romper la seguridad de un router!. En caso de que hayas contratado recientemente una conexión inhalambrica a Internet a través de la compañia española Movistar, o si tienes contratado el paquete de televisión ( el antiguo Imagenio ), entonces entrás que hacer uso del portal Alejandra de este operador. Tan sólo tendrás que escribir en la barra de direcciones de tu navegador http://www.movistar.es/configuracionrouter y, en la página que te aparece tendrás que hacer click en la opción Acceso a configurar tu router. El siguiente paso es escribir tu número de telefono de la linea fíja y tus claves de acceso a la web ( puedes pedirlas a través del número de información 1004 ).

¿qué tipo de cifrado tienes?. WPA o WEP

Ya estamos dentro del panel de configuración de nuestro router. El aspecto de la organización de la interfaz y los menus que encontrarás depende del fabricante y los modelos de router, aunque, por lo general, se parecerán bastate y siempre encontraras fácilmente los apartados que vamos a ir describiendo en las siguientes líneas. Lo primero que tenemos que comprobar es el tipo de cifrado, es decir, el sistema de seguridad que emplean los datos que van ha ser transmitidos a nuestros ordenadores tablets, móviles ... etc. El sistema más antiguo es el denominado WEP. El problema que tiene este sistema es que es bastante inseguro hasta el punto de que un sistema de este tipo y que mantenga el nombre de red y la contraseña original es practicamente como si se dejara directamente abierto. En cambio, el sistema WPA ofrece una mayor seguridad aunque, claro, no es completamente irromplible. La recomendación que hacen los entendidos es que si tienes la posibilidad en tu sistema de elegir el sistema WPA, ¡lo hagas!, y si dispone adicionalmente WPA2, ¡sin duda!, escoge este sistema por que te dará una mayor seguridad. En aditamento, modifica la contraseña de tu router. Hay completos y complejos manuales en

© 2013 - www.spanishdeveloperscommunity.es

Internet, siempre asociados a criptografía en los que te dan claves muy útiles para crear tu contraseña e incluso como cambiarla y cuando. ¿Qué ocurre si no dispongo de estos sistemas en mi router?. En caso de que no se te de opción a utilizar esta medida por que el router que estés utilizando sea un modelo antíguo, o bien, no sean compatibles, en ese caso, mantén el sistema WEP, pero no olvides en modificar la contraseña y, a continuación, busca en el apartado de configuración la opción que te permita modificiar el SSID de tu red, esto es, el nombre de tu red. Este es, posiblemente, el agujero más grande en la seguridad de las redes wifi, puesto que su nombre por defecto permite encontrar su contraseña por defecto.

consideraciones finales

Por último, es sistema más fiable para proteger una red, o posiblemente uno de los más fiables, es utilizar la llamada función de filtrado por MAC. La dirección MAC es un conjunto de números que identifican de manera unívoca a un dispositivo. Por ello, lo que tienes que hacer es localizar el apartado en el menú de configuración de tu router cuyo nombre sea flitrado por MAC y, a continuación, introducir en el mismo la dirección MAC del ordenador en el que estás realizando los ajustes, teniendo en cuenta que deberás sustituir los guiones que separan los grupos de números por dos puntos (:). De esta forma, tu red wifi estará protegida. ¿Y qué pasa si reinicio o reseteo mi router?. La duda es saber si estos cambios permanecen despues de un corte de luz o, por ejemplo, por olvido de la contraseña, te ves obligado a resetear el router. En el primer caso los cambios que hemos descrito en este artículo se mantendrán en el dispositivo. No obstante, en el caso del reseteo, el dispositivo volverá a los valores definidos desde fabrica, por tanto, tienes claro de que vas a perder todos los cambios que has hecho y tu sistema se volverá inseguro. En éste último caso, te verás obligado a repetir todo el proceso para evitar que entren en tu wifi. Evidentemente, verás que el proceso será mucho más fácil que la primera vez y probablemente, en menos de cinco minutos lo volverás a tener todo debidamente ajustado en función de tus preferencias de seguridad.

recursos en internet

Puedes encontrar más información sobre esta cuestión en la página web que la operadora española Movistar ofrece para resolver este tipo de cuestiones: http://comunidad.movistar.es/t5/Ayuda­T%C3%A9cnica­de­ Movistar­Banda/WiFi­FTTH­Movistar/td­p/173968

41



Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.