Tag Archives: web developer

Understanding Z – Index Property in CSS Part 2

In part 1 of this series, we have get some fundamental understanding of Z-index concept and about natural stacking order in software programming. I would like to clarify that z-index is only applicable where position properties exist otherwise the element without position property will render first and will remain at the bottom of staking order even though it is top in HTML hierarchy.

Stacking order without Z-index
Stacking order without Z-index

For instance, in above image, we have taken DIV elements in their natural order in HTML like from DIV #1 to DIV #5. In this example Div #1 to Div #4 are appearing in natural HTML stacking order though they don’t have rendered any Z-index in below example code. Whereas Div #5 is seating at the bottom/behind the stacking order because it doesn’t have any position property allocated.

div {
font: 12px Arial;
}
span.bold { font-weight: bold; }
#normdiv {
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
opacity: 0.7;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
opacity: 0.7;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
</style></head>
<body>
<br /><br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
</div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
</div>

 

Stacking order with Z-index
Stacking order with Z-index

Now, if we apply z-index to each Div element and try to change their natural stacking orders in our customized ways, we would have definite success when the Div element has position property applied before. Otherwise, as in case of Div #5 it will remain at the bottom of visual hierarchy even though it has z-index 8, and at the top in HTML code hierarchy.

This becomes obvious in the example below.

div {
opacity: 0.7;
font: 12px Arial;
}
span.bold { font-weight: bold; }
#normdiv {
z-index: 8;
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
z-index: 2;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
</style></head>
<body>
<br /><br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
<br />z-index: 5;
</div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
<br />z-index: 3;
</div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
<br />z-index: 2;
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
<br />z-index: 1;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
<br />z-index: 8;
</div>

Therefore, web developers at Lujayn has concluded that z-index will work only when an element has a position property explicitly set to absolute, relative, or fixed.

 

Advertisements

Intro with Lesser-Known but Brilliant Apps for Web Developers Part 1

 

Brilliant Apps for Web Developers
Brilliant Apps for Web Developers

We as web developer community use some standard and essential web development tools in our day-to-day workflow. For instance, IDE, programming software according to the technological specifications, debuggers, analytic software, etc.

These are well-known and highly used tools among the web developers of all ages. Since, our web development is becoming more intricate, due to increased demands from clients, quality credentials, speed, and numbers of technologies entering in the market every day. In such conditions, we need additional helps from the some advanced and lesser-known tools. Therefore, in this series I am going to mention such tools in brief.

CSS3 Click Chart for CSS Lovers

CSS is essential part of our web programming and keeping CSS code compact is must condition for rapid development. In order to keep CSS code compact, we need to write them in short forms keeping their attributes’ order intake. If you can’t remember the order of CSS attributes, this CSS3 Click Chart is very handy tool to get live code examples of CSS3 syntax according to the attributes you have selected. You can find trendy attributes along with all common ones.

Patternizer for Awesome Code-based Patterns

With augmentation of responsive designing using HTML, CSS, and JavaScript, we can’t rely on the images to create designing patterns on our multiple devices canvases. No doubt, it is daunting task to create code base patterns each time from the scratch. Therefore, Patternizer will surely help you to obtain tiny script in (.js) JavaScript format that may let you create infinitive options in your pattern designs on your website. Patternizer may let you be creative with its GUI and get instant code to place on element.

Sprite Box to Improve Performance

Web developers know one fact obviously that frequent client-server requests cost us in delayed downloading of web pages and interactions. Images are taking big chunk of processing powers and requests in frequencies. Therefore, preparing sprites for UI elements and important images reduce the numbers of images to download and numbers of request to the server in return.

Of course, coding for small and simple project for sprite making is easy, but managing big projects make web programmers sweating. Therefore, Sprite Box has made WYSIWG tools to define/generating sprite classes and IDs based on your uploaded images to create sprites. You can line up your graphics perfectly.

This WYSIWG tool let you to align areas of a sprite image based on the background position properties of CSS using combination of jQuery and HTML5.

Primer for Rapid CSS Creation

