Tag Archives: website

Training Designing Websites for Mobile Devices – 3 days

Class overview :

Mobile device web browsers provide the primary method of Internet access to an exponentially growing number of users. Traditional websites designed for desktop browsers do not provide an optimal experience for mobile interaction.

Class goals :

  • Develop streamlined mobile websites for efficient access to online information
  • Write compelling HTML5 and CSS3 content for mobile users
  • Employ JavaScript to maximize the potential of each browser platform
  • Extend the browsing experience with mobile-focused multimedia content
  • Harness geolocation capabilities to deliver targeted content
  • Leverage native extensions and exploit local storage for enhanced device integration

Content of Designing Websites for Mobile Devices

Surveying the Mobile Web Environment

  • Exploring key mobile web platforms
  • Android
  • iOS
  • Blackberry
  • Windows phone

Analyzing Requirements for Mobile Websites

Taking advantage of best practices

  • Creating vs. migrating web applications
  • Complying with W3C guidelines

Applying architectural principles and constraints

  • Selecting high-priority features
  • Simplifying the User Interface (UI) for enhanced performance
  • Designing for touch interactivity
  • Identifying bandwidth and memory limitations

Authoring HTML Content for Mobile Websites

Designing for platform independence

  • Maximizing site functionality with progressive enhancement
  • Constructing an appropriate layout for a mobile UI
  • Controlling zoom with the Viewport

Integrating HTML5 extensions

  • E-mail
  • Web addresses
  • Date pickers
  • Spin boxes
  • Autofocus fields
  • Search boxes
  • Dialing the phone from the page
  • Displaying a context-sensitive keyboard

Customizing Presentation with Cascading Style Sheets

Harnessing CSS3 capabilities

  • Selecting style sheets based on device orientation
  • Manipulating layout dynamically with transitions, transforms and animations

Styling layout and content

  • Optimizing styles for touch interactivity
  • Applying styles based on content
  • Simulating the native UI with CSS

CSS extensions for mobile

  • Mapping device Viewports to style sheets
  • Enhancing text readability with text-size-adjust
  • Highlighting touch content with tap-highlight-color

Supporting User Interaction and Mobile Features

Implementing common mobile features

  • Determining support for device capabilities
  • Touch
  • Tilt
  • Multimedia
  • Local storage
  • Detecting browser capabilities on the server and client

Enhancing interactivity with JavaScript

  • Employing key libraries: Modernizr and jQuery mobile
  • Responding to orientation changes

Comparing phone and tablet UIs

  • Differentiating between phone and tablet presentation
  • Adapting web content to respect platform conventions
  • Designing tablet-style, two-column views

Producing Graphics and Media

Processing video for mobile devices

  • Generating bandwidth-appropriate video content
  • Exploiting the HTML5 video element
  • Activating video content from JavaScript

Presenting graphic images

  • Optimizing graphics for mobile devices
  • Creating home screen graphic images

Leveraging Geolocation

Determining device position

  • Querying for the device location with GPS
  • Integrating with the native map application
  • Retrieving location-based web content

Integrating local storage

  • Persisting data onto the device
  • Managing locally stored data

Enhancing Site Functionality

Working offline

  • Enabling disconnected web applications
  • Detecting network status
  • Synchronizing offline data to enterprise databases

Consolidating the web with native extensions

  • Integrating with the home screen
  • Hiding the standard browser UI
  • Accessing native mobile hardware with PhoneGap
  • Camera
  • Contacts
  • Accelerometer
  • Compass

Onze voordelen :

  • Type of training: Inter-company, intra-company and individual
  • 100% flexible & personalised training : You choose the place, the dates and the training program
  • Offer request : Response within 24 hours
  • 50% discount for SME’s from Brussels-Capital Region
  • Free parking, lunch & drinks
  • Free use of our Digital Competence Centre: Manuals, courses, exercises, …

PIXYSTREE SCS

Rue Beeckmans, 53
1180 Bruxelles

Tel : +32 2 412 04 10
Fax : +32 2 412 04 19
Gsm : +32 485 212 722
Email : selossej@pixystree.com

