Si lo puedes soñar, lo puedes programar

domingo, 14 de junio de 2015

Repasando Bootstrap

Bootstrap como sabemos, es un framework de Twitter que nos permite crear interfaces Web con estilos CSS y librerias Javascript y que adaptan la interfaz web, dependiendo del tamaño del dispositivo en el que se visualice, esto se llama  diseño adaptativo o Responsive Design, automáticamente se adapta al tamaño de un ordenador o de una Tablet, es muy utilizado por las empresas y demandando por los clientes.
Los diseños creados con Bootstrap son simples, limpios y <<useful>> fáciles de utilizar, esto les da agilidad a la hora de cargar y se adaptan rápido a los dispositivos. En mozilla firefox podemos ver el resultado en distintos tamaños de pantalla, mientras estamos en fase de pruebas.

El Framework posee varios elementos con estilos predefinidos muy fáciles de configurar, como:
  • Menus desplegables
  • Botones
  • Formularios incluyendo todos sus elementos e integración jQuery para ofrecer ventanas y tooltips dinámicos.
Descarga Bootstrap 3.3.4

Desde Junio del año pasado no había utilizado Bootstrap y han cambiado algunas cosas, así que ahora que dispongo de un poco mas de tiempo, haré algunas pruebas. De momento estoy implementando un formulario de contacto, la interfaz ya está hecha y he pasado a la parte de programación con JQuery y Php.


Captura formulario

Para realizar este diseño he creado un documento HTML5 desde cero y una hoja de estilos propia que sustituye y modifica algunas propiedades y clases que me proporciona Bootstrap por defecto.

Como este ejemplo es para repasar, el código contiene excesivos comentarios que en un proyecto no deberían figurar. 

Código Html:

<!DOCTYPE html>
<html>
    <head>
        <!-- Etiqueta que me permite los diseños adaptables de Bootstrap, la escala inicial 1.0 1 px x pixel  -->
        <meta name="Viewport" contente="width=device-width, initial-scale=1.0">
        <meta hhttp-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Declaramos o adjuntamos la hoja de estilos de bootstrap -->
        <link rel="stylesheet" type="text/css" href="framework/css/bootstrap.css">
        <!-- Declaramos o adjuntamos la hoja de estilos propia que modifica a los de Bootstrap -->
        <link rel="stylesheet" type="text/css" href="framework/css/style.css">
        <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type="text/css">
        <title>Document</title>
    </head>
    <body>
        <!-- Creamos un divisor/contenedor para el formulario div.ibody+tab nos pone el div con la clase -->
        <div class="ibody">
            <!-- Encerramos esta parte del encabezado dentro de otro divisor-->
            <div class="jumbotron">
                <h1>Contacta</h1>
            </div>
            <!-- Creo un divisor para separar el formulario del borde  -->
            <div class="fcontacto">
                <!-- Encierro en un divisor la imagen para centrarlo div.logo-->
                <div class="logo">    
                     <!-- Pondré un logotipo con img+tab-->
                    <img src="img/ic_devmanager_future.png" alt="Contacto">
                </div> 
                    <!-- Formulario con la acción hacia la misma página, con un método POST -->
                    <form method="POST" name="fcontacto" id="fcontacto" action="./">
                        <!-- Creo un contenedor llamado row para poder usar el grid/grillas de Bootstrap -->
                        <div class="row">
                            <!-- Creo otros  2 contenedores dentro para las columnas  div.col-md-6, esto lo que 
                            hará será dividir el espacio del row en 2 partes, ahorra espacio y da visibilidad-->
                            <div class="col-md-6">
                                <!-- Creo varios labels con sus respectivos input. label*3+tab, 
                                ponemos la clase a nuestros input, para ponerla en todos a la 
                                vez ctrl y click en cada tag, creo los punteros.-->
                                <label>Nombre:</label>
                                <!-- Aplicamos la clase form-control de Bootstrap q aplica estilo a los formularios-->
                                <input type="text" name="name" id="name" class="form-control">
                            </div>
                            <!-- Como son dos columnas metemos este también dentro de un div class col -->
                            <div class="col-md-6">
                                <label>Email:</label>
                                <input type="text" name="email" id="email" class="form-control">
                            </div>
                        </div>

                        <label>Asunto:</label>
                        <input type="text" name="subject" id="subject" class="form-control">
                        <label>Mensaje:</label>
                        <textarea name="message" id="message" cols="30" rows="10" class="form-control"> 
                        </textarea>
                        <!-- Boton enviar con su clase bootstrap btn btn-info que es color blue, texto -->
                        <input type="submit" class="btn btn-info" value="Enviar">
                     </form>
             </div> <!--cierro divisor fcontacto-->         
            </div>
    </body>
  </html>  


