Forem: Md. Ashikur Rahman

Sending an Ajax Call by clicking a checkbox to Controller

Md. Ashikur Rahman — Wed, 27 Mar 2019 11:24:47 +0000

$(document).ready(function() {
$("input[name='field_name']").click(function(){
var checkedValue = $("input[name='field_name']:checked").val();

var post_url = "controller_name/function_name/" + checkedValue;
$.ajax({
type: "POST",
url: post_url,
success: function(d) {

} //end success
}); //end AJAX
});
});

SASS, LESS and BOWER configuration for Windows

Md. Ashikur Rahman — Wed, 27 Mar 2019 05:08:56 +0000

SASS

Step 1 : Install Ruby
Step 2 : Open Command Line
Step 3 : Install SASS

gem install sass

check version

sass -v

Create sass file .scss or.sass

sass input.scss outpit.css
sass style.scss style.css

You can also tell Sass to watch the file and update the CSS
every time the Sass file changes:

sass --watch style.scss:style.css

LESS

In general to change the directory to required directory use following command

To check the list of files use the following command

It is node package so node js must be installed before installing less in the pc.
less must be installed globally -g

npm install less -g

To see the available bits of help see the following comments

lessc --help
lessc -h

To convert a less file to a style.css file run the following commands

lessc variable.less style.css

To continuously watch the changes and made the CSS file update run the following command

lessc --watch agency.less custom.css

To check the version of the less

lessc -v

BOWER

To install bower have to install node.js first as it is a node js package
It must be installed globally

npm install -g bower

To initiate bower in a directory

bower init

Some bower packages

bower install fontawesome
bower install jquery
bower install bootstrap

To check the version of bower

bower -v

WEB DESIGN and FRONT-END DEVELOPMENT (Part-4 and Final)

Md. Ashikur Rahman — Tue, 26 Mar 2019 16:13:54 +0000

Wireframes, Mockups and Prototypes: What’s the Difference?

Wireframes, if properly created, serve as the backbone of the product. It’s just like an architectural blueprint of a house: It states plainly and clearly what should go where. It has three simple objectives; the clear presentation of:

Main groups of information
Layout/structure of information
Core visualization and descriptions of user interface interactions

 The main groups of content (what?)
 The structure of information (where?)
 A description and basic visualization of the user – interface interaction (how?)

Mockup, is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:
– represents the structure of information, visualizes the content and demonstrates the basic functionalities in a static way
– encourages people to actually review the visual side of the project
Mockups are often confused with wireframes, due to the names of some software companies.

Prototype

A prototype is a mid- to high-fidelity representation of the final user interface. The goal of a prototype is straightforward: Simulate the interaction between the user and the interface.
Whenever a button is clicked, the appropriate action must occur, mimicking the experience of a full product. It should allow the user to:
– experience content and interactions with the interface
– test the main interactions in a way similar to the final product

TYPOGRAPHY

Typography is the visual component of the written word.
TYPEFACE/ FONTS/ FONTS-FAMILY
A design for a set of characters. Popular typefaces include Times Roman, Helvetica, and Courier.
There are two general categories of typefaces: serif and sans serif. Sans serif typefaces are composed of simple lines, whereas serif typefaces use small decorative marks to embellish characters and make them easier to read. Helvetica is a sans serif type and Times Roman is a serif type.

Finding

According to most studies, sans serif fonts are more difficult to read. For this reason, they are used most often for short text components such as headlines or captions.

FONT-FACE

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.
• @font-face { font-family: myFirstFont; src: url(sansation_light.woff);}
• @font-face {font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold;}

Thanks a lot for stay connected with my series of article on "FRONT-END DEVELOPMENT" :)

WEB DESIGN and FRONT-END DEVELOPMENT (Part-3)

Md. Ashikur Rahman — Tue, 26 Mar 2019 16:09:59 +0000

