introduction
play

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

Aug 16, 2022 •290 likes •388 views

INLS 572 Web Development Introduction Joan Boone jpboone@email.unc.edu Slide 1 Web Design Authoring and User Experience, Markup (HTML) Interaction, and Interface Design Visually Presentation and Layout (CSS) appealing Visual design

  1. INLS 572 Web Development Introduction Joan Boone jpboone@email.unc.edu Slide 1

  2. Web Design Authoring and User Experience, Markup (HTML) Interaction, and Interface Design Visually Presentation and Layout (CSS) appealing Visual design and (logos, graphics, images, functionally Scripting and fonts, colors, layout) correct programming (JavaScript) Emphasis on web aesthetics Emphasis on function Web Development Slide 2

  3. Web Development: Front to Back client-side server-side full-stack development Front end development Back end development • Web apps (Node, PHP, Python, Java, etc) • Browser-focused • Information design and organization • Graphic design, image production Forms processing • • Interface and information design • Database development • HTML, CSS, and JavaScript Slide 3

  4. Web Basics: Getting resources page.html layout.css image.png video.mp4 ads.jpg MDN: An Overview of HTTP Slide 4

  5. Web Basics: How browsers render pages Some browser statistics: StatCounter Global Stats w3schools Browser Stats hackernoon: How Do Web Browsers Work? Slide 5

  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 6

  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 7

  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 8

  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. dribbble behance Slide 9 Source: medium.com: “Why Do All Websites Look the Same?”

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

TRAINING COURSE ON SOCIAL PROTECTION & FORMALIZATION TRINIDAD AND TOBAGO MARCH 15, 2017 INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION Design of the NIS Assistance from the

547 views • 23 slides
INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

Patterns of variation in the expression of case and agreement Andrs Brny Leiden University Centre for Linguistics 9 November 2019, BaSIS Workshop a.barany@hum.leidenuniv.nl INTRODUCTION Introduction 2/42 INTRODUCTION

1.37k views • 42 slides
Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures Definition and concepts Process and product properties Principles SE Approaches Motivation Software and the economy The economies of

1.03k views • 49 slides
Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1 https://www.cdc.gov/std/stats17/infographic.htm Introduction Epidemiology in Western Colorado CPHE Surveillance Data Report, May 2018 Chlamydia Epidemiology in Western

977 views • 39 slides
DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every meeting (2) Some ideas of diagrams for section 7.1 (Introduction) of TP. Giles Barr 25 Jan 2018, Pembroke College On DUNE, the reality is there is a

474 views • 10 slides
INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

ADVANCED COMPUTER SECURITY INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT IS SECURITY? A systems security policies describe What the system is supposed to do Store and provide access

479 views • 16 slides
Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout World Wide

387 views • 14 slides
14 Introduction Introduction Bad guys can put malware into Example: hosts

14 Introduction Introduction Bad guys can put malware into Example: hosts

Introduction Introduction source Encapsulation ISO/OSI reference model message M application segment H t H t M transport network datagram H n H n H t M presentation: allow applications to frame link H l H n H t M interpret

583 views • 4 slides
Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout

322 views • 8 slides
Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Introduction Zynq Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL Processing System Processor Peripherals Data Buses AXI Bus Conclusion BTE5380 - Embedded Systems Octobre 2014 Andreas Habegger

1.81k views • 30 slides
2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04 Project References S E 5 PART.1 SMILE5 Introduction M I L Introduction STORION-SMILE5 Residential Energy Storage System Inverter 5kW Output Input

1.06k views • 25 slides
Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an application server? Why use an application server? Course introduction Services provided by CICS How CICS applications are defined Scaling CICS to meet

1.84k views • 146 slides
Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic building blocks Node Links (relationship between nodes) Spatial information Network data

584 views • 9 slides
Introduction Introduction (1) Main argument of the paper: universities are not only

Introduction Introduction (1) Main argument of the paper: universities are not only

Le jugement des pairs comme outil de management des universits Peer-review as a management tool Christine Musselin (CSO, Sciences Po et CNRS) Avril 2013, Lirrsistible ascension du capitalisme acadmique Introduction Introduction (1)

