Archive for the ‘Meeting Minutes’ Category

Saturday we met and reorganized the group under the new name Codemasters and elected offices.

Mike  – President

Chad – VP Membership

Elyse – VP Education

Richard – Sgt of Arms

Bill – Secretary

We established two primary training tracts for new members

CC – Competent Coder

CM – Competent Manager

And we had a couple of project ice breakers, evaluations, Code Topic Master, Syntaxian, and a CM evaluator.

I acted as Code Master of the Day (CMOD) and the theme of the meeting was JIC – Just in time criminals where I described applying LEAN manufacturing principles to privatization of prisons. At the end the CM evaluator told us how the meeting went.

I loved it. It was great fun!

Advertisements

On Saturday at 9 am at my house (5/5/12), we will be covering Flash Catalyst.

Address: 1849 Winding Vine Ct, Florence, KY 41042
Phone:
859-802-5749

Learn how to accelerate your workflow and get it right the first time!

I also plan to use Adobe Connect so you can listen in if you can’t be present…the meeting address is

http://meet25567017.adobeconnect.com/flashcatalyst

Here are a list of topics I will cover:

  1. Wire framing an Application (planning, grids, groups, hud,  etc…)
  2. States, Interactions and Transitions
  3. Using Photoshop and Importing Graphics
  4. Components and Skins
  5. States and Layers (moving elements)
  6. Conditional Interactions, and Timeline (moving, resizing, 3D)
  7. Application Tricks (sliding content, resizing screens, constraints)
  8. Video, Sound, and Images
  9. Adding Data and Complex Data List
  10. Publishing, Importing into Flash Builder and Recoding

There will also be an update on the Hotel Front loader project.

So as opposed to creating a UI that holds database values. The database itself creates the UI based on its DTO – I’m a “self-proclaimed” genius. Or at least that’s what I told the group and they laughed.

We covered building a simple Mobile menu system (using jqmphp) and how to run it in WAMP. And discussed how to make it better parsing loops (reading DTOs from a service) as opposed to hard-coding everything. This parsing code needs to be written for the Store Front Mobile Project.

Basic Menu System

Basic Menu System

And went through some simple database stuff from W3Schools (try it)

http://www.w3schools.com/sql/sql_syntax.asp

Here is the code for the first menu system (shown above):

<?php
/**
* Lively – Basic Menu System
* @package jqmPhp
* @filesource
*/

/**
* Include the jqmPhp class.
*/
include ‘lib/jqmPhp.php’;

/**
* Create a new jqmPhp object.
*/
$j = new jqmPhp();

/**
* Config ‘html’ and ‘head’ tag.
*/
$j->head()->title(‘Basic Menu System’);

