Anisur Reza Ch. (আনিসুর রেজা)

Innovative way for styling numbers in ordered list

Anisur Reza Ch. — Thu, 26 May 2011 03:35:39 +0000

Usually, to output a numbered list , we use ol. In this case by default , we dont have any semantic way to customize the look of the numbers.

Roger Johansson provided an excellent solution for this problem. A demo page is also provided.

Default numbering is disabled (list-style:none)
Numbers are initiated using counter-reset:li property,
The list counter is put as a the content using :before pseudo-element
The counter is incremented by 1 using counter-increment:1

Note: IE7 does not support content property. People having IE8 or greater will enjoy the stylish look, otherwise default numbering style is displayed.

User Interface Design Tools

Anisur Reza Ch. — Tue, 03 May 2011 04:18:26 +0000

As web designers always need to consider better user experience while designing user interface. In this post, I tried to mention some useful resources for awesome user interface design.

As I have gone through the list of 50 User Interface Design Tools, some of them are really impressive.Mentioning my favorites:-

1. Patternry

Patternry is a user interface design pattern library aimed to help solve common interface design problems.

2. User Interface Design Patterns

User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.

3. Pattern Tap

Pattern Tap is here to satisfy and encourage the inspiration needs of interface design peers and peeps. It aspires to be the one stop pattern shop for your next inspiration need.

4. User Interface Design Framework

A free User Interface Design tool for Web Designers.

5. Mephobox

Great resource for finding design pattern inspiration. You can browse by user or website, or check out collections based on individual design elements.

6. iPad GUI Set

Everything you need for your iPad app layout in layered, vector PSD files.

7.Concept Feedback

Post your designs and concepts and get free feedback from the design community.

DHTMLX is a JavaScript library that provides essential functionality for building cross-browser, Ajax-based user interfaces. Develop impressive web applications faster with a set of ready-to-use UI widgets.

9. jQuery Labs

An enormous library of pre-made jQuery components for your website.

10. ZK

ZK includes over 200 ajax components, all ready to go.

11. Cacoo

Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. It can be used free of charge.

12.. JQuery UI

jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

Clearing Floats

Anisur Reza Ch. — Mon, 02 May 2011 18:42:10 +0000

When a container has multiple elements with float properties we need to clear the float at the end. Usually what we do is create an empty div with clear:both property below the float elements inside the container. Without extra mark-up this issue can be solved using css.

Need to prepare a clearfix class like below:-

.clearfix:after
{
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden:
}

To support IE 7 & IE 6 additional codes needed to be written:-

*:first-child+html .clearfix{min-height:1px;}  /*for IE 7*/

* html .clearfix{height:1%;} /*for IE 6 */

Assigning the clearfix class to the container will automatically clear all the floats.

Understanding Inter VLAN Routing

Anisur Reza Ch. — Mon, 02 May 2011 18:19:54 +0000

To make 2 separate network usually we use 2 sepearate switches and configure router according to that. But its also possible to maintain multiple networks using a single switch. That can be done in two ways:-

Traditional way: Suppose we have two networks (VLAN) connected with the switch. Therefore two connections are also made from switch to a router and each port of the router is configured with an IP Address of a particular VLAN. For larger networks its quite impossible to maintain a single port of the router for each VLAN. So a modern way is followed to overcome this problem.

Modern way: In this case, a trunk path is created in between the switch and the router. Then sub-interface is defined to the router port that the switch is connected to. Code to accomplish this task is given below:-

Assuming the trunk path is connected to fast ethernet 0/5 of the router.

#config:interface fa0/5.10;

#config(sub-if):encapsulation dotIq 10

#config(sub-if):ip address 172.16.10.1;

Similarly other networks are configured. To configure native vlan we need to write encapsulation dotIq 99 native.

No shut command is inserted under the actual interface mode like below:-

#config:interface fast-Ethernet 0/5;

#config(if):no shut;

Centering elements both Horizontally & Vertically

Anisur Reza Ch. — Thu, 28 Apr 2011 09:11:43 +0000

An element can be easily horizontally centered using margin:0 auto properties. To make it vertically centered more works are needed to be done.

Lets say we have a markup like following having a div with id Body. Its going to be centered.

  
   
    Content goes here

