Web Desing.pptx
- 1. Web Development Submitted To: DR. MD MEHEDI HASAN FACULTY OF SCIENCE & TECHNOLOGY Submitted By: Sarker Siam Islam Wasi-U Majumder John Aricsson Ahmed Parash
- 2. Importance of Web Development The Internet is ubiquitous • Accessible through mobile and desktop • Customers/users need to find you/your business • Builds trust in your organization and improves your reputation • Your website is your first round-the-clock sales person! The Website • Creates first impression of your business • Create it to suit the needs of your target audience • Reflects your expertise and reputation • Can bring business from any part of the world! • Call to Action – Encourage the users to give you business
- 3. Web Designer Vs. Web Developer A Web Designer • Designs the look and feel of a website (creative side of website) • Decides the layout, fonts, color, images and overall branding • Creates the visual mock-up of the website • Rarely does the development of a website! • A Right-brained (Creative) Person A Web Developer • Brings the website mock-up to life on the Internet (development side of website) • Develops the website and hosts on a web server • Has Web Development Skills: HTML, CSS, JavaScript, React.js, Node.js • A Left-brained (Logical) Person
- 4. Web Developer Vs. Web Designer
- 5. Front End and Back End Web Development Front End Web Development • Defined components on the page with HTML • Make them look pleasing with CSS • Enable interactivity with JavaScript • Enhance productivity with use of frameworks Back End Web Development • Create the page components and content dynamically on the web server • Send the HTML + CSS + JavaScript to web browser (used by a human user) • Generate pages by programming in Java, JavaScript, PHP, Perl, Python, Ruby • Aim to achieve fast response times to end users Front End Web Development is the focus of this webinar!
- 6. HTML, CSS, and JavaScript – An Overview HTML • Hypertext Markup Language • Structure of Page JavaScript • Interactivity with User • Dynamic Updates in a Web Page CSS • Cascading Style Sheets • Presentation/Styling t
- 7. A Simple HTML5 Page t Save the following code in a test.html file <!DOCTYPE html> <html> <head> <title>This is My First Website </title> </head> <body> <p>Welcome to HTML5, CSS3 and JavaScript!</p> </body> </html>
- 8. Hosting a Web Site A Web Site • Serves one or more HTML Pages Default Page: index.html, index.php Served / Hosted by a Web Server • HTTP Web Server https, apache2, Ngnix - Internet Information Server (Microsoft’s) • Web Application Server Visual Studio Code (Microsoft) , Sublime Text, Atom Technologies • HTML, HTTP, TCP/IP Protocols • Operating Systems: Linux, Windows, MacOS
- 9. CSS - Introduction Cascading Style Sheet • Describes the look and formatting of a page • Used for Changing Presentation and Styling • Can apply to a mark-up language HTML, XHTML, XML, SVG Separates Content from Presentation Properties (Attributes) Styled • Layout, Font (Typography), Color, Background • Box Properties: Border, Margin, Padding • Lists, Tables .
- 10. JavaScript – An Introduction Slide 10 Based on ECMAScript 5.1 (Ver. 6.0 is finalized in mid 2015) Livescript Javascript (due to Java popularity) Scripting Language for Web Browsers • Dynamically Typed • Interpreted by JavaScript Engine Can not Do (for Security Reasons) • Unlimited reading/writing of files from client machine’s file system • Writing to the files on the Server • Can not close a window that was not opened by it • Can not read from a web page served by another web server Microsoft’s version - JScript
- 11. jQuery - Introduction Slide 11 For use in production (live / online) use of website jQuery Core – a Cross-Platform JavaScript Library • Simplifies client-side JavaScript scripting for a web page • It is FREE and Open Source • Used by about 6,000 most visited websites • It uses the familiar HTML DOM model Latest Versions • Version 1.11.3 - has support for IE 6/7/8 • Version 2.1.4 - has NO support for IE 6/7/8 • Development Version For use during development of the website • Minified Version
- 12. jQuery - Introduction Slide 12 Why use jQuery? • JavaScript Framework • Separates HTML and JavaScript in a web page • Eliminates cross-browser incompatibilities • Simple/Short, Clean and Easy to read, write and understand What jQuery can do? • Can Select Elements Has Selectors are similar to CSS Selectors • Can Manipulate the Selected Elements • Can Modify the Style of the Selected Elements • Supports Events, Effects and Animations
- 13. Job trends for Full Stack Web Developer
- 14. Questions