Building a Theme

1. After finishing my design in photoshop I carried on by building pure HTML5 &CSS website
2. Creating php files. For this part I have used files of Blank Theme  given by Lynda.com All those files include neccesary php code for all basic pages. As they don’t do any harm I didn’t have a need to remove them.  Screenshot of all files and folders from Blank Theme Template

3.  Following a tutorials from Lynda.com, the following step was to create a sidebar. I slightly jumped over this step. Where I almost deleted all content form sidebar.php so this was blank.

4. Creating Navigation:

  • to register  Main Navigation Menu in function.php

if (function_exists(‘register_nav_menus’)) {
register_nav_menus(
array(
‘main_nav’ => ‘Main Navigation Menu’
)
);
}

  • creating all pages for Main Navigation Menu and given template names:

<?php

/*
Template Name: About Us
*/

?>

home.php, about_us.php, catalog.php, services.php, contact.php

Same steps followed when creating other 3 navigations.

5. Next step was to create  page-product.php & page-category.php useing custom fields. Based on this skill I built rest of a theme what turned to be a bad move, where instead of post I have used only a pages.

6. Building about_us & services pages. This was straight foward where I just filled text field with html code.

7. Home page template: Over here I repeated steps for custom fields creating latest jewellerey page and 2 latest items

8. Back with sidebars. Reason I didn’t work with sidebars early from a start was that I couldn’t find right code. Everything I wanted to achieve was to use different elements ( catalog navigation, jquery and posts ) for diferent pages useing a statement when to include those elements. Finaly I came a cross different solution:

Creating a new sidebar-name.php and adding this extra name to page.php we need. Example:

about_us.php include <?php get_sidebar(‘collection’); ?>   where sidebar-collection.php include search form and jquery plugin – widget.

So this step required to create few sidebars for different pages:

  • sidebar.php (home.php) – search form and posts
  • sidebar-collection(about_us.php, services.php) – include search form &  jquery plugin
  • sidebar-contact.php ( contact.php) – search form and posts
  • sidebar-catalog.php(catalog.php, page-product.php) – search form and catalog navigation
  • sidebar-category.php(page-category.php) – search form, catalog navigation and jquery

9.  Including posts into a sidebars:

http://wordpress.org/support/topic/how-to-show-single-post-content-in-sidebar

<?php query_posts('p=96'); if(have_posts()) : the_post(); ?> 
<?php the_content(); ?>
<?php endif; ?>

10. Plugins and widget area. For my contact page I have used FS Contact form plugin. Which need to be installed, activate and php code placed into our page.php. All elements are available to style as we need. 
Jquery plugin is placed in widget area as this widget will be placed into our sidebars where we need to include our slideshow. This required to install and activate gallery where we placed our images.

Submission for style I like

After considering all key words &  features I would like to include in my final piece mentioned earlier:

  • beam
  • hue
  • landscape (city or nature)
  • spiral cloud/ clouds in general
  • lightning
  • frame
  • wave
  • thinking in colours – orange/red or blue/green
  • thinking in shape –  landscape

I carried on work done during lecture on matt painting technique, useing same tunnel frame, city and parts of waves. I also wanted to create some source of power with beam hitting an earth which produce big wave. This source of power will also become source of light and as the only position for it is a sky it also become a main focus of an image. For this reason bg was very important, as I needed to include sky rich on clouds creating spiral affect alongside with impact of beam.

Having all elements placed in right order (tunnel, clouds, wave, wave, clouds, city ) I created my source of power placing between 2 wave groups.  filter->distort->twirl. After few tries I figured it out how to produce perfect spiral followed by adding beam. This was found on tutorial sci-fi/fantasy matt painting.

Following the tutorial helped me to explore more power of  layer modes,  mostly:  Linear Dodge (add), soft light, hard light, overlay, multiply which I have used mainly for clouds and sea waves.

Finaly I played with red/orange hue and shadows to highlight or darken some parts of image.

         

 

Credits:   http://peccyjacob.deviantart.com/#/d4yhivn

