Angel \”Java\” Lopez on Blog

April 6, 2015

Material Design, Links and Resources (1)

Filed under: Android, Links, Material Design, Mobile, We, Web Development — ajlopez @ 6:26 pm

Google Design
http://www.google.com/design/

callemall/material-ui
https://github.com/callemall/material-ui

Material Design
https://material.angularjs.org/#/

Material UI – Material Design React Components
http://callemall.github.io/material-ui/#/

7 Material Design Web UI Frameworks
http://superdevresources.com/material-design-web-ui-frameworks/

Material design with Polymer – Polymer
https://www.polymer-project.org/0.5/docs/elements/material.html

Paper Elements Sampler
https://www.polymer-project.org/0.5/components/paper-elements/demo.html#paper-checkbox

Quiz App
https://polymer-topeka.appspot.com/

Welcome – Polymer
https://www.polymer-project.org/0.5/

Documentation – Materialize
http://materializecss.com/

My Links
https://delicious.com/ajlopez/materialdesign

Stay tuned!

Angel “Java” Lopez
http://www.ajlopez.com
http://twitter.com/ajlopez

April 26, 2014

Applications Creating Applications

I was working in different approaches to make programs create more programs. This post is a brief review of the path I took in the past years/months/weeks, and that it is still work in progress. I think they are interesting ways of doing programming, to be explored.

Dynamic Applications

The idea is to describe an application (entities, some relations, some code), and run it in a web runner that knows how to interpreted the application definition. I wrote a first implementation for past year Knockout competition:

More info at Dynamic Applications in Node.js.

The application could be described in a simple structure (in this example, a simple JavaScript object that can be serialized to JSON). The same structure could be interpreted and run by different host applications: a web application, an SPA, a mobile app, etc. And it could be used as a seed to generate code in a “concrete” technology, like Sinatra, Express+MongoDB, etc.

Code Generation

One of my preferred topics. I created tasks, templates and free models to generate applications in Express, and in other technologies (Sinatra, Django, Flask, PHP, all work in progress). I have implementations in C#, Ruby and Node.js. But my latest work is on Node.js:

https://github.com/ajlopez/AjGenesisNode

You can have a simple example in:

https://github.com/ajlopez/AjGenesisNode-Express

Screenshots of a simple generated application:

 

And I’m working on creating an online site where you can describe the application (the free model, the features, databases, entities, web framework to use) and then download the generated application code.

Cards

In the project:

https://github.com/ajlopez/SimpleCards

I describe each application as a set of cards (a deck). A card can have simple values, or a another card or deck. For example, a card could have an id, a name, a title to be displayed, and additional info. A card could have another deck of cards as a property (ie an Chemical Elements card could have a deck with one card by element). They can be rendered in different context: a web application, a web application as a Single Page Application, a mobile app (in Phonegap, or native). One thing is the structure and content of a card, and another thing is the render of a card. The later depends on the context of the host application.

A simple example

https://github.com/ajlopez/SimpleCards/blob/master/samples/deck/js/model.js

var model = {
    title: "My Deck",
   
    cards: [
        { title: "Card 1", text: "This is the card 1" },
        { title: "Card 2", text: "This is the card 2" },
        { title: "Card 3", text: "This is the card 3" }
    ]
}

Another sample, with screenshots:

https://github.com/ajlopez/SimpleCards

A card content could be a simple text, a long text, an URL, an image, or a widget to be displayed by the hosted application (ie a Google Map). The card description could be static or could be generated on the fly (ie, a feed could be transformed to a card/deck, or it could be retrieved from a REST API). A card could have partial content (id, title), and a resolver can retrieve the rest of its content, using the id (ie, a card could represent a Wikipedia Page, and the id would be the URL; the resolver downloads the page content, and complete the card, if needed).

More fun is coming.

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

February 16, 2014

Programming Meteor (1) First steps

Filed under: JavaScript, Meteor, Mobile, NodeJs, PhoneGap, Programming, Web Development — ajlopez @ 7:21 pm

Yesterday, I attended to Meteor meetup at Buenos Aires, a half day of talks and coding. Thanks to organizers, sponsors and supporters: @areatreslab, @4residents, @bikestorming, @html5cat (he co-wrote a function analysis paper), @matikalwill (a.k.a. “my life is bikestorming, ‘senio’”).

Meteor is a framework to build web applications. And it can be used to build mobile applications, too. A meteor application, in general, is a single page application (SPA). The server is based on Node.js. But Meteor is not like another Node.js applications. Visit:

https://www.meteor.com/

The main difference: the programming language is JavaScript, AND CAN BE EXECUTED at server side or at client side. Yes, the same code. Or you can write code specifically created for client OR server side.

Meteor is based on seven principles:

http://docs.meteor.com/#sevenprinciples

  • Data on the Wire. Don’t send HTML over the network. Send data and let the client decide how to render it.
  • One Language. Write both the client and the server parts of your interface in JavaScript.
  • Database Everywhere. Use the same transparent API to access your database from the client or the server.
  • Latency Compensation. On the client, use prefetching and model simulation to make it look like you have a zero-latency connection to the database.
  • Full Stack Reactivity. Make realtime the default. All layers, from database to template, should make an event-driven interface available.
  • Embrace the Ecosystem. Meteor is open source and integrates, rather than replaces, existing open source tools and frameworks.
  • Simplicity Equals Productivity. The best way to make something seem simple is to have it actually be simple. Accomplish this through clean, classically beautiful APIs.

