How to Build an Image Uploader Using PHP | View Source Series

Posted on by
1

This specific tutorial is from the series View Source presented by lynda.com author Ray Villalobos. The complete View Source series offers 10-minute intermediate and advanced web design projects covering HTML, CSS, social media, and content management solutions. This PHP tutorial describes how to build an image uploader that allows people to upload images onto your website. Watch more at: View Source.

PHP Use

PHP-BuildPHP is a general-purpose scripting language that is especially suited to server-side web development where PHP generally runs on a web server. Any PHP code in a requested file is executed by the PHP runtime, usually to create dynamic web page content or dynamic images used on websites or elsewhere. It can also be used for command-line scripting and client-side graphical user interface (GUI) applications. PHP can be deployed on most web servers, many operating systems and platforms, and can be used with many relational database management systems (RDBMS). Most web hosting providers support PHP for use by their clients. It is available free of charge, and the PHP Group provides the complete source code for users to build, customize and extend for their own use.

PHP acts primarily as a filter, taking input from a file or stream containing text and/or PHP instructions and outputting another stream of data; most commonly the output will be HTML. Since PHP 4, the PHP parser compiles input to produce bytecode for processing by the Zend Engine, giving improved performance over its interpreter predecessor.

Originally designed to create dynamic web pages, PHP now focuses mainly on server-side scripting, and it is similar to other server-side scripting languages that provide dynamic content from a web server to a client, such as Microsoft’s ASP.NET, Sun Microsystems’ JavaServer Pages, and mod_perl. PHP has also attracted the development of many software frameworks that provide building blocks and a design structure to promote rapid application development (RAD). Some of these include CakePHP, Symfony, CodeIgniter, Yii Framework, and Zend Framework, offering features similar to other web application frameworks.

The LAMP architecture has become popular in the web industry as a way of deploying web applications. PHP is commonly used as the P in this bundle alongside Linux, Apache and MySQL, although the P may also refer to Python, Perl, or some mix of the three. Similar packages are also available for Windows and OS X, then called WAMP and MAMP, with the first letter standing for the respective operating system. Although both PHP and Apache are provided as part of the Mac OS X base install, users of these packages seek a simpler installation mechanism that can be more easily kept up to date.

Loaders and Uploaders from CodeCanyon:

Website:
Build My Site

iOS 6 Tutorial: Introduction to iOS Collection Views

Posted on by
2

This tutorial explores the addition of Collection Views in iOS 6 and explains their role in page layout for iOS devices. Watch more at: iOS 6 SDK New Features.

This tutorial is a single movie from the iOS 6 SDK New Features course presented by lynda.com author Simon Allardice. The complete course duration is 2 hours and 29 minutes long and shows how to bring your existing iOS development skills—and your own applications—up to speed with the new options in iOS 6 SDK

Introduction
1. Xcode and Objective-C changes
2. iOS Collection Views
3. Working with Passbook
4. Additional Frameworks

Simon Allardice

This video is a very good introduction to collection views in iOS 6. I really like the way this lynda.com author presents his video tutorials. He has a special way in his teaching that helps you to understand. Although all of the authors from lynda.com are really great – he is one of my favorites. Thumbs up to you Simon! Learn more about Simon here: Simon Allardice.

iOS 6iOS 6 is the latest major version of the iOS mobile operating system from Apple Inc. The latest version of iOS 6 is 6.1.4. It was preceded by iOS 5 (final version was 5.1.1).

Features

Two notable apps that iOS 6 removed by default are Google Maps (download on the App Store) and YouTube.

The built-in Maps app uses Apple’s new vector-based engine that eliminates the lag present while downloading bitmaps from Google’s servers, making for smoother zooming. New to Maps is turn-by-turn navigation spoken directions in certain countries, 3D views in some major cities and real-time traffic. Turn-by-turn navigation is only available for iPhone 4S or later and iPad 2 or later with cellular capability, while 3D views are only available for iPhone 4S or later, fifth-generation iPod Touch, and iPad 2 and later.

Another change includes the inability to download Podcasts through the regular iTunes application. Instead, users are prompted to download the official Podcasts App in order to continue.