590 views • 28 slides
Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Moreno Baricevic Gilberto Daz Axel Kohlmeyer Stefano Cozzini ULA ICTP CNR-IOM DEMOCRITOS Merida, VENEZUELA Trieste, ITALY Trieste, ITALY Introduction Introduction to storage and to storage and filesystems filesystems Introduction

1.19k views • 51 slides
JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of the brand new JA-100 alarm system Visions Basic architecture System components Setting Help us with final validations You are the FIRST ones

1.69k views • 111 slides
Tapping Sources of Mathematical (Big) Data Michael Kohlhase Professur fr Wissensreprsentation

Tapping Sources of Mathematical (Big) Data Michael Kohlhase Professur fr Wissensreprsentation

Tapping Sources of Mathematical (Big) Data Michael Kohlhase Professur fr Wissensreprsentation und -verarbeitung Informatik, FAU Erlangen-Nrnberg http://kwarc.info March 27. 2017, AITP Obergurgl Kohlhase: Tapping Sources of Mathematical

1.02k views • 68 slides
Object Oriented Programming and Design in Java Session 14 Instructor: Bert Huang Announcements

Object Oriented Programming and Design in Java Session 14 Instructor: Bert Huang Announcements

Object Oriented Programming and Design in Java Session 14 Instructor: Bert Huang Announcements Homework 3 out. Due Monday , Apr. 5 th Midterm solutions and grades posted Office hour change Sun Mon Tue Wed Thu Fri John 1-3

385 views • 22 slides
4/14/2016 FINANCIAL DISCLOSURE FINANCIAL DISCLOSURE How Far Should We Go with the Endovascular

4/14/2016 FINANCIAL DISCLOSURE FINANCIAL DISCLOSURE How Far Should We Go with the Endovascular

4/14/2016 FINANCIAL DISCLOSURE FINANCIAL DISCLOSURE How Far Should We Go with the Endovascular Treatment of Advanced PAD in the Era of Health Care Reform? An Endocompetent Vascular Surgeons View I Have No Financial Relationships to

179 views • 14 slides
Web Design Web Design We e k 6 MSDN Ac c o unt MSDN Ac c o unt All the ac c o unts are c re

Web Design Web Design We e k 6 MSDN Ac c o unt MSDN Ac c o unt All the ac c o unts are c re

Web Design Web Design We e k 6 MSDN Ac c o unt MSDN Ac c o unt All the ac c o unts are c re ate d. I f stude nts did no t g e t an e mail the n the y g y alre ady had an ac c o unt. All yo u ne e d to do is to g ive yo ur stude nts

615 views • 22 slides
Run-time Environments Chapter 7 1 Compiler Construction Run-time Environments Run-time

Run-time Environments Chapter 7 1 Compiler Construction Run-time Environments Run-time

Run-time Environments Chapter 7 1 Compiler Construction Run-time Environments Run-time Environment The static source code requires considerable support to be executed on a computer Data objects must be created and destroyed

590 views • 42 slides
Recent Developments in False Claims Act Litigation Introduction Thomas M. Greene Enacted in

Recent Developments in False Claims Act Litigation Introduction Thomas M. Greene Enacted in

Advanced Legal Studies Recent Developments in False Claims Act Litigation Introduction Thomas M. Greene Enacted in 1863 to combat war profiteering -Senator Jacob Merritt Howard: In short, sir, I have based the [qui tam provision]

274 views • 12 slides
I. Defining Prejudice Prejudice is the spoiled fruit that grows from the cognitive vine. It

I. Defining Prejudice Prejudice is the spoiled fruit that grows from the cognitive vine. It

I. Defining Prejudice Prejudice is the spoiled fruit that grows from the cognitive vine. It sprouts from a Prejudice kernel of truth among the weeds of Blaine Ch. 4 distortion. It is fertilized by existential fear and the drive for self

486 views • 3 slides
Multi-Platform SCADA GUI Regression Testing at CERN Paul Burkimsher Manuel Gonzalez-Berges

Multi-Platform SCADA GUI Regression Testing at CERN Paul Burkimsher Manuel Gonzalez-Berges

Multi-Platform SCADA GUI Regression Testing at CERN Paul Burkimsher Manuel Gonzalez-Berges Stefan Klikovits ICE Group, EN Department, CERN, Geneva, Switzerland P.C. Burkimsher Icalepcs 2011, Grenoble a.k.a. Practical Experience With Sexy

579 views • 28 slides

More recommend