© 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
Top Related