Understanding Basic Ionic CSS Components

Creating hybrid mobile applications is a great way to leverage your knowledge of web languages like HTML5, CSS, and JavaScript. Modern frameworks such as AngularJS and Ionic make it easier with pre-built templates and components. In this course, staff author Ray Villalobos shows how to install the Ionic framework and set up a development environment suitable for building web-based apps. He reviews the core Ionic components: pre-built, easy-to-use features such as buttons, lists, tabs, and forms. Then Ray shows how to combine these components with Angular.js models, views, and controllers to build a single page app with sliders, pull-to-refresh functionality, and search. The training culminates in building a multi-page app, which you’ll learn how to customize with CSS. See more: Building a Mobile App with AngularJS and Ionic.

Topics include:

  • Installing the development environment on Mac or PC
  • Understanding the Ionic templates and CSS components
  • Adding IonicIcons to a layout
  • Adding tabs, cards, and lists
  • Using form elements
  • Building a single view app
  • Implementing Pull to Refresh
  • Creating a multi-tab app
  • Styling the applications
  • Deploying applications

Ionic

Ionic (mobile app framework)

Ionic is a complete open-source SDK for hybrid mobile app development. Built on top of AngularJS and Cordova, Ionic provides tools and services for developing hybrid mobile apps using web technologies like HTML5, CSS, and Sass. Apps can be built with these web technologies and then distributed through native app stores to be installed on devices by leveraging Apache Cordova. Ionic was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013, and is used by software developers around the world.

Ionic provides all the functionality that can be found in native mobile development SDKs. Users can build their apps, customize them for iOS or Android, and deploy through Cordova. Ionic includes mobile components, typography, interactive paradigms, and an extensible base theme.

Using Angular, Ionic provides custom components and methods for interacting with them. One such component, collection repeat, allows users to scroll through a list of thousands of items without any performance hits. Another component, scroll-view, creates a scrollable container with which users can interact using a native-influenced delegate system.

Developers can programmatically control the scroll-view to get the scroll position, scroll to bottom/top, zoom, or get information about the current scroll-view instances.

$ionicScrollDelegate.scrollTop();
$ionicScrollDelegate.scrollBottom();
$ionicScrollDelegate.zoomTo(1.5);
$ionicScrollDelegate.getScrollView();

Besides the SDK, Ionic also provides services that developers can use to enable features, such as push notifications, A/B testing, analytics, code deploys, and automated builds.

Ionic also provides a powerful CLI, so developers can get started and create a project with a simple command. The CLI also allows developers to add Cordova plugins and additional front-end packages, enable push notifications, generate app Icons and Splash screens, and build native binaries. It is also managed through Github.

Supported Platforms

Ionic is focused on building for modern web standards and for modern mobile devices. For iOS, Ionic supports iOS 7 and up. For Android, Ionic supports Android 4.1 and up.

See more resources:

How To Handle User Authentication With AngularJS Inside Your Ionic App
Simple login example with ionic and AngularJS

Website:
Build My Site

Tracking our navigation with ScrollSpy and jQuery

Find out how Bootstrap can transform your standard HTML websites into inspired single-page designs. This course is a project-based approach to learning how to manipulate website layouts with the Bootstrap framework. Staff author Ray Villalobos tackles Bootstrap’s layout classes, like containers, rows, and columns, and shows what it takes to customize Bootstrap’s CSS and address layout challenges like multiple grids and columns. Plus, learn how to track navigation as users scroll, with the ScrollSpy plugin, and create a full-screen, responsive image carousel. See more at: Bootstrap Layouts: Responsive Single-Page Design.

Topics include:

  • Analyzing your markup
  • Creating simple column layouts
  • Creating basic navigation and a simple carousel
  • Modifying Bootstrap styles
  • Working with branding and toggle styles
  • Adding interactivity

Uses for Bootstrap

To use Bootstrap in an HTML page, the developer downloads the Bootstrap CSS stylesheet and includes a link in the HTML file.

