Elements of an Android App

Creating an app for Android doesn’t require a full-blown integrated development environment. There are several simple, easy-to-learn and easy-to-use tools that make programming Android apps a breeze. Michael Lehman introduces MIT App Inventor 2, Basic4android, and a few other entry-level development environments to build your own app. He’ll show how to test apps on an Android emulator or directly on your phone or tablet, and demonstrate tools for building hybrid apps that run on Android, Windows Phone, and iOS devices, as well as straight on the web. Start building your first app with these simple tools today. See more at: Simple Android Development Tools.

Topics include:

  • Understanding the elements of an Android app, such as controls, sensors, effectors, and storage
  • Exploring MIT App Inventor 2
  • Getting started with Basic4android
  • Building simple apps
  • Testing apps on Android emulators and devices
  • Sharing apps
  • Creating hybrid apps with Appy Pie, Make Me Droid, and AppMakr

App Inventor for Android

Android

Google App Inventor

App Inventor for Android is an open-source web application originally provided by Google, and now maintained by the Massachusetts Institute of Technology (MIT).

It allows newcomers to computer programming to create software applications for the Android operating system (OS). It uses a graphical interface, very similar to Scratch and the StarLogo TNG user interface, which allows users to drag-and-drop visual objects to create an application that can run on Android devices. In creating App Inventor, Google drew upon significant prior research in educational computing, as well as work done within Google on online development environments.

App Inventor and the projects on which it is based are informed by constructionist learning theories, which emphasizes that programming can be a vehicle for engaging powerful ideas through active learning. As such, it is part of an ongoing movement in computers and education that began with the work of Seymour Papert and the MIT Logo Group in the 1960s and has also manifested itself with Mitchel Resnick’s work on Lego Mindstorms and StarLogo.

App Inventor includes:

  • A designer, in which a program’s components are specified. This includes visible components, such as buttons and images, which are placed on a simulated screen, and non-visible components, such as sensors and web connections.
  • A blocks editor, in which the program’s logic is created.
  • A compiler based on the Kawa language framework and Kawa’s dialect of the Scheme programming language, developed by Per Bothner and distributed as part of the GNU operating system by the Free Software Foundation.
  • An app for real-time debugging on a connected Android device.

On December 6, 2013 (the start of the Hour of Code), MIT released App Inventor 2, renaming the original version “App Inventor Classic” Major differences are:

  • The blocks editor in the original version ran in a separate Java process, using the Open Blocks Java library for creating visual blocks programming languages.
    Open Blocks is distributed by the Massachusetts Institute of Technology’s Scheller Teacher Education Program (STEP) and is derived from master’s thesis research by Ricarose Roque. Professor Eric Klopfer and Daniel Wendel of the Scheller Program supported the distribution of Open Blocks under an MIT License. Open Blocks visual programming is closely related to StarLogo TNG, a project of STEP, and Scratch, a project of MIT Media Laboratory’s Lifelong Kindergarten Group. App Inventor 2 replaced Open Blocks with Blockly, a blocks editor that runs within the browser.
  • The | MIT AI2 Companion app enables real-time debugging on connected devices via Wi-Fi, not just USB.

As of May 2014, there were 87 thousand weekly active users of the service and 1.9 million registered users in 195 countries for a total of 4.7 million apps built.

Website:
Build My Site

MIT Opencourseware – OCW

MIT OpenCourseWare makes the materials used in the teaching of almost all of MIT’s subjects available on the Web, free of charge. With more than 2,200 courses available, OCW is delivering on the promise of open sharing of knowledge.

More Resources:

Women in STEM
Up and Running with C
A Gentle Introduction to Programming Using Python
New Course: Object-Orientated Python

Website:
Build My Site

WordPress: Creating a Child Theme

What this course is about….

One-page sites with JavaScript-based scrolling navigation are popular, especially for creative portfolios and company websites. However, in WordPress, single-page sites also have severe restrictions and can be hard to manage. This course shows you how you can create a dynamic one-page front page for your WordPress site that pulls content from different areas and displays it in a visually stunning way. This method allows the front page to update automatically as site content changes, without you having to constantly manage it. Staff author Morten Rand-Hendriksen will take you step by step through this solution: creating a new template and content pages, calling content to the front page with custom loops, and adding JavaScript to enable sticky menus and scrolling. Watch more at: WordPress: Building a One-Page Style Site.

Topics include:

  • Creating a foundation for the front page with a child theme, styles, and dummy content
  • Using custom queries to display content from different pages
  • Adding testimonials
  • Adding a custom menu
  • Creating a scrolling effect