Notable, database state is shared by all clients at realtime. If your current view is a list of customer, and somebody adds a new customer to the MongoDB database (the supported database) all the clients are notified, and each view involving customers are automatically refreshed. All this without adding special code, simply using the code that lists customers in a page (using Handlebar as the template engine).

Although based on Node.js, Meteor is not an NPM package. It should be installed manually, read:

http://docs.meteor.com/#quickstart

It can installed in Linux/Unix and Mac boxes. Supported platforms at:

https://github.com/meteor/meteor/wiki/Supported-Platforms

But if you have Windows (I used Windows in the meetup) you should use another approach:

http://win.meteor.com/

There are Vagrant –based solutions, too. I installed using the LaunchMeteor.exe without problems, in two Windows machines.

I read:

http://docs.meteor.com/#structuringyourapp

A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.

The only server assets are JavaScript and files in the private subdirectory. Meteor gathers all your JavaScript files, excluding anything under the client, public, and private subdirectories, and loads them into a Node.js server instance inside a fiber. In Meteor, your server code runs in a single thread per request, not in the asynchronous callback style typical of Node. We find the linear execution model a better fit for the typical server code in a Meteor application.

My emphasis. This is a sensitive issue: I’m not sure about the implications of such run strategy. Check my links

https://delicious.com/ajlopez/meteor,scalability

Meteor has an unofficial package manager, called Meteorite:

http://oortcloud.github.io/meteorite/

and “smart packages”

https://atmosphere.meteor.com/

I read:

http://docs.meteor.com/#usingpackages

In addition to the packages in the official Meteor release being used by your app, meteor list and meteor add also search the packages directory at the top of your app. If you’ve downloaded an unofficial package from Atmosphere you should unpack it into that directory (the unofficial Meteorite tool streamlines this process). You can also use the packages directory to break your app into subpackages for your convenience — if you are willing to brave the fact that the Meteor package format is not documented yet and will change significantly before Meteor 1.0…

Meteorite is not running on Windows, so you should use only the builtin packages or use a manual install.

There are many resources to learn Meteor:

https://www.meteor.com/learn-meteor

For example, there are easy ready to use examples:

https://www.meteor.com/learn-meteor

During yesterday meetup, I tried some examples, modify and simplify the leaderboard example, add a Bootstrap 2.x top bar, and started to write a new one using many pages and MongoBD (using Backbone routing):

https://github.com/ajlopez/MeteorSamples

Many links with tutorials, videos, examples at:

https://github.com/ajlopez/MeteorSamples#references

The CRUD sample (work in progress) at:

https://github.com/ajlopez/MeteorSamples/tree/master/mycompany

It uses only builtin packages so you can run it as is from Windows.

Yesterday, I published some Meteor-related links. More links at:

https://delicious.com/ajlopez/meteor
https://delicious.com/ajlopez/meteor,tutorial

Ah! Meteor can run in PhoneGap, to have a multi-device mobile experience:

https://delicious.com/ajlopez/meteor,phonegap

My plan: after finishing the mycompany sample, use the base code to generate an AjGenesis module for Node.js. So, I will have code generation of web sites, using a free defined model, tasks and templates. Then, add phonegap support, and maybe, software as a service, using Node.js access to PhoneGap Build API.

More fun is coming.

Keep tuned!

Angel “Java” Lopez
http://www.ajlopez.com
http://twitter.com/ajlopez

August 28, 2009

Augmented Reality in IPhone Application

Filed under: Augmented Reality, Interface, Mobile — ajlopez @ 9:18 am

These are exciting days to IPhone Applications. The API to Augmented Reality support in IPhone it will be released with the next version of the IPhone Operating System. But there are some applicactions now using the new features.

One (possible the first) application is the Paris Metro Subway app:

Yesterday, Robert Scolbe discovered an Augmented Reality easter egg in the new Yelp applicacion. According to:

the new Yelp app includes an AR easter egg

Social review service Yelp has snuck the first Augmented Reality (AR) iPhone app specifically for the US into the iTunes App Store. The undisclosed new feature allows iPhone 3Gs owners to shake their phones three times to turn on a view called "the Monocle." This view uses the phone’s GPS and compass to display markers for restaurants, bars and other nearby businesses on top of the camera’s view.

Robert Scoble FriendFeed pub: http://friendfeed.com/scobleizer/e6e411b4/new-yelp-iphone-app-is-also-out-there-cool-easter

Download the new Yelp app (came out yesterday). So you shake your iPhone 3 times. That activates a feature called Monocle. A message should come up if you activated it. A blue box will come up saying "the Monocle has been activated." It will create a button in the top right corner. Now you should be able to look at the bars, restaurants, etc. Only works on iPhone 3GS. –

And now, Presslite (the same company that made Paris Metro Subway) just added Augmented Reality to its London Bus app:

There is no info about the API used (Presslite didn’t revealed nothing about tech). Candidates: ARToolkit ,iPhoneARToolkit, ChromelessImagePickerController.

More info at:

The Wall Has Fallen: 3 Augmented Reality Apps Now Live in iPhone App Store
Yelp Brings First US Augmented Reality App to iPhone Store
First iPhone Augmented Reality App Appears Live in App Store

Angel “Java” Lopez
http://www.ajlopez.com/en
http://twitter.com/ajlopez

Blog at WordPress.com.