Dezvoltarea aplicaţiilor Web
la nivel de client

prezentările aferente cursului

Resursele disponibile complementează şi nu substituie prezenţa la cursuri şi laboratoare. Filmul desfăşurării materiei este prezentat mai jos.

Săptămâna 1

Preambul

CLIW, discipline, assessment, student
eveniment: <Programming> 2019

Curs: Interacţiune Web. De la concepte & utilizabilitate la design Web

HCI, UI, UX, design, usability, IA, responsive Web design, examples
Demo: Asian Language Learning Web Tool (surse), UpdateR (surse), aiSquared, Draw-by-Sound
Studii de caz: Thinking Design (Adobe), Product Development Process (Apple), Design Experiments (DigitalLabs), Facebook Design, Prototypes & Experiments (Prototypr)
Resurse: Dezvoltator Web (...în 2017), Design Principles, The Shape of Design, A Comprehensive Guide To UI Design, Web Design Repository, UXPin Resources, The Elements of Typographic Style Applied to the Web, I Love Typography, Any Colour You Like, Practical Color Theory for People Who Code, UI Design Patterns, Responsive Web Design, Responsive Patterns, Responsive Images, Responsive Navigation Patterns, Responsive Data Tables, Responsive E-mails, Alte resurse utile, Search Patterns, Web Design Museum
Instrumente: Web Design, Adele, The Grid System, Awesome UI, UX Recipe, SketchSheets, UX Tools
Laborator: Recapitulare HTML5 + Reamintire CSS
- detalii: HTML Reference (MDN)
- instrumente: Command Line Interactions, Cu codul în "nori"; editoare: Sublime Text (vezi şi Package Control), Visual Studio Code + extensii (de interes: VS Code can do that?!); W3C Validator

Săptămâna 2

oportunitate: Hacktoberfest 2018

Curs: Arhitectura navigatorului Web

Web browser, software architecture, rendering engine, examples
Resurse: User-Agent String, Inside Look at Modern Web Browser, How Browsers Work, The Web Platform: Browser Technologies, Quirks Blog, Diverting Modern Web Browsers to Build Unique Browser Fingerprints, Fp-Scanner: The Privacy Implications of Browser Fingerprint Inconsistencies, Mobile Dev Weekly
Instrumente: Browsh, Chromium, Edge, Firefox, Opera, Safari, Samsung Internet, Browser Shots, Browserscope, Headless Web Browsers, Am I Unique?, Panopticlick
Laborator: Foi de stiluri CSS + discuţii privind proiectele propuse

Săptămâna 3

concurs: SEO @ CLIW

Curs: (Re)găsirea resurselor Web. De la motoare de căutare şi SEO la date structurate

Web search, search engine, query, SEO, HTML5 microdata, schema.org
Demo: robots.txt (MDN), robots.txt (Wikipedia), sitemap.xml (Moz), Semantic Code Search (GitHub Experiments), SearchCode
Resurse: Căutarea resurselor Web, Web Robots Pages, Bots vs. Browsers, Bad Bots, Learn SEO, SEOskeptic, Guide to <head> Elements, Search Engine Land, Search Engine Watch, Search Engine Roundtable, Bing Webmaster Help, Google Search, Web Search (VideoLectures), Sitemaps, Getting Started with Schema.org Using Microdata, From Strings to Things, Web Data Commons, Search APIs
Instrumente: Can I Crawl?, There Is a Bot for That, Botpress, JS Search, Typeahead, Fuse.js, Lunr, Elasticlunr, search-index, YDN-DB, Link Checker, Structured Data Testing Tool (Google), Structured Data Sniffer (OpenLink), Awesome Web Crawler
Laborator: Foi de stiluri CSS (continuare)

Săptămâna 4

provocare: Stanford Design Challenge

Curs: Vizualizarea datelor. Privire de ansamblu

data visualization, model, design, process, graphic representation, tools, examples
Demo: Million Lines of Code, Visualizing the Spread of True and False News on Social Media, The Internet Map, History of Rock Music, Definitive Daft Punk Visualised, Selfiexploratory, The Next Rembrandt, Most Disliked Programming Languages, The Why Axis Collections, Visualization & Visual Communication, mbostock’s blocks, Interactive Things, Exploring Data, Security Visualization, Algorithm Visualizer, Explain Visually, Junk Charts, List of Physical Visualizations
Resurse: The Beauty of Data Visualization, Data + Design, Visualising Data, Visualization Analysis & Design, The Data Visualization Catalogue, Information is Beautiful (+awards), Flowing Data, Generative Art, Awesome Visualization Research
Date: Academic Torrents, Awesome Public Datasets, Awesome JSON Datasets, Common Crawl, DataHub, GitHub Archive, Google BigQuery Public Datasets, Kaggle Datasets, Microsoft Azure: Public Datasets, Registry of Open Data on AWS, Google Dataset Search
Instrumente: Google Data Studio, RAW Graphs, Data Visualization Tools, JavaScript Libraries for Data Visualization, G2: The Grammar of Graphics in JavaScript, Awesome DataViz
Laborator: Specificarea datelor structurate via scheme de microdate HTML5