Bregenz from tunnel by Stromershl – http://stromershl.deviantart.com/art/Bregenz-from-tunnel-257109397
View from the Sears Tower by fae1285 – http://fae1285.deviantart.com/art/View-from-the-Sears-Tower-252205657
on the edgeby night-fate-stock – http://night-fate-stock.deviantart.com/art/on-the-edge-215148220
storm clouds – 1 by monika-stock – http://monika-stock.deviantart.com/art/storm-clouds-1-276396505
Sky Stock 2 by Emerald-Depths – http://emerald-depths.deviantart.com/art/Sky-Stock-2-206676381
Storm Sky-Stock-1 by Stock-jm – http://stock-jm.deviantart.com/art/Storm-Sky-Stock-1-98905495
Rolls 06 by MontvalentStock – http://montvalentstock.deviantart.com/art/Rolls-06-182624013
STORM AT SEA BG STOCK III by ArwenArts – http://arwenarts.deviantart.com/art/STORM-AT-SEA-BG-STOCK-III-146413295
Premade Background 1366 by AshenSorrow (only white wave) – http://ashensorrow.deviantart.com/art/Premade-Background-1366-257532139
Lightning Stock by ForsakeWolf – http://forsakewolf.deviantart.com/art/Lightning-Stock-258146852
Lightning Stock 2 by ForsakeWolf – http://forsakewolf.deviantart.com/art/Lightning-Stock-2-258147079

Submission for style I want to explore

I found work on this urban style very challenging and difficult as I didn’t know the best approach how to start. In general,  main focus should be on model/head, which will be placed more likely in the middle or on the side and leaving a head room. Than person/head should be connected with a background in some way. Ex: leaks, staines, reducing opacity, layer mask, ….

Background:

At first I choosed simple grunge texture which was later replaced/multiplied by another grunge layer. As default colour was dark blue and bottom layer white, multiply mode turned it into wery stong visible blue color but also with very strong contrast. My final piece suppose to be B&W or dark mode colour. It turned out to be great solution to apply B&W / hue&saturation adjustment layer just for bg, where we keep slightly blue hue.

    

Creating all elements (except model) could be done by

  • useing pen tool or ony other tool where we can make a selection, followed by applying patterns, tweaking with opacity, saturation, brightness, …. There is many tutorials out there, I even came a cross a tutorial how to create your own feather,….
  • useing brushes, what I found much easier. Just need to find the right one which fits for a place, but this can be also done with cutting, moving, rotating , …

So I created layers, where I applied different brushes for feathers, splashes, leaks, staines, ….

All individual shapes were easy to mantain useing layer mask when layers were duplicated . By rotating/inversing/changing colour (cmd+i)   those shapes I achieved diversity from each other so I could use them over and over again.

There is not much to tell about process. I have experimented to put all small bits and bobs together to create some shape such as body, arm, hair/darknes, clothes, …. around the model.  It was more like few days of  long  brainstorming as I didn’t have clue what I want to produce, what worked well what didn’t. Even I gave a names to most of the layers and grouped them in folders, it was quite hard to mantain.  It was a long ongoing process where I constantly changed position of different parts and different layer modes.

To the end I highlighted right side of face, eyes, shoulder, red lips.

Black&white  version seem to be plain and boring compare to colour version which appears to be too bright. B&W / hue&saturation adjustment layers applyed, and tweaking an opacity up to the point, where face just becoming B&W but still keeps  live colour..  Even strongly  saturated blue bg works much better than pure B&W.  As I already found out, brightness settings of different screens on PC/Mac/projectors may change final outcome into darker tone it should be.

Credits: http://peccyjacob.deviantart.com/#/d4yhiqd