IMPORTATN CONCEPTS TO KNOW BEFORE MAKE A DESIGN
• In web design keep the element at first positions which actually keep the interest.
• To keep in mind that a user is going to visit the site for 3 seconds and on that 3 seconds i have to put something catchy so that a visitor get interest to go through the whole site.
• So before putting some element on the site we have to think if it is useful for the user or not.
• Call to action buttons and attractive headers with various offers or rank or superior service catch user attentions
• DRY concept- Do not repeat yourself, Which ever element and resources are available in the market try to use those rather start creating from the begining. It saves time and money.
• Use content on which license are GPL GUN or MIT
• The more you see the more design concept will grow. such as rocket theme, theme depo, theme fusion, theme forest etc.

Grid:
• Manuscript grid
• Column grid
• Modular grid
• Hierarchical grid

Flat design concept:
Flat design gets its name from the shapes used. Flat design employs a distinct two-dimensional style that is simply flat.
Here are five pretty distinct characteristics. Here’s a look at each, plus an introduction to “almost” flat design.
• No Added Effects
• Simple Elements
• Focus on Typography
• Focus on Color
• Minimalist Approach

Demo Contents and its importance:
• Content is important to choose according to priority.
• While choosing or selecting a demo content or component for the site you have to think like that you have the business.
• Have think like if that content or component serve the purpose of the target audience.
• Content analysis is important so have to divide the content according to target audience, suppose who is going to visit the site and what is the main goal for the site after a user has visited the site.
• Attractive offers and call to actions buttons are attract users.
Content Analysis and Organizations:
If we think it like a site is following the z patterns then we can follow the following patterns of organizing contents:

At top left hand side we can put a logo
Menus
An attractive sliders to showcase the services or the products offered by the company. a. A paragraph about what the business is all about? b. What the business do? c. What are the services offered by the business?
Put some samples of products and write what this thing do
A call to action button to invite user to take a look or use the product or buy a copy.
At footer part we can put a call to action button too.
Contact details and some gallery can be put.

Website must convey a message like important message or a line which is telling that our service is best or we are the number one or our quality is super etc.

It is important that from a first impression user should have understand that many things are going on at the site so have to put some UI component to flip or tab.

It is important to think about the base color and design accordingly. We can find a base color of a company by looking at the logo of that company.

Working with 3 base color is good. Or we can choose a palate of colors and work accordingly.

 Think like a target audience
 Careful about color combinations and contrast.
 Keep in mind about the values, the level, and gender of target audience.
 Do a market analysis before launching a theme in the market, if there is any trends upcoming or any big event like football or world cup, or any seasonal ceremonies etc.

SYMMETRIC CONCEPT

SYMMETRIC

Symmetry creates balance, and balance in design creates harmony, order, and aesthetically pleasing results.

Asymmetry

Asymmetry is the lack of symmetry. Asymmetry can also represent an object that breaks a predefined pattern of symmetry, or an imbalance of design elements.
Asymmetry can be used as a design tool to create points of interest and organize visual hierarchy within a group of similar elements. It creates disorder, which can call attention to certain points of a design through distinction.

Use Symmetry Strategically

Strategic use of symmetry (and the lack of it) is a powerful design tool. Designs that need more stability, a strong organizational structure, and a classic and trusting message, tend to use more symmetry in the design.

For risk-loving designs, providing asymmetry can reinforce the message. You can use asymmetry to punctuate an otherwise orderly, boring design.
Translational Symmetry is good for Layout Structure Keeping pieces of content roughly the same size and spanning them across a web page or print piece is a great way to keep symmetry while maintaining enough space for all of the essential text and imagery.

Use Rotational Symmetry to Convey Movement and Action
Rotational symmetry can simulate motion even in an otherwise flat and static medium. It can also infer progress or forward movement.

Use Asymmetry to Draw Attention

Asymmetry can make designs more interesting overall, but it serves another primary purpose: to grab attention and create visual hierarchy. Sometimes a design can intentionally be thrown off balance to direct the viewer’s eyes to a certain area.
Source: http://sixrevisions.com/web_design/symmetry-design/

Minimalist Landing Pages: The Big Idea

Minimalist landing pages have only one primary goal.
Whether it’s to click on a sign-up button or enter your email address in a web form or download something onto your computer, there is only one well-defined action the web designer of the landing page wants her users to take.

WEB DESIGN and FRONT-END DEVELOPMENT (Part-2)