Themes

child themeWordPress users may install and switch between themes. Themes allow users to change the look and functionality of a WordPress website or installation without altering the information content or structure of the site. Themes may be installed using the WordPress “Appearance” administration tool or theme folders may be uploaded via FTP. The PHP(Hypertext Preprocessor, a recursive backronym), HTML(hyper text markup language) and CSS(cascading style sheet ) code found in themes can be added or edited for providing advanced features. Thousands of WordPress themes exist, some free, and some paid for templates. WordPress users may also create and develop their own custom themes if they have the knowledge and skill to do so. Learn more here: WordPress Code Reference

Child Themes and Frameworks

The main advantage of a framework like Genesis or Catalyst is that it is an actively maintained, very lightweight, secure, a clean coded parent theme with some additional functionality plugged into it via accessible hooks and filters.

There certainly is a learning curve to really grasp it – like learning the structure, naming system, plus the actions and filters that it includes. It’s well worth it though. At the same time, its easy to customize even if you don’t know all the ins and outs.

The Genesis Framework has some amazing child themes out there, plus, there are some sample base child themes that lay out the basic structure and allow you to mold your own custom theme.

Genesis allows developers to switch child themes with ease. It has a simple hooks plugin that allows developers and non-developers to customize with ease. There are many theme developers who use Genesis only, and it has simplified their business tremendously.

Extensive CSS adjustments to child themes should still live in a custom CSS file to be update proof, but most child themes give you a place for this. Customization couldn’t be easier.

However, extensive documentation and forums are out there for Genesis to give you snippets and help you learn.

Catalyst is an open source web application framework written in Perl, that closely follows the model–view–controller (MVC) architecture, and supports a number of experimental web patterns. It is written using Moose, a modern object system for Perl. Its design is heavily inspired by such frameworks as Ruby on Rails, Maypole, and Spring.

See more resources:

Website:
Build My Site

Web Technology Tutorial: Front-end Design

Get an overview of front-end site development in this tutorial, including common development languages, design processes, and more. Watch more at: Web Technology Fundamentals.

This tutorial is a single movie from the Web Technology Fundamentals course by lynda.com author James Williamson. The complete course is 2 hours and 4 minutes and shows how a “plain English” guide to the technology and the terminology behind the web.

Introduction
1. Introduction to the Web
2. Front-End Technology
3. Back-End Technology
4. Assembly Technologies

Front-end Development

front-endFront end development is the development of those elements of a website that the customers sees and interacts with directly. It is a combination programming skills (knowing which program to choose) and aesthetics (understanding element arrangements on the screen, the color and font choices). The challenges associated with front end developers is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

The objective of designing a site is to ensure that when the users opens up the site they see the information in a format thats easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which needs careful planning on the site of the developer.

Front and Back-ends

The front end is responsible for collecting input in various forms from the user and processing it to conform to a specification the back end can use. The front end is an interface between the user and the back end. The front and back ends may be distributed amongst one or more systems.

In software design, for example, the model-view-controller architecture, provides front and back ends for the database, the user, and the data processing components. The separation of software systems into front and back ends simplifies development and separates maintenance. A rule of thumb is that the front (or “client”) side is any component manipulated by the user. The server-side (or “back end”) code resides on the server. The confusion arises when one must make front-end edits to server-side files. Most HTML designers, for instance, don’t need to be on the server when they are developing the HTML; conversely, the server-side engineers are, by definition, never on anything but a server. It takes both to ultimately make a functioning, interactive website.

See Related Topics:

Website:
Build My Site

Squarespace: Add a Gallery Page

Squarespace is a web-publishing platform for everyone, and its popularity proves it’s here to stay. In this course, Brian Wood gets you up and running with Squarespace and on the road to building your very own website. Along the way, he will show you how to add the advanced features that attract visitors to modern sites, like image galleries, blogs, maps, and social media integration. Dive in and start concentrating on developing your content, not your code, with Squarespace. Watch more here: Up and Running with Squarespace.

Topics include:

  • What is Squarespace?
  • Changing templates
  • Editing styling
  • Arranging blocks of content
  • Working with text and images
  • Inserting video
  • Adding a blog and an image gallery
  • Creating your own domain

SquarespaceSquarespace is a great platform for people that do not know how to code websites, or they simply are not interested in learning. The user interface is intuitive and user friendly. Many small businesses and entreprenuers don’t have the time to design and develop a website for their business, but they want to have control over their content.

Latest Version