image 308 by niniel-stocks – http://niniel-stocks.deviantart.com/art/308-184426739
Blue grunge texture by firesign24-7 – http://firesign24-7.deviantart.com/art/Blue-grunge-texture-142450760
Grungy paper texture v.5 by bashcorpo – http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-5-22966998
Splats and Splatters Brushes by redheadstock – http://redheadstock.deviantart.com/art/Splats-and-Splatters-Brushes-71906199
Splatters PACKAGE by Knald – http://knald.deviantart.com/art/Splatters-PACKAGE-152702827
Splatters by xxalice – http://xxalice.deviantart.com/art/Splatters-24745725
14 Paint Brushes by nyssi – http://nyssi.deviantart.com/art/14-Paint-Brushes-32354627
17 Coffee Stain Brushes by nyssi – http://nyssi.deviantart.com/art/17-Coffee-Stain-Brushes-32434485
Feather Brushes by mcbadshoes – http://mcbadshoes.deviantart.com/art/Feather-Brushes-148533274?q=boost%3Apopular%20in%3Aresources%20feather%20brushes&qo=11

feather brushes by dark-dragon-stock – http://dark-dragon-stock.deviantart.com/art/feather-brushes-58025782?q=boost%3Apopular%20in%3Aresources%20feather%20brushes&qo=1

Deploying app on android market

All I needed to know was found on: http://developer.android.com/guide/publishing/publishing.html

After following all steps for registration and paying registration fee on the 23rd April , I need to wait 1-14 days for  authorization of my debit card.

So there is possibility I will be not able to deploy my application on time.

Application Icon and manifest.xml

Every new android project has default application icon:

This icon can be simply replaced by your own. This is my icon:

Tutorial how to change icon: adding <application android:icon=”@drawable/ic_launcher” android:label=”@string/app_name”> to manifest.xml and saving icon.png in res/drawable

http://www.connorgarvey.com/blog/?p=97

http://www.youtube.com/watch?v=xmVGeUeS988

 

My final manifest.xml

As previously mentioned, there is some manifest.xml file. During instalation of an app you will be asked to give  your permision to do following features. All those features are set in this manifest file. By default phonegap asking us to include following code in our manifest.xml:

<uses-permission android:name=”android.permission.CAMERA” />
<uses-permission android:name=”android.permission.VIBRATE” />
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />
<uses-permission android:name=”android.permission.READ_PHONE_STATE” />
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.RECEIVE_SMS” />
<uses-permission android:name=”android.permission.RECORD_AUDIO” />
<uses-permission android:name=”android.permission.RECORD_VIDEO” />
<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” />
<uses-permission android:name=”android.permission.READ_CONTACTS” />
<uses-permission android:name=”android.permission.WRITE_CONTACTS” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.GET_ACCOUNTS” />
<uses-permission android:name=”android.permission.BROADCAST_STICKY” />
<uses-feature android:name=”android.hardware.camera” />
<uses-feature android:name=”android.hardware.camera.autofocus” />

But as we know, we do not need most of that. Our application uses only camera API and local storage. Internet connection also isn’t required as all css and js files are installed withing application. So our final permission we ask for,  is only to mantain camera and save those images on our phone. Asking for permission to mantain/modify contacts, recieve messages and so on looks suspicious when application doesn’t include none of those features.

Everything we need is:

<uses-permission android:name=”android.permission.CAMERA” />

<uses-feature android:name=”android.hardware.camera” />

<uses-feature android:name=”android.hardware.camera.autofocus” />

 

 

 

 

 

More javascript and local storage

In this stage I was quite happy with my result, though I copied javascript examples from different tutorials. I have also made some slight modification to code and have tried to understand and read  a code as this is main purpose, learn it, so I could use it in a future again without any difficulties.  Despite my satisfaction, I wasn’t keen on just copying javascript, so I went through more simple tutorials to get basic knowledge and rules of javascript language, what I sreally should do at the first place.

First main source of javascript tutorials was translated version of book:  Ajax Bible, Steven Holzner, 2007

term AJAX means Asynchronous JavaScript and XML   –  so we can talk about combination of javascript and XML. All those examples are too advanced for my skills, so I went along only with javascript chapter. Here are some examples I have managed to work so far:

If you are looking at the examples in safari browser hit ctrl+alt+u on PC and cmd+alt+u Mac to view source code for individual example and see difference

http://www.boristav.sk/_sub/jakub/ajax/chapter2/message.html             document.write

<script language="javascript">
      document.write("You are useing javascript, document.write"); 
    </script>