CSS Code:


 html,
 body {
 width:100%;
 height:100%;
 }
 html {display:table;}
 body {
 display:table-cell;
 vertical-align:middle;
 }
 #body {
 max-width:50em;
 margin:0 auto;
 }

Here, we made the HTML to behave like a table and body as a inner cell of the table. So saying vertical-align:middle makes everything inside body vertically centered.
More explanation can be found in 456bereastreet.com

Dummy Image of any size for WebDesign

Anisur Reza Ch. — Wed, 27 Apr 2011 18:38:23 +0000

As we know, there is site for dummy text generation, now we have image generator of any size of our need.
Thanks to lorempixum

STP Configuration

Anisur Reza Ch. — Wed, 27 Apr 2011 18:18:21 +0000

STP is defined as Spanning Tree Protocol, used in switches to prevent looping problem when multiple switches are connection with each other. As we need to maintain redundancy , we also need to prevent any looping events.

By default STP Basic Mode is ON in switches. But this can be further modified using certain commands.

STP Convergence comes in three steps:-

Step 1: Election of Root Bridge: Considering Bridge ID(Bridge Priority+MAC), a bridge is selected as root bridge.

Step2: Root Port Selection: Port through which other switches are connected with the root bridge.

Step3: Designated/Non-Designated Ports: After all switches having their root port selected, other ports can be either designated or non designated depending on costing. The port through which cost is lower to connect with root bridge is defined as designated port. The other ports are defined as Non-Designated Port.

A port of a bridge can be in different modes. Modes are Blocking, Listening, Learning, Forwarding & Disabled.

Root Bridge Election can be influenced in two different methods.

Method 1:
By default priority is set to 32768 in VLAN 1.. To define the Bridge Priority followig commands can be used:-
Config# spanning-tree vlan primary

#spanning-tree vlan secondary

Range for primary-> 24576 or 4096 incremental but below the lowest detected
secondary 28672 (predefined)

Method 2:
This commands should in interface mode.

spanning-tree vlan vlan priority 24576
range of priority (0 – 65536)

Defining switch priority:
In some cases, it might happen that multiple ports get the same cost for reaching root bridge. In this case, switch port priority can be modified. By default switch port priority is 128. For fa0/1 it is 128.1, for fa0/2 it is 128.2.

Configuring port priority:
(config-if)# spanning-tree port priority value range (0 – 240), Incremental of 16

To prevent broadcasting bpdu packet to access mode ports (through which pcs are connected):

(config-if)# spanning-tree port-fast

There is also another command bpdu guard to shutdown the certain port if any switch is connected instead of a pc through that port.

Configuring VLAN

Anisur Reza Ch. — Mon, 25 Apr 2011 16:05:32 +0000

1. Create Topology

2. All switch (codes in global configuration mode)

a. Vtp mode (vtp mode server/client/transparent)

b. Vtp Domain (vtp domain )

c. Vtp password (vtp password )

3. All trunk should be configured (code in interface mode) (switchport mode trunk, switchport trunk native vlan )

4. Server configured switch (create Vlan) (in config mode: vlan 10, name gp)

5. Transparent configured switch (if any) (Create VLAN)

6. VLAN assign to ports (switchport mode access, switchport access vlan )

7. IP configuration of switch

8. IP configuration of PC

Troubleshooting Vlan

Show vlan brief (vlan assignments showed)

Show interface trunk

Show vtp status

Show vtp password

Checklist before sending design to print

Anisur Reza Ch. — Mon, 18 Apr 2011 10:59:11 +0000

Keep a backup of your original file.

Outline all the texts: select all the text by pressing ctrl+A. Click TypeMenu->Create Outline.

Make sure all the images have 300dpi and color is converted to cmyk.

Make sure all the transparencies are flattened preserving alpha transparency (Object->Flatten Transparency)

Embed all the images used in the design. Bring the Links window (Window->Links). Now select images and click embed from sidemenu). This needed to be done for all the pages.

Variations in Black

Anisur Reza Ch. — Mon, 18 Apr 2011 10:46:04 +0000

The black color which we use in adobe photoshop looks quite different when its printed. Thats because its not actually the real black.

For printing we may use 2 variations of black. Those are:

Rich Black (CMYK) : 40,0,0,100

Standard Black (CMYK): 0,40,0,100

Registration Black (CMYK): 100,100,100,100 (used only for crop and registration marks)

Using proper CMYK values ensures that the design is printed as we have seen in the computer screen.