Md. Ashikur Rahman — Tue, 26 Mar 2019 16:05:16 +0000

SCANNING PATTERNS
Just as with a scurrying movement in the corner of your eye or a sexy walk from someone across the street, the human eye is drawn automatically to certain points of interest. While some of this depends on the person, the majority of people tend to follow deﬁnite trends — including how they view a web page.

The F Pattern
Users will rarely read every word of your text.  The ﬁrst two paragraphs are the most important and should contain your hook.   Start paragraphs, subheads, and bullet points with enticing keywords.

The Z Pattern
Scanning occurs on pages that are not centered on the text. The reader ﬁrst scans a horizontal line across the top of the page. When the eye reaches the end, it shoots down and left and repeats a horizontal search on the lower part of the page.

Background 
Separate the background to keep the user’s sight within your framework.

This is a prime location for your logo.
Adding a colorful secondary call to action can help guide users along the Z-pattern. Center of Page  A Featured Image Slider in the center of the page will separate the top and bottom sections and guide the eyes along the Z path.
Adding icons that start here and move along the bottom axis can guide the users to the ﬁnal call to action at Point #4.
This is the ﬁnish line, and an ideal place for your primary Call to Action. THE Z PATTERN

Rules of Third
The guideline proposes that an image should be imagined as divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.

Direct flash and Bounce flash
Direct flashing is firing your flashgun pointing directly at your subject. And Bounce flash is when, rather than firing your flashgun pointing directly at your subject, you point it elsewhere typically up or at an angle, bouncing off a wall or ceiling.

4 KEY WAYS TO MEASURE
Contrast
Contrast is the occurrence of two different elements positioned close together. In web UI design, these elements can be colors, textures, shapes, direction, or size, to name the important ones.

Color
In a nutshell, bright colors stand out from muted colors. This may seem obvious, but the important takeaway is its application: you can exploit this to draw your user’s attention where you want. Additionally, certain colors can help set the mood of the entire site.

Size
Size, particularly for text, is a powerful tool in that it circumvents the traditional rules of left-to-right and up-to-down reading. That means a large word or phrase in the bottom right-hand corner might be the ﬁrst thing a person reads.
SIZE Source: http://getactive.sj-stmk.org/

Space
One of the most important tricks in making something pretty is the absolute absence of something pretty. Cluttering too many attractive images together is a quick way to ruin them all. It’s important that your web interface has breathing room and that you space everything out.
Space is not empty it is an element.
SPACE Source: http://minimal.skat.tf/

COLOR PSYCHOLOGY

Color psychology is the science of how color affects Human behavior

USING THE RIGHT COLOR IN THE RIGHT WAY

Color is a tricky thing. You have to use it in the right way, at the right time, with the right audience, and for the right purpose. Example: For Coca Cola, you can never use Blue, For Farming Companies, Green is most optimum. L’OREAL USE PURPLE: L’oreal sells products to women. That’s why L’oreal uses black and white, with purple overlay, in their e-commerce homepage.

WOMEN ARE NOT COMPLEX

In a survey on color and gender, 35% of women said blue was their favorite color, followed by purple (23%) and green (14%). 33% of women confessed that orange was their least favorite color, followed by brown (33%) and gray (17%).
Source: http://blog.kissmetrics.com/how-colors-affect-conversions/

MEN ARE SIMPLE

• If you’re marketing to men, these are the colors to stay away from: purple, orange, and brown. Instead, use blue, green, and black.
• These colors (blue, green, and black) are traditionally associated with maleness.
• However, it comes as a slight surprise to some that brown isn’t a favorite pick.

BLUE - GAINUSER’S TRUST!

• The color blue is a color of trust, peace, order, and loyalty.
Source: http://www.empower-yourself-with-color-psychology.com/color-blue.html
• Blue is the color of corporate America and it says, “Chill . . . believe and trust me . . . have confidence in what I am saying!”
Source: http://www.tuned-in.com/ColorSpeaks/Blue.aspx
• Blue calls to mind feelings of calmness and serenity. It often is described as peaceful, tranquil, secure, and orderly.
Source: http://psychology.about.com/od/sensationandperception/a/color_blue.htm
The world’s biggest social network is blue. For a company whose core values are transparency and trust, this probably is not an accident. PayPal also prefers the color blue. This helps to improve their trustworthiness. If they were to try red or orange as the theme color and branding, they probably wouldn’t have the same level of conversion.

