cheatshitcode

[cheatshitcode]

Overall of trimester

This trimester can be resumed in one word: shit.

I’ve started late, already 2 weeks in, and throughout its entire period I have experience 3 house movings and 2 breakups, which I must say doesn’t really create a positive environment to work in anything that needs your brain.

These may seem as excuses but they can reasonably backup with Maslow’s hierarchy of needs, with the most fundamental levels of needs not really being met, not having a stable environment to work.

The last assessment was definitely the worse. It had a lot more work, specially marketing work which I am not the biggest fan.

I really got to learn a few more javascript tools and css animations which it quite good, and did some illustrations which i was quite happy with.

In regards to difficulties, they were present from the beginning. Started by trying to find a company that would appreciate a marketing campaign to the time restraints that unable me and the client to meet to actually meeting the client and realise she really didn’t want anything from the start and had overwhelming exceptions about the success of business she wanted to run without her doing anything or paying someone (including me) to do it.

That put me off, made question and wanting quit the whole project. I got so disappointed I stopped working on it and doing any promotional relevant posts and found myself in a position where i needed to just finish it for the sake of the class.

I understand i shouldn’t stop working on it , i should have just stopped with the client and finished the project, will try better next trimester about that.

Also, will try not to let the blog posts for the end of the trimester since it just causes a unnecessary load of pressure and anxiety. 

[cheatshitcode]

Interaction Design