iOS 6 brings the retrieval of documents such as boarding passes, admission tickets, coupons and loyalty cards through its new Passbook app. An iOS device with Passbook can be scanned under a reader to process a mobile payment at participating locations. The app has context-aware features such as notifications for relevant coupons when in the immediate vicinity of a given store.

Apple’s Siri intelligent personal assistant was improved to include the ability to make restaurant reservations, launch apps, dictate Facebook or Twitter updates, retrieve movie reviews and detailed sports statistics. Siri, which previously was only supported on iPhone 4S, is also now supported on iPhone 5, fifth-generation iPod Touch, third- through fourth-generation iPad and iPad Mini.

Facebook comes integrated through Apple’s native apps with iOS 6. Facebook features can be directly accessed from within native apps such as Calendar which can sync Facebook events, or use Facebook’s like button from within the Apple App Store.

New privacy settings are available to the user. In addition to location services, the following have been added in iOS 6: photos (already partially restricted in iOS 5), contacts (address book), calendars, reminders, Bluetooth sharing, Twitter, Facebook, and Sina Weibo. iOS 6 also comes with a “Limit ad tracking” user control in the general settings menu to allow users the option to prevent targeted advertising. Apple’s Advertising Identifier replaces the company’s existing UDID standard. Advertising networks not yet using Apple’s Advertising Identifier device identifier standard would not be affected although Apple will require the standard in the future.

Website:
Build My Site

Building and Customizing jQuery Mobile Themes

Posted on by
Reply

This Fireworks CS6 tutorial demonstrates how to build and customize jQuery Mobile themes and icons. Watch more at: Fireworks CS6 Essential Training.

This specific tutorial is just a single movie from chapter ten of the Fireworks CS6 Essential Training course presented by lynda.com author Ray Villalobos. The complete Fireworks CS6 Essential Training course has a total duration of 5 hours and 22 minutes, and covers all the essential drawing features in Fireworks, from drawing simple shapes to applying fills, strokes, and opacity values to objects. The course also covers how to move, scale, and otherwise transform images as well as create symbols, use sprites, and integrate CSS and jQuery Mobile

Fireworks CS6 Essential Training table of contents:

Introduction
1. Understanding the Interface
2. Working with Files
3. Drawing with Fireworks
4. Working with Objects
5. Organizing Documents
6. Using Symbols
7. Enhancing Fireworks
8. Using Sprites
9. CSS Integration
10. jQuery Mobile

Theming

themesjQuery Mobile provides a powerful theming framework that allows developers to customize color schemes and certain CSS aspects of UI features. Developers can use the jQuery Mobile ThemeRoller application to customize these appearances and create highly branded experiences. After developing a theme in the ThemeRoller application, programmers can download a custom CSS file and include it in their project to use their custom theme.

Each theme can contain up to 26 unique color “swatches,” each of which consists of a header bar, content body, and button states. Combining different swatches allows developers to create a wider range of visual effects than they would be able to with just one swatch per theme. Switching between different swatches within a theme is as simple as adding an attribute called “data-theme” to HTML elements.

The default jQuery Mobile theme comes with five different color swatches, named “a”, “b”, “c”, “d”, and “e”. Here is an example of how you would create a toolbar with the “b” swatch:

<div data-role="header" data-theme="b"> 
        <h1>Page Title</h1> 
</div>

There are already a handful of open source style themes that are developed and supported by third-party organizations. One such open source style theme is the Metro style theme that was developed and released by Microsoft Open Technologies, Inc. The Metro style theme is meant to mimic the UI of the Metro (design language) that Microsoft uses in its mobile operating systems.

Adobe Fireworks

adobe fireworks themesAdobe Fireworks (formerly Macromedia Fireworks) is a bitmap and vector graphics editor. It was originally developed using parts of Macromedia xRes, which Adobe acquired in 2005. Fireworks is made for web designers for rapidly creating website prototypes and application interfaces. Its features include slices and the ability to add hotspots. It is designed to integrate with other Adobe products such as Adobe Dreamweaver and Adobe Flash. It is available as either a standalone product or bundled with Adobe Creative Suite. Previous versions were bundled with Macromedia Studio.