CSS


/*Lo primero es resetear todos los márgenes de los tags a 0, ya que algunos llevan su margen y padding*/

*{

    margin: 0px;

    padding: 0px;

}



body{

    background-color: #f0f0f0;/*cambio el color de fondo para que no sea tan blanco*/
    color: #4c4c4c;/*cambiamos el color de la letra*/
    font-family: 'Asap', sans-serif;
    font-size: 14px;/*tamaño de la fuente*/
}
/*tag label y tag input*/
label, input[type="submit"]{
    margin-top: 6px;
}
/*Creo la clase ibody*/
.ibody{
    background-color: #ecf0f3;
    border: 1px solid #bfd8eb;/*borde del formulario*/
    border-radius: 8px ;/*Los 4 Bordes redondeados*/
    margin: 30px auto;/*Margen 30px sup e inf. Izq y dcha auto*/
    width: 500px;/*Ancho*/
    /*Importante la compatibilidad*/
    -webkit-border-radius: 8px ;
    -moz-border-radius: 8px ;
}
/*Agregar/reemplazar  Características del css de Bootstrap que viene por default*/
.jumbotron{
    background-color: #bfd8eb;/*Color de fondo al encabezado*/
    border-radius: 8px 8px 0px 0px ;/*Sup dcho y sup izq de 8px los inf a 0*/
    margin-bottom: 0;/*Al colocar la imagen veo que tiene mucoh margen y se me queda separada, lo pongo a 0*/
    padding: 16px;
    /*Importante la compatibilidad*/
    -webkit-border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
}

.jumbotron h1{
    color: #77a5c7;/*Cambio color de la letra de los h1 de dentro del jumbotron*/
    font-size:  36px;/*Bajamos el tipo de letra*/
    text-align: center;/*Queremos que lo centre*/
    text-shadow:0px 1px #fff;/*Sombra del texto: ejex 0 eje y 1px y el color*/
}
/*Creo la clase fcontacto del formulario y el divisor*/
.fcontacto{
   padding: 14px;
}

/*Contenedor del logo*/
.logo{
    margin-bottom: 6px;/*Para que no se escape*/
    text-align: center;/*Centrar todo con la propiedad text-align*/

}


Share:

lunes, 8 de junio de 2015

Proyecto 6 PMM - Acceso a datos con SQLite

Hemos ampliado nuestro proyecto 5 Menú de entrada. Las modificaciones y añadidos son:
Ahora accedemos a nuestra cámara a través del api proporcionado por Android, además de guardar la captura a nuestra tarjeta externa.
Uno de los aspectos más interesantes en el desarrollo es el uso de acceso a base de datos relacionales. Android posee SQLite, y haremos acceso al mismo.
A partir de la creación de nuestra base de datos y acceso a la misma, incorporaremos los datos a un ListView






Objetivos:

Usar Activities.
Usar ProgressBar.
Usar Helper
Usar SQLite
Uso ListView


Pasos a seguir:

1. Crearemos un Intent que llame a la cámara de nuestro dispositivo.
2. Guardaremos el resultado en un Fichero de nuestro dispositivo.
3. Generamos la adaptación del helper que hará uso de nuestra base de datos.
4. Crearemos el objeto.
5. Generamos la lectura de datos.
6. La incorporamos en un SimpleAdapter.
7. Lo mostramos en el SimpleAdapter.
Share:

Proyecto 5 PMM - Menú de entrada


Ampliaremos nuestro programa a una pantalla de configuración del sonido de nuestra app.

Utilizaremos SoundPool y otra clase para la reproducción del sonido, MediaPlayer, una clase que permite más posibilidades, pero que a su vez es más compleja.

Objetivos:

Modificar Manifiest
Crear Splash screen
Crear pantalla de inicio
Crear pantalla de settings
Usar Activities
Usar Timer y Task
Sharedpreferences
Usar AudioManager
Usar SoundPool




Pasos:
1. Crear Splash screen
2. Crear pantalla de inicio
3. Crear pantalla de settings.
4. Crear y recuperar opciones de usuario a través de SharedPreferences
5. Usar AudioManager y SoundPool para hacer sonar una pequeña melodía.
Share:

Proyecto 4 PMM - Splash screen

Empieza el trabajo con Android Studio, mas adelante le dedicaré un post entero para el, ya que se ha convertido en el IDE preferido para desarrollar Android.