p.p1 {margin: 0.0px 0.0px 15.0px 0.0px; line-height: 16.0px; font: 14.0px 'Helvetica Neue'; color: #444444; -webkit-text-stroke: #444444} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 16.0px; font: 14.0px 'Helvetica Neue'; color: #444444; -webkit-text-stroke: #444444} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 16.0px; font: 14.0px 'Helvetica Neue'; color: #444444; -webkit-text-stroke: #444444; min-height: 16.0px} span.s1 {font-kerning: none}

Interaction Design was originated by graphic and web designers to deliver a more profound and interesting experience with the user.

It all started with a mere button linking to another page, developing to scrolls, taps, clicks that created a whole new world of possibilities and demands. 

There are a few different methodologies used for its implementation:

1- Goal Driven-Design is a type of design where problem solving is the priority. It focus on solving specific needs of the user instead of the designer and the technology availability. This theory was developed by Alan Cooper. He constructs 5 essential rules for Goal Driven Design:

2- Design is first part, knowing how it looks and how it would be used in order for the programming part to be easier and smoother; Its in this part you test how the user will be interacting with your website;

3- Separate the design from the programming; letting your designer be creatively free with having to worry about the technical issues of the website and then trusting the web developer to make the designer’s vision possible;

4- Designers are responsible for product quality and user satisfaction because every part involve, from business owner, investors or third parties they have their own goals, the designer is responsible for the end user;

6 - Define one only user for your product - defining your personas is essential for this; asking what would the end user will be looking for when they visit your website;

7 - work in a team of least two people - two people bring more to the table than just one, it’s easier to divide tasks and also it’s good to have a second opinion when it comes to your business or your work; fresh eyes bring better things.

USABILITY

Usability is one of the key for success when it comes to technology. An older generation may have more difficulty in learning a new piece of technology rather than a newer one. 

That’s why web conventions were made. It’s easier to work with something new if there are similar aspects of something you have learn in the past.  

Usability tests are one of the most fundament parts of web design since they allow to understand how the end user works with your website and identify some issues they may have and change them if they are a common issue with different users. 

The Five Dimensions

The five dimensions has been a topic brought up in some of the articles I’ve read while search for interaction Design. It was a concept  implemented by Gillian Crampton Smith. They are dimensions that are interactions by themselves between the website and the user. The original ones would be word, visual representations, physical objects or space, and time. Kevin Silver has added behaviour to these. 

In regards to words, they should simple and communicate clearly their intent. 

Visual representations would be anything that isn’t text present on the website. 

the physical objects or space refers to physical hardware, such as mouse , keyboard or screen. 

Time is the time that the user spends on your website, interacting with it. And finally behaviour would be any emotions or reactions the user when interacting. 

Cognitive Psychology

“cognitive psychology i the study of how the mind works, and what mental processes that take place there”. This is particularly valued to understand for interaction design since it allows us, designers, to understand what it’s really going on with our customers brains. 

The importance parts for this discuss would be:

Mental models - images in the user’s mind that inform them to expect a certain interaction, making them feel intuitive rather than a new interaction they need to learn 

Interface megaphones - images or symbols the user already knows from rea life experiences e.g. the icon of a message being the representation of a letter or the icon that represents the bin, being a bin. 

Affordances- they are design to look like are designed to do something, like a button, where you can push, in order for the user to know to interact with it. 

[cheatshitcode]

NDA

A non-disclosure agreement is legal contract biding minimum two different parties that outlines confidential information. It ensures to the person or organisation who has access to the information doesn’t discuss it with any third parties in order to ensure a secure and trustworthy environment in a business relationship.

It is only legal if both parties sign it.

For web, graphic design and web development there few things that need to be covered since there are specifications when it comes to these trades such as design revisions, testing and copyright ownership.

It should contain an overview of who is hiring who, what what their roles, for how long and how much; each party has it’s own responsibilities; what happens if people change their minds.

It should start as an overall explanation , succeeded by what each part agrees to, in order to prevent fallouts such as the company’s budget hasn’t been authorised or some of the content supplied by the customer has copyright issues or even deadlines, since they work both ways, if you don’t have your content supplied until 1 day before your own deadline there are no miracles. Putting everything down helps the designer to communicate exactly what they are agreeing to and also what they expect from the client.

Having a disclosure on the client’s change of mind it doesn’t hurt, since they may have found a better solution for their business, but the fact is there was time spent doing that job and you should be paid for that. Also underline that the estimate/quotation prices are based on days of work, that doesn’t mean they won’t take longer to perform, specially when the client adds more page, images or templates to the project overtime it’s reviewed.

For web development it is essential to underline in which type of browser it will and will not working.

Also include a payment schedule where you underline what and when there is a need for payment.

[cheatshitcode]

User testing

Tae - 24

Tae is an live modelling artist. She lives in Melbourne for 3 years now, but originally from Byron Bay. She comes from a family of mediums and has grew up in a household where topics like tarot, numerology, crystals, reiki, divination, guardian angels and fairies was common.

She was going through Facebook and discovered Hope Tarot Reading page. She clicked on the website.

She found cute the symbols moving the background and she proceed to the about page to know more about the business.  She really liked the illustrations of the tarot cards and she discovered where/how tarot cards started being a thing.

She then went of to the contact page. She was impressed with the moving wheel and she immediately recognise the card where it comes from (the wheel of fortune).

Fran - 35

Fran just had her first baby girl. She is very excited but also very concern with the future. She looked up Hope Tarot Reading because one friend advise her. She entered the website and she was very excited with the background. She proceeds to go straight to contacts and gets fascinated by the rotating wheel. Then she was off to the about page and gets to know a bit more about the business and a bit more about the tarot. She really fancied the cards’ illustrations.

Mary - 57

Maria is a retired sales assistant. She is a close family friend of the owner and she wants to see the website of the friend’s new business. She types in the url. She finds funny the little symbols moving on the screen. She goes of to the about page where it has a bit more content about the business she already knows and a good input of information about tarot. She is happy with the card illustrations, finds them very nice and says the adds a lot to the page. Then goes off to the contact page and finds very impressive the rotating wheel, resembling the wheel of fortune.

[cheatshitcode]

I’ve done these 3 diagrams using the marketing tools previously learning on week5.

[cheatshitcode]

Target Audience and Personas

Depending on the type of product you’re trying to sell, your target audience will also change. It’s very ineffective try to reach a broad set of customers. Understanding your customers it is a essential step in order to maximise sales. The questions to ask your business would be who are you trying to sell it to , why should the public buy your product and what would they gain from you instead of your competition.

The next step would identify your target market. Divide that market into different smaller groups with similar characteristics like age, income or gender.

Narrow it down to demographic, socioeconomic and geographic characteristics it will only help your business since you know exactly what your product can do for them.

In order to have a full understanding of your customer’s needs it’s common to create Personas. If you’re also starting your own business it’s a bit thougher since you don’t really know which type of consumer you’ll have. There are several websites that tell which type of traffic your competitor has which helps you understand which type of traffic you’ll more likely get.

PERSONAS

Personas are fictional characters, that symbolise the different type group where your customers reside. These are critical to define which way your content creation will go, your product development, your sales and practically everything that involves getting more customers and also keeping them.

They are created through market research, surveys and interviews of your target audience.

There are major elements to be considered when creating your persona like:

- Location;

- Age;

- Gender;

- Interests;

- Education Level;

- Job title;

- Income;

- Relationship status;

- Buying motivations;

- Buying concerns;

There isn’t a need to answer everything single one of these topics but as many as it’s applied to your product.

For Hope Tarot Reading I have created 3 personas based on previous questions I’ve gathered from the owner. Her main target was female, between 18 to 80 years old.

Personas

Name: Christina

Age: 22

Christina always had a fascination with the occult, crystals, old symbols and practices. Also in natural ways of living and use everything nature provides.

Name: Samantha

Age: 35

Samantha works in a law firm but recently things haven’t been working out: first she lost her 10 year boyfriend, had been work- ing on a case for the past 8 months which was also the key for her place in the firm board and now has been diagnosted with diabetes.

Name: Joanna

Age: 67

Joanna has had a very busy and filled life. Worked sinse she was 15 until 62, when she retired. In times of struggle the cards never failed to prepare her or give her hope.

PERSONAS’ GOALS

Christina

She is seeking out to old tarot card readers to understand more about the practice.

Samantha

She is looking for comfort and hope for a better future in the cards.

Joanna

Continue to seek guidance in the cards.

HOPE SOLUTION

Christina

Vanessa has 15 years of expe- rience. She can help Christina understand everything about the cards and their ways.

Samantha

Hope Tarot Reading is all about guidance and hope for the near future.

Joanna

Hope Tarot Reading will give Joanna the same support as the cards have given her through her life.

[cheatshitcode]

swot porter’s five force and 5c’s

SWOT

A SWOT analysis of a business is really easy to do.  It allows you to understand the the strengths and the weaknesses of your business and reflect in order to develop a strong business strategy.

S.W.O.T. is a acronym for Strengths, Weaknesses, Opportunities, and Threats.

The best way to construct a SWOT analysis is to have a group of people, with different perspectives to allow a a broader reach to the different categories of the business. Different people give importance to different aspects.

A SWOT analysis see a four-square diagram.

THE PORTER’S FIVE FORCE

The Porter’s Five Fore is another tool used in marketing allowing to understand where it assumes that there are five competitive forces that identifies the competitivy in a business situation. These five competitive forces identified by the Michael Porter are:

Threat of substitute products

Threat of substitute products means how easily your customers can switch to your competitors product.

2. Threat of new entrants

A new entry of a competitor into your market also weakens your power. Threat of new entry depends upon entry and exit barriers. T

3.Intense rivalry among existing players

Industry rivalry mean the intensity of competition among the existing competitors in the market. Intensity of rivalry depends on the number of competitors and their capabilities.

4. Bargaining power of suppliers

Bargaining Power of supplier means how strong is the position of a seller.  How much your supplier have control over increasing the Price of supplies.

Bargaining power of Buyers

Bargaining Power of Buyers means, How much control the buyers have to drive down your products price, Can they work together in ordering large volumes.

(taken from http://www.notesdesk.com/notes/strategy/porters-five-forces-model-porters-model/)

5 Cs

The 5 C’s are define by the 5 areas that a marketing strategy needs to have in account when create its campaign. They are: Company, Customers, Competitors, Collaborators and climate.

The customer defines the needs of the product market.

The company will evaluate its position in the market and conclude if it is in a position to meet those costumer needs.

The competition will determine who has the same “bait” as you, the same run to winning the costumer. You need to evaluate your competition’s strengths and weaknesses.

The collaborators will be the outside force that your company needs to blossom.

The context is the factors surrounding you and your company, and they decide some limitations in your market and in your product, those limitations can be political or economical issues for example.

[cheatshitcode]

Project Planning

With the excitement of starting a new project and the fast tools we have at our disposal it’s easy to dive right in to building a new website, but often I find myself loosing track of time and knowing I still have a lot of deliverables to hand in and not knowing what they actually are. 

So Project Planning is the solution I have to force myself to do. I enjoy planning up until a certain degree but then i get bored and things start falling out of direction.

The first to do is have a meeting with your client in order to understand which type of business they have. 

Starting with the business side 

- Defining a Business Plan

- Knowing your market

- Who’s your market

- How your customers use technology 

- Which channels do they use 

Business Strategy

So, we need: 

- Business Name;

- Mission Statement; 

- Business Objectives - the goals of the business, whether they are financial or moral), that keep your business running;

- Value Proposition - what makes you stand out from the competition, what are your perks;

- Elevator Pitch - essentially a summary of the brand

Your Public 

- Reach out to the right costumer 

- Understand their needs 

- Understand where is your public (Audience Technology)

Marketing Strategy

- Individuals marketing plans for each target audience 

In order to marketing media you have 3 options:

- Paid;

- Earned;

-Owned;

TIME

After understanding how much does it to be done and stipulate the a realistic dead line, start by dividing the work in to little tasks and goals for each day or at least, each week.

Other things to consider

- Consult regularly with your costumer

- Make regular usability tests

[cheatshitcode]

Analysing the Web - Web Analytics Tools

 The data collection from your website will determinate how your business grows. 

Web Analytics is one of the most important parts of a website. Knowing what your audience is looking for and understanding how they got to you in the first place maybe be the most handful information to make a business grow. 

There are many analytics tools nowadays that can help achieve this:

-Google Analytics 

Google Analytics shows you daily views, the type of traffic, which country are your visitors from and the time they spend on it. It allows to insert a tracking code on each page of your website in order to collect specific data from a specific page. 

With Google Analytics if you see a increase or decrease on one specific day, you can easily track down what was it due eg. a change you made decreased the organic flow, or a mention/post on facebook increased visibility.

Other ways websites and companies used to track down your fingerprints on the web will be through Cookies. 

Cookies are small files that a website installs on your computer. They really have much identifying information, the website has the matching file that matches your tracking ID.  This helps to see if a user is coming again to your website.

I will post another blog talking about my own experience with Google Analytics, Spring Metrics, and Woopra.

[cheatshitcode]

Introduction to SEO

 SEO (search engine optimisation) is the combination of a series of methods and tools used on a website with the aim of increasing visibility. 

In order to understand how to use SEO I wanted to understand first how a search engine works.

A search engine executes several tasks in order to provide with the best possible results depending on the keyword you used.

The first task would be crawling, which is a task performed by a software called “crawler” or “spider”, which fetches all the webpages liked to a website. Google’s crawler has the name of googlebot. 

Afterwards, they are organised and stored in a giant database so they can be retrieve when in need. This is indexing. 

When a search is requested, processing come into place. the engine compares the search keywords with the indexed webpages of the database and calculates its relevancy.

The last step is retrieving the information. 

In order to have maximum results you also need to optimise other elements such as titles, descriptions, keyword tags, heading and alternative text. 

Hence, we can divide SEO practices into two ways: on-page SEO and off-page SEO.

On-page would be the optimisation of elements like titled, descriptions, as I enumerated before. Off-page would be link building,  increasing link popularity by submitting open directories, search engines, link exchange, etc.

There are many ways of increasing the traffic of your website, you can follow the structure and apply meta names, good descriptions, have a clear hierarchy, with the best content possible, which is consider the good practice. On the other hand, you can opt for for example, having a website use the search engines and other for the users, this is called cloaking which is a form of spamdexing.  

In order to make a successful website I need to know what exactly my business is, what is the type of audience i am aiming at, what are its strengths and what make it unique. After answer to those, will start mapping the website while using words and descriptions that would be more targeted rather than broader  since SEO is made upon keywords, you need to smart on its selection if you want to make to the results’ first page. The broader you describe your website the less chance of appearing in the first page unless you want to pay a lot of money for it. E.g. The client is a new small cafe cafe in Brunswick, using keywords like “Best” “cafe” “Brunswick” may not be the better option, since 1- he/she probably doesn’t have a big budget, 2- there is a lot of competition in that market. 

[cheatshitcode]

canvas html

http://blog.teamtreehouse.com/how-to-draw-with-html-5-canvas

http://chocchip.com.au/html-5-canvas-cheat-sheet/

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

canvas html

[cheatshitcode]

Dependency injection

In software engineering, Dependency Injection is a design principle in which code creating a new object supplies the other objects that the new object depends on for operation. This is a special case of inversion of control. Often a dependency injection framework (or "container") is used to manage and automate the construction and lifetimes of interdependent objects.

A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it. The service is made part of the client's state.[1] Passing the service to the client, rather than allowing a client to build or find the service, is the fundamental requirement of the pattern.

This fundamental requirement means that using values (services) produced within the class from new or static methods is prohibited. The class should accept values passed in from outside.

Dependency injection allows a program design to follow the dependency inversion principle. The client delegates the responsibility of providing its dependencies to external code (the injector). The client is not allowed to call the injector code.[2] It is the injecting code that constructs the services and calls the client to inject them. This means the client code does not need to know about the injecting code. The client does not need to know how to construct the services. The client does not need to know which actual services it is using. The client only needs to know about the intrinsic interfaces of the services because these define how the client may use the services. This separates the responsibilities of use and construction.

[cheatshitcode]

Inversion of control(IoC)

“inversion of control (IoC) is a design principle in which custom-written portions of a computer program receive the flow of control from a generic framework. A software architecture with this design inverts control as compared to traditional procedural programming: in traditional programming, the custom code that expresses the purpose of the program calls into reusable libraries to take care of generic tasks, but with inversion of control, it is the framework that calls into the custom, or task-specific, code.”

“Its used to increase modularity and make it extensible”.

“The term was popularized by Robert C. Martin and Martin Fowler.”

in https://en.wikipedia.org/wiki/Inversion_of_control

[cheatshitcode]

IMPERATIVE VS DECLARATIVE

ObjectThe first high level computers made around 1950′s and the way they were programming was a sort of “step-by-step recipes for computer to execute.”

That is what in its core imperative computer language is, a series of steps/orders that are given to and executed by the program or computer. 

Example: Javascript, Ruby and Swift.

These languages tend to overly difficult and hard to spot errors since they have so much writting.

In contrast there declarative programming, which declares what you are trying to achieve instead of explaining it step by step.

...

https://www.netguru.co/blog/imperative-vs-declarative 

[cheatshitcode]

ANGULAR JS

Awesome tute

http://campus.codeschool.com/courses/accelerating-through-angular-2/level/1/section/1/first-component

Angular Documentation

https://drive.google.com/drive/folders/0BxgtL8yFJbacQmpCc1NMV3d5dnM

[cheatshitcode]

ANGULAR JS - EXPLANATION

“AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

(...)

The impedance mismatch between dynamic applications and static documents is often solved with:

a library - a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.

frameworks - a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. E.g., durandal, ember, etc.

Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives. Examples include:

Data binding, as in {{}}.

DOM control structures for repeating, showing and hiding DOM fragments.

Support for forms and form validation.

Attaching new behavior to DOM elements, such as DOM event handling.

Grouping of HTML into reusable components.

Downsides

“Angular simplifies application development by presenting a higher level of abstraction to the developer. Like any abstraction, it comes at a cost of flexibility. In other words, not every app is a good fit for Angular. Angular was built with the CRUD application in mind. Luckily CRUD applications represent the majority of web applications. To understand what Angular is good at, though, it helps to understand when an app is not a good fit for Angular.Games and GUI editors are examples of applications with intensive and tricky DOM manipulation. These kinds of apps are different from CRUD apps, and as a result are probably not a good fit for Angular. In these cases it may be better to use a library with a lower level of abstraction, such as jQuery.”

more https://docs.angularjs.org/guide/introduction

[cheatshitcode]

DATA BINDING - ANGULARJS

“Data-binding in Angular apps is the automatic synchronisation of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.”

Data Binding in Classical Template Systems

“Most templating systems bind data in only one direction: they merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.”

Data Binding in Angular Templates

“Angular templates work differently. First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer. You can think of the view as simply an instant projection of your model.Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency.”

all the text from https://docs.angularjs.org/guide/databinding