On May 6, 2013, Adobe announced that Fireworks would be phased out. Adobe will continue to provide security updates and perhaps bug fixes for the current version, but does not plan to add any new feature beyond what is in Fireworks CS6.

Image optimization

Fireworks was created specifically for web production. Since not every user may be in possession of a fast Internet connection, it is at the best interest of the web developers to optimize the size of their digital contents. In terms of image compression, Fireworks has a better compression rate than Photoshop with JPEG, PNG and GIF images.

Website:
Build My Site

How to Import Word Documents Into iBooks Author

Posted on by
Reply

This iBooks Author tutorial shows how to import a Microsoft Word document into your iBook. Watch more at: iBooks Author Essential Training.

This specific tutorial is just a single movie from chapter three of the iBooks Author Essential Training course presented by lynda.com author Chris Mattia. The complete iBooks Author Essential Training course has a total duration of 5 hours and 45 minutes and shows how to use the Apple iBooks Author application to create and publish your own iBook, without extensive design or publishing experience.

iBooks Author Essential Training table of contents:

Introduction
1. Getting Started
2. Working with Templates
3. Adding Text
4. Formatting Text
5. Working with Objects
6. Working with Images
7. Working with Shapes
8. Working with Tables
9. Working with Charts
10. Working with Widgets
11. Creating Review Sections
12. Exporting the Book

Pages (word processor)

pages_importPages is a word processor and page layout application developed by Apple Inc. It is part of the iWork productivity suite and runs on the OS X and iOS operating systems. The first version of Pages was announced on January 11, 2005, and was released one month later. The most recent Macintosh version, Pages 4, was released on January 6, 2009, as a component of iWork ’09. On January 27, 2010, Apple announced a new version of Pages for iPad with a touch interface. On May 31, 2011 Apple updated the iOS version of Pages to 1.4, bringing universal binaries allowing the app to be run on iPad, iPhone and iPod Touch devices. On October 12, 2011, Apple updated the iOS app to version 1.5, adding the iCloud “Documents in the Cloud” feature. iOS Pages was updated to version 1.6 on March 7, 2012 and will run on iOS 5.1 or later only.

Pages is marketed by Apple as an easy-to-use application that allows users to quickly create documents on their home computers. A number of Apple-designed templates comprising different themes (such as letters, résumés, posters, and outlines), are included with Pages.

Pages has a number of other advanced writing tools. The “Full Screen” mode (introduced in OS X Lion) hides the menubar and toolbars, allowing users to focus on a single document without being distracted by other windows on the screen. Mail merge automatically populates custom fields with contact data from Address Book or from Numbers to create personalized documents. For example, if a user wants to send one letter to three different people, mail merge allows him to create a single document with placeholder fields that will be populated when printing. Tables and charts pasted from Numbers are automatically updated if the original spreadsheet is changed.

