Fecha: Lunes 20 de Abril de 2009 y Miercoles 22 de Abril de 2009
Buenos, Básicamente lo que hicimos fue sentarnos a desglosar el proyecto en pequeños pedazos, lo más básicos y ver como se podrían modelar en una Base de Datos cada uno de esos pedacitos.
Tenemos dos tipos de usuarios:
Estudiantes
Profesores
Un Profesor puede:
Crear, modificar o eliminar una teoría.
Crear, modificar o eliminar Proyectos.
Crear, modificar o eliminar una Periodo Académico.
Crear, modificar o eliminar Secciones.
Consultar Alumnos.
Otorgar Privilegios de Proyectos a los Estudiantes.
Consultar Records.
Crear, Modificar o Eliminar su Perfil.
Un Estudiante puede:
Crear, Modificar o Eliminar su perfil.
Consultar la Teoría.
Consultar los Proyecto bajo los que tenga permiso.
Consultar Estadísticas Globales.
Consultar Estadísticas o record Personales .
Este fue el primer enfoque, en el cual creamos las tablas para ver como quedaría mas o menos la Base de Datos.
Luego de tener el primer modelo, nos sentamos a ver donde estamos redundando y cuáles son los posibles caminos de consulta y salió el segundo modelo de Base de Datos el cual está sujeto a más cambios en los próximos días.
El modelo va a crecer mucho mas pero este es una base de cómo se vería, esta prestado a crecer más por el lado de crear proyectos ya que no hemos puesto todas las posibles tablas que va asociadas a proyecto ya que no se ha planteado los componentes que van asociados a él y los posibles problemas de los mismos. Pero se estiman 10 tablas mas asociadas a proyecto.
Lo primero que debemos hacer para poder programar con los mapas de Google es bajarnos el api, el cual lo podemos encontrar en la siguiente dirección SDK Google Maps, luego necesitaremos una clave para poder usar el mapa de Google el cual podemos encontrarlo en esta página Google Maps Key, con estos dos requisitos estamos listos para jugar un poco con los mapas de Google, su página de ayuda tiene muchos ejemplos y cosas que podemos hacer sobre el mapa de ellos, esta ayuda la podemos encontrar en esta pagina Google Maps Doc.
The first thing we have to do to be able to develop with Google Maps is to download the API, this API we can find it in this link SDK Google Maps. The next thing we have to do to be able to use Google Map is go to a Google maps page and agree with some terms so we can get an Map Key we can get this Key in this link Google Maps Key. With these two things we are now ready to play a little with Google maps. Google Maps has a lot and very good info and doc’s and even better they have examples that can guide us through Google Map, this link is Google Maps Doc’s.
Como muchas veces no queremos lo que unos ofrece un API sino queremos jugar con varias cosas a la vez, con esto me refiero a que queremos botones más vivos tags que sean animados y aplicar nuestro propio toque a nuestras aplicaciones, Google nos ofreció algo maravilloso llamado OVERLAY un overlay traducido es una capa que se le coloca encima a algo. Los tags y las figuras básicas que ofrece Google son overlay pero Google dentro de esto nos ofrece el CUSTOM OVERLAY, ahí es donde entra nuestra imaginación. Esto lo podemos leer en la sección de ayuda de Google Maps en esta página Google Maps Custom Overlay.
Often we like to do something more complex than the API can provide, so we have to use other language to do so, with this am talking about nice buttons o tag over the map that we can animate easily or even breather, put own on touch in to the development in that we are best.
Google Offers us an tool inside the API called OVERLAY, the OVERLAY in nothing more than a layer that we can just put over the map and do most anything with it, so we can develop over custom and complex tags.
Google offers overlays so you can use their tag and some basic geometric figures, but our custom develops , you are going to use CUSTOM OVERLAY, all of Custom Overlays we can read it in this page Google Maps Custom Overlay.
En una página de adobe Daniel Terraza, un compañero de trabajo y quien me ayudo a programar este componente de prueba, vio unos tags en flex y se nos predio la luz de combinar estos tags con el Google Maps. Estos Tags los pueden conseguir en la página de Adobe como un componente simple, jajajaa cosa que para muchos principiantes en Flex no se les hará tan simple pero ellos dicen que es simple, les dejo la pagina (http://www.adobe.com/devnet/flex/samples/fig_callout/) . En tutoriales futuros hablaremos de Efectos y Transiciones, que fue como se logro este componente, hecho por Adobe, no vi el autor por ningún lado así que no lo menciono.
In a page of adobe Daniel Terrace, a fellow worker and who help me to program this map component, he saw these tags in flex and we thought that way not we out booth together, the tags with Google Maps. We can obtain this Tags in the page of Adobe like a simple component, Hear is the page (http://www.adobe.com/devnet/flex/samples/fig_callout/). In future tutorials we will speak of Effects and Transitions.
Los botones fueron Diseñados Melisa Correia, una compañera de trabajo, estos botones fueron creados usando AI y FL los cuales fueron importados como Skins usando las herramientas que brinda Adobe.
Los dos canvas con color degradado fue sacado de Gradient Canvas y su autor es Arnaud FOUCAL.
The buttons were designed Melisa Correia, a fellow worker, these buttons were created using AI and FL which were imported into flex like Skins having used the tools that Adobe offers.
The canvas with degraded color was found from Gradient Canvas and his author is Arnaud FOUCAL excellent Job me I say.
Este ejemplo se construyo para aquellas personas apasionadas por los relojes Binarios. Y si eres programado puedas construir tu propio reloj binario y colocarle un estilo personal al mismo.
El Reloj se construyo usando Flex 3, colocando de forma ordenada varios Check Box, los cuales se le creó un Skin en Flash CS3 y se importo el CSS a Flex para tener estos Check Box Verdes como se ven en el ejemplo.
This example was built for people passionate about watches binaries. And if you are scheduled you can build your own binary clock and place a personal style to it.
The clock was built using Flex 3, placing more orderly Check Box, which he created a skin in Flash CS3 and Flex CSS matter to have these Green Check Box as seen in the example.
Nota: Haz Click sobre el ejemplo, dentro de la zona gris claro.
Esto es una prueba de la librería APE Physis, les posteo el código el cual fue tomado en principio por un ejemplo posteado y fue modificado por nosotros para ver el desempeño de la librería.
Codigo:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#444444"
creationComplete="initApp()" verticalAlign="top" horizontalAlign="left" >
<mx:Script>
<![CDATA[
import flash.sampler.DeleteObjectSample;
import org.cove.ape.AbstractCollection;
import org.cove.ape.WheelParticle;
import org.cove.ape.RectangleParticle;
import org.cove.ape.AbstractParticle;
import org.cove.ape.Group;
import org.cove.ape.CircleParticle;
import org.cove.ape.Vector;
import org.cove.ape.APEngine;
[Embed(source='/assets/testApeLogo.swf', symbol='renito')]
[Bindable]
public var imgCls:Class;
private var contentHolder:Sprite=new Sprite();
private var defaultGroup:Group=new Group();
private var mousePosition:Point;
private var myTimer:Timer;
private function deleteObjects(e:TimerEvent):void
{
trace("TICK");
var len:int = defaultGroup.getAll().length-1;
var part:AbstractParticle;
for(var i:int =len; i>=0;i--){
trace((alto+100 < AbstractParticle(defaultGroup.getAll()[i]).position.y) + " "+(alto+100) +"<"+AbstractParticle(defaultGroup.getAll()[i]).position.y);
if(alto+100 < AbstractParticle(defaultGroup.getAll()[i]).position.y)
{
part = defaultGroup.getAll()[i];
defaultGroup.removeParticle(part);
delete(part as Object);
}
}
}
private function refreshTimer(e:TimerEvent):void
{
trace("NEW TIMER");
myTimer.removeEventListener(TimerEvent.TIMER,deleteObjects)
myTimer.removeEventListener(TimerEvent.TIMER_COMPLETE,refreshTimer);
myTimer.stop();
myTimer = null;
myTimer = new Timer(10*1000,Number.MAX_VALUE);
myTimer.addEventListener(TimerEvent.TIMER,deleteObjects);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE,refreshTimer);
myTimer.start();
}
private function initApp():void{
myTimer = new Timer(10*1000,Number.MAX_VALUE);
myTimer.addEventListener(TimerEvent.TIMER,deleteObjects);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE,refreshTimer);
myTimer.start();
spriteWrapper.addChild(contentHolder);
addEventListener(Event.ENTER_FRAME,run);
APEngine.init(1/3);
APEngine.container=contentHolder;
APEngine.addMasslessForce(new Vector(0,9.8));
defaultGroup.collideInternal=true;
ground=new RectangleParticle(viewScreen.width/2,viewScreen.height-40,viewScreen.width-50,40,0,true);
ground.setFill(0xCCCCCC);
defaultGroup.addParticle(ground);
APEngine.addGroup(defaultGroup);
viewScreen.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
ancho = viewScreen.width;
alto= viewScreen.height;
}
private var ground:RectangleParticle;
private var ancho:Number = 0;
private var alto:Number = 0 ;
private var hijos:int =0;
private function run(e:Event):void{
APEngine.step();
APEngine.paint();
if(hijos != defaultGroup.getAll().length){
hijos = defaultGroup.getAll().length;
trace(defaultGroup.getAll().length);
}
if(ancho != viewScreen.width || alto != viewScreen.height){
defaultGroup.removeParticle(ground);
ground=new RectangleParticle(viewScreen.width/2,viewScreen.height-40,viewScreen.width-50,40,0,true);
ground.setFill(0xCCCCCC);
defaultGroup.addParticle(ground);
}
}
private function addSelectedParticle():void{
var createdParticle:AbstractParticle;
if(radiobutton1.selected)
createdParticle=createCircle();
if(radiobutton2.selected)
createdParticle=createRectangle();
if(radiobutton3.selected)
createdParticle=createWheel();
createdParticle.setFill(itemColor.selectedColor);
defaultGroup.addParticle(createdParticle);
}
private function createCircle():AbstractParticle{
var circle:CircleParticle=new CircleParticle(mousePosition.x,mousePosition.y,circleRadius.value,isFixed.selected,myMasa.value,elastico.value,roce.value);
return circle;
}
private function createRectangle():AbstractParticle{
var rectangle:RectangleParticle = new RectangleParticle(mousePosition.x,mousePosition.y,circleRadius.value*2,circleRadius.value*2,0,isFixed.selected,myMasa.value,elastico.value,roce.value);
return rectangle;
}
private function createWheel():AbstractParticle{
var wheel:WheelParticle = new WheelParticle(mousePosition.x,mousePosition.y,circleRadius.value,isFixed.selected,myMasa.value,elastico.value,roce.value,1);
return wheel;
}
private function onMouseDown(e:MouseEvent):void
{
mousePosition=new Point(e.localX,e.localY);
addSelectedParticle();
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%" >
<mx:VBox backgroundColor="0xEEEEEE" cornerRadius="5" borderStyle="solid" borderThickness="1">
<mx:Form>
<mx:FormItem label="Forma del Objeto">
<mx:RadioButtonGroup id="particleGroup"/>
<mx:RadioButton label="Circulo" id="radiobutton1" groupName="particleGroup" selected="true"/>
<mx:RadioButton label="Cuadrado" id="radiobutton2" groupName="particleGroup" />
<mx:RadioButton label="Rueda" id="radiobutton3" groupName="particleGroup"/>
</mx:FormItem>
<mx:FormItem label="Masa">
<mx:NumericStepper minimum="1" maximum="100000" stepSize="1000" id="myMasa" value="1"/>
</mx:FormItem>
<mx:FormItem label="Radio/Ancho y Alto">
<mx:NumericStepper minimum="1" maximum="100" stepSize="5" id="circleRadius" value="20"/>
</mx:FormItem>
<mx:FormItem label="Constante de Elasticidad">
<mx:NumericStepper minimum="0" maximum="1" stepSize="0.01" id="elastico" value="0.3"/>
</mx:FormItem>
<mx:FormItem label="Constante de Roce">
<mx:NumericStepper minimum="0" maximum="1" stepSize="0.01" id="roce" value="0.01"/>
</mx:FormItem>
<mx:FormItem label="Color del Relleno">
<mx:ColorPicker id="itemColor" selectedColor="0xFF0000"/>
</mx:FormItem>
<mx:FormItem label="Afectado por la Fuerzas">
<mx:CheckBox id="isFixed" fontStyle="normal" fontWeight="bold" fontSize="14"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>
<mx:Canvas id="viewScreen" width="100%" height="100%" backgroundColor="#FFFFFF" backgroundAlpha=".3" borderStyle="solid" borderThickness="1" cornerRadius="5" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:Image rotation="-45" alpha="1" x="{viewScreen.width/2}" y="{viewScreen.height/2}" source="{imgCls}" horizontalAlign="center" verticalAlign="middle" />
<mx:UIComponent id="spriteWrapper" width="100%" height="100%"/>
</mx:Canvas>
</mx:HBox>
</mx:Application>
Existen varias librerías que ayudan a elaborar simulaciones físicas en el lenguaje de programación ActionScript 3.0 de los cuales vamos a probar los más atractivo, abrir los ejemplos que nos brindan y modificar el código un poco para hacer algunas cosas más de lo que hace el ejemplo que brindan las paginas para así tomar una decisión rápida sobre que librería nos conviene usar para el desarrollo.
Estas librerías básicamente usan algoritmos matemáticos que ayudan a disminuir los cálculos matemáticos o en su defecto mejorar la rapidez de los mismos para aumentar el performance y disminuir el retardo ocasionado por los cálculos matemáticos.
Librerías de Física para probar para el proyecto a desarrollar:
El titulo salió después de una larga discusión en la cual nunca llegábamos a nada y nuetra solución fue tomar la palabra FISICA y pasarla por un traductor en los cuales colocamos las traducciones en Alemán y Griego y le dejamos una parte en español que es nuestro idioma y el nombre para el desarrollo se distribuyo en:
Φ = letra Griega, la cual fonéticamente se pronuncia Fi.
Si = decidimos dejar el sí del castellano
K = y la letra k la sacamos al traducir física al alemán es la ultima letra que sale en la traducción.
Logo: Con el logo no está listo aun esto es un borrador, los colores que usaremos son azul y naranja debido a que:
Azul:
Naranja:
Este Borrador no tiene los colores exactos ya que es un borrador y fue como un pre diseño usando cualquier color para luego colocar bien los colores que son y la letra del título del proyecto no son los expuestos aun estamos viendo tipos de letras las cuales sea lo más acorde a nuestro deseo y sea representativo con lo que queremos presentar y resaltar a primera vista .
