Workshop[1st apr]-[introduction]

PREPARED AND PRESENTED BY
Dr.Saajid Abuluaih, PhD
1st of April, 2021
J I S T & A R C H E P R E S E N T S
Web−Based Second−Life
School Management System
Workshop
Team: "Fantastic−Team”, Project: "GatherRound”
[ I n t r o d u c t i o n T o T h e W o r k s h o p ]

© 2021 arche1.co.jp | jaist.ac.jp
All rights reserved.
P A G E 2
APP

P A G E 3
UPSKILL YOURSELF
FIND GOOD ONLINE RESOURCES

© 2021 Arche1.co.jp All rights reserved. P A G E 4
Useful Extensions (install them all):
1. YouTube
2. Udacity
3. Grow with Google
4. khanacademy
5. Coursera
6. Udemy
BRUSH UP
YOUR SKILLS
B e A l w a y s u p d a t e d

P A G E 5
CONNECTIVITY
ESSENTIAL TOOLS TO STAY CONNECTED

Discord is a VoIP, instant messaging and digital distribution
platform designed for creating communities. Users communicate
with voice calls, video calls, text messaging, media and files in
private chats or as part of communities called "servers". Servers
are a collection of persistent chat rooms and voice chat channels.
Discord runs on Windows, macOS, Android, iOS, iPadOS, Linux,
and in web browsers. As of July 21, 2019, there are over 250
million users of the software. [source]
Join the following servers on Discord:
1. Computer Graphics, Physics, and Mathematics for Game
Developers and Computer Scientists
2. GartherRound Workshop
DISCORD
L e t u s s t a y c o n n e c t e d

YouTube is an American online video-sharing platform
headquartered in San Bruno, California. The service, created in
February 2005 by three former PayPal employees—Chad Hurley,
Steve Chen, and Jawed Karim—was bought by Google in
November 2006 for US$1.65 billion and now operates as one of
the company's subsidiaries [Source]
We will create some video contents and upload them to
YouTube. Subscribe to the following channel:
1. Web Innovators
YouTube

SlideShare is an American hosting service, now owned by Scribd,
for professional content including presentations, infographics,
documents, and videos. Users can upload files privately or publicly
in PowerPoint, Word, PDF, or OpenDocument format. [Source]
The presented PowerPoint slides will be uploaded and enabled for
public, you can refer to them anytime you want. Follow me on
SlideShare:
https://www.slideshare.net/saajidakram
SLIDESHARE

Medium is an American online publishing platform developed by
Evan Williams and launched in August 2012. It is owned by A
Medium Corporation. The platform is an example of social
journalism, having a hybrid collection of amateur and professional
people and publications, or exclusive blogs or publishers on
Medium,[3] and is regularly regarded as a blog host. [Source]
I’ll write an article from time to time to discuss issues we may
come across. Follow me ONLY if you are interested:
https://medium.com/@Saajid.Akram
MEDIUM.COM

• Use Bookmarks to organize webpage that you consistently visit.
• Get your self OneNote, Google Keep (you may consider other
options like: Evernote, Notion, Notability)
• Use your calendar ALWAYS (there is an option to display your
google calendar and google keep within your google gmail)
ORGANIZE
YOUR SH!T

P A G E 11
TEAMWORK ETHICS
AVOID MISTAKES, MISUNDERSTANDING,
AND MISCOMMUNICATION

1. Embrace Teamwork
A key quality of the workplace is working well with
open communication between all levels of an organization,
everyone from peers to supervisors to customers. A team
work and actions provides value and talent to a team, client,
organization.
2. Accountability
Taking responsibility for your actions is a major factor when
workplace ethics. Team members must show up on
workdays, and put in honest effort while on the clock. A
member’s work and actions provides value and talent to the
clients, and organization.
Workplace Ethics & Behavior
B e c a r f u l o f w h a t y o u d o , i t a l w a y s i n f l u e n c e s y o u r e m p l o y e r
[Source]
3. Do what is just, right & fair
Think before you act. Investigate and evaluate all situations
before determining how to proceed. Act appropriately based on
facts and free from biases, not personal feelings. Demonstrating
exceptional honesty and integrity creates a positive work
environment.
4. Dedication
Complacency and mediocrity should have no place in your
organization. Team members must exemplify a strong work
ethic and positive attitude toward all projects. If you work to
create a company culture where everyone understands the
purpose of what you are doing, the more engaged everyone will
be.
Ethics is: the moral principles that govern a person’s behavior or the conducting of an
activity

P A G E 13
MIND MAPPING
LET'S GET ON THE SAME PAGE

MIND MAPPING
1. Milanote: Milanote is an easy-to-use
tool to organize your ideas and
projects into visual boards. [Use the
following LINK]
2. Clickup: An all-in-one suite to
manage people, projects, and
everything in between. [Invitations
have been sent]
PROTOTYPING
Adobe XD
Adobe XD is a vector-based user experience design
tool for web apps and mobile apps, developed and
published by Adobe Inc. It is available for macOS and
Windows, although there are versions for iOS and
Android to help preview the result of work directly on
mobile devices. [Source]

1) Navigation
1) Zoom-in/Zoom-out
2) Pan
2) Basic Tools: Creating Artboards, Guide Liens and Guide Grid, Lines & Shapes, Texts, Borders, Fills & Shadows, The Pen tool
3) Advanced Tools: Importing & Masking Images, Combining Shapes, Aligning & Positioning Objects, and The Repeat Grid Tool
4) Prototyping: Linking Screens & Transitions, Exporting Assets
WORKING WITH ADOBE XD PROTOTYPE
Y O U R A P P L I C A T I O N , A N D G E T I T A P P R O V E D B Y Y O U R C U S T O M E R