We have seen that many web programmers among the web development community who used to write markup first and then create CSS on later stage. Primer is the ideal tool for them. What you have to do is just paste your HTML code in a window and press prime it button. You will have blank CSS code based on the classes and IDS you have used in your markup. Copy them and fill the blanks with your desired styling parameters in those empty CSS nodes. You will have functional CSS files quickly and accurately without syntax mistakes.

There are many other tools out to help you to be productive just like the web development team at Lujayn does. Of course, we will see about them in the next part of this short series.

 

 

Present Cloud Computing Services for Mobile App Developers Part 1

Today we are living in device agnostic era where Internet is ubiquitous, with cord or without. This nature of device consumption creates some unique scenario for software developers who may be opt for web or mobile programming. On big devices, we have enough computing power in form of fast processors and huge storage power in form of large disk space. Against these, mobile devices lacking all and force us to look at different solutions.

It is true that we can’t take much risks with mobile devices where we don’t know that when our user will lost the device with all critical data. Therefore, storing data outside the devices is a mandatory provision. Cloud computing is one of the best solutions for this data trade off as internet accessibility is not much big issue. Thus, dependency on cloud is opening new avenues for small business to large enterprises where you are charged bit-by-bit you consume.

Before a year, thinking about taking cloud services was somewhat costly affairs and used this option is some inevitable cases only. Now, things have changes at 360 degree and recent explosion in cloud computing services makes the lives of web developers, mobile developers, all sorts of businesses, and finally, end users easy. Therefore, I have decided to discuss something about present cloud computing services for mobile developers who are reluctant to take advantages of cloud services for their universal mobile programming platform and in favour of their patrons in this short series.

Amazon Cloud and Web Services

Today Amazon is symbol of reliability and security for cloud computing, cloud storage, and web services seekers. Amazon is offering various storage services for your fatty data such as:

Amazon S3 or Simple Storage Service. Here you can get simple and intuitive interface of AWS management console to streamline your tasks. However, pricing of Amazon is bit higher in compare to others, but recent slashing has made now affordable for all including e-commerce businesses where frequency of data interaction is higher.

Against these, Amazon Glacier has devised for infrequent users who mostly opted dead storage services for their critical but less frequenting data usage. Here you web developers and mobile programmers can recommend their clients to take advantages of low-cost storage services for their data archiving and data backup needs.

At present, we web developer and most of the time mobile developers looking for the web services for our applications, which are demanding fine granular updates, with high frequency and persistency. In such conditions we have to access to raw and unformatted data storage at block level i.e., hard drive like storage. This in mainly happens in case we use Amazon EC2 instances. Thus, our best solution lies in the Amazon Elastic Block Storage or Amazon EBS in short.

With Amazon EBS mobile programmers can predictably scale data volumes upto thousands of IOPS per Amazon EC2 instance and grant access at different geo-locations as per needs by placing snapshots of Amazon EBS volumes in different blocks of different zones.

Recent mobile application development trends suggest an increase in offline services where absolute and constant connectivity is not possible. On such occasions, mobile developers have AWS Import/Export services for large amount of data transfer whenever the client devices get reconnections. Moreover, AWS Import/Export services are faster than normal Internet transfers that save you from bearing Internet upgrading cost.

For more, you need to wait for the next part.

Present Cloud Computing Services for Mobile App Developers

Since we know the Amazon as a brand, synonyms with the quality cloud computing services, for web developer as well as mobile developer communities. Its out-of-box services for

  • Cloud-based computing like Amazon EC2, Auto Scaling, Elastic Load Balancing, Amazon workspace, etc.
  • Low-cost data storage on Pay-as-you-go pricing model like Amazon S3, Amazon Glacier, AWS storage gateway, etc.
  • Fully managed relational and NoSQL database services like Amazon DynamoDB, Amazon RDS, Amazon Redshift, etc.
  • A range of networking services
  • Cloud based analytics services
  • A variety of managed services to use with your applications
  • Services to help with the deployment and management of your applications

Apart from these all packages for web developers and mobile programmers it is going to offer something outstanding in history and today we will take a glimpse on them.

A Tough Competition to the Google

Amazon is making progress rapidly. This retailing giant have thrown open a new portal aiming to help the developers round the globe to develop and create apps for its well-known App store and with the help of great tools and documentations they get the advantage of its cross-platform APIs. It seems Amazon is mercilessly intent to give Google a good run for its money with the App store.

