Si lo puedes soñar, lo puedes programar

domingo, 17 de septiembre de 2017

Power BI


Tras analizar distintas herramientas, me decido por Power BI.

A través de  microsoft se puede realizar un curso gratuito, aunque también los hay de pago por la web.

Los siguientes posts, irán dedicados a un curso que estoy elaborando para Udemy, donde aprenderemos que es Power BI, como importar datos externos y crear nuevos informes y paneles.

Este es el resultado de unos informes realizados en Power BI.



Share:

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:

Blogroll

BTemplates.com

Con la tecnología de Blogger.

Banner

Banner

Google+ Followers