YELLOW IS COMPLEX

Yellow is a color of warning. Brands use yellow to show that they’re fun and friendly. Yellow makes babies cry and people angry.
Source: http://www.businessinsider.com/branding-and-the-psychology-of-color-2012-12?op=1

GREEN IS IDEAL FOR ENVIRONMENTAL AND OUTDOOR PRODUCTS

Most intuitive color connection is green. Green essentially is a chromatic symbol for nature itself. Green also is a color that can improve creativity. Green also is a good call-to-action color.
Example: All of Dell’s conversion elements are green.
ORANGE

Orange can create a sense of haste or impulse.

Example: Amazon.com uses orange in their “limited time offer” banner. The color suggests urgency, which makes the message more noticeable and actionable.
BLACK - LUXURY AND VALUE
The darker the tone, the more lux it is. Full black color #000 is simple but if it is mixed dark then it creates more acceptance in the web design and peoples mind and it looks different then using full black.
HOW TO CREATE A COLOR PALATE IN PHOTOSHOP:
Filter-> pixelet -> Mozaic

WEB DESIGN and FRONT-END DEVELOPMENT (Part-1)

Md. Ashikur Rahman — Tue, 26 Mar 2019 15:58:31 +0000

USER EXPERIENCE [UX]
• Target – Who is going to use? What need to be present? Who are the target users?
• Process – What will be done?
• Achieve – Measure if the target is fulfilled by assessing some key factor.
USER EXPERIENCE [UX]

Plan: Before starting the work or think about user experience make a plan about executing the work.
Research: Competitor analysis means see at least 20 similar products or services or template available in the market, mid-range, high range, multipurpose analysis means how this design will serve the purpose think about that.
Design: Creating wireframe, making prototype, making mock-up before implementing the design.
Adapt: For which system is the design and will the system like android or web will adopt the design? So have to think about the system adoption.
Measure: After creating the design measure the design on various perspective and factor described.

MEASURE
Why Measure?

It is very important to measure the design work done as who do not able to measure cannot able to execute the work according to client’s satisfactions and you can't manage what you can't measure.
What to Measure?
Measure contrast, color, space, size of the element exist on the design.

How do you know when your design is good enough?

When all of the measurement looks good and target is fulfill or achieve then a design is good enough.

MEASURE
Qualitative Data: Blue/Green Color, Looks Cluttered, Fonts are Heavy, Not Clear, Awesome font
This data are not specific and do not sounds professional, this type of data mainly come from clients end.

Quantitative Data: Icons Width 1170px, 20px Spacing Used fromTitles, Font-size 14px Body padding is 10px, FontAwesome size 20px
Quantitative data is professional and specific and give the details of work area and it sounds more professional. This type of data helps developer and make clients aware about where the work is done and express a professional attitude towards clients.
MEASURE Subjective or Objective Measure?

Wide Slider: when the site is the subject and slider is worked as an object then a wide slider is used
Full Width Slider: When a site is an object of the slider then the full site is worked as a full width slider.

WEB UIVISUAL HIERARCHY
Informing users : By using various elements like call to action buttons users can be informed about an action of a website. Like a button called: “Buy our services” is actually indicating a user about a special service for a user.
Communicating content relationships: Placement of the content is very important for a web service or websites, like for a corporate site, “About Us” menu button will go first and then “Services” and then “Products/ Our Products” and then “Contact Us” as first question will come up like who are you? What do you do? What are you selling? And where I get those?
As well we can put testimonials and featured products and trusted certificates get which actually attract a user about the business.

Creating emotional impact: Creating various emotional impact like “Hurry offer is going to end soon”, “Try at least 30 day trail”, “Signup and will get 5GB free” etc. Those conditions are actually attract a user towards the service.

END GOAL OF UI DESIGN
• What is this? (Usefulness)

• How do I use it? (Usability)

• Why should I care? (Desirability)

JAVA and Object Oriented Programming Basic