P A G E 16
SLOW DOWN,
CATCH YOUR
BREATH
You have crossed a milestone,
give yourself a round of applause

P A G E 17
DEV TOOLS
Essential Tools Every Developer Needs

Visual Studio Code is a lightweight but powerful source code editor
which runs on your desktop and is available for Windows, macOS
and Linux. It comes with built-in support for JavaScript, TypeScript
and Node.js and has a rich ecosystem of extensions for other
languages (such as C++, C#, Java, Python, PHP, Go) and
runtimes (such as .NET and Unity). [Source]
Useful Extensions (install them all):
1. Live Share
2. Bracket Pair Colorizer
3. glTF Tools
VISUAL STUDIO
CODE IN ACTION
D E V E L O P M E N T T O O L S & U T I L I T I E S

Git is software for tracking changes in any set of files, usually used
for coordinating work among programmers collaboratively
developing source code during software development. Its goals
include speed, data integrity, and support for distributed, non-linear
workflows. [Source]
GIT

Azure DevOps Server is a Microsoft product that provides version
control, reporting, requirements management, project management,
automated builds, testing and release management capabilities. It
covers the entire application lifecycle, and enables DevOps capabilities.
[Source]
VISUAL STUDIO
AZURE DEVOPS

P A G E 21
SLOW DOWN,
CATCH YOUR
BREATH
You have crossed a milestone,
give yourself a round of applause

P A G E 22
DEV TECHS
TECHNOLOGIES , FRAMEWORKS,
AND LANGUAGES
THAT WE WILL BE USING FOR ACHIEVING
THE WORKSHOP OBJECTIVES

1. C#: is a general-purpose, multi-paradigm programming language encompassing static typing, strong typing,
lexically scoped, imperative, declarative, functional, generic, object-oriented, and component-oriented
programming disciplines. [source]
2. JavaScript & TypeScript: A scripting or script language is a programming language for a special run-time
environment that automates the execution of tasks; the tasks could alternatively be executed one-by-one by a
human operator. Scripting languages are often interpreted, rather than compiled. [source]
3. CSS, Sass, Markdown , XML and HTML: In computer text processing, a markup language is a system for
annotating a document in a way that is syntactically distinguishable from the text, meaning when the document
is processed for display, the markup language is not shown, and is only used to format the text. [source]
Programming and Markup
languages
A D O P T E D F R A M E W O R K S F O R S Y S T E M D E V E L O P M E N T

1. Node.js: Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on
the V8 engine and executes JavaScript code outside a web browser. [source]
2. TypeScript: TypeScript is a programming language developed and maintained by Microsoft. It is a strict
syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for
the development of large applications and transcompiles to JavaScript. [source]
3. Three.js: is a cross-browser JavaScript library and application programming interface used to create and
display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a
repository on GitHub. [source]
4. D3.js: is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes
use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards. It is the successor to the
earlier Protovis framework. [source]
JavaScript Libs & Frameworks
A D O P T E D F R A M E W O R K S F O R S Y S T E M D E V E L O P M E N T

1. .NET Core: .NET is a free and open-source, managed computer software framework for Windows, Linux, and macOS operating
systems. It is a cross-platform successor to .NET Framework. The project is primarily developed by Microsoft employees by way
of the .NET Foundation, and released under the MIT License. [source]
2. BLAZOR: Blazor is a free and open-source web framework that enables developers to create web applications using C# and
HTML. It is being developed by Microsoft. A Blazor app can interop with JavaScript, e.g. call JavaScript functions from .NET
methods. [source]
3. EF: is an open source object–relational mapping framework for ADO.NET. It was originally shipped as an integral part of .NET
Framework. Starting with Entity Framework version 6, it has been delivered separately from the .NET Framework. [source]
4. MS SQL : Microsoft SQL Server is a relational database management system developed by Microsoft. As a database server, it is
a software product with the primary function of storing and retrieving data as requested by other software applications—which
may run either on the same computer or on another computer across a network. [source]
What Does Web-based
Second-life Needs
A d o p t e d F r a m e w o r k s F o r S y s t e m D e v e l o p m e n t

P A G E 26
DEV TECHS
TECHNOLOGIES , FRAMEWORKS,
AND LANGUAGES
THAT WE WILL BE USING FOR ACHIEVING
THE WORKSHOP OBJECTIVES

1) Frontend developers:
1) Name 1: ……….
2) Name 2: ………..
2) Backend developers:
1) Name 1: ……….
2) Name 2: ………..
3) Graphic design team:
1) Name 1: ……….
2) Name 2: ………..
4) Software engineers :
1) Name 1: ……….
2) Name 2: ………..
KNOW YOUR POWER,
GET INVOLVED
T E A M R E A R R A N G E M E N T

W H AT ’ S N E X T
SOFTWARE
ARCHITECTURE
The architecture of a system describes its major components, their relationships (structures), and how they interact
with each other. Software architecture and design includes several contributory factors such as Business strategy,
quality attributes, human dynamics, design, and IT environment. [source]

CONGRATS,
YOU ARE ALL SET
L E T ’ S G E T S T A R T E D
Let’s all have fun developing this application

P A G E 30
T H A N K S F O R Y O U R
AT T E N T O N

Workshop[1st apr]-[introduction]

Recommended

Recommended

More Related Content

Similar to Workshop[1st apr]-[introduction]

Similar to Workshop[1st apr]-[introduction] (20)

More from Saajid Akram

More from Saajid Akram (8)

Recently uploaded

Recently uploaded (20)

Workshop[1st apr]-[introduction]