iPhone / iPod Touch with Retina Display
@media only screen and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) { }
iPad
@media only screen and (min-device-width: 481px)
and (max-device-width: 1024px) and (orientation:portrait) { }
@media only screen and (min-device-width: 481px)
and (max-device-width: 1024px) and (orientation:landscape) { }
Images are often an afterthought in Web Development, whereas Design Imagery is usually in the forefront, for understandable reasons. However, do not let this dissuay you from making your stock imagery stand out and “pop” from your design(s). There is a plethora of design techniques artist use to create ambience from stock images, one such technique is the miniature faking effect that mimics the photographic tilt-focus effect. This post is concerned with post processing of images, but background information on the photograph effect of tilt-shift is beneficial to understanding both.
Tilt-shift Photography refers to the use of camera movements, often for simulating a miniature scene and can also refer to simulating shallow depth-of-field with digital postprocessing. Tilt-shift encompasses two types of movements:
Tilt – rotation of the lens plane relative to the image plane, which is used to control the POF orientation using the Scheimpflug Principle. Tilt allows objects in sharp focus to be at different distances from a camera by allowing the pof to be rotated about an axis at the intersection of the len’s front focal plane and a plane through the center of the lens parallel to the image plane. Here, the tilt determines the distance from the axis of rotation to the center of the lens and the focus determines the angle of the pof with the image plane and used togethery, they determine the position of the pof. Effectively, it controls the parts of an image that appear sharp.
Shift – movement of the lens parallel to the image plane, which is used to adjust the position of the subject in the image area without moving the camera backwards, which aids in avoding the convergence of parallel lines. Effectively, Shift displaces the lens parallel to the image plane, allowing adjusting the position of a subject in an area without moving the camera back.
Selective focus can be utilized to catch a user’s attention to part of an image while de-emphasizing other parts of the image. Tilt allows for the pof to be nearly parallel to the line of sight, allowing for parts of an image at vastly different distances from the camera, to be rendered sharp. Selective focus can be utilized with tilt and be given to different parts of an image at the same distance from a camera.
Selective focus via tilt is often what is truly used to simulate miniature scenery, not tilt-shift; the term is a misnomer and is derived from tilt-shift lens that are required to produce the effect optically.
Miniature Faking describes a photographic process where an image of a life-size location is created to give the optical illusion of a minature scale model. This can be accomplished by blurring parts of the image (typically outer edges), which simulates a shallow depth of field, normally found in close-up photography, thereby making the image’s scene seem much smaller than it actually is. Additionally, most faked-miniature images are shot from a high angle to immitate the effect of looking down on a model scale.
Miniature faking can be accomplished with an image editor by blurring an images top and bottom while keeping the image’s subject sharp. These effects are best utilized in images that have relatively little height and taken at a high angle from the ground.
Simulating Tilt-shift Photography is an extremely creative type of photography post processing, an image editor is used to simulate camera manipulation that creates optical illusions, making the main feature in an image seem miniature. Image editors, like Photoshop, can be used to simulate this affect by altering the images focus, replicating shallow depth of field normally found in macro lenses, which makes the scene seem much smaller.
Simulating brighter imagery via increased color saturation and contrast, developers can add to the focus manipulation effect found in tilt-shift images, or while simulating tilt-shift in an editor.
Note: tilt-shift images create the optical illusion of a model, so it is important to keep this in mind when selecting the image to perform the effect on: try and select an image with an elevated viewpoint, and also an image with little varying heights.
I have not provided a steps to follow list, because while reading about this technique, I found two completely different techniques and am not quite sure which one to promote (if not both). Instead, I highly encourage all who are interested to read and try both, first: How to Use Photoshops Lens Blur Tool for Tilt-Shift Fakery, and second (read both and apply together) Fake Model Photography with Tilt-Shift Photography Photoshop Tutorial.
Below are a few before and after photographs I snagged from Wikipedia of the Hampton Roads, va area. I used a number of different tutorials while researching this technique (listed below), and utilized ideas and techniques from them all while creating these images.
Miniature Faking is not as difficult as I imagined, nor is it only for the creatively-inclined; Follow-ups should include a steps to follow list or lists (if both techniques prove correct), as well as a Photoshop Action for download and much more importantly, implementing Miniature Faking to mimic Tilt-Shift Photography via JavaScript in Photoshop (.jsx).
Image Search is one aspect of Web Development typically overlooked by the vast majority of developers. While it may seem a distant second to the primary goal of Search, it’s actually not that far off. Image naming conventions, when properly applied, can aid in a sites Search, Searchability and Findability.
Typical image naming conventions in Web Development include image-01.png or even worse blargherghdadurpdedoo.png; while they do serve as a unique identifier and therefore conform to their primary purpose, they can be utilized for much more by providing machine-readable text that can be understood by bots when crawling your site(s). Bots have no clue what the below image is:
<img src="http://example.com/images/23432asaere.png"
But bots will have a clue if your image is titled as such:
<img src="http://example.com/images/jordan-dunking-vs-lakers.png"
Bots crawling your site will now index this image with reference to “Jordan Dunking vs. Lakers”, which provides an extremely more relevant and detailed description than “23432asaere”.
Apply the kiss Principle here: don’t overthink your file names, thereby (even if not intentional) spamming keywords via your file names. I like to rely on two or three word names for images.
-)_), spaces ( , or special charactersImage Naming Conventions also will aid in a sites Information Architecture, organizing files and directories to benefit your development team, as well as users and bots. Your team can also use them to track document versions, like so:
<img src="screenshot-issue-11-04-2009-001" />
Adding image naming conventions to your workflow(s) is extremely easy and should not be overthought. Simply think about what an image is before you name it. If the image is part of a set, think about suffixing a number to the end of all the images in the set, or putting them all into a directory, that aptly names the set. It’s really that simple, and you’ll greatly benefit by making this part of your development process instead of a post development afterthought.
Dublin Core is a set of metadata elements that provide a fundamental group of text elements through which most resources can be described and catalogued. A Dublin Core metadata record is intended to be used for cross-domain information resource description and have become standards in the fields of library science and computer science.
Dublin Core Metadata Initiative (dcmi) was incorporated as in independent entity, providing an open forum for developing interoperable metadata standards ecompassing a broad range of purposes and business models.
The Dublin Core standard includes two levels: Simple and Qualified. Simple Dublin Core comprises 15 elements, while Qualified Dublin Core includes three additional elements and qualifiers that refine the semantics of the elements so they are useful in resource discovery. The context of this blog post will focuses on the Simple Dublin Core Metadata Element Set in conjunction with a related link element.
Utilizing Dublin Core meta elements provides ways for a document to be indexed using several distinct, searchable fields. Thus, the document can be searched by said fields meaning it can be located more specifically than documents not using Dublin Core, therefore increasing findability, searchability and locatability.
The Simple Dublin Core Metadata Element Set (DCMES) consists of 15 metadata elements, listed below:
| Title | Markup | Description |
|---|---|---|
|
Each Dublin Core element is optional and may be repeated. The DCMI has established standard ways to refine elements and encourage the use of encoding and vocabulary schemes. There is no prescribed order in Dublin Core for presenting or using the elements. |
||
| Contributor | meta name="DC.Contributor" content="publisher-name" / |
An entity responsible for making contributions to the resource. Examples include a person, organization or service. Typically, the name of a Contributor should be used to indicate the entity. |
| Coverage | meta name="DC.Coverage" content="World" / |
Spatial or temporal topic of the resource, spacial applicability of the resource or the jurisdiction under which the resource is relevant. Spatial topic and spatial applicability may be a named place or a location specified by geographic coordinates. Temporal topic may be a name period, date or date range. Jurisdiction may be a named administrative entity or a geographic place to which the resource applies. Best practice here is to used a controlled vocabulary such as the tgn. If appropriate, named places or time periods can be used in preference to numeric identifiers (such as sets of coordinates or date ranges). |
| Creator | meta name="DC.Creator" content="Administrator" / |
An entity primarily responsible for making the resource, like a person, organization or service. Typically, the name of a Creator should be used to indicate the entity. |
| Date | meta name="DC.Date" scheme="W3CDTF" content="2004-01-01"/ |
Point or period of time associated with an event in the lifecycle of a resource. May be used to express temporal information at any level of granularity. Best practice is to use an encoding scheme for Date. |
| Description | meta name="DC.Description" lang="en" content="publisher-name" / |
Account of the resource; may include (but not limited to) an abstract, a table of contents, graphical representation, or a free-text account of the resource. |
| Format | meta name="DC.Format" scheme="IMT" content="text/html" / |
File format, physical medium or dimensions of the resource. Examples of dimensions include size and duration. Best practice is to use a controlled vocabulary, as in this example using mime types. |
| Identifier | meta name="DC.Identifier" scheme="uri" content="http://catalog.loc.gov/67-26020" / |
An unambiguous reference to the resource within a given context. Best practice is to identify said resource by means of a string conforming to a formal identification system. |
| Language | meta name="DC.Language" content="en" / |
Language of the resource. Best practice is to use a controlled vocabulary. |
| Publisher | meta name="DC.Publisher" content="publisher-name" / |
Entity responsible for making the resource available, including a person, service or organization. Typically the name of a Publisher should be used to indicate the entity. |
| Relation | meta name="DC.Relation" content="publisher-name" / |
Related resource; best practice is to identify by means of a string conforming to a formal identification system. |
| Rights | meta name="DC.Rights" content="http://example.org/legal-terms-of-use.html" / |
Information about rights held in and over the resource, typically including various property rights (including intellectual property rights) associated with the resource. |
| Source | meta name="DC.Source" content="/meta-tags/" / |
Related resource from which described resource is derived; may be derived from the related resource in whole or in part. Best practice is to identify the related resource by means of a string conforming to a formal identification system. |
| Subject | meta name="DC.Subject" lang="en" content="Heart Attack" / |
Topic of the resource, typically represented by keywords, key phrases or classification codes. Best practice is to use a controlled vocabulary. To describe the spatial or temporal topic of the resource use the Coverage element. |
| Title | meta name="DC.Title" lang="en" content="Hamlet in Iceland; being the Icelandic romantic Ambales saga" / |
Resources given name, typically the name by which a resource is formally known. |
| Type | meta name="DC.Type" scheme="DCMIType" content="Text" / |
Nature or genre of the resource, best practice is to use a controlled vocabulary, this example uses the dcmi Type Vocabulary. To describe file format, physical medium or the resources dimensions, use the Format element. |
Note: as a general rule, element names may be mixed-case but should always have a lower-case first letter, commonly called camelCased.
Note: the value of the content attribute is defined to be cdata.
Authors need to use the link element to reference the definitions comprised by the element schema, like so:
<link rel="schema.DC" href="http://purl.org/DC/elements/1.0/">
Authors can express Dublin Core metadata using simple meta and link elements, which describe how a Dublin Core metadata description set can be encoded in (x)html, which is also an html meta data profile as defined by the html specification. Utilizing Dublin Core is an extremly easy and extensible way for authors to make their content more findable, searchable, and locatable, thus increasing their content’s overall accessibility.
Instant Pages is a new feature by Google which enables prerendering, where the browser grabs and caches most (if not all) likely documents required where the user goes next.
In Chrome 13+, Prerendering allows author’s to dictate which assets/resources are most likely to be necessary for the continued ux.
Prerendering is actually an extension of Firefox’s prefetching; Prerendering fetches all of the necessary resources of the next document.
Note: unlike Firefox, Chrome does not support meta-http and http header triggering methods.
As noted, Firefox supports prefetching via link element which instructs user agents to begin fetching the top-level resource at the url. There are comments about prefetching‘s weaknesses, but I’m going to chalk that up to the cadre of markup illiterate developers and their awesome enterprise code. When used properly, prefetching can lead to a continued ux too.
Trigger prerendering is apparently not so easy to do; it’s only useful to a site with a high degree of certainty of where their users will click next. Trigger prerendering incorrectly can cause the user’s selection load times to actually increase.
Authors can trigger prerendering by simply dropping an link rel="prerender" element into the markup and Chrome follows it, like so:
<link rel="prerender" href="http://example.org/index.html" />
even if you do not proactively trigger prerendering yourself, it is still possible that another site will instruct Chrome to prerender your site.
I’m kind of speechless at that statement. How is that possible? Since it is, I’m going to assume “sites” that practice the black arts will be able to sabatoge your determined prerendering strategy by “telling Chrome” to prerender the wrong documents. That is completely speculative and with no proof, however, the documentation’s explanation is so vague, it leaves me to wonder.
Authors can detect prerendering via the Page Visibility api and/or test individual pages.
Authors can also use Chrome’s Task Manager to detect prerendering:
h5ai is code that beautifies Apache Index. So essentially, instead of just having the plain old Apache Index out-dated markup and styles that show in folder’s without an index page (and if you don’t have them blocked) like so:
h5ai makes it much more elegant, like so:
I really dig it, but I did have some issues because of how my .htaccess file was set up. I have mine set up to parse php as html and after installing h5ai, my folder index display was erroring. h5ai would compile, but not find any content in the folder(s) as well as spitting out a random string of characters after the closing /html element. After getting some help from @larrrs and @jrsmith I simply changed the default settings referring to header.html and footer.html. I simply renamed them as header and footer and deleted the .html extension from my .htaccess file.
Pretty crude solution, I know, but it did fix my problem. Further investigating also shed to light that parsing php as html actually increases server load, which I was clueless about. Obviously I need to fix that, but just putting the word out there should anyone come across any issue similar to mine.