epsco: مايو 2013

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

الخميس، 23 مايو 2013

Simplex Design blog : The Latest Techniques in Web Designing Each Developer Must Know

Link to SimplexDesign - free premium blogspot template

The Latest Techniques in Web Designing Each Developer Must Know

Posted: 23 May 2013 12:12 AM PDT

Web designing has changed dramatically over the years. Just a few years ago we wouldn't have found a basic static page out of place and might have even remarked as to how great it looked. However, today there is no way one can compromise on latest web designing technologies as competitors are always trying to outdo each other.
With that in mind, web designers should always ensure that they are well acquainted with all the latest techniques and technologies available for building websites. One of the most important factors in such technologies to consider is UI. User Interface is ever more important in the world today because of an increasing dependency on mobile gadgets like smartphones and tablets. Building a website with a great user interface is not only important but also a crucial factor in the survival of a business. With that in mind, here are some of the most important reasons why web designers should consider UI of a design technology more important than anything else:

1.   A web design technology may look great but if it doesn't feel great, it will be avoided.
2.   A good UI makes sure that people stay on the page for a longer time
3.   A great UI is simple and minimalist
4.   User interfaces should be targeted depending on user demographics
5.   Complex user interfaces must be avoided altogether.

While all these tips may sound generic, there are certain other reasons why web design technology should be based on great user interfaces. Here are some of the most important technologies that come with great user interfaces.

HTML 5

As people have begun to use mobile gadgets more often, increasing demands for pages that load fast on mobile phones have cropped up. This means, people will now want to browse websites on their smartphones, tablets and on their computers. Using HTML 5 is a good idea as the mark-up language is built with user interface in mind. It is simple, clean and looks attractive.

CSS 3

While it was largely avoided earlier, it is now one of the most preferred programs to ensure greater and better user interface in web applications. CSS 3 is used in building websites and applications that not only look great but feel great. It can be used in combination with HTML 5.

Responsive Web Design

The idea of responsive web design is to ensure that a website looks great no matter what the size of a screen is. There are several gadgets in the market today and designing a website for each one is practically impossible. The best trick is to adopt responsive web design so that one can view a web page clearly no matter what the size of the device screen is. Responsive web design is built with user interface (UI) in mind.

White space

While it is not exactly a technology, it is one of the most important techniques in teh world of web designing. Any reputed web design agency would readily recommend using more white space within websites. This makes sure that typography stands clear against the backdrop of the white space. Moreover, a website will not appear clogged, complex and uncomfortable.

About Guest Blogger

Monica Haubert is a consultant at a reputed web design agency. She has helped her clients increase their ROI with the help of great websites. She regularly coaches her colleagues with the latest in her profession.
You can connect with her in Google+

الجمعة، 17 مايو 2013

Simplex Design blog : SimplexCorp - A new template for business purpose

SimplexCorp - A new template for business purpose

Posted: 16 May 2013 10:27 AM PDT

It's been a long time since the last template on business. So in this post, I would like to introduce latest Simplex's template name SimplexCorp which hoped to be helpful for small business at the very first time have no budget.
This template is built base on Aquilo Wordpress template. I converted to Blogger and made it works for Blogger. It can work well in both of PC and mobile device because of responsive design.

Demo Download

Install instruction

1, Download the template. This template is available in Download page, all images hosted in Blogger and script included in template itself.

2, Upload template file to Blogger

3, Go to Blogger Dashboard -> Layout
All sections in homepage are reflected in widgets in Layout tab here.

4, To add your logo

Click on logo widget

Add the logo url to widget content as picture bellow

5, Do the same for top banner widget

In the demo, I add the contact information to top banner widget, but you can add everything you want inside top banner widget content.

6, To add content to slider

Click on slider widget
Add the content to slider as structure bellow:

