CS24 FRESHMAN SEMINAR FOR CS SCHOLARS WEEK 2 - WEB TECHNOLOGIES U - - PowerPoint PPT Presentation

▶

Sep 20, 2023 252 likes •366 views

Spring 2015 - Berkeley, CA CS24 FRESHMAN SEMINAR FOR CS SCHOLARS WEEK 2 - WEB TECHNOLOGIES U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 2 6 J A N U A R Y 2 015 SEPARATION OF CONCERNS - THE MODEL-VIEW-CONTROLLER ONE OF

SLIDE 1

CS24

Spring 2015 - Berkeley, CA

FRESHMAN SEMINAR FOR CS SCHOLARS

WEEK 2 - WEB TECHNOLOGIES

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 2 6 J A N U A R Y 2 015

SLIDE 2

SEPARATION OF CONCERNS - THE MODEL-VIEW-CONTROLLER

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 3 F E B R U A R Y 2 015

ONE OF THE MOST SUCCESSFUL SOFTWARE ARCHITECTURES

HTML/CSS/JS RAILS/EMBER/NODE INTERNET PROTOCOL STACK

DRAWBACKS

EASY TO HAVE TOO MANY CONCERNS BECOMES TOO ABSTRACTED SOMETHING SIMPLE REQUIRES X DIFFERENT FILES/MODULES

WINS

SOC IMPLICITLY CREATES DISCIPLINES ALLOWING USERS TO DEVELOP SPECIALIZED SKILLS USING A SUBSET OF CONCERNS ENABLES A SCAFFOLD FOR SPECIALIZED USERS TO ADOPT COMPLEMENTARY SKILLS GRADUALLY.

SLIDE 3

Web Technologies

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 3 F E B R U A R Y 2 015

System-Centered Design Human-Centered Design Design Research

SLIDE 4

Growing pain - Internet of Things - Diversity of Form Factors

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 3 F E B R U A R Y 2 015

SLIDE 5

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 3 F E B R U A R Y 2 015

MARKUP LANGUAGES

<HTML>

HYPERTEXT MARKUP LANGUAGE

MARKDOWN XML

EXTENSIBLE MARKUP LANGUAGE

<MSG> <GREETING> HELLO WORLD! </GREETING> <FACE EXPRESSION = “ANGRY”/> </MSG> <DIV ID=“MSG”> <H1> HELLO WORLD! </H1> <SPAN CLASS=“RED”></ SPAN> </DIV>

LATEX

\SECTION \TEXTIT{HELLO WORLD} MESSAGE —————

* HELLO WORLD * HOLA MUNDO * KON'NICHIWA SEKAI

SLIDE 6

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 3 F E B R U A R Y 2 015

STYLING

HYPERTEXT MARKUP LANGUAGE

.MYSTYLE{ COLOR: RED; }

SASS

COMPILED CSS

$PRIMARY-COLOR: #333; .MYSTYLE{ COLOR: $PRIMARY-COLOR; }

SLIDE 7

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 3 F E B R U A R Y 2 015

INTERACTIVITY

JAVASCRIPT

document.getElementById(“demo").innerHTML = "Hello JavaScript";

JQUERY

$(“#demo”).html(“Hello JQuery”);

THREEJS

WEB GRAPHICS

D3JS

DATA-DRIVEN DOCUMENTS

NODEJS

JS AS A GENERAL PURPOSE PROGRAMMING LANGUAGE

SLIDE 8

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 3 F E B R U A R Y 2 015

IN-CLASS FIRST APP

SLIDE 9

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 2 0 J A N U A R Y 2 015

TODOS

COOKBOOK #2 QA #2 REMOVED ANSWER QUESTION ASSIGNMENT POST SOLUTIONS THOUGH ON A SEPARATE DOC

SLIDE 10

Week 4

QUESTIONS ?

RELATIONAL DATABASES

RECIPES (WK3) AND QUESTIONS (WK3) DUE

U N I V E R S I T Y O F C A L I F O R N I A - B E R K E L E Y 2 0 J A N U A R Y 2 015