Săptămâna 5

amuzament: Coding Games

Curs: Limbajul de programare JavaScript. Aspecte esenţiale

ECMAScript, JS, programming, scripting, object, function, prototype, closure, JSON
Demo: Programe JavaScript (arhivă .zip, 6K)
Resurse: JavaScript Reference (MDN), JS Object Playground, Mostly Adequate Guide to Functional Programming, Functional Programming in JavaScript, Speaking JavaScript, Eloquent JavaScript, Frequently Misunderstood JavaScript Concepts, JavaScript Garden
Instrumente: JavaScript Instant Documentation, JavaScript Regular Expressions, JS Bin, JSONauts
Laborator: Evaluarea componentei P a proiectului

Săptămâna 6

eveniment: FOSDEM 2019

Curs: Limbajul de programare JavaScript. Aspecte moderne: ES6, ES7, ES8, ES9

ECMAScript, JS, programming, class, iterator, generator, promise, module, async
Demo: Programe JavaScript – versiunile moderne (arhivă .zip, 9K), ECMAScript 6: New Features, Complex Numbers in JavaScript
Resurse: Exploring ES6 (ES2015), Let's Learn ES6 , ES6 in Depth, Awesome Promises, ES6 Katas, Exploring ES2016 and ES2017, Await and Async Explained with Diagrams, Exploring ES2018 and ES2019
Instrumente: Babel, ES6 Tools, ECMAScript Compatibility Table
Laborator: Programare în limbajul JavaScript – a se considera şi A list of funny & tricky JavaScript examples

Săptămâna 7

oportunitate: BringITon 2018

Curs: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri

ECMAScript, JS, engine, programming, browser, DOM, event, Ajax, mash-up
Demo: JavaScript în browser (arhivă .zip, 17K), Generarea unui formular Web, Parcurgerea arborelui DOM, RandomAjax, RandomAjax (Fetch), JS Samples (Chrome), Fetch Examples (MDN), Reverse Engineering One Line of JavaScript, JS Code Golfing
Resurse: JavaScript Engine Fundamentals, How JavaScript Works, JS Garbage Collection, DOM (MDN), An Introduction to DOM Events, DOM Enlightenment, The JavaScript Way, Ajax (MDN), Reverse Ajax: Comet (IBM), DOM Access Control Using CORS (Opera), JavaScript Weekly, JavaScript Web APIs
Instrumente: JSFiddle, You Don't Need jQuery, Ajax Push Engine, Web Mash-ups
Laborator: Programare în limbajul JavaScript – a se studia şi The Modern JavaScript Tutorial şi 30 Seconds of Code

Săptămâna 8

amuzament: Screeps

Lucru la proiect

Săptămâna 9

provocare: Mozilla Client Security Bug Bounty

Curs: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri (continuare)

ECMAScript, JS, engine, programming, browser, DOM, event, Ajax, mash-up
Curs: Ingineria dezvoltării aplicaţiilor JavaScript

ECMAScript, JS, wasm, Web programming, software engineering, design patterns, SPA, tools
Demo: Basic JavaScript MVC Implementation, The MVC Design Pattern in Vanilla JavaScript, JS1k Demos (2018), JS1k Demos (2017)
Resurse: Principles of Writing Consistent, Idiomatic JavaScript, Test-Driven JavaScript, Learning JavaScript Design Patterns, Learn RxJS, WebAssembly, Single Page Apps in Depth, Frontend Focus
Instrumente: JavaScripting, MicroJS, Awesome JavaScript, Awesome JavaScript Tools, Awesome WebAssembly, The State of JavaScript (2018), An Annotated webpack 4 Config for Frontend Web Development, Emulators written in JavaScript, JS++, PLV8
Laborator: Programare în limbajul JavaScript – a se consulta şi Concepts Every JavaScript Developer Should Know

Săptămâna 10

provocare: Advent of Code 2018

Curs: Programare Web. Suita de tehnologii HTML5

