epsco: أغسطس 2013

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

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

الجمعة، 30 أغسطس 2013

Simplex Design blog : How to deal with helpful tools for responsive web design

Link to SimplexDesign - free premium blogspot template

How to deal with helpful tools for responsive web design

Posted: 29 Aug 2013 07:49 PM PDT

Web designers and developers use responsive web design to provide different layouts for specific devices offering site visitors an incredible user experience. When you create a responsive design, you should be careful that it will not alter the looks of your website when viewed from different devices and screen sizes. When designing a responsive website, there are a number of different tools that help you to achieve what you want out of your responsive web design. Here are some of the great responsive web design tools that you could try for yourself.

Adobe Edge Inspect

When you are thinking of how your web site would appear across different platforms and screen sizes, Adobe Edge Inspect would be a perfect tool to do that. Previously known as Adobe Shadow, this one offers quick preview of your responsive site as it would appear on different hand-held platforms on one mobile device alone. This means you don't have to scatter these devices on your table just to test the appearance of the site on these different devices.

Adaptive Images

When your site is being accessed on smaller, slower and low bandwidth devices, your desktop-centric images take more time to load which causes website lagging and cost you and your site visitors un-necessary bandwidth and money. This is where Adaptive Images come into use. This tool automatically detects the screen size of your visitor's device and delivers rescaled version of your HTML images that fit into that screen.

Twitter Bootstrap

Initially designed for social networking platforms like Twitter, this tool is compatible across all major browsers. It invites web designers to participate and make contributions to the project. It is an open source tool which is managed through GitHub. Bootstrap functions at its best even when viewed from hand-held platforms such as tablets and smartphones without requiring you to alter your layout with every new screen width that you are designing for.

Retina Images

Retina images are a tool that serves different images on your responsive website as they are being accessed via different hand-held platforms with different screen sizes. For instance, if you want to access a particular image on your website, Retina Images check for a couple of resolution conditions such as value sets in cookies so as to decide the quality of image to be delivered. If all conditions are satisfied, then Retina Images will deliver high resolution images or else, only normal resolution of that particular image. All these work in a matter of seconds.

SimpleGrid

This is yet another helpful tool that enables hassle-free viewing of a traditional website on different mobile devices. With SimpleGrid, it is possible to view every single element of that particular page on one single screen and no horizontal scroll bars are required.

Foundation

Foundation is an awesome tool for designing responsive websites. This tool allows you to design for smaller devices first and as the screen size gets larger and larger, you can add more complex codes to make your site compatible on larger screens. Another interesting feature about this tool is that it's lightweight speeds up the loading time thus saving your time and effort.

Resize My Browser

Resize my browser is a great tool that allows you to test your responsive web design on different screen resolutions. This tool has a preset sizes for devices such as the iphone, ipad, laptops, netbooks, and different screen resolutions as well as the ability to mention your own. All you have to do is click on the required size and you get a preview of your website. Also, the tool allows you to include or exclude the tool bars, scrollbars, etc.

RWD Calculator

Although the functions of a RWD calculator are similar to those of a simple calculator, this simple tool turns PSD pixels into percentage format thus saving your time and effort in calculation.

Responsive web design sketch sheets

Whether you are a logo designer, font designer or web developer, responsive Sketch sheets serve you as a one-stop solution for all your sketch sheet needs. Your code should not restrict you from viewing your layouts on different screen sizes. These sketch sheets will give you a better view of how your sites appear across different platforms before you dive into the code.

Lettering.js

Lettering.js is a jQuery plugin that allows web developer and designers to play and experiment more with typography. This plugin allows targeting specific letters, words or lines within an element without losing control over typography. It can be used in your headings, Asides, Block quotes, etc.

About Guest Blogger

Brianne is a writer/blogger. She writes articles on Technology, social media, WordPress, Gamification, luxury interior design, website development and online development etc. These days she contributes on luxury-homes

الاثنين، 26 أغسطس 2013

Simplex Design blog : Experience new page Template Download of SimplexDesign

Experience new page Template Download of SimplexDesign

Posted: 25 Aug 2013 09:52 AM PDT

It's been 4 years since SimplexDesign blog was established. Many templates were published. Now it's time for a new Download page.

http://www.thesimplexdesign.com/p/download.html

A section in this site for you to find template, see it in action and download. All templates in this page are classified into 4 cagories: Magazine, Blog, Business and Portfolio. Just click category name and all templates under this category will be larger.

When mouse hovering on template image, template information will be shown, included name, link to Demo, Download and Install instruction.

