Basic web dveleopers terms for UX and graphic designers

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Guide to HTMLRan Bar-ZikPHP\Drupal Developer16.12.2013

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.2

Ran Bar-Zik,

Who am I?

• PHP developer at HP Software• Working at hpln.hp.com• More information at my personal site: internet-israel.com

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Core elements

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.4

Brief explanation

What is HTML, CSS & JavaScript?

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.5

Hypertext Markup Language

What is HTML

The base of all page• It is NOT a language• The basic elements of the page.• Every element have basic design implemented by the browser.• For example: <h1> - header, is suppose to be large in every browser.• For example select list will look like this in Internet Explorer on windows:• But will look like this in Safari on Apple:

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.6

Cascading Style Sheets – Designing the page

What is CSS

CSS is being used to design• Colors and sizes• Dimensions• Positioning• Font design

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.7

Language that do stuff on the page itself

What is JavaScript?

For example:• Opening Menus• Expanding\Collapsing areas• Validating input on forms• Animating and moving elements• Transitions

Example: https://hpln.hp.com/node/21

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.8

This is all of web page components

CSS, JavaScript and HTML

Server side programs (Java, PHP, .net etc.) generate those resources.

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.9

AJAX

What is AJAX?AJAX is JavaScript way to receive and get data. It means that you can getInformation WITHOUT reloading the page.

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Basic tools

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.11

jQuery is JavaScript library

jQuery

It allows the developer to write more efficient JavaScriptIt is just JavaScript!

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Advanced tools

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.13

Boilerplates allowing us to create an basic web page – template

Boilerplates

HTML5 Boilerplate and other boilerplateBoilerplates is the professional term for base layer for web pages.It contains basic CSS, basic HTML and basic JavaScript code.

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.14

More advanced boilerplates

Bootstraps

Templates for whole pages and componentsThe most important one: Twitter bootstrap. It is CSS, JavaScript and HTML files that enable us to copy ready made elements to our application without creating those from scratch.Examples:http://getbootstrap.com/components/#dropdowns

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Responsiveness

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.16

But not only mobile

The problem: mobile devices

In today world we have a lot of devices and screen sizes:Responsiveness is the tool to create layout for every screen.

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.17

Responsiveness is achieved by CSS only!

How do we do it?

No Advance programming or very hard work!It is CSS only (no HTML\JavaScript) and it can be done very easily.Example: http://www.internet-israel.com

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.18

Bootstrap contains grid system

Bootstrap can help you create a responsive siteWhat is grid? Like in Photoshop – help the developer position elements in a web page.And it does responsiveness automatically!

Example: http://getbootstrap.com/examples/jumbotron-narrow/

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Cross browsers

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.20

Different browser renders HTML, CSS, JavaScript in different ways.

Not every browser is the same

This is why we are testing our application in different browsers and platforms.Web page that looks great in one browser can look like hell in other browser.

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.21

How to know if browser support features?

Feature detection

http://caniuse.com/

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.22

Two ways to fight the differences

Feature detection VS Browser detection

Browser DetectionFind the browser type (bad)

Feature DetectionTry to find The feature that the browser support

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.23

JavaScript file that fill the gap for old browsers

Polyfills

Allowing new features on old browsers

For example: allowing HTML5 form control on Internet Explorer 8 that does not support this feature.

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.24

Allow alternative solution for browsers that does not have the feature

Fallbacks

For example:Showing Flash videos for browsers that does not support HTML5 videos.

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Advanced CSS Frameworks

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.26

Basically the same stuff: CSS generator

LESS & SASS

CSS is not a real languageProgrammers love to program, this is why we invented CSS preprocessors:

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.27

It is like jQuery for SASS

COMPASS

It contains a lot of functions (mixins in SASS language), variable and stuff that help the developer create interface.

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Thank you