Pages can import some AppleWorks word processing documents and Microsoft Word documents (including Word 2007′s Office Open XML format, and can export documents to rich text, PDF, EPUB and Microsoft Word DOC formats.

Simple and complex mathematical equations can be written for a Pages document with Mac OS X’s Grapher, offering similar capabilities to Microsoft Equation Editor (plus 2D and 3D rendering tools only Grapher can use).

Related Resource:

Firefly – AS3 XML Flip Book

Website:
Build My Site

iOS SDK Tutorial: Parsing the Feed with NSXMLParser

Posted on by
3

This iOS SDK tutorial shows how to run the NSXMLParser to retrieve the title and description of RSS feeds. Watch more at: iOS SDK and SQLite: Building Data-Driven Apps.

This tutorial is a single movie from the iOS SDK and SQLite: Building Data-Driven Apps course presented by lynda.com author Bill Weinman. The complete course duration is 3 hours and 45 minutes long and teaches you how to build a data-driven app for iOS devices, integrating XML data and a streamlined interface.

Introduction
1. An iOS Testbed
2. Building a Database Library
3. Creating the Tableview App
4. Parsing XML Data
5. Using a Modal View
6. The Web View Controller
7. Creating a Preferences Pane
8. Adding a Feature
9. Creating a Universal Application

RSS

Feed IconRSS Rich Site Summary (originally RDF Site Summary, often dubbed Really Simple Syndication) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. An RSS document (which is called a “feed”, “web feed”, or “channel”) includes full or summarized text, plus metadata such as publishing dates and authorship.

RSS feeds benefit publishers by letting them syndicate content automatically. A standardized XML file format allows the information to be published once and viewed by many different programs. They benefit readers who want to subscribe to timely updates from favorite websites or to aggregate feeds from many sites into one place.

RSS feeds can be read using software called an “RSS reader“, “feed reader”, or “aggregator”, which can be web-based, desktop-based, or mobile-device-based. The user subscribes to a feed by entering into the reader the feed’s URI or by clicking a feed icon in a web browser that initiates the subscription process. The RSS reader checks the user’s subscribed feeds regularly for new work, downloads any updates that it finds, and provides a user interface to monitor and read the feeds. RSS allows users to avoid manually inspecting all of the websites they are interested in, and instead subscribe to websites such that all new content is automatically checked for and advertised by their browsers as soon as it is available.

Feed Reader Applications

Feed aggregation clients are applications installed on a PC, smartphone or tablet computer, designed to collect web feed subscriptions and group them together using a user-friendly interface. The graphical user interface of such applications often closely resembles that of popular e-mail clients, using a three-panel composition in which subscriptions are grouped in a frame on the left, and individual entries are browsed, selected, and read in frames on the right.

Software aggregators can also take the form of news tickers which scroll feeds like ticker tape, alerters that display updates in windows as they are refreshed, web browser macro tools or as smaller components (sometimes called plugins or extensions), which can integrate feeds into the operating system or software applications such as a web browser. Clients applications include Mozilla Firefox, Microsoft Office Outlook, iTunes, FeedDemon and many others.

Web-based Feed Readers

Web-based feeds readers allow users to find a web feed on the internet and add it to their feed reader. Online feed readers include Bloglines, Feedly, Google Reader (discontinuing July 1, 2013), My Yahoo!, NewsBlur and Netvibes. These are meant for personal use and are hosted on remote servers. Because the application is available via the web, it can be accessed anywhere by a user with an internet connection.

More advanced methods of aggregating feeds are provided via Ajax coding techniques and XML components called web widgets. Ranging from full-fledged applications to small fragments of source code that can be integrated into larger programs, they allow users to aggregate OPML files, email services, documents, or feeds into one interface. Many customizable homepage and portal implementations provide such functionality.

In addition to aggregator services mainly for individual use, there are web applications that can be used to aggregate several blogs into one. One such variety—called planet sites—are used by online communities to aggregate community blogs in a centralized location. They are named after the Planet aggregator, a server application designed for this purpose.

Website:
Build My Site

Dreamweaver Tutorial: Setting up Media Queries

Posted on by
Reply

This Dreamweaver and WordPress tutorial shows how to set up media queries for tablet and phone-sized screens—a big component of any responsive web design. Watch more at: Dreamweaver and WordPress: Core Concepts.

This tutorial is a single movie from the sixth chapter of the Dreamweaver and WordPress: Core Concepts course presented by lynda.com author Joseph Lowery. The complete course is 5 hours and 45 minutes long and shows how to combine the utility of WordPress and the power of Dreamweaver to transition existing designs to the WordPress platform

Introduction
1. Setting Up WordPress
2. Exploring a WordPress Site in Dreamweaver
3. Creating Content
4. Working with WordPress Themes
5. Extending WordPress Editable Pages
6. Using WordPress Plug-Ins
7. Integrating WordPress Database Content into Dreamweaver Pages
8. WordPress Administration
9. Publishing a WordPress Site
10. Extending the User Experience
11. Integrating WordPress Database Content into Dreamweaver Pages
12. WordPress Administration
13. Publishing a WordPress Site

Media queries

CSS3 Media Queries

Logo of CSS3

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive Web Design.

Using media queries

A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Here is a simple example:

@media screen and (min-width:500px) { … }


The following table contains the media features listed in the latest W3C recommendation for media queries:

Media Queries Table

Related Resources:

Website:
Build My Site

Web Design Tutorial: Planning for Typefaces

Posted on by
Reply

This responsive design tutorial discusses the role of typography in web design and the current options available, from @font-face font embedding, to web font licensing agreements. Watch more at: Responsive Design Workflows.

This tutorial is a single movie from the first chapter of the Responsive Design Workflows course presented by lynda.com author Justin Putney. The complete course is 1 hour and 20 minutes long and shows how to evolve your current workflow to incorporate responsive design practices, without adding too much complexity or overhead

Introduction
1. Aspects to Consider
2. Job Roles and Communication
3. Design Considerations for Developers
4. Development Considerations for Designers
5. Client Communications
6. Design Solutions
7. Team Integration

Typeface

In typography, a typeface (also known as font family) is a set of one or more fonts each comprised of glyphs that share common design features. Each font of a typeface has a specific weight, style, condensation, width, slant, italicization, ornamentation, and designer or foundry (and formerly size, in metal fonts). (e.g. “ITC Garamond Bold Condensed Italic” is a different font from “ITC Garamond Condensed Italic” and “ITC Garamond Bold Condensed,” but all are fonts within the same typeface, “ITC Garamond.” However, ITC Garamond is a different typeface than “Adobe Garamond” or “Monotype Garamond.”) There are thousands of different typefaces in existence, with new ones being developed constantly.

The art and craft of designing typefaces is called type design. Designers of typefaces are called type designers and are often employed by type foundries. In digital typography, type designers are sometimes also called font developers or font designers.

The term typeface is frequently confused with the term font. Before the advent of digital typography and desktop publishing, the two terms had more clearly understood meanings.

Style of typefaces

font typefaces

Illustration of different font types and the names of specific specimens

Because an abundance of typefaces have been created over the centuries, they are commonly categorized according to their appearance. At the highest level (in the context of Latin-script fonts), one can differentiate Roman, Blackletter, and Gaelic types. Roman types are in the most widespread use today, and are sub-classified as serif, sans serif, ornamental, and script types. Historically, the first European fonts were blackletter, followed by Roman serif, then sans serif and then the other types. The use of Gaelic faces was restricted to the Irish language, though these form a unique if minority class. Typefaces may be monospaced regardless of whether they are Roman, Blackletter, or Gaelic. Symbol typefaces are non-alphabetic.

Web-safe fonts

typefaces_web_fontsWeb fonts allow Web designers to use fonts that are not installed on the viewer’s computer. Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor’s operating system.

Licensing FAQ

Visit: Adobe Web Fonts to learn more about licensing for web fonts and Font Squirrel a web font generator.

Typekit

Typekit is a service which allows subscribers to embed fonts into online documents. Unlike Edge Web Fonts, Typekit requires a subscription, which provides access to the font library. The system was initially developed by Small Batch Inc., and purchased by Adobe in October 2011. A free subscription is available to the service, with a more comprehensive option costing an annual fee.

Adobe Edge Web Fonts

Edge Web Fonts provides access to a collection of online fonts, available for use in web documents. These fonts are provided by Adobe, Google, and independent contributors. The service is integrated with the other Edge suite applications, allowing for a larger catalogue of fonts to be used in web development, whilst remaining compatible with all devices. It is also accessible via the Edge Web Fonts site, which generates the code necessary for inclusion in other sites. It is powered by Typekit, but does not provide the same service, and is completely free.

Website:
Build My Site

InDesign Tutorial: Creating a Navigation System

Posted on by
Reply

This InDesign tutorial shows how to create a navigation system and interactive buttons to display content quickly and easily. Watch more at: InDesign CS6: Interactive Documents.

This specific tutorial is just a single movie from chapter four of the InDesign CS6: Interactive Documents course presented by lynda.com author Mike Rankin. The complete InDesign CS6: Interactive Documents course has a total duration of 5 hours and 11 minutes, and explains how to use InDesign to design a wide range of digital documents, including interactive PDFs and apps for the iPad

InDesign CS6: Interactive Documents table of contents:

Introduction
1. Exploring Trends in Digital Design
2. Setting Up InDesign for Designing Digital Documents
3. Creating Documents for Multiple Screens
4. Building an Interactive PDF Presentation
5. Building an Interactive PDF Catalog
6. Working with PDF Forms
7. Incorporating Animation and SWF Files in a Portfolio
8. Digital Publishing Suite (DPS), Part 1
9. Digital Publishing Suite (DPS), Part 2

Influences

Interactive Design and Navigation

Interactive design diagram

There are many leading names in the field of Interactive Design. However, two successful characters are Lisa Graham and Chris Crawford. Graham and Crawford both have written industry respected books and are leaders in the field today. Graham explains the brains and layout of how good Interactive Design is achieved, whereas Crawford is the theory behind Interactive Design.

Chris Crawford

According to Chris Crawford a highly respected figure in both the interactive and Video game development field interaction is defined in his words as “a cyclic process in which two actors alternatively listen, think, and speak”. Crawford went on to say that there is “No Trade Off” and that if one of the three steps is poorly designed the entire project will collapse even if two of the steps have been designed beautifully.

Lisa Graham

Lisa Graham is an award-winning visual communicator, author and current associate professor at the University of Texas at Arlington. Her expertise is in Graphic Design and Interactivity. One of her books, Principles of Interactivity, has gained much recognition from the design world. Graham explains in her writing that Interactive Design is a meaningful arrangement of graphics, text, videos, photos, illustrations, sound, animation and 3D imagery. She begins to explain interactivity by giving the reader an example of a simplified version of Interactivity. Her example of simple interactivity is something like an all-text web page with a few links to other webpages navigating to other pages with similar and more in depth information. Her idea of a more complex interactive project is something like a document all or any forms of digital media. In her writing, the Interactive Design Process begins with Problem Definition and follows steps like fact finding, idea finding and project visualization. Graham breaks down successful interactive Design into establishing content, planning, flowcharts, storyboards, creating sample layouts, determining navigation, prototyping, usability testing and mastering. To Graham, understanding the goals of an interactive project is critical to the creation of a good interactive document. Graham has a very different view and idea of Interactive Design from that of Chris Crawford, who believes good Interactive Design is based on three main ideas: Listening, Thinking and Speaking. Graham has a great understanding of the process for creating Interactive Design whereas Crawford gives us a straight forward understanding of the theory and definition of Interactive Design.

Website:
Build My Site

HTML5 Tutorial: Setting up the HTML

Posted on by
1

This tutorial is a single movie from the HTML5 Projects: Video Bumpers course presented by lynda.com author Joseph Lowery. The complete course duration is 31 minutes long and shows how to add opening and closing video bumpers using the video tag and its JavaScript API. This tutorial shows how to set up the HTML for a video bumper. Watch more at: HTML5 Projects: Video Bumpers.

Introduction
1. Understanding the Project
2. Creating the Video Bumpers

HTML5 Video

HTML5The HTML5 draft specification introduced the video element for the purpose of playing videos or movies, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web without plugins, but has been hampered by lack of agreement as to which video formats should be supported in web browsers.

History of <video> element

The <video> element was proposed by Opera Software in February 2007. Opera also released a preview build that was showcased the same day, and a manifesto that called for video to become a first-class citizen of the web.

<video> element examples

The following HTML5 code fragment will embed a WebM video into a web page.

<video src="movie.webm" poster="movie.jpg" controls>
        This is fallback content to display if the browser
        does not support the video element.
</video>

The “controls” attribute enables the browser’s own user interface for controlling playback. Alternatively, playback can be controlled with JavaScript, which the web designer can use to create a custom user interface. The optional “poster” attribute specifies an image to show in the video’s place before playback is started. Its purpose is to be representative of the video.

Multiple Sources

Using any number of <source> elements, as shown below, the browser will choose automatically which file to download. Alternatively, the JavaScript canPlay() function can be used to achieve the same. The “type” attribute specifies the MIME type and possibly a list of codecs, which helps the browser to determine whether it can decode the file. Even with only one choice, such hints may be necessary to a browser for querying its multimedia framework for third party codecs. Due to lack of a common video format, multiple sources is an important technique in order to avoid the need for browser sniffing, which may be error prone: given that any web developer’s knowledge of browsers will inevitably be incomplete, the browser in question “knows best.”

<video poster="movie.jpg" controls>
        <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
        <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
        <p>This is fallback content</p>
</video>

Resource from the video:

HTML5 Video Bumpers | Drew McLellan

Website:
Build My Site

Xcode 4 Tutorial: Creating an iPhone Interface Using Storyboards

Posted on by
9

This tutorial is a single movie from the Xcode 4 Essential Training course presented by lynda.com author Bill Weinman. The complete course duration is 4 hours and 13 minutes and covers all of the Xcode features for software developing on the OS and iOS platforms, including code editing, compiling, debugging, and more. This tutorial shows how to use storyboards to create the user interface of an iPhone app, and show connections between screens. Watch more at: Xcode 4 Essential Training.

Introduction
1. Getting Started
2. Editing Code
3. Version Control
4. Interface Builder
5. Storyboards
6. Compiling
7. Debugging
8. Workspaces
9. Static Analysis Tools
10. The iOS Simulator

Interface

IOS 6 Home Screen Interface

The default Home screen of iOS 6 shows most of the applications provided by Apple. Users can download additional applications from the App store, create Web Clips, rearrange the icons, and create and delete folders.

The interface is based around the home screen, a graphical list of available applications. iPhone applications normally run one at a time (not including iOS 4 and iOS 5, which includes running applications in the background), although most functionality is still available when making a call or listening to music. The home screen can be accessed at any time by a hardware button below the screen, closing the open application in the process.

By default, the Home screen contains the following icons: Messages (SMS and MMS messaging), Calendar, Photos, Camera, YouTube, Stocks, Maps (Google Maps), Weather, Voice Memos, Notes, Clock, Calculator, Settings, iTunes (store), App Store, (on the iPhone 3GS and iPhone 4) Compass, FaceTime and GameCenter were added in iOS 4.0 and 4.1 respectively. In iOS 5, Reminders and Newsstand were added, as well as the iPod application split into separate Music and Videos applications. iOS 6 added Passbook as well as an updated version of Maps that relies on data provided by TomTom as well as other sources. iOS 6 also added a Clock application onto the iPad’s homescreen. Docked at the base of the screen, four icons for Phone, Mail, Safari (Internet), and Music delineate the iPhone’s main purposes. On January 15, 2008, Apple released software update 1.1.3, allowing users to create “Web Clips”, home screen icons that resemble apps that open a user-defined page in Safari. After the update, iPhone users can rearrange and place icons on up to nine other adjacent home screens, accessed by a horizontal swipe.

Users can also add and delete icons from the dock, which is the same on every home screen. Each home screen holds up to twenty icons, and the dock holds up to four icons. Users can delete Web Clips and third-party applications at any time, and may select only certain applications for transfer from iTunes. Apple’s default programs, however, may not be removed. The 3.0 update adds a system-wide search, known as Spotlight, to the left of the first home screen.

Almost all input is given through the touch screen, which understands complex gestures using multi-touch. The iPhone’s interaction techniques enable the user to move the content up or down by a touch-drag motion of the finger. For example, zooming in and out of web pages and photos is done by placing two fingers on the screen and spreading them farther apart or bringing them closer together, a gesture known as “pinching”.

Scrolling through a long list or menu is achieved by sliding a finger over the display from bottom to top, or vice versa to go back. In either case, the list moves as if it is pasted on the outer surface of a wheel, slowly decelerating as if affected by friction. In this way, the interface simulates the physics of a real object.

Other user-centered interactive effects include horizontally sliding sub-selection, the vertically sliding keyboard and bookmarks menu, and widgets that turn around to allow settings to be configured on the other side. Menu bars are found at the top and bottom of the screen when necessary. Their options vary by program, but always follow a consistent style motif. In menu hierarchies, a “back” button in the top-left corner of the screen displays the name of the parent folder.

Website:
Build My Site