En esta actividad, realizaremos un Splash screen como indica el título de la entrada, crearemos una pantalla de inicio que dará paso automáticamente a nuestra pantalla de programa

Los objetivos de este proyecto son:

Modificar Manifiest.
Usar TimerTask, Task.
Conocer las resoluciones.


Pasos a seguir:

1. Crear dos Activities.
2. Uno de ellos nos servirá de presentación con un ImageView.
3. Usando TimerTask pasaremos de una a otra actividad.

Share:

Proyecto 3 PMM - Listado Amor-Odio

Para realizar esta aplicación, crearemos un Activity con dos Fragments donde uno de ellos contendrá un ListView de selección.



Los objetivos són:

Usar Fragments.
Usar ListView, ListActivity.
Listeners sobre ListView.
Crear adapter propio.


Pasos seguidos:

1. Crear un Activity en blanco.
2. Crear dos Fragments (Sup,Inf).
3. El Fragment Superior será un FragmentList.
4. Crear el Adaptador customizado y también el layout.
5. Crear los métodos para controlar onClick.

Si alguien quiere ver el código, se puede poner en contacto a través de Google+.




Share:

14 "Desarrollo de Interfaces" Empaquetado de aplicaciones con WIX

El objetivo de esta actividad es practicar la creación de paquetes de instalación utilizando herramientas como WiX (se puede utilizar otra herramienta a consideración del alumno).
Para ello, se propone crear un instalador para una aplicación que contenga un fichero ejecutable (por ejemplo Tritón).





Link al Vídeo
Share:

13 "Desarrollo de Interfaces" Docbook y Latex

El objetivo de esta actividad es practicar el diseño de documentos utilizando Docbook. 
Para ello, se propone realizar una guía rápida para una aplicación. Esta guía rápida debe ser un documento de tipo artículo en dónde se explique brevemente la aplicación y la funcionalidad básica que nos ofrece sin entrar en detalles. Se puede desarrollar una guía para la aplicación Tritón
desarrollada en la Unidad 3.


El objetivo de esta actividad es practicar opciones avanzadas de edición de documentos.
Para ello, se propone realizar un manual más complejo, donde se detalle información de configuración o instalación de alguna aplicación.


El objetivo de esta actividad es practicar la edición de documentos en Latex. Para ello, se propone realizar un documento en un entorno Latex.

El propósito del documento es abierto, sin ningún fin concreto más que el de describir cómo se ha creado el documento.






Share:

12 "Desarrollo de Interfaces" Crystal Reports

El objetivo de esta actividad es practicar con Crystal Reports el diseño de informes. Para ello, se propone que se diseñe un informe para mostrar una factura. 


En primer lugar, se creará una BBDD con una tabla Conceptos que representarán conceptos individuales que pueden estar incluidos en una factura.

Cada concepto tendrá un identificador, descripción, precio unitario y cantidad. En el formulario deberá aparecer un listado de todos los conceptos con su precio unitario y su cantidad, y además, para cada concepto deberá aparecer un total.


Share:

11 Actividad "Desarrollo de interfaces" Aplicación de escritorio para Gestoría

El objetivo de esta actividad es conocer las pautas de diseño para realizar interfaces usables "useful" y saberlas aplicar en el diseño de interfaces.
Una gestoría dispone de la aplicación  x 99 con la que trabaja a diario. Esta aplicación funciona correctamente, pero tiene unas características de diseño que hacen que sea poco usable: aspecto antiguo, combinación de colores extraña, funcionalidad que no se sabe para qué, muchos botones para hacer cosas, etc.

Después de visualizar un video explicativo de lo que necesita la empresa, realizaremos la aplicación de escritorio.

Para ello utilizaremos C# y Visual Studio.

- La interfaz será valorada por los compañeros, que actuarán como expertos desarrolladores, siguiendo los criterios vistos, y también por los usuarios de la empresa real, que serán los expertos del dominio.

Dado que en esta aplicación he utilizado distintas pantallas y en la actividad saqué muy buena nota, voy a colocar varias capturas y el vídeo de demostración.
Menu Archivo - Exportar 

Mantenimiento de clientes

Mantenimiento de clientes desplegado


Trámites consulta clientes

Herramientas - Calculadora

Acerca de



El nombre de la aplicación nos fue proporcionado, el diseño de los iconos tendría que haber sido mas sobrio ya que iba destinado a una empresa, pero de esto último no tenía conocimiento y la diseñé mas informal. Aún así quede muy contenta con el resultado, trabajar con Visual Studio facilita mucho el desarrollo. 
Link de acceso al vídeo



Share:

10 Actividad "Desarrollo de interfaces" ActionBar

