Archive for June, 2010
Target CMS
Monday, June 28th, 2010
All the HTML is generated by PHP classes, so it does not use separate HTML templates, only PHP plus CSS and a few JavaScript files.
It also optionally uses two WYSIWYG HTML editor products to edit the content stored in the MySQL database. See the documentation.
classes, rss
Classes | No Comments »
15 Wildly Convenient CSS Items from CodeCanyon
Monday, June 28th, 2010
In addition to Premium WordPress Plugin, we, over at CodeCanyon, also recently launched a CSS category, specifically made for high quality, and super convenient items, such as three-level menus, CSS tabs, pricing grids, frameworks, etc. I’d like to show you a quick sampling of the best of what we have so far, after a couple weeks.
1. Griddler Pricing Grid I
“SaaS (Software as a Service) style HTML5 /CSS3 pricing grid that degrades well for unsupported browsers.”
2. CSS3 Buttons
“Create buttons by simply adding different classes to links, submits, and button elements.”
3. Droplink
“Create a cool looking drop-down list of links. There are three examples included: one with text as main link, one with an image as main link, and one where each link has a small icon.”
4. Griddler Pricing Grid II
“SaaS (Software as a Service) style HTML5 /CSS3 pricing grid that degrades well for unsupported browsers.”
5. CSS Pagination Pack
“Spice up your pages with these fresh looking pagination menus. No images have been used; only CSS! Seven predefined colors are provided with hover and active states! More colors will be added in the near future. These bars have been tested to work in all major browsers.”
6. CSS3 Tabs
“You might normally think of tabbed content as involving JavaScript. These tabs are 100% CSS and behave largely like any other tabbed content area you have come across, including the ability to link to specific tabs through hash tags in the URL.
This item includes twelve variations including color variations (Autumn, Business, MossyGarden), style variations (Buttons, Centered, Shadowy), and placement variations (Bottom, Centered, Right).”
7. CSS Framework + Form Elements
“Create a blog, corporate website with multiple columns easily without having to remember so many grid classes.”
8. Sleek Borders
“This is a pack of twelve stylish borders for your images. Six styles are included with a gloss variant of each. Full documentation is included. You can also remove the images and use the borders as stylish containers.”
9. Fresh Tooltips
“Precisely designed and coded Fresh Tooltips. Great for any kind of website, very practical. The top one is 100% transparent black, which looks very very cool. Also perfect for learning—I’ve made lots of cross-browser research before I’ve done these, you won’t find better tutorial with such an amazing design than personally going through my code.”
10. Stencil CSS Framework
“Small lightweight CSS framework. Includes base styling (CSS reset & typography), plus plugins to add many other features.”
11. CSS3 Mega Menus
“This is a beautiful drop-down mega menu with five different colors scheme. (Blue, Red, Green, Orange, Purple)”
12. CSS3 Gallery
“CSS3 Gallery is created by purely using CSS – no images. It’s a different sort of web gallery, in which your images display in the screen of a computer LCD.”
13. Simple Admin
“This is a simple CSS admin panel template with horizontal navigation tabs and a search field. This is an ideal template for smaller admin panels or scripts that do not require more feature rich templates.”
14. Fancy 2-Line CSS Buttons
“These 100% CSS buttons are sure to make your site stand out from the crowd. Your visitors will love to click on them too, with 2 lines of information and text driven icons, they’ll know exactly where they are going.”
15. Fresh Forms
“Precisely designed and coded Fresh Forms. Great for any kind of website, very practical. The top one is 100% transparent so you can also place it on texture background. Also perfect for learning—I’ve made lots of cross-browser research before I’ve done these, you won’t find better tutorial with such an amazing design than personally going through my code.”
However, the category is still a baby, at barely two weeks old. As a manager, I can’t wait to see what kind of submissions we’ll be receiving to this category by the end of the year. If you’re not yet an Envato marketplace author yet (why not), you can refer here for the details of signing up to sell your works.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
Flexible, Mobile-First Layouts with CSS3
Monday, June 28th, 2010
Some experts are projecting mobile devices to become the dominant medium for web browsing within five years, overtaking browsing on desktop computers. Regardless of how accurate this projection turns out to be, it is clear that formatting websites for mobile-friendly viewing needs to become a staple of web design and development. There are many ways to accomplish this, of course. However, CSS3 provides a fairly rich toolset for mobile-friendly formatting, relying on the client’s browser capabilities instead of back-end templating.
Step 1. Think Ahead
There are a few issues that should be thought about before diving right into styling a layout.
Mobile Web Browsing
First, what should one keep in minds when designing for mobile browsers? Well, here are a few things…
- Limit HTTP requests: data transfer over 3G can be quite taxing. This includes limiting images where possible (from the CSS, for example).
- Varying screen sizes: Mobile devices tend to hover around the 320-480 pixel screen widths but can vary greatly depending on the device. So, predefining widths in the CSS is generally a bad idea for things like paragraphs and DIVs.
- Optimize for a subset: There are TONS of mobile devices, browsers, OS’s, etc. Try to focus your testing on what you assume to be the most important. For me, this includes iPhone, iPad, Blackberry, and Android. This list should also include Windows Mobile but I simply do not have access to a Windows Mobile device.
- Hover must die: Okay, that’s a little dramatic. However, touchscreens don’t tend to support hover. So, when building menus, don’t hide things behind hover events. Hover should only be used to enhance some effects (like color changes) not deliver important content (like drop-down menus).
“The overall point is to know ahead of time what your site is likely to look like in various browsers before seeing it.”
Browser Support (on Desktops)
Secondly, keep browser support in mind. The proverbial “elephant in the room” is IE, of course. Good news, though! As it turns out, websites don’t really need to look exactly the same in every browser. As long as it doesn’t interfere with the content of the website, generally a browser not capable of processing CSS3 will still provide a more-than-acceptable experience. The overall point is to know ahead of time what your site is likely to look like in various browsers before seeing it.
Step 2. The HTML
The Body
“Keep the markup simple and clean.”
Not only do we want to produce valid HTML, we also want to simplify it as much as possible. While it has always been a good idea to keep HTML streamlined and free of unnecessary DIVs, it is even more important now with the rise in mobile web browsing. Also, a lot of the effects that required 7 nested DIV tags can now be reproduced with a little CSS3.
Since this is not an HTML5 tutorial, I’m going to stick with XHTML strict. With that in mind, a lot of the markup here can be made even cleaner using some HTML5 elements. So, here’s some HTML for a typical layout. We’ve got a page containing a header, footer, content area, and sidebar.
<body>
<div class='pg'>
<div class='head'>
<h1><a href='#'>My Blog</a></h1>
</div>
<div class='pg-main'>
<div class='entries'>
<h2><a href='#'>An Entry About Something</a></h2>
<p class='preview'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem elit, suscipit tempus pretium eget, varius ut erat. Donec lobortis est sit amet felis pellentesque vel egestas sapien iaculis. Maecenas eget quam nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<p>Mauris nunc metus, pellentesque eget porta ut, facilisis ut metus. Etiam dignissim egestas semper. Aliquam tincidunt tortor non mi ultricies quis interdum quam scelerisque. Aenean risus libero, aliquam vel rhoncus sed, elementum eu leo. Pellentesque vitae ante urna, ut rhoncus sapien. In iaculis tristique lobortis. Nulla feugiat elit at odio dictum dignissim. Fusce tristique lacus nec justo porttitor egestas. Etiam vitae arcu risus, at interdum lacus. Ut dignissim, dui eu imperdiet accumsan, dui mauris hendrerit leo, vel fringilla mi ipsum vitae orci. Nulla libero quam, euismod eget rutrum sed, ullamcorper vitae felis. Mauris aliquam dignissim interdum. Sed sagittis blandit urna, sit amet pellentesque lorem egestas sed. Nam adipiscing, lorem non ornare volutpat, turpis ante sagittis elit, ac hendrerit arcu nunc ut est. Vivamus at arcu felis, eget porta odio.</p>
<hr/>
<h2><a href='#'>An Entry About Something Else</a></h2>
<p class='preview'>Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, condimentum at mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus at pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut malesuada lorem. </p>
<p>Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.</p>
<hr/>
<h2><a href='#'>A Third Entry</a></h2>
<p class='preview'>Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, condimentum at mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus at pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut malesuada lorem. </p>
<p>Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.</p>
</div>
<div class='sidebar'>
<h2 class='not-there'>Blog Menu</h2>
<h3 class='subscribe'>Subscribe</h3>
<ul class='subscribe'>
<li><a href='#'>RSS</a></li>
</ul>
<h3>Social</h3>
<ul>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
</ul>
<h3>Categories</h3>
<ul>
<li><a href='#'>Something</a></li>
<li><a href='#'>Nothing</a></li>
<li><a href='#'>All Things</a></li>
<li><a href='#'>No Things</a></li>
</ul>
<h3>Archives</h3>
<ul>
<li><a href='#'>June 2010</a></li>
<li><a href='#'>May 2010</a></li>
<li><a href='#'>April 2010</a></li>
<li><a href='#'>March 2010</a></li>
</ul>
</div>
</div>
<div class='foot'>
<p>© No one in particular 2010</p>
</div>
</div>
</body>
As you can see, it’s a pretty simple and typical blog layout with a few article and some menu options in the sidebar.
Viewport Metadata
In our head element, we will put all the typical pieces like stylesheets, content type, title, etc. However, there is one extra piece that we will include to smooth out mobile browsers.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This is a little metadata tag, suggested by Apple, to help iPhones render a page. It essentially auto-fits the page to the viewport and prevents zooming. Several other mobile browsers support this too, including Blackberry’s native browser. In my testing, keeping this tag doesn’t harm desktop browsing whatsoever. So, let’s just stick it in the head and forget about it.
Thinking About the Layout
This particular tutorial will focus on taking the above HTML and styling it into two layouts. One layout will be targeted at mobile browsing and one at desktop browsing. In practice, it will probably be useful to break such a layout into several different “targets.” However, for the sake of this simplicity, this tutorial will only focus on those two.
Step 3. The Mobile Styling
Disclaimer
The purpose of this tutorial is not to talk about rich typography or brilliant graphical design. So, the presentation here is kept very simple. What is important is the thought process that drives the stylesheet.
The Approach
The main thrust of all of this is to think about designing a mobile layout first. The reason for this is that its likely that whatever you come up with for a mobile devices will also work on a desktop. Then, instead of ending up with a thrown-together mobile layout and a brilliant desktop layout, you’ll start with a brilliant mobile layout and enhance it for desktop. This will also make sure that your website doesn’t lose its audience as the world goes mobile.
The Inspiration
This approach is inspired by Luke Wroblewski who spoke at An Event Apart in Boston this year. His presentation was centered around thinking “Mobile First”.
While this tutorial does not capture his presentation in any sort of entirety, one piece of it hit home more than the rest (for me). The current trend is design is to work on the desktop version of a website first, then strip it down and throw together a mobile website if there is time. Instead, we should start to design for the mobile world first, then change that design as desired for the desktop. The rational is essentially one of progressive enhancement… if the design is useful on mobile, it will work on desktop also. The reverse, however, is not usually true.
Some CSS
So, let’s think about mobile browsing for a moment. Long scrolling screens are difficult to deal with. So, let’s take the blog menu list items and make them easier to deal with.
.sidebar ul{
border-left:solid 1px #ccc;
padding:0 0 0 5px;
}
.sidebar ul li{
display:inline;
padding:0 5px 0 0px;
border-right:solid 1px #ccc;
}
That should give us a nice, clean-looking menu with some pipe-looking separators. You’ll notice that I didn’t choose to move the menu away from the bottom of the screen. Menus at the bottom can be useful in mobile browsing. If you think about scrolling through a webpage, when you get to the bottom you’d have to scroll all the way back up in order to go somewhere else. Depending on the device, scrolling can be somewhat burdensome. There are pros and cons to this method but in this case, I think it works well.
However, I would like to move the RSS to the top banner, so let’s do that too.
h3.subscribe{
display:none;
}
.sidebar ul.subscribe{
position:absolute;
top:25px;
right:10px;
border:none;
color:#fff;
}
.sidebar ul.subscribe li{
border:none;
}
Aside from that, the rest is pretty much just some font-sizing of the heading elements and coloring of the anchors. For the purposes of this tutorial, I included a CSS-reset at the top of the sheet just for simplicity. The full CSS sheet can be found in the source code for this tutorial.
As you can see, there isn’t really anything special about the mobile styling when approaching design from a mobile-first angle. Instead of thinking, “what do I want this to look like on my screen,” you think “how can I use styling to make this most useful on a mobile device.”
Step 4. The Desktop Styling
Media Query
In case you haven’t guessed it, this whole thing is going to end up being driven by CSS3 media query. In case you aren’t familiar, media query is a way for the stylesheet to flip declarations on and off based on various conditions. One such condition, and the topic of this sheet, is screen dimensions.
Again, the full CSS can be found in the source attached to this tutorial but let’s examine this for a moment:
.pg{
width:800px;
margin:0 auto;
}
In this case, we don’t really want an 800px page width unless we are sure the user’s browser window is at least 800px wide. Otherwise, we will end up with one of those annoying horizontal scrollbars.
So, we’re going to wrap that declaration (along with several others) inside a media query.
@media all and (min-width:800px){
.pg{
width:800px;
margin:0 auto;
}
}
That reads pretty easily, right? The “all” refers to “use this style for all types of media.” There are other things that can go here, such as “print” for printer but there isn’t a lot of consistent support. Anyhow, “all” will work just fine for this.
“Override” Previous Styles
We will put a lot of other stuff inside this media query too but the important thing to remember is to essentially override previous styles and add some new ones to achieve the new layout. This will allow browsers that do not support media query to simply fall back on the original styling. Even though they are optimized for mobile, there’s nothing wrong with displaying that layout on a less-capable desktop browser.
For example, we’ll move that sidebar out of the bottom and make the lists look like lists again.
@media all and (min-width:800px){
.sidebar ul{
border:none;
padding:0;
}
.sidebar ul li{
display:block;
padding:0;
border:none;
}
h3.subscribe{
display:block;
}
.sidebar ul.subscribe{
position:static;
top:auto;
right:auto;
border:inherit;
color:inherit;
}
.sidebar ul.subscribe li{
border:inherit;
}
}
That will put the sidebar off to the left (combined with a couple other floats found in the stylesheet) and place the subscribe back where it belongs for people browsing the site in atleast 800px width.
So, if you open up the source in a browser and resize it horizontally, you’ll be able to watch the layout flip between the desktop format and the mobile-friendly format
You may be asking yourself, why 800px? Is there anything magical about an 800px width? No. In fact, I would argue that it is too wide. With the introduction of “snap” in Windows 7, I would argue that 600px should be the new target width for a desktop website. That way, the browser can be “snapped” to the right or left on a 1280px screen and still maintain its layout. However, this is really neither here nor there. Just be aware that 800px isn’t anything special.
Browser Support
Important: The website will be styled as the mobile version in IE8 and below. Is this okay? I think so. Also, I’ve done this before and so far no one has arrested me. Plus, media query support is promised in IE9.
Step 5. Alternative Methods
This isn’t the only way to accomplish this. However, the purpose of this tutorial was to show a very practical use for media query and present some ideas of mobile layouts based on CSS only.
That said, here’s a few other ways to put together a mobile layout…
- Serve different templates: If you have access to the templates for the site, a themeing system can usually be put in place where the requesting browser is detected, then a different HTML template is served based on the type of browser (mobile or not). This is usually accompanied by a separate set of CSS as well.
- Subdomains: m., mobile., and .mobi tend to be the standards here, where an entirely different website is served. That said, it’s usually the same as “serve different templates” to avoid content duplication.
- Fluid layouts: One can also make their layout completely fluid such that no matter what size the browser window, the content adjusts itself. In fact, the “mobile” stylesheet in this tutorial is a fluid layout. The nice thing about using media queries is that you can reduce the background-images and produce fewer HTTP requests.
There are likely several other methods of handling mobile web browsing but often it will come down to a hybrid of some sort. However, whether it’s a fluid layout with certain “kick” points based on media query or a subdomain redirection serving different templates, the important thing is begin planning mobile layouts ahead of time, so that your websites don’t become increasingly less useful over the next 5 years.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
maaazzzikkkaaa
Monday, June 28th, 2010
friends for ever rss
Free PHP Scripts | No Comments »
Display code
Sunday, June 27th, 2010
It can traverse a given directory recursively and display all source code files with names that have one of a given list of file name extensions.
The PHP code files are highlighted according to the PHP syntax.
The class may also generate a table of contents to display links to the page section that list the respective highlighted files.
classes, rss
Classes | No Comments »
My Tweets
Sunday, June 27th, 2010
It retrieves the XML feed of the time line of a Twitter user and parses it to retrieve the details of each status.
The class returns an array with statuses details like text, URL, date, image URL and the user screen name.
classes, rss
Classes | No Comments »
Exclamation
Saturday, June 26th, 2010
It can generate HTML with form buttons to ask the user to confirm or cancel an action.
The names and values to be passed when the user confirms or cancel the action are configurable.
classes, rss
Classes | No Comments »
Crutch Cache
Saturday, June 26th, 2010
It can open a given cache file to retrieve values of variables if the file exists.
The class can set an arbitrary number of variable values which are saved to the cache file as a serialized array when the object is destructed.
classes, rss
Classes | No Comments »
lib_word
Friday, June 25th, 2010
It can instantiate a COM object to open a Microsoft Word document file with a given path.
The class can also perform other document manipulation actions like changing the values of document fields, setting the file saving format, like for instance PDF, and save the document with a given file name.
classes, rss
Classes | No Comments »
Autenticacao
Friday, June 25th, 2010
It can query the MySQL database using the ADODB package to create or delete user records. The user passwords may be stored as MD5 or SHA1 hashes.
In Portuguese:
Script feito para uma simples autenticação usando AdoDB / PHP e MySQL.
Possui funções que permitem:
- Adicionar Usuários;
- Remover Usuários;
- Buscar Informações da Sessão;
Utiliza uma camada de segurança baseada em inclusão e consulta do Session_ID e retorna o usuário autenticado ou rejeita o acesso.
Fácil de se implementar com Smarty;
Todos as colunas e tabelas do MySQL são personalizaveis;
Pode-se optar por não criptografar, ou usar MD5 / Sha1;