<li class='slide'>
    <img class='slide-img' src='image_01_url'/>


        <div class='caption ' style='top: 20%;'>

    <div class='caption-container' style='width:50%;float:right;'>
        <h3 class='slide-title' style='font-size:42px;color:#454545;font-weight:normal;text-transform:none;font-style:normal;'>Title here</h3><div class='clear'/>


         <h4 class='slide-sub-title' style='font-size:24px;color:#5d89b4;font-weight:normal;text-transform:none;font-style:normal;'>Sub title here</h4><div class='clear'/>


        <div class='slide-desc' style='color:#808080;'><p style='margin-bottom:20px;'>text goes here ...........</p>
    </div>
    <div class='clear'/>
    </div>

    </div></div></div></li>

This is the code of one slide in slider, if you want more, you can duplicate the code above and modify the content.
The content in each slide is up to you, but I suggest 3 small part:
- Background image (image_01_url)
- Title of slide (marked with text "title here")
- Sub title (marked with "Sub title here")
- Description text (marked with "text goes here")

I also add some CSS code to make this appear as I want ( the code start with "style='..........' "). You can change these code to make it display as you want, for example font size, color, position... and you have to familiar with CSS. No shortcut here if you want to make it your way. If not, you can copy the code above and remain the CSS code as above.

Here is my sample code of slider widget:

<li class='slide'>

            <img alt='' class='slide-img' src='http://adamtheattorney.files.wordpress.com/2011/10/clipart.jpg'/>


        <div class='caption ' style='top: 20%;'>

    <div class='caption-container' style='width:50%;float:right;'>
        <h3 class='slide-title' style='font-size:42px;color:#454545;font-weight:normal;text-transform:none;font-style:normal;'>Pelle esauete</h3><div class='clear'/>


         <h4 class='slide-sub-title' style='font-size:24px;color:#5d89b4;font-weight:normal;text-transform:none;font-style:normal;'>Duis interdum nisi at leo</h4><div class='clear'/>


        <div class='slide-desc' style='color:#808080;'><p style='margin-bottom:20px;'>Integer in nunc et elit imperdiet sagittis. Vivamus hendrerit fermentum tristique. Donec quis dui ac mi suscipit pulvinar. Duis interdum nisi at leo mattis convallis rutrum eros sagittis. Class aptent taciti sociosqu ad litora torquent per.</p>
<a class='button-big button-video' data-rel='prettyPhoto' href='http://www.youtube.com/watch?v=v_GUm4aOUiM' target='_self'><span>Watch demo</span></a> <span style='font-weight:bold;margin:0 10px 0 0;'>or</span><a class='button-big button-cart' href='#' target='_self'><span>Get it Now</span></a></div>


    </div>
    <div class='clear'/>
    </div>

    </div></div></div></li>


    <li class='slide'>

            <img alt='' class='slide-img' src='http://businessbuildersnetwork.com/wp-content/uploads/2012/07/starting-a-business.png'/>


        <div class='caption ' style='top: 25%;'>

    <div class='caption-container' style='width:45%;float:left;'>
        <h3 class='slide-title' style='font-size:42px;font-weight:normal;text-transform:none;font-style:normal;'>Vivamus non</h3><div class='clear'/>




        <div class='slide-desc'><p style='margin-bottom:20px;'>Vivamus non sapien vitae dui suscipit volutpat. Nunc quis lectus nibh, quis adipiscing libero. Morbi non ligula vitae risus laoreet faucibus. Etiam lobortis nisi at diam faucibus posuere. Pellentesque tempus pulvinar massa, ornare sodales nisl iaculis et.</p>