http://www.boristav.sk/_sub/jakub/ajax/chapter2/message2.html           document.getElementById   /  different approach

    <script language="javascript">
      function showMessage()
      {
        document.getElementById('endDiv').innerHTML = 
          "You are useing javascript, document.getElementById('endDiv').innerHTML"; 
      }
    </script>

http://www.boristav.sk/_sub/jakub/ajax/chapter2/button.html            onClick function

http://www.boristav.sk/_sub/jakub/ajax/chapter2/dialog.html                  pop dialog window

http://www.boristav.sk/_sub/jakub/ajax/chapter2/var.html                       var as variable

http://www.boristav.sk/_sub/jakub/ajax/chapter2/else.html                       else and if statement

http://www.boristav.sk/_sub/jakub/ajax/chapter2/for.html                         for statement

http://www.boristav.sk/_sub/jakub/ajax/chapter2/while.html                     while statement

http://www.boristav.sk/_sub/jakub/remove/index.html                                     remove div element

http://www.boristav.sk/_sub/jakub/ajax/chapter3/svacina.html                   combination of javascript and XML file.

Where button menu1 call for menu1 list from menu1.xml and btn menu2 call menu2 list from menu2.xml

Also I was aware of phonegap book for beginners. Luckily I managed to find free pdf version, but with lots of mistakes in code, so not all of the examples worked well.

This is not a free 🙂                    http://www.amazon.com/PhoneGap-Beginners-Guide-Andrew-Lunny/dp/1849515360

example of the mistakes on pages 62/63, phonegap_for_beginners.pdf

<div id=»main»>                                                                                                                           <div id=”main”>
<h1>List Some Food</h1>
<form id=»foodForm»>                                                                                                             <form id=”foodForm”>

document.addEventListener(«DOMContentLoaded», function () {                        document.addEventListener(“DOMContentLoaded”, function () {
var foodList = document.getElementById(‹foodList’);                                                 var foodList = document.getElementById(‘foodList’);

These mistakes are easily spotted as I am familiar with this/similar code now and also I have to mention safari – web inspector (firefox – firebug), which was very helpfull in determining javascript bugs. But there are sections of code I do not understand, so it’s difficult for me to experiment with those advanced tutorials.

Here is few of those examples from a book I managed to run successfully.

http://www.boristav.sk/_sub/jakub/phonegapexamples/chapter3/               local storage (save item) list stays active even after closing and opening browser

http://www.boristav.sk/_sub/jakub/phonegapexamples/chapter4/              transition on click (need to open in safari)

http://www.boristav.sk/_sub/jakub/phonegapexamples/chapter5/             last added item is highlited in bold white colour.  red x button fo removing an item doesnt work

Thanks to those few examples I have decided to implement interaction within one of the game rule, where you will be able to add/edit/remove your own rules. Idea is there, although I haven’t got right code for it. Also its impossible to write a code just myself. Luckily I found great tutorial for local storage. It was exactly what I was looking for http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application

with result:   http://static.diveintojavascript.com/files/tutorials/web-storage-contacts/contacts.html

Here are my steps of modification:

  1. http://www.boristav.sk/_sub/jakub/phonegapexamples/locstor2/
  2. http://www.boristav.sk/_sub/jakub/phonegapexamples/locstor3/
  3. http://www.boristav.sk/_sub/jakub/phonegapexamples/locstor4/

Camera API

There are to ways how to activate your camera throught an apllication.

first approach will allows you to take more than one image in session and save them in your default photoalbum

second approach can retrieve image from photoalbum and place image within application or will capture image and save it in application instead of photoalbum.

Both tutorias have some bugs and some examples also required JSON2.js javascript for its local storage to save images in application. As I was very exiciting about this feature I spent decent amount of time by experimenting with modification of this code and trying different tutorials:

https://github.com/phonegap-starter/CameraAPI/blob/master/www/index.html

https://gist.github.com/1585701

http://osdir.com/ml/phonegap/2012-03/msg01372.html

http://groups.google.com/group/phonegap/browse_thread/thread/e084fb0fffb3f4bf