All templates in this Download page are latest version and hosted in Google Drive/Docs server. So I think all of you can access and Download.
A new feature is template demo system, all demo will be shown in "preview" page of SimplexDesign. In this window, you can browse other templates or back to SimplexDesign blog easily by clicking SimplexDesign's logo.

That's all for new Download page, hope this small feature helpful to you all.

السبت، 17 أغسطس 2013

Simplex Design blog : Simplex ColorBlock - Template for personal blog, online portfolio

Simplex ColorBlock - Template for personal blog, online portfolio

Posted: 16 Aug 2013 11:09 AM PDT

In previous post, I wrote about Bootstrap and the way apply to current template of SimplexDesign. In this post, I will show you another SimplexDesign template name Simplex ColorBlock.
Template feature:

This template is good for personal blog, online portfolio.
Responsive design, it can display good in most of monitor and mobile device.
Colorful block for another kind of blog post, from normal blog post to music, image, tip ...
Widget ready for you to add advertisement.

Live demo Download

Install instruction

1, Download template file

2, Open template in a word editor such as Notepad++

3, To edit menu

Find this code

<div id='menu'>
                               <div class='menu-main-nav-container'>
                                    <ul class='sf-menu' id='menu-main-nav'>
                                         <li>
                                            <a expr:href='data:blog.homepageUrl'>Home</a>
                                         </li>
                                       <li>
                                             <a href='#'>Category</a>
                                           <ul class='sub-menu'>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                           </ul>
                                       </li>
                                       <li>
                                             <a href=''>Category</a>
                                           <ul class='sub-menu'>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                           </ul>
                                       </li>

                                   </ul>
                               </div>
                           </div> 
                             <select>
                                 <option selected='selected' value=''>Go to...</option>
                               <option value=''>Home</option>
                               <option value=''>Home</option>
                           </select>

In the code above, here is the code of menu:

<div class='menu-main-nav-container'>
                                    <ul class='sf-menu' id='menu-main-nav'>
                                         <li>
                                            <a expr:href='data:blog.homepageUrl'>Home</a>
                                         </li>
                                       <li>
                                             <a href='#'>Category</a>
                                           <ul class='sub-menu'>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                           </ul>
                                       </li>
                                       <li>
                                             <a href=''>Category</a>
                                           <ul class='sub-menu'>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                               <li><a href=''>Category</a></li>
                                           </ul>
                                       </li>

                                   </ul>
                               </div>
                           </div>

And this is the code of Mobile navigation menu, this menu is only shown when you are using mobile to browse.

                            <select>
                                 <option selected='selected' value=''>Go to...</option>
                               <option value=''>Home</option>
                               <option value=''>Home</option>
                           </select>

4, For the Disqus comment system, find this code:

<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'simplexenews'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

Please change the text "SimplexEnews" which marked in bold in code above to your Disqus shortname. For more information about Disqus, you can find out in Disqus official website.

5, Because sidebar in this template only appear in Single page, not in home page, it's also not displayed in Blogger Dashboard->Layout for you to add widget.
So the only solution here is to add the code manually to sidebar. You can find this code:

<b:widget id='HTML5' locked='false' title='widget code' type='HTML'>
<b:includable id='main'>
                <aside class='ct_flickr_widget clearfix' id='ct_flickr_widget-2'>
                                 
                    ..............
                            </aside>

                            
                    </b:includable>
</b:widget>

And start adding your own code (ad code, Facebook likebox.... ) after the line Start your code here.
Remember to encode your script before adding to template, by going to this site: http://htmlentities.net/
Paste your code in Input box and click Encode, then copy back the result in Output box to template file.

6, Save template and upload to Blogger.

7, Open Blogger Dashboard -> Layout

8, To add logo

Click on Logo widget

Add image url to widget content as picture bellow

9, To add Top Banner widget and Banner widget, Click on edit link

Paste the ad code into widget content

How to use this template

1, This template is designed to display 5 kind of blog post : article, image, video, tip, music. Each of them has a background color and icon.
So everytime posting, beside adding your own labels, you have to add one of 5 labels bellow (in lower case) to make the post display with corespondent style.

post
image
video
music
tip

For example, you have a post name "How to do ...." with your own label "life hack". This post is not displayed in homepage, you have to add one of 5 labels above to make it appear. Because this is a post "how to", so in addition to label "life hack", I add one more label "tip".
It's the same when you want to publish a post on photography, you can add your own labels, and add one more label "image".

2, Another notice that this template has no readmore function. Please use button Insert Jump break in Post editor window to make post summary in homepage.