(The developer can also compile the CSS file from the downloaded Less or Sass stylesheets, with a special compiler.)

If the developer wants to use the JavaScript components, they must be referenced along with the jQuery library in the HTML document.

The following example illustrates how this works. The HTML code defines a simple search form and a list of results in tabular form. The page consists of HTML 5 elements and CSS information according to the Bootstrap documentation.

ScrollSpy
A view of the example using Bootstrap, rendered in Google Chrome
<!DOCTYPE html>
<html>
  <head>
    <title>Example of Twitter Bootstrap</title>
    <!-- Include the bootstrap stylesheets -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
 
  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Example for a simple search form.</label>
 
      <!-- Search form with input field and button -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      </form>
 
      <h2>Results</h2>
 
      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor ...</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Ut enim ad minim veniam, ...</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Duis aute irure dolor ...</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>
ScrollSpy
Example of a webpage using Bootstrap framework rendered in Mozilla Firefox

Creating a simple fluid layout grid

    <div class="row">
       <div class="col-md-4">Text for column 1</div>
       <div class="col-md-4">Text for column 2</div>
       <div class="col-md-4">Text for column 3</div>
    </div>

This will create three columns of equal width. This is a fluid layout: If the columns are too wide to fit on the screen, they will be stacked automatically.

See more resources:

Creating a Responsive Menu in WordPress for Mobile Devices
Flat UI Pro – Bootstrap Design Framework
Bootstrap grid examples
ScrollSpy
jQuery ScrollSpy

Website:
Build My Site

JavaScript Templating | What is Templating?

JavaScript templates take simple web apps to the next level, keeping your application logic separate from your presentation and your HTML and JS files clean. This course provides a look at popular JavaScript template solutions for modern web apps that consume and display data. Joe Marini reviews four popular templating libraries: JQuery Template, a simple solution that plugs straight into jQuery; Handlebars and Mustache, which provide greater flexibility; and Dust, the templating engine for more complex scenarios. Watch more at: JavaScript Templating.

Topics include:

  • What is templating?
  • Defining templates in jQuery Template
  • Using simple Mustache templates with sections and conditions
  • Adding conditionals and loops to Handlebars templates
  • Working with Dust templates

JavaScript Templating

JavaScript 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 AngularJS, 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.

Template Engine

The template engine is responsible for:

  • connecting to the data model;
  • processing the code specified in the source templates; and
  • directing the output to a specific pipeline, text file, or stream.

Additionally some template engines allow additional configuration options. A template engine is ordinarily included as a part of a web template system or application framework, and may be used also as preprocessor or filter.

templating

A diagram illustrating all of the basic elements and processing flow of a template engine.

A template engine is a specific kind of template processing module that exhibits all of the major features of a modern programming language. The term template engine evolved as a generalized description of programming languages whose primary or exclusive purpose was to process templates and data to output text. The use of this term is most notably applied to web development using a web template system, and it is also applied to other contexts as well.

Benefits of using template engines

  • encourages organization of source code into operationally-distinct layers (see e.g., MVC)
  • enhances productivity by reducing unnecessary reproduction of effort
  • enhances teamwork by allowing separation of work based on skill-set (e.g., artistic vs. technical)

Templating becomes useful when the information distributed may change, is too large to be maintained in various HTML pages by available human resources and not large enough to require heavier server-side templating.

See more resources:

JavaScript Templates, Mozilla Developer Network
The client-side templating throwdown: mustache, handlebars, dust.js, and more
Best Practices When Working With JavaScript Templates

Website:
Build My Site

Introduction to the “Internet of Things”

In this course, Michael Lehman shows how to program these “things” and build companion apps to monitor and record their activities from iOS devices. Learn what’s inside a thing, how location-awareness technologies such as iBeacon connect the IoT in public spaces, and how you can create your own things with hardware like the Arduino and Raspberry Pi kits. Michael also shows how to use IFTTT services to control things on iOS, and muses on the future of IoT. Along the way, you’ll gain experience with real-world IOT-driven projects, like a mini weather station and a home lighting system. Watch more at: Programming the Internet of Things with iOS.