It have given Google such a tough competition that Google have started giving availability of its play store round the world with adding the features like developers can submit web apps and can sell physical goods in their apps. The latest step taken by the Amazon.com in Amazon’s push is its new developer portal. The first and best thing it has done is it has made the application submission process streamlined for the developers.

Streamlined Submission Process for Web and Mobile Developers

In a recent blog post Amazon.com has mentioned that developers just need to do is drop in their APK application package file in the updated testing widget to get to know their written codes are compatible with the App store or not. If they are compatible and passes the test the submission process begins directly from the result page.

Amazon also has made efforts by updating, fixing shortfalls and improving the portal’s documentation section. They have provided the facility for developers to find App store API and get to know with what platforms they are compatible. For example, the developers can see that Android and iOS apps both show compatibility with the Analytics API.

Tools and Services for the Web and Mobile Developers

It has also mentioned in the blog post that Amazon has devoted a full page to the tools and services for the developers as it thinks that might be very helpful to the developers. The page also includes the features like game engine plugins and the cross platform plugins. Amazon’s portal also includes the pages devoted to HTML5 and iOS developers, which give the facilities to the developers such as they can add leader boards.

Like many other companies in the market Amazon has also acknowledged how much important the mobiles and mobile users are for its business and so it have made itself relevant to mobile developers as taking a step ahead. Amazon’s App store has become a great alternative to the Google’s App store giving it a tough competition.

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 3

In the previous article, we had discussed about the laws that work while the human perceives the object. In our today’s article, we are going to discuss about the Gestalt principles that sit at the foundation of everything we do visually as web designers.

Principles

Most of the gestalt principles are easy to grasp and understand by web designers and web developers who have less understanding of human psychology. A common theme runs through many of them. Gestalts principles are at the base of anything that an individual perceives. This is the main point what we as web designing community need to know before run an initial survey of guerilla UX research on your audience.

Principle of proximity

Principle of proximity is much similar to the law of common regions, but it utilizes space as the enclosure instead of shapes, boxes or anything else. In this principle, an individual perceives the objects that are closer to each other as related to each other than the objects that are further apart from each other. When objects are placed close to each other, they are perceived as a group rather than individual different objects.

Principle of similarity

Law of Simplicity in web designing
Law of Simplicity in web designing

An individual perceives the objects that have same characteristics as related to each other than the objects that does not share those characteristics. Any type of characteristics can be similar may be the color, shape, size, texture, or anything else. When an individual perceives these objects with the same or similar characteristics are he considered them as related. Now, we have clear idea that how to differentiate and assimilate same objects just by inducing simpler changes in colors or textures during our web designing process.

Principle of symmetry

An individual tend to perceive objects to have symmetry among them as they form symmetrical shapes around their centre. An individual tend to seek a feeling of solidity and order by going with the symmetry. It is in his innate nature to impose control on disorder. Individuals always try to bring symmetry in their life and others around them.

Principle of continuity

An individual perceives objects that are arranged on a line or curve as more related than the objects that are not arranged on a line or curve. It is in an individual’s instinct to follow a path, a road, a fence line or a river. An individual tend to perceive or move in a particular direction until he finds something significant to perceive, or to determine there is nothing significant there to perceive. This gives us a big weapon to make a continuous object with simple dots or tiny lines where less pixels and lightweight files are mattering more in a web development project.

Principle of closure

Filling symmetry
Filling symmetry with simple shape to make complex one during web designing

Here in gestalts principles the principle of closure seeks simplicity. The principle of closure is the opposite of that of the law of simplicity. In law of simplicity, an individual perceives a complex object and tries to find simplicity in it while in principle of closure an individual perceives different parts of the object and combines them and form a simpler one. While an individual perceives a complex arrangement of objects, he tends to look for or find a single, recognizable pattern. Human eyes tend to fill in missing information while it perceives something and forms a complete figure. This ultimately enable web designers to draw simple shapes in fewer numbers and make a simulation of a big and complex image without rising KBs and web page downloading rate.

 

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 2

In the previous article, we had discussed about the ways in which an individual perceives an object and environment around him. This is important for web designer and web developer community to get such fundamental understandings. Therefore, in today’s present article, we are going to learn about the laws that work while the human perceives the object.

