web dev-101

13
Web Dev 101 By Andrew Pottenger Web Developer for LinkedIn http://www.linkedin.com/in/apotts15

Upload: andrew-pottenger

Post on 12-Jul-2015

216 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Web dev-101

Web Dev101

By Andrew PottengerWeb Developer for LinkedIn

http://www.linkedin.com/in/apotts15

Page 2: Web dev-101

Introduction

• Web developers create interfaces that organize information for users.

• Top 3 Technologies Used for UIo HTML / HTML5

o CSS / CSS3

o JavaScript• Frameworks Used

jQuery

YUI

Prototype

Moo tools

Script.aculo.us

Page 3: Web dev-101

CSS(Styling)

JavaScript(Behavior)

HTML(Structure)

The Top 3

Page 4: Web dev-101

HTMLHyper-Text Markup Language

• A markup language that formats the structure of a web page using tags.

• HTML is the basic building blocks of the web.

• Described with open and closed tags to define elements (e.g. Image, paragraphs, headers, etc.)

• Not a programming language• Correct and incorrect way to

format a web page based on web standards

• HTML5 is going to be considered the new standard if not already

Page 5: Web dev-101

CSSCascading Style Sheets

• CSS defines the appearance and layout of a webpage (look and feel)

• It tells the browser how to display the HTML elements

• Features include: Font type and size Text Color Background images Formatting with floats Padding, margins, and borders

• CSS renders differently depending on the browser (e.g. IE, Firefox, Chrome)

• Requires browser compatibility techniques

Page 6: Web dev-101

JavaScript• A scripting language used to control the

behavior of a web page• NOT the same as JAVA;

JAVA is to JavaScript as CAR is to Carpet

• Enhances the user experience with added interactivity and dynamic web pages

• Client-side language, no server• Functions with math operators, basic

computing, and OOP • Frameworks and Libraries

jQuery, YUI, Prototype, Moo tools, Script.aculo.us

• Examples include: Dropdowns Image scrollers Popups, lightboxes Form validation Toggling, hide / show elements Animations and effects

Page 7: Web dev-101

Other Technologies

• Browsers Compatibility• Web Standards• Programming Languages PHP, JSP, ASP, ASP.Net, Java Object Oriented Programming

• Database Knowledge – MySQL, SQL, Oracle

• AJAX, XML, JSON• Design knowledge Photoshop Fireworks Illustrator

Page 8: Web dev-101

Questions

• Differences between HTML5 and HTML, and CSS and CSS3?

• What is Flash and where is it going?

• Drupal vs Wordpress vs Joomla?

• What classifies Backend coding vs Frontend?

• What is the deal with this mobile movement?

Page 9: Web dev-101

Differences between HTML5 and HTML, and CSS and CSS3?

• HTML5 is a new version of HTML with more specific tags to define elements on a page.

• There is much more in the HTML5 bucket but this is generally what devs may know.

• CSS3 offers new features like animations, transitions, rounded corners and other common UI features you are used to seeing.

• Before we used images, now we can use CSS3

Page 10: Web dev-101

What is Flash and where is it going?

• It’s not. Flash is dying with the new movement of HTML5 and CSS3.

• It will be a slow death. Flash is still the best way to show video and audio cross browser along with ads and some animation. It will be lingering around for some time

Page 11: Web dev-101

Drupal vs Wordpress vs Joomla?

• These are different types of open source projects that give you a type of website out of the box

• Wordpress is a (almost) complete blogging software anyone can use

• Joomla and Drupal are general website projects that provide basic, standard functionality of common websites

Page 12: Web dev-101

What classifies Backend coding vsFrontend?

• Backend or software engineers generally program in technologies such as Java, J2EE, and databases. Usually not involved with the user interface.

• Frontend developers are usually developing with the 3 main technologies, HTML, CSS, and JavaScript.

• Grey areas that mix both can include PHP, ASP.NET, Ruby, Python, C++, etc…

Page 13: Web dev-101

What is the deal with this mobile movement?

• With the popularity of smart phones and tablets, everything is moving toward mobile

• Few people are reading emails on their desktop anymore

• Mobilizing websites are becoming the future or the present and it will only continue to grow.