http://www.pixystree.com

Training Developing a Website – 4 days

Class overview :

Those involved in establishing, developing or maintaining a Web site and anyone wanting to gain more knowledge about Web technologies. A basic familiarity with Microsoft Windows, the Internet and the Web is helpful.

Class goals :

An in-depth case study provides the hands-on skills to generate a dynamic Web site. Exercises include:

  • Creating accessible, standards-based Web pages with HTML, XHTML and CSS
  • Building, testing and refining your Web site
  • Adding DHTML effects to Web pages
  • Enhancing your Web page with images and image maps
  • Configuring and testing a Web server
  • Processing user requests and generating dynamic pages as the response
  • Interfacing your Web site to a database
  • Incorporating multimedia effects

Content of Developing a Website

Introduction to the Web

  • Internet/intranet fundamentals
  • Web architecture
  • Exploring multiple browsers
  • Search Engine Optimization (SEO)

HTML: Hypertext Markup Language

Building a Web page with HTML and XHTML

  • Head and body elements
  • Formatting text with tags
  • Establishing hypertext links
  • Ordered and unordered lists
  • Designing tables to display data
  • Defining relative and absolute anchors

Adding graphic elements

  • Making your pages graphical with embedded images
  • Adding interactivity with « clickable » images
  • Utilizing animated images to liven up a Web page
  • Creating image maps to link multiple parts of a single image

Controlling page styles and layout with CSS

  • Attaching style properties to HTML tags
  • Creating and applying style sheets
  • Implementing a styled navigational menu
  • Choosing and applying styles with class and ID attributes
  • Ensuring a consistent look across all pages of a site

Implementing a Web Server

Web server functionality

  • Web server/browser communication
  • The HyperText Transfer Protocol (HTTP)

Configuring a Web server

  • Setting up the server directory structure
  • Deploying access configuration/security
  • Ongoing server administration

Programming on the Server

Server-side scripting

  • Client/server/script interaction
  • Exploring the operation of server-side Web applications
  • Accessing data on the Web server
  • Creating dynamic Web pages
  • The difference between GET and POST requests
  • Including a consistent navigational menu on all pages
  • Reading and writing browser cookies

Processing user data with forms

  • Capturing user input with HTML forms
  • Adding text fields, selection lists, check boxes and radio buttons to a Web page
  • Configuring a form to invoke your server-side program when submitted
  • Processing form input with dynamic Web pages

Interfacing to a Database

Relational databases and the Web

  • Characterizing database records
  • Using SQL to manipulate the database

Database-driven Web pages

  • Opening a connection to a database
  • Storing data captured from forms
  • Performing dynamic queries on the database
  • Generating a Web page response displaying the results of a query

Creating Dynamic Web Pages

Adding interactivity with JavaScript

  • Incorporating JavaScript that executes in the Web browser
  • Enhancing client-side functionality
  • Validating form content to ensure forms are filled out correctly
  • Reacting to user actions

Incorporating multimedia

  • Embedding animation and video content in Web pages
  • Adding interactivity with plug-ins

Creating interactive Web pages with Dynamic HTML (DHTML)

  • Combining JavaScript and CSS
  • Supporting multiple browsers
  • Dynamically positioning content within a page
  • Revealing and hiding page content
  • Implementing rollover graphics with DHTML

XML and HTML5

  • Fundamentals of XML
  • Implementing an RSS feed on your site
  • Introducing HTML5

Onze voordelen :

  • Type of training: Inter-company, intra-company and individual
  • 100% flexible & personalised training : You choose the place, the dates and the training program
  • Offer request : Response within 24 hours
  • 50% discount for SME’s from Brussels-Capital Region
  • Free parking, lunch & drinks
  • Free use of our Digital Competence Centre: Manuals, courses, exercises, …

PIXYSTREE SCS

Rue Beeckmans, 53
1180 Bruxelles

Tel : +32 2 412 04 10
Fax : +32 2 412 04 19
Gsm : +32 485 212 722
Email : selossej@pixystree.com

http://www.pixystree.com