Completely new system featuring a more free form and flexible layout system. Added portfolio templates, responsive designs which work well on mobile devices. It is great that this version added a true developer platform allowing full control of all HTML, CSS and Javascript files. The commerce portion added ShipStation order integration, Xero accounting support, and Stripe payment processing.

Software as a Service (SaaS)

Squarespace is a SaaS-based content management system (CMS) which is composed of a website builder, blogging platform and hosting service. The service allows individuals and businesses to create and maintain websites and blogs. One of the biggest selling points for these companies is the potential to reduce IT support costs by outsourcing hardware and software maintenance and support to the SaaS provider. The Cloud (or SaaS) model has no physical need for indirect distribution since it is not distributed physically and is deployed almost instantaneously.

Some Examples of Drag and Drop

A common example is dragging an icon on a virtual desktop to a special trashcan icon to delete a file.

Further examples include:

  • Dragging a data file onto a program icon or window for viewing or processing. For instance, dropping an icon that represents a text file into a Microsoft Word window signifies “Open this document as a new document in Word”
  • Moving or copying files to a new location/directory/folder,
  • Adding objects to a list of objects to be processed,
  • Rearranging widgets in a graphical user interface to customize their layout,
  • Dragging an attribute onto an object to which the command is to be applied,
    • e.g. dragging a color onto a graphical object to change its color,
  • Dragging a tool to a canvas location to apply the tool at that location,
  • Creating a hyperlink from one location or word to another location or document.
  • Most word processors allow dragging selected text from one point to another.
  • Dragging a series of codeblocks such as in Blender for designing shaders and materials.

Website:
Build My Site

Exploring Our Workflow with Gulp.js, Git, and Browserify

Modern front-end development means more than just writing HTML, CSS, and JavaScript. Developing an efficient workflow will help you write better code and test and deploy your web applications easily and efficiently. Staff author Ray Villalobos is here to show you how to generate a workflow that makes it easier to build websites with processed languages like Sass, Compass, and CoffeeScript. He’ll show how to automate development and production versions of your sites, track and share project files with Git and GitHub, and add libraries like jQuery and Mustache.js with Browserify. All of these techniques should easily translate to building your own web projects. Watch more at: Web Project Workflows with Gulp.js, Git, and Browserify.

Topics include:

  • Why workflow management?
  • Processing tasks with gulp-coffee
  • Importing libraries with Browserify
  • Processing Sass and Compass
  • Issuing tasks in sequence
  • Watching changes to files
  • Adding static reloads
  • Setting up environment variables
  • Minifying HTML
  • Compressing images

JavaScript templating

Templating workflowJavaScript templating refers to the client side data binding method implemented with the JavaScript language. This approach became popular thanks to JavaScript’s increased use, its increase in client processing capabilities, and the trend to outsource calculus to the client’s web browser. Popular JavaScript templating libraries are Angular.js, Backbone.js, Ember.js, Handlebars.js, and Mustache.js. A frequent practice is to use double curly brackets (i.e. {{key}}) to call values of the given key from data files, often JSON objects.

Mustache (template system)

Mustache is a simple web template system with implementations available for ActionScript, C++, Clojure, CoffeeScript, ColdFusion, D, Delphi, Erlang, Fantom, Go, Java, JavaScript, Lua, .NET, Objective-C, Pharo, Perl, PHP, Python, Ruby, Scala and XQuery.

Mustache is described as a “logic-less” system because it lacks any explicit control flow statements, like if and else conditionals or for loops; however, both looping and conditional evaluation can be achieved using section tags processing lists and lambdas.

It is named “Mustache” because of heavy use of curly braces that resemble a mustache. See Mustache syntax.

Mustache is used mainly for mobile and web applications.

Examples

The simplest template:

Hello {{name}}

Template with section tag:

{{#x}}
some text
{{/x}}

CoffeeScript

CoffeeScript is a programming language that transcompiles to JavaScript. It adds syntactic sugar inspired by Ruby, Python and Haskell to enhance JavaScript’s brevity and readability. Specific additional features include list comprehension and pattern matching. CoffeeScript compiles predictably to JavaScript, and programs can be written with less code, typically 1/3 fewer lines, with no effect on runtime performance. In 2013 it was also ranked 29th among languages, based on number of questions tagged at Stack Overflow.

The language has a relatively large following in the Ruby community. CoffeeScript support is included in Ruby on Rails version 3.1. In 2011, Brendan Eich referenced CoffeeScript as an influence on his thoughts about the future of JavaScript.

Website:
Build My Site