by aniko
23 December
HTML5 Offers Several New Types for the Input Element
HTML5 provides a much needed expansion of the Input element which allows developers to gain much more control over the information that is being provided by the user. In this article we’ll explore the new date and time related types, put together some examples, and see what browsers are currently supporting them.
In all the previous versions of HTML, developers have had no real control over the information that users were providing. It made no difference if a web form was asking for a date, a time or some combination of the two; it was always just a simple input element which rendered in the form of a text box. If you wanted to validate the information coming from the user you had the either do it on the client side with JavaScript or process it on the server side with a server-side technology like PHP or ASP.NET. What HTML5 has done with time and date input is to restrict the selections so that developers can always be assured that the data that is being sent is a valid date and/or time.
The Type Attribute
The behavior and presentation of the input element is controlled by the type attribute. Simply put, the job of the type attribute is to let the browser know what type of information is being expected for an input element. The browser then takes the type classification and decides how to present the input element (e.g. a date picker calendar, a text box for time with buttons, etc.) and how to validate, when applicable, the information that is provided by the user.
date, datetime, datetime-local, month, time, week types
Read the rest of this entry »
HTML5 No Comments »
by xotabu4
4 December
10 (anniversary) Annual Conference of QA
In first days of December, in Moscow ended regular conference of testers – Software Quality Assurance Days. Here are some of photos (You must be logged in on Facebook):
QA / Testing No Comments »
by aniko
1 December
Designing and Optimising Websites for iPad
iPad was released a month ago, and is made available in Australia a few days ago, but already, I am seeing a lot of big name companies and brands trying to optimise thier websites for iPad. While I have yet to optimise a website for iPad, I have put together some notes about designing and optimising a website for iPad to help us get started soon.
Screen Resolution
1024×768 pixel resolution (9.7-inch (diagonal))
This is as big as a normal computer screen. According to the Analytics stats for this Web Development Blog, 10.47% of the total visitors have 1024×768 pixel resolution.
User Agent String
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us)
AppleWebKit/531.21.10
(KHTML, like Gecko) Version/4.0.4 Mobile/7B334b
Safari/531.21.10
This is useful if you have a device detection script on your server that redirects mobile devices to a different website. For example, since iPad doesn’t support Flash, if you have a flash website, it is a good idea to redirect iPad visitors to the HTML version of the website.
Read the rest of this entry »
iPad / web design No Comments »
by aniko
1 December
How to use Google Fonts in your WordPress Theme
Using Google Fonts in your WordPress Theme is very easy and it can be completed in 3 simple steps.
1.
Go to Google Web Fonts, browse all the fonts available for use on your website and pick any font you like. For this example, I will be using Droid Sans.
<link href='http://fonts.googleapis.com/css?family=Droid+Sans&v1'
rel='stylesheet' type='text/css'>
2.
Click on the font name to go to the font page and then click on Use This Font tab and copy and paste the css include into the section in Header (header.php) file of your WordPress Theme.
3.
Edit the Stylesheet (style.css) file of your current WordPress Theme and add the following line of CSS:
SELECTOR { font-family: ‘Droid Sans’, arial, serif; }
Replace SELECTOR with the correct selector; for example: h1, .title, .post h2, etc.
Read the rest of this entry »
fonts / wordpress No Comments »
by aniko
1 December
Create a CSS Hover Effect Image Gallery
After browsing through a a few web portfolios lately I’ve noticed a rather noce efefct – whereby when the user hovers over a thumbnail an image appear – this may be a zoom icon (for images) or a play button (for videos). In thus article I’ll quickly run through the simple steps on who we create a a funky css hover effect image gallery. This is a very useful technique for any sort of site that display thumbnails links.
The HTML
<div>
<a href=”#link”>
<span><img src=”play.png” alt=”play” /></span>
<img src=”thumb.jpg” alt=”thumbnail” />
</a>
</div>
Read the rest of this entry »
css / jQuery / web design No Comments »