El objetivo de esta actividad es practicar los distintos views ofrecidos por Android.
Para ello, se propone realizar una interfaz sencilla en donde se utilicen tres views y que implementen la siguiente funcionalidad:

- Uno de los views permitirá cambiar el color de fondo.
- Otro de los views permitirá que algún view de la interfaz desaparezca (por ejemplo, un CheckBox que si está marcado hace que aparezca un TextView con un mensaje y si está desmarcado este TextView no se muestra).
- Otro de los views realizará alguna acción cuando se mantenga una pulsación
larga sobre él.


Share:

9 Actividad "Desarrollo de interfaces" - Dividir Action Bar Android

El objetivo para esta actividad es utilizar la Action Bar en la pantalla Android.
Se plantea que se pruebe alguna opción adicional como dividir la ActionBar o usar pestañas.


Video explicativo disponible en Youtube:

Actividad Dividir ActionBar
Share:

8 Actividad "Desarrollo de interfaces" Menús en Android

Para esta actividad, hemos estudiado los distintos tipos de menús que existen en Android.

El objetivo es realizar una interfaz sencilla de temática libre, pero que contemple el uso de options menú, context menús y submenús.







Share:

7 Actividad "Desarrollo de interfaces" - Layouts: RelativeLayout y GridLayout

Continuando con los Layouts en Android, realizamos la siguiente actividad.

El layout principal estará compuesto de dos layouts, uno de tipo  RelativeLayout para álbumes y otro de tipo GridLayout para fotos .
- El marco que envuelve a cada álbum tiene un ancho de 10dp.
- El marco que envuelve los álbumes tiene un ancho de 10dp.
- El marco que envuelve las fotos tiene un ancho de 5dp.
- Opcional: si las fotos no caben en una página, se debe poder navegar hacia abajo y hacia arriba.      Observar como en la segunda imagen hemos desplazado hacia abajo lo que se ve, utilizando un ScrollView.


Share:

miércoles, 3 de junio de 2015

Proyecto final de grado



El proyecto final  DevManager, corresponde a la asignatura Proyecto de Desarrollo de Aplicaciones Multiplataforma del 2º y último curso de DAM.


La idea de este proyecto, surge de la necesidad de centralizar todos los accesos directos a blogs, así como a los perfiles de redes sociales, repositorios de Github y de paso, organizar todos los cursos que me encontraba siguiendo (de una forma un tanto desordenada).

Con los días y a medida que he ido avanzando en mis investigaciones, me han surgido nuevas ideas y necesidades para añadir al proyecto, con lo cual ha acabado convirtiéndose en un mini Manager para un developer Junior. 


En mi valoración personal del proyecto y contenido de la memoria, puedo decir que me siento muy satisfecha con el trabajo realizado. Existen otras dos razones de peso para mí, la primera es la satisfacción de finalizar el Grado, he logrado cerrar un ciclo, el de estudiante, para iniciar uno nuevo, el de ser profesional. La otra razón es la de haber realizado el proyecto sobre el tema que más me apasiona y me hace disfrutar, Android.

Durante el grado se aprenden diversas ramas de la informática y se profundiza más adelante en las que uno quiera, bien a nivel personal con nuestros propios medios, a nivel académico o cursos de formación.


Con el presente proyecto he profundizado en el lenguaje estudiado Android en la asignatura que me ha dado la libertad de elegir este tema, Programación multiplaforma, lo he realizado mediante dos formas, mis propios medios, investigando y documentándome sobre Android en Internet, y en menor grado con libros. 

Aquí dejo el link a una breve presentación y un video del funcionamiento de devManager.


Share:

domingo, 1 de marzo de 2015

6 Actividad "Desarrollo de interfaces" - Layouts: LinearLayout

El objetivo de esta actividad es familiarizarse con el concepto de Layout en Android y concretamente, con LinearLayout. El diseño es lo de menos y el color...suavicé un poco
el tema colocando un degradado de azules, pues había que seguir mas o menos el diseño que nos proporcionaban.



- El layout principal estará compuesto de dos layouts, uno para los colores y otro para las columnas.
- El marco azul que envuelve los colores tiene un ancho de 5dp.
- El marco negro que envuelve al marco azul (hasta el borde de la pantalla), tiene un ancho de 10dp.
- Las líneas verdes del layout de las columnas tienen un ancho de 10dp.

Aquí me compliqué un poco la vida y al no conocer mucho el tema de los layouts, localicé un tutorial que ayuda a colocar bordes a las etiquetas (textViews), botones, etc... a través de recursos.


