Introduction Joan Boone jpboone@email.unc.edu Slide 1 Web Design - - PowerPoint PPT Presentation

Slide 1

Introduction

Joan Boone

jpboone@email.unc.edu

INLS 572

Web Development

Slide 2

Web Design Web Development

User Experience, Interaction, and Interface Design Visual design

(logos, graphics, images, fonts, colors, layout)

Emphasis on web aesthetics Visually appealing and functionally correct Authoring and Markup (HTML) Presentation and Layout (CSS) Scripting and programming (JavaScript) Emphasis on function

Slide 3

Web Development: Front to Back

• Browser-focused
• Graphic design, image production
• Interface and information design
• HTML, CSS, and JavaScript

Front end development Back end development

• Web apps (Node, PHP, Python, Java, etc)
• Information design and organization
• Forms processing
• Database development

client-side server-side full-stack development

Slide 4

Web Basics: Getting resources

MDN: An Overview of HTTP

page.html layout.css image.png video.mp4 ads.jpg

Slide 5

Web Basics: How browsers render pages

hackernoon: How Do Web Browsers Work? Some browser statistics: StatCounter Global Stats w3schools Browser Stats

Slide 6

Brief History of the Web and Standards

1989: Tim Berners-Lee invented the World Wide Web

• He wrote the first server, browser, and developed the

specifications for HTML, HTTP, and URIs

1994: Tim Berners-Lee founded the World Wide Web Consortium (W3C)

• Vision: standardize web protocols and technologies so

content is as available as possible

1997: W3C publishes first recommendation for HTML (3.2) Today: W3C standards define an Open Web Platform

• Technologies include HTML5, CSS, SVG, WOFF, XML,

JSON, APIs

Slide 7

“Teaching HTML the old-fashioned way – by hand”

• No better way to really understand how markup works.
• When you view the source files for a website, you need to

understand what you are looking at. This is crucial for

• Making updates, enhancements, fine-tuning presentation

and layout

• Troubleshooting: you can't fix what you don't understand
• Professional web developers tend to mark up content

manually because it gives them better control over the code

• You may choose to use a web-authoring tool later, but

understanding HTML will make using the tools easier and more efficient.

Source: Learning Web Design by Jennifer Niederst Robbins

Slide 8

Web Developer Perspective: Why not use Templates/Frameworks?

Hypothesis: Less code = less work

• When you use a framework, you have the following costs:
• Learning it
• Customizing it to fit your needs
• Maintaining it over time (upgrades)
• Diving deep when there are bugs (you have to crack it open eventually)
• Working from scratch has the opposite costs:
• Building it (instead of learning and customizing)
• Refactoring (instead of customizing)
• Solving bugs the first time (in code you developed yourself)

Source: Smashing Magazine: “Why We Didn't Use A Framework” (Case Study)

Frameworks and tools will come and go, but the fundamental technologies will remain. If you master the basics, then you can adopt the appropriate tools as needed.

Slide 9

Web Designer Perspective: Why not use Templates/Frameworks?

• Today’s internet is bland. Everything looks the same: generic fonts, no layouts, and

interchangeable pages. Every page consists of containers in containers in containers; sometimes text, sometimes images.

• Ironically, today’s web technologies have enormous design capabilities. We have the

capability to implement almost every conceivable idea and layout.

• How did this happen? A few reasons...Content Management Systems (CMS) and blogging

platforms like WordPress are based on templates. Web pages using these frameworks are generated by piecing together various media types like images, headlines, body text, and videos. Templates are not designs. Rather, they are rules for combining related data

• types. Beyond the template, these platforms typically offer users no way to influence a

page’s visual appearance. What you see is what you poured into the template. Source: medium.com: “Why Do All Websites Look the Same?”

dribbble behance