<a class='button-big button-document' href='#' target='_self'><span>Get More Info</span></a></div>


    </div>
    <div class='clear'/>
    </div>

    </div></div></li>


    <li class='slide'>

            <img alt='' class='slide-img' src='http://www.arturiconsulting.com/business_people2.jpg'/>


        <div class='caption ' style='top: 25%;'>

    <div class='caption-container' style='width:50%;float:right;'>
        <h3 class='slide-title' style='font-size:42px;color:#4f4f4f;font-weight:normal;text-transform:none;font-style:normal;'>Curabitur rutrum</h3><div class='clear'/>


         <h4 class='slide-sub-title' style='font-size:18px;color:#ffffff;background-color:#5d89d4;padding:3px 15px;font-weight:normal;text-transform:uppercase;font-style:normal;'>Integer in nunc et elit</h4><div class='clear'/>


        <div class='slide-desc' style='color:#888888;'><p>Integer in nunc et elit imperdiet sagittis. Vivamus hendrerit fermentum tristique. Donec quis dui ac mi suscipit pulvinar. Duis interdum nisi at leo mattis convallis rutrum eros sagittis. Class aptent taciti sociosqu ad litora torquent per.</p></div>


    </div>
    <div class='clear'/>
    </div>

    </div></div></div></li>


    <li class='slide'>

            <img alt='' class='slide-img' src='http://www.kingdombusinessalliance.com/images/Business%20Growth%20Bar%20Chart.jpg'/>


        <div class='caption ' style='top: 25%;'>

    <div class='caption-container' style='width:50%;float:left;'>
        <h3 class='slide-title' style='font-size:42px;color:#424242;font-weight:normal;text-transform:none;font-style:normal;'>Quisque euismo</h3><div class='clear'/>


         <h4 class='slide-sub-title' style='font-size:24px;color:#5d89b4;font-weight:normal;text-transform:none;font-style:normal;'>Ut scelerisquesc euismod</h4><div class='clear'/>


        <div class='slide-desc' style='color:#888888;'><p style='margin-bottom:20px;'>Sed laoreet lacinia turpis vel viverra. Quisque et purus arcu, eu molestie est. Ut scelerisque euismod lacinia. Sed a iaculis metus. Aliquam urna dolor, vestibulum ac mattis id, semper in justo. Phasellus id tempus nisi.</p>
<a class='button-small' href='#' target='_self'><span>View Details</span></a></div>


    </div>
    <div class='clear'/>
    </div>

    </div></div></div></li>

8, Widgets : Block 1, Block 2, Block 3, Block 4, Block 5, Block 6, Block 7, Block 8, Block9 and Block 10 can be edit easily.
Just click on the widget you want and add content in widget content dialog, it will be display in corresponding position in homepage.

9, There are 3 widgets in the footers : Recent posts, latest tweets and FlickR. These widget is made for demo only and you can replace them with your own widgets in minutes.

10, Save changes. That's all in Layout tab.
Now we move to some coding works. Don't worry, just change the top menu navigation and footer menu.
You need to back to Blogger Dashboard then go to Template tab.
Click on Edit HTML

For the top menu
Click on dropbox : Jump to widget and choose widget HTML12.
Now you will see the code of top menu, just change it as your own:

<nav id='navigation'>
<ul class='sf-menu' id='mobile-menu'>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Features</span></a>
<ul class='sub-menu'>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Category</span></a></li>
</ul>
</li>
<li><a href="/search/label/"><span>Blog</span></a>
<ul class='sub-menu'>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Category</span></a></li>
</ul>
</li>

<li><a href=''><span>Contact Us</span></a></li>
</ul>
<select class='select-menu'>
<option value='#'>Navigate to...</option>
<option selected='selected' value=''>Home</option>
<option value=''>Home Page 2</option>
<option value=''>Home Page 3</option>
<option value=''>Features</option>
</select>
</nav>

For the footer menu

Now scroll the template file to the end, you will find this code:

<div class='footer-content float-right text-align-right'>Copyright 2013 SimplexCorporate. All rights reserved.</div>

<div class='float-left text-align-left'><ul class='footer-menu' id='menu-footer-menu'><li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-30' id='menu-item-30'><a href='#'>Home</a></li>

<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-31' id='menu-item-31'><a href='#'>About</a></li>

<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-32' id='menu-item-32'><a href='#'>Services</a></li>

<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-33' id='menu-item-33'><a href='#'>Blog</a></li>

<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-34' id='menu-item-34'><a href='#'>Contact Us</a></li>

</ul></div>

Just replace the link and text to what you want.

That's all for this template. After editing the template, you can save changes and see the result.
Have fun.