/**
* Create and config a jqmPage object.
*/
$p = new jqmPage(‘basicmenuesystem’);
$p->theme(‘b’)->title(‘Basic Menu System’);
$p->header()->theme(‘a’)->add(new jqmButton(”, array(new jqmAttribute(‘data-iconpos’, ‘notext’)), ”, ‘a’, ‘index.php#’, ”, ‘home’));
//Get the Button Added and Set Attributes
$p->header()->items()->get(1)->attribute(‘data-iconpos’, ‘notext’)->attribute(‘rel’, ‘external’);

/**
* Create and config a new jqmListview object and add Basic Items.
*/
$list1 = new jqmListview();
$list1->addDivider(‘Basic Menu System’, ”)->inset(true);
$list1->addBasic(‘Menu A’, ‘SubMenuA.php#’);
$list1->addBasic(‘Menu B’, ‘SubMenuB.php#’);
$list1->addBasic(‘Menu C’, ‘SubMenuC.php#’);
$p->addContent($list1);

$j->addPage($p);

/**
* Generate the HTML code.
*/
echo $j;
?>

Why we do what we do!

Why we do what we do!

Why we do what we do! Mobile is the driver.

Notes:

  1. Modernizr – http://www.modernizr.com/
  2. DZone refcardz – http://refcardz.dzone.com/ (css Part 1, 2, 3)
  3. Lynda.com (several css series)
What you will be learning how to do: Build a Mobile Storefront
storefront

Store Front

Hey {What we are doing: making a three layer cake;}
Three layer cake

Three layer cake

Notes:
  • CSS1 1996, CSS2 1998 (browser wars), updated – 2004 CSS2.1 again in 2007
  • CSS3 (mobile is a driver need for another standard) – not a large singular standards document, being released in pieces.
  • So CSS3 is many standards allowing for greater flexibility – all future additions are updates (collection of modules that extends 2.1 specification)
  • Resources: http://www.w3.org/standards/techs/css#w3c_all
  • Where we are at: http://www.w3.org/Style/CSS/current-work.html
  • For IE CSS3 PieLibrary:  http://css3pie.com/
  • Modernzr doesn’t add support but detects support (www.modernizr.com)
  • Vendor prefixes – propitiatory without interfering (Firefox moz, IE ms and mso, Opera 0, Chrome and Safari webkit, Konqueror khtml) – early adoption. Prefix can be dropped once standard is implemented.
  • CSS Syntax – CSS is easy to learn (Selector +Declaration include rules property:value;)
  •  (don’t use camel casing use -), can group selectors by commas
  • Basic Selectors: Element Selectors (global in nature)
  • Class Selector: can be set on any html element (.selection)
  • ID Selector: must be unique to the page, if assign to page element not other element on that page can have that specific ID. (#mainparagraph). Can add element to front of selector.
  • Descendant Selectors – string selectors together (avoid more than three – ) div p span {color: red;}
  • Child and sibling selectors: div > h1 (child selector), h1+p (adjacent), h1~p (general)
  • Attribute selectors: [att],[att=val],[att~=val],[att|=val],[att^=val],[att$=val],[att*=val]
  • pseudo-class: enabled, disabled, checked (based on current state – controls css of forms)

Videos

http://www.lynda.com/Web-Interactive-CSS-tutorials/CSS-Fundamentals/80436-2.html

http://www.lynda.com/CSS3-tutorials/first-look/73288-2.html

Simple Examples:

http://www.ironspider.ca/adv/basic_css/example/embedded01.htm

http://www.w3.org/Style/Examples/011/firstcss

Industry Example: Demoed and handed out!

Meeting Minutes 2/11/12

We discussed jquerymobile, showed demos, showed how to use your browser to do mobile simulation, gave out source code, built a simple example, showed Jonathan’s game framework, discussed and showed demos of the CubicVR 3D Engine.

Note: If you need a free editor for your HTML5 pages use Notepad++ http://notepad-plus-plus.org/ Ed was unprepared and did not have one! 🙂 He downloaded Nopepad++ and was good to go!

Meeting Links:

Pulling websites: http://www.httrack.com/

Note: Never pull sites just to copy them for distribution (that is a copyright violation), but to use them as a reference as you build your own sites. To see how other people did it!

HTTrack is a website copier (above) which you can use to do this with.

Browser Mobile Simulation Tools

All major browsers have have mobile simulators. You don’t have to download one. Mobile rendering engines for the browser are almost the same.

Here are the steps – access or add a User Agent to your browser, reducer your browser size to the size of the device under investigation, go to the url of interest (use browser development tools). If your User Agent does not have the correct device, edit, and input the User Agent String. http://en.wikipedia.org/wiki/User_agent

Here are a few browser and their simulation engines:

  • Chrome: has Android
  • IE: IE Mobile (tools menu)
  • Firefox: …usinic
  • Safari: Mac, Windows, Iphone (change in preferences)
Steps –
  • Change user agent to match mobile device
  • Resize window to same size a device screen
  • User brower’s built-in developer tools

Note: Firefox and Chrome have ad-on User Agent Extensions.

Firefox Example:

https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

(install under ad-ons in tools access in tools change user agent, can use user agent strings)

http://en.wikipedia.org/wiki/User_agent

Example:CNN (www.cnn.com)

Five Mobile Sites:

Here are the five mobile sites we discussed and provide source code for.

Stanford University: http://m.stanford.edu

Open Table: http://m.opentable.com/

Ryland Homes: http://m.ryland.com   (note: you must repair the jquerymobile link)

American Century: https://www.americancentury.com/mobile/

JQueryMobile: http://jquerymobile.com/demos/1.0.1/

Simple Tutorial

I demonstrated how to build a mobile site using jquerymobile. See more for the starter code.

CubicVR3D and Maze Work

cubic3d

Jonathan demonstrated his game work.

And I discussed CubicVR 3D Engine on WebGL a JavaScript 3D engine.

Engine:

http://www.cubicvr.org/index.php?option=com_content&view=article&id=73&Itemid=88

Demos:

https://github.com/cjcliffe/CubicVR.js/wiki/Examples-and-Demos

(more…)

We had a great meeting. Several projects are in the works and were dicussed:

  • Stuart’s Investment Strategy Game (Flex)
  • Ed, Ted, and Bill’s Mobile Coupon system (HTML5 and Flex)
  • Kyria is planning a Chinese Mandarin Site (HTML5)
  • David’s EPA contract (Flex and MATE)
  • I’ve got a new open source Flex piece (for Ed’s app)
  • Jonathan is working on a Ray Tracing (JavaScript) game and he demonstrated some of his 3D work
Basically, we are using HTML5 for our mobile delivery and Flex for our desktop applications. That’s why Ed’s project has both a HTML5 and Flex piece.

Here’s a few links we looked at today:

Drupal

http://drupal.org/project/drupal

Javascript Gaming

http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part-2/

Relational Database Basics

http://users.telenet.be/mydotcom/library/databases/dbintro.htm

Chinese Roots

mandarinposter.com/radicals

Yet another Mobile Template

http://html5boilerplate.com/mobile

Chamber of Commerce

http://www.nkychamber.com/

First Meeting of the New Year

Now that the holidays are over…we are starting up again. Our first meeting of the new year was on 1/14/12 at 9 at my house.

Topic
The topic for our meeting was mobile HTML5 menu systems. I demonstrated (for anyone who needed it) how install  Wamp or Mamp, and how to start using phpmyadmin to create databases for PHP systems.

Time
Saturday (1/14/12) at 9 am

Place
The meeting is at my home: 1849 Windingvine ct., Florence, KY 41042. Call me if you get lost at 859-802-5749