HTML5, SVG, audio, video, canvas, JS, Web programming, WebGL, WebXR
Demo: Corola de minuni în <canvas>, Optical Illusion, Julia Fractal Animation, 13 Games in ≤13kB of JavaScript (js13kGames 2018), Matrix Theme JavaScript Webcam Face Filter, Playing Mortal Kombat with TensorFlow.js, Experimenting with Brain-Computer Interfaces in JavaScript
Resurse: HTML5 în XXX de minute, Dive into HTML5, Awesome SVG, HTML5 Canvas Tutorials, HTML5 Canvas Notes for Professionals, WebGL Fundamentals, WebGL2 Fundamentals, Fun with WebGL, WebGL Insights, Awesome WebGL, WebVR
Instrumente: Awesome HTML5 <canvas> Tools, Awesome WebVR, HTML5 Test
Laborator: Evaluarea componentei A a proiectului

Săptămâna 11

concurs: MobilPRO 2019

Curs: Programare Web. API-uri JavaScript în contextul HTML5 (I)

HTML5, JS, Web programming, Web API, WebSocket, WebWorker, storage
Demo: HTML5 Demos & Examples, Web API Code Examples (MDN), Mistletoe Offline, Simple IndexedDB Example, Using Files from Web Applications
Resurse: The Web platform: Browser technologies, WebSocket, Service Workers: An Introduction (Google), Service Worker Gotchas, Service Worker Resources, Service Worker Cookbook, HTML5 Tutorials, Awesome HTML5
Instrumente: Awesome WebSocket, Awesome Web Storage
Laborator: Programare Web în JavaScript – instrumente Web utile vizând accesul la documentaţii: DOM @ DevDocs şi Search the MDN Web Docs

Săptămâna 12

amuzament: Christmas Experiments

Curs: Programare Web. API-uri JavaScript în contextul HTML5 (II)

HTML5, Web programming, Web API, animation, WebRTC, stream, sensor, payment, Web component
Demo: Moş Crăciun animat, Web Animations, HTML5 API Demo Repository, Touch/Pointer Tests & Demos, Coremob Camera, Using the MediaStream Recording API (MDN), Using Geolocation (MDN), WebRTC Samples, Web Audio/MIDI Demos, turtle.audio, Web Components Examples (MDN), Reactive Brain Waves, Paper Programs
Resurse: Copying & Pasting in JavaScript, requestAnimationFrame, Using the Web Animations API (MDN), Capturing Audio & Video in HTML5, Awesome WebRTC, Web Audio API, Experimenting with Speech Synthesis, Streams API Concepts (MDN), Web Push Notifications (Google), Sensors for the Web (Google), Web Bluetooth, Physical Web (Google), Exploring the Physical Web, Going full throttle with the Gamepad API, Web Payments Overview, Developer Information for Payment Request API, How to Keep Up to Date on Front-End Technologies, Mobile Dev Weekly
Instrumente: What Web Can Do Today, HTML5 Gamepad Tester, Apple Pay JS, WebTorrent, Web Components
Laborator: Programare Web în JavaScript – de explorat şi HTML5 JavaScript API Index

Săptămâna 13

concurs: ZEISS Photography Award

Curs: Performanţa aplicaţiilor Web la nivel de client

Web, performance, browser, optimization, WPO, metrics, CDN, software engineering, HTML5, JS, tools
Demo: A Netflix Web Performance Case Study, WPO Stats, Perf.fail, Speed Up Next-Page Navigations with Prefetching
Resurse: Why Performance Matters (Google), Designing for Performance, The Illusion of Speed, Performance and Tuning (W3C), Best Practices for Speeding Up Web Sites (Yahoo!), Web Performance Matters, Building Fast & Resilient Web Applications, The Cost of JavaScript (+video presentation), Robust Client-Side JavaScript, Essential Image Optimization, Loading Speed (HTTP Archive), Planet Performance, High-Performance Browser Networking, CDN Planet, Tune Your Performance, Can You Afford It?: Real-world Web Performance Budgets, Front-End Performance Checklist 2019
Instrumente: WebPagetest, PageSpeed Tools (Google), Website Speed Test, webhint, CDNJS, jsDelivr, REDbot, Accelerated Mobile Pages (Google), Progressive Web Apps (Google), Apple News Format (Apple), The Front-End Checklist
Laborator: Programare Web în JavaScript – de studiat JavaScript Notes for Professionals

Săptămâna 14

competiţie: Prix Ars Electronica

Retrospectivă & perspective
Laborator: Programare Web în JavaScript + lucru la proiect

Remarci

Pentru vizualizarea prezentărilor se poate folosi un program capabil să proceseze documentele PDF.
Conţinutul acestei pagini poate fi oricând alterat, fără o notificare prealabilă, trebuind considerat drept work in progress.