Topics include:

  • Exploring the IoT universe
  • Understanding sensors and effectors
  • Connecting inputs and outputs
  • Connecting to devices via Wi-Fi or Bluetooth
  • Using Apple iBeacon
  • Creating your own things with programmable hardware
  • Using IFTTT to program things
  • Exploring trends in IoT

Internet of Things

What are the “things”?

The “things” are programmable devices such as: home appliances, measuring environmental conditions (a thermostat turning the heat on at a specified temperature), automobiles, home security, headphones, audio, our phones, web applications, and almost anything you can imagine! Yes, you can program your own “thing” to do simple tasks for you.

internet of things

IFTTT (abbreviation of “If This Then That“) pronounced like “gift” without the “g”, is a web-based service which allows other services (e.g., Gmail, Google Reader, Instagram, Craigslist) to be programmed by means of simple conditional statements (called “recipes”).

IFTTT employs the following concepts:

  • Channel is called “basic building blocks of IFTTT”, it mainly describes a series of data from a certain web service such as Youtube or ebay. Beside, it can also describe some certain actions controlled with application program interface (API) like SMS. Sometimes, it means information supply in terms of weather or stocks. There are particular triggers and actions in each channel. Right now, 140 channels are available in total.
  • Recipe just means ” If this then that”. A recipe combines an action and a trigger in a specific channel. Users may create their own recipes. If any picture liked by you in Instagram, for example, the photo will be sent to your Dropbox file and saved in it.
  • Trigger is the “this” part of a recipe. It describes an assumptive event which could result in an action. What triggers you can choose always depend on which channel you select, for example, picking a RSS feed, you can select a new one that relates to reserved words.
  • Action is the “that” part of a recipe. It describes a consequence led by a specific trigger. Some examples are “save the graph in my file” or “the alarm rings”.
  • Ingredients are basic elements from a trigger. As the IFTTT official website gave an example: “The Ingredients of an Email Trigger could be: subject, body, attachment, received date, and the sender’s address.”

Usage examples

  • IFTTT can automatically automate web-application tasks, such as posting the same content on several social media.
  • IFTTT can be used to connect web applications and provide new functionality.

See more resources:

iOS 8 SDK New Features
Building a Note-Taking App for iOS 8
iOS App Development with Swift Essential Training
Disruptive IoT Innovation: Adding Value to Connected Devices
The Internet of Things – the way to sense, compute & connect

Website:
Build My Site

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

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

What Are Adaptive Views? UX Design Tools: Axure

Brian Thurston Bralczyk introduces Axure’s ready-made widgets, functioning form elements, and dynamic content that can be hidden, moved around the page, or even animated. Plus, learn how to generate flows and sitemaps, and create adaptive web designs to view your project on a range of devices. Watch the online video course: UX Design Tools: Axure with Brian Thurston Bralczyk.

Topics include:

  • Using and styling widgets
  • Setting up interactions
  • Creating hide/show options for content
  • Creating an accordion menu
  • Applying web fonts
  • Using flow widgets
  • Creating and placing masters
  • Styling pages
  • Adding form fields with widgets
  • Building a slideshow with dynamic panels
  • Setting up adaptive views

Axure RP

adaptive designAxure RP Pro is a wireframing, rapid prototyping, and specification software tool aimed at web and desktop applications. It offers capabilities typically found in diagramming tools like drag and drop placement, resizing, and formatting of widgets. In addition, it has features for annotating widgets and defining interactions such as linking, conditional linking, simulating tab controls, show/hide element etc. There is support for medium-fidelity simulation of Rich Internet Applications. Axure RP can then generate HTML prototypes and Microsoft Word specifications from the diagrams.