Ampliaremos esta entrada mas adelante si es necesario, pues me resultó interesante, pero dado que esta actividad la realicé con eclipse y actualmente utilizo Android Studio, puede quedar  obsoleta una explicación extra.
Share:

5 Actividad "Desarrollo de interfaces" - Interfaz Biblioteca - Motor BBDD MySQL


   El objetivo de esta actividad es crear una interfaz similar a la de la actividad 4 anterior, pero que acceda a una base de datos desarrollada en MySQL para mostrar los datos.

En la siguiente entrada se va a explicar mediante capturas de pantalla y lo más brevemente posible el proceso realizado para crear una aplicación con Visual Studio y c#, que mostrará la ficha de un libro contenido en una Base de datos.
Para ello previamente se ha instalado MySQL server y se ha creado una Base de datos con su información, así como una conexión desde Visual Studio.

Debido a mi inexperiencia,  se me ha complicado en bastantes horas la instalación de MySql he decidido documentar un poco los pasos que he seguido para solventar los errores que han ido surgiendo para poder consultarlo de forma rápida  aquí en futuras instalaciones.  Dado que el informe ocupa 15 páginas dejaré el pdf generado para su descarga. 



Instalación de MySQL y resolución de  problemas

           
 En primer lugar procedí a la Descarga MySQL desde Softonic y su conector desde MySQL:
(Esta es la versión 6.0, en MySQL se encuentra la 5.6)


Instalando MySQL 6.0:
En el Config Wizard, cuando llega al último paso y después de introducir nuestra  clave para el user root, Hay cuatro puntos que debe checkear la configuración. Al llegar al punto de Start Service me lo marca con una cruz en rojo y me dice que "no puede iniciar el servicio de MySQL".
SOLUCIÓN:
1-      Cancelamos instalación, desactivamos el AV y el firewall de Windows.
2-      Procedemos a reinstalar. Es posible que nos ocurra lo mismo de nuevo.
3-      Desinstalar de nuevo, acudir a botón de inicio y teclear regedit en el cuadro de búsqueda para acceder a modificar el registro.
4-       Dentro de SYSTEM-services-MySQL


5-      Cuando desinstalas MySQL no  borra la carpeta DATA incluida en C:\Archivos de programa\MySQL\MySQL  
Hay que eliminar esta carpeta y procedemos a instalar de nuevo, así ya no debe dar problemas.

Una vez instalado hay que abrir los puertos de nuestro firewall para MySQL, este durante la instalación nos ha indicado que utiliza el 3306.

Vamos a firewall-Configuración avanzada y añadimos nueva entrada.


Después de conseguir que finalice la instalación sin errores, al ejecutar el command Line Client (cmd o consola), me solicita el password de root, pero pese a indicarlo correctamente me cerraba la consola sacando el siguiente error. Capturado a través de vídeo pues se cierra ultra rápida la consola. 


Para solucionar esto hay que modificar una línea en el localhost



Para ello vamos a C:\Windows\System32\drivers\etc\hosts
Hay que editar la entrada que pone 0.0.0.0  localhost que es la que causa el problema, debe quedar así: 120.0.0.1

Esta realiza la resolución de DNS de host "localhost" a la dirección IP 127.0.0.1.
Reiniciamos el equipo y a funcionar.
Finalmente, volví a desinstalar de nuevo todo, eliminando registros y demás para poder realizar una instalación limpia de nuevo.

Para concluir este capítulo, recomiendo instalar MySQL desde

Creación de Base de datos

              

               En esta fase de del proyecto, es dónde comenzamos a crear. Damos vida a nuestra
DB, rellenando sus entradas con algunos datos que necesitaremos extraer.
                No he utilizado PhpMy Admin que nos permite una gestión gráfica, he decidido crear la DB a través del  Command Line Client (cmd o consola) para recordar un poco las sentencias SQL necesarias y practicar de esta manera esta forma manualmente.
            Para agilizar un poco las inserciones, he creado en mi NotePad++ (o cualquier editor de texto sirve), todas las sentencias que voy a introducir poco a poco en la consola.

Creamos la base de datos, y la tabla


Realizamos los inserts correspondientes y un select para ver que tenemos
en la tabla  ya introducido.



El resto del diseño de la interfaz y la conexión de MySql se puede visualizar en el informe disponible para descarga mas arriba. 

Para concluir, diré que estoy muy cómoda trabajando con Visual Studio y seguiré profundizando con el cuando el tiempo me lo permita. (My To do list is increasing!!). 

Share:

Blogroll

BTemplates.com

Con la tecnología de Blogger.

Banner

Banner

Datos personales