Laws

Most of the laws are easy to understand for an individual, as it does not require any technical in-depth knowledge about the human psychology.

Law of Simplicity

Generally, an individual prefers to perceive objects that are simple, clear, and ordered. Based on the human instincts these things are considered as safe. Simple objects are familiar so it take less time in processing and presents with less hazardous surprises.

Figure/ground Law

Figure ground law is related to the relation that is shared between positive elements and negative space. An object is considered to be positive element and into the focus when an individual perceives it. Simply we can say that an eye will separate the whole object from its background to understand it and process it.

Law of Uniform Connectedness

From all the laws and principles that discuss about the relatedness of objects the law of uniform connectedness is the most powerful. An individual perceives the objects that are connected as related to each other then the objects with no connection. Objects can be said as connected when they share something common or have links between them.

Common Regions Law

The other way in which an individual perceives objects is in groups, enclosure or arranged in a pattern. All the objects placed inside the enclosure, group or patterns are perceived as related, and the objects that are outside are perceived as different and separate. Typically you can do is to place the objects in a square, circle, triangle or any other shape or can place them in a different background then their surroundings will show them as of common region.

Focal Point Law

An individual tends to perceive objects, which seems to capture his interest or the uniqueness of objects draws his attention and holds it. This law shows us that an individual’s attention is drawn and held by the objects that are in contrast, unique and of his interest. An individual’s attention can be drawn by placing a different object in the group of all the similar objects and it will successfully hold his attention. The focal point law and the principle of similarity are both related in a way. The focal point can’t be perceived if there is no similarity between the other objects.

Law of Past Experiences

An individual tend to perceive objects according to the experiences that he have gained in the past. The law of past experiences is considered as the weakest among all the others. As all the individuals have different perceptions and past experiences it is difficult to assume how an individual will perceive an object. The perception of an individual differs from that of others on their past experiences.

 

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 1

Gestalt had drawn some useful principles in human psychology and we web designers always and all time dealing with human psychology anyhow. Therefore, today I have decided to introduce some useful principles and their importance in web designing process.

Every individual have a different perception. They perceive things and objects in their own way. Human being when looks at an object he perceives it entirely before she sees the particular object. Human sees an object as whole before she starts seeing its parts and looking minutely about its features. Humans tend to see the objects in a group rather than as different objects, whether they may relate or not. Technically human brain has a few characteristics in which it collects information and perceives the environment around it. Following are the ways in which an individual perceives objects.

Emergence

Emergence is the process of forming complex patterns with the help of simple rules. When an individual attempts to identify an object she looks at the outline first. Only after identifying outline, she matches the shapes and parts of that object and gets the clear picture of it. Emergence is a way in which an individual processes the information that she receives from his perception and draws a result.

Perceptual organization

Perceptual organization is a way in which an object that is perceived contains more spatial information then what is actually present. Generally, humans match the patters of what they see to the patterns of the objects that are actually present in their memory. Moreover, always there is no exact match present. They find a near match, fill in the gaps and spaces with it, and perceive an object in that manner.

Multi-stability

Human brain is active in such a way that it does not rest on an object for a certain time but keeps on moving over the other information inputs that it receives. Multi-stability is the tendency of human brain to dodge between the objects perceived at a time and their alternative interpretations. An individual can perceive an object in more than one way. She is not capable of seeing both at the same time but dodges between two alternatives quickly.

Invariance

Human brain is capable enough of identifying an object or processing information by just from a clue given to it. Invariance is a way of perception in which an individual perceives a single object and recognizes it independently whether of its rotation, translation or scale. Despite an objects different appearances an individual can identify it as she have developed an ability to recognize it from different perceptive.

Conclusion

The perspective of every individual is different from that of his fellow individuals. To attract attention and to motivate an individual to act on it you have to put forward something that attracts attention of the individuals perceiving it. In graphic design too, you will have to make a design that appeals your observers. You can get attention from your observers by designing something that touches them and appeals them based on their emotions, needs and wishes.

In this article, we have just discussed about the outline of how an individual perceives objects and environment around him, collects information, and relates to it. In the next article, we will discuss about the gestalt’s principles and their working in designing.