The Axure RP Pro application window is divided into 6 main areas:

  • sitemap – a hierarchical list of pages
  • widgets
  • masters (templates, or reusable collections of widgets)
  • page area – the main design area
  • page notes and interactions
  • widget annotations and interactions

Widgets available include:

  • wireframe: image, text panel, hyperlink, rectangle, table, line (horizontal/vertical), menu (horizontal/vertical), tree
  • form controls: button (various shapes, including tab buttons), text field, text area, drop-down list, list box, checkbox, radio button, image map region
  • placeholder, inline frame, dynamic panel (used to achieve interactivity)

Other widgets can be simulated by combining existing widgets and assigning specific actions to events such as OnClick, OnMouseOver and OnMouseOut. For example, dynamic panels can have a number of states, each state being activated by clicking on an element such as a tab button, list-box item, or action button. For tabs, this allows constructing a tab control.

Adaptive web design

Adaptive web design is basically the same as responsive design and shares many of the same ideals and goals. The main difference however is that the changes are made on the server side rather than the client side.

Adaptive websites are designed to respond and adapt to different screen sizes using responsive techniques, and to adapt to different User requirements based on different device capabilities.

The responsive design aspect of adaptive design involves the implementation of various design factors such as flexible layouts, CSS file alternatives and flexible images, which are activated using media queries.

With adaptive delivery, the most significant difference is that the server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected. See: Responsive design vs. adaptive delivery: Which one’s right for you?

Adaptive web design also encompasses a range of other strategies which, when combined with responsive design techniques, enables you to deliver the best possible User experience to the widest possible audience. This means that numerous functionalities and environmental factors can be catered for in the most User friendly way, depending on the particular device being used to access your website.

Website:
Build My Site

Up and Running with PhoneGap Build – Building from the Command-line Interface

See how PhoneGap, an open-source framework, and PhoneGap Build, a service in the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. This course explores how to use PhoneGap Build to create app-store-ready applications for iOS, Android, and Windows Phone. Learn how to build an app from GitHub, Dreamweaver, Edge Code, or even a simple ZIP file; configure icons, splash screens, and other preferences; enable access to camera and location sensor data; and deploy and install your device on your smart phone or tablet. Watch the lynda.com online course: Up and Running with PhoneGap Build

Topics include:

  • Creating a PhoneGap Build account
  • Exploring the HTML structure of an app
  • Configuring your mobile device for development
  • Building from Dreamweaver, Edge Code, or the command line
  • Setting up a config.xml file
  • Setting parameters and permissions
  • Deploying on iOS or Android

Application command-line interfaces

Application programs (as opposed to operating systems) may also have command line interfaces.

command-line
Screenshot of a sample Bash session. GNOME Terminal 3, Fedora 15

An application program may support none, any, or all of these three major types of command line interface mechanisms:

  1. Parameters: Most operating systems support a means to pass additional information to a program when it is launched. When a program is launched from an OS command-line shell, additional text provided along with the program name is passed to the launched program.
  2. Interactive command-line sessions: After launch, a program may provide an operator with an independent means to enter commands in the form of text.
  3. OS inter-process communication: Most operating systems support means of inter-process communication (for example; standard streams or named pipes). Command lines from client processes may be redirected to a CLI program by one of these methods.

CLI software
Some applications support only a CLI, presenting a CLI prompt to the user and acting upon command-lines as they are entered. Some examples of CLI-only applications are:

  • DEBUG
  • Diskpart
  • Ed
  • Edlin
  • Fdisk
  • Ping

Hybrid software

Some computer programs support both a CLI and a GUI. In some cases, a GUI is simply a wrapper around a separate CLI executable file. In other cases, a program may provide a CLI as an optional alternative to its GUI. Both interfaces do not always offer similar functionality. For example, MATLAB, a numerical analysis computer program, provides no GUI for some calculations, but the CLI can handle any calculation MATLAB supports.

Here’s an excellent post on command-line tooling:

Command Line Tools for Frontend Developers

More resources:

Website:
Build My Site