Md. Ashikur Rahman — Wed, 07 Mar 2018 05:42:01 +0000

JAVA and Object Oriented Programming Basic

Ashikur Rahman

Any real-life entity/object have two parts

Properties (Describes its height, weight, width etc.)
Functionality (Describes how it behaves)

Object-oriented programming removes some constraints of procedural programming language.

Modularity (Logic are modular)
Reusability (Code are re-usable fashion)
Extendable (Code are extendable)

Object

An object is an entity which has

Identity (Names)
State (Values)
Behavior (Performance) An object is an individual representation of a real-world entity.

Class

A class is a template, helps to describe common

Attributes (e.g. customer id, name, telephone no…)
Activities (e.g. purchasing an item, etc.) Example of a real-world entity (Customer)

Definition of a class of different perspective:

A class is a blueprint/real-world entity
A class is a generalized representation
A class is an encapsulation of properties and corresponding functionality A program is a set of instruction to solve a problem UML (Unified Modeling Language) A class diagram is a notation used to represent a class in a document. Class diagram is a kind of UML. UML is a language for visualizing, specifying, constructing and documenting the software.

Access modifier/specifies

(-) Private: Only can be accessed from inside the class where it is declared.
(+) public: Can be accessed from anywhere

It is recommended that in a class all the variable/properties should be private and all the method/functions should be public.
Five feature of object-oriented programming:

Classes and objects
Abstractions
Encapsulations
Inheritance
Polymorphism

Abstraction:
Hiding unnecessary details and showing only necessary details. The concept of identifying the essential details to be known and ignoring the non-essential details from the perspective of an end user.
(E.g.: Method name and parameter need to be known, we need not know the whole process)

Encapsulations:
Combining all elements into a capsule (E.g. : A class, which contains attributes and functions and all those attributes and functionality need not be exposed using access modifier we can achieve this).
The concept of hiding internal details and providing a simple interface to the user.

Inheritance:
Concepts of which allows defining generalized and specialized characteristic and behavior. The specialize entities automatically inherit all the properties and behavior of the generic one.

All the generalize details will be present in a parent class
All the specialize details will be present in a child class
A child class will extend the parent to get the generalize properties.

Polymorphism:
If the same method behaves different ways in different situations

Object-oriented system development:
3 main phases

Object-oriented analysis (OOA)
Object-oriented design (OOD)
Object-oriented programing (OOP)

OOA: Analysis the problem structure and identifying the number and the name of the class
OOD: Elaborate class structure, what should contain (attribute and functionality)
OOP: The process of implementing the design using the object-oriented programing language

Member variables: Used for representing the state of an object/attribute of a class called member variable also called global variables.

Access modifier: Used to access or hide the attribute and the behavior of the class

The following syntax can be used to create an object of a customer class and refer is using a reference variable.

Customer custobject= new Customer();
Custobject – Reference variable and new Customer() – is the object.

JAVA architecture is composed 3 components

JAVA programming language
JAVA byte code
JAVA virtual machine

.java -> .javac -> .class ->Interpreter (Win32) or Interpreter (Linux) or Interpreter (Mac)

JAVA is a byte code level platform independent
Platform independency depends on

Source code level
Byte code/ executable level

.cpp or c++ is a source code level platform independent but in executable level, it is not. The only component in JAVA which is platform dependent is JVM (Java virtual machine)

JVM – Converts bytecode to corresponding machine level language and executes the instructions.
JDK – Create/develop JAVA in runtime
JRE – Runtime/ Kit just to run and compile or convert the code to bytecode
JVM – Interpreter/ Read line by line and convert byte to executable

During the execution of a program, the storage of a program and data as follows:

All the java code stored in the memory called code segment
All the global variable we declare for a class stored in the data segment
All the variable which declare inside the class and outside of all the function is called member variable/ global variable
Life of a member variable depends on an object
The reference which points to a newly created object is called reference variable
All the details of a class should be present in the { }

Private int a;
Public void geta(){}

When we create an object it resides in the heap memory.
New keyword returns a newly created object.
The reference variable is simple variable use to access the object which is created in a heap memory.
Main is the starting point of execution of any Java program.