AI-Powered Business

Who are we?

Studio 5 is an initiative by the Ministry of Communications and Information Technology. We cater to youth aged 7-24 in Qatar to facilitate the Digital Revolution within the Qatari society and community in providing the youth with knowledge and skills in digital fabrication and emerging technology. The dedicated space aims to trigger a mindset shift in the youth in Qatar from consumers to creators and innovators.

ستوديو 5 مبادرة من وزارة الاتصالات وتكنولوجيا المعلومات. نحن نلبي احتياجات الشباب الذين تتراوح أعمارهم بين 7 و24 عامًا في قطر لتسهيل الثورة الرقمية داخل المجتمع والمجتمع القطري في تزويد الشباب بالمعرفة والمهارات في مجال التصنيع الرقمي والتكنولوجيا الناشئة. تهدف المساحة المخصصة إلى إحداث تحول عقلي لدى الشباب في قطر من مستهلكين إلى مبدعين ومبتكرين.

​

مـن نـحــــــــــــــن؟

Our Team

TASNEEM HUSSAIN

Project Manager

ILARIA LA MANNA

Senior Education Specialist

ZAID ABUSINI

Senior EduTech Engineer

MOHAMMED MOHAMMED

EduTech Engineer

LEYLA TAWIFIK

Senor BioEduTech Interaction Designer

SOUMIA DEDECHE

Assistant BioEduTech

​

FAHEEM KHAN

EduTech Designer

AYAH ELNOUR

Assistant EduTech

​

JAWAD FADLALLAH

EduTech Engineer

​

MAHMOUD AL RAWABDEH

Technician Engineer

​

Fabrication Laboratory

مختـبـــــــر التصنـيـــــــــع

is a place to play, to to create, to learn, to mentor, to invent: �a place for learning and innovation.

هو مكان للعب ،لخلق ،للتعلم ،التوجيه ،للاختراع: �مكان للتعلم والابتكار

What is a

ما هو

طباعة ثلاثية الابعاد

القص بالليزر

التحكم العددي بالكمبيوتر

AND MUCH MORE…

3D PRINTING

LASER CUTTING

CNC

(Computer numerical control)

وأكثر من ذلك بكثير...

منطقة الابداع

منطقة البرمجيات

منطقة التكنولوجيا

منطقة التحقيق

Creativity Zone

Software Zone

Technology Zone

Investigation Zone

Sophia AI Robot

Tesla Optimus AI Robot

Discussion about AI a tool or replacement

Brainstorming session with participants 10 minutes

Sologo.ai

Brand Logo

Brand Logo

Brand Logo

Brand Logo

Design.com

Instagram posts

Instagram posts

Instagram posts

Instagram posts

Instagram posts

Instagram posts

Instagram posts

Business Card

AI-Powered Business Day 2

From Text to Website

Using AI

What is Web Development

• Web development is creating functional, user-friendly websites and web applications.
• Web Developers write code, develop, test new websites and maintain/update old websites.

​

• Front-end developers focus on the user-facing side of their work
• Back-end developers make websites functional and secure.

What is Web Development

Any Other Way?

Web Development - Done Easy

• No Code Platforms are specifically designed for non-programmer to develop simple to a bit complex websites.

​

Pros:

• Easy to use
• Can achieve 80% of the desired functionality
• User friendly

Cons:

• Useless in complex websites and web-apps
• Limited features and functionality

Web Development - Done Easy

Lots of “No Code” platforms exists

Here are some brief examples:

​

​

Jimdo: https://www.jimdo.com/

​

Framer: https://www.framer.com/

​

CodeWP: https://codewp.ai/

Best For

Features

Pricing

Web Development - Done Easy

Pros and Cons:

​

Jimdo VS Framer VS CodeWP

Jimdo pros:

• A real site builder with all the features you could need
• Great free plan and affordable paid plans

Jimdo cons:

• AI is limited to initial site creation

​

CodeWP pros:

• Enables technical-minded people to create complex WordPress code
• Allows you to build by far the most custom sites of any tool on this list

CodeWP cons:

• It's still an advanced tool; unless you understand how WordPress works, you won't be able to get much use out of it

​

Framer pros:

• It's a super impressive and fun AI
• The rest of the app is great, so you can build a real site

Framer cons:

• Still needs a lot of work to go from AI draft to great site

​

Web Development - Example

https://www.squarespace.com

SquareSpace

Squarespace is a website building and hosting company/service that provides software as a service for website building and hosting, and allows users to use pre-built website templates and drag-and-drop elements to create and modify webpages.

SquareSpace

هي شركة/خدمة لبناء واستضافة مواقع الويب توفر البرمجيات كخدمة لبناء مواقع الويب واستضافتها، وتسمح للمستخدمين باستخدام قوالب مواقع الويب المعدة مسبقًا وعناصر السحب والإفلات لإنشاء صفحات الويب وتعديلها.

Relume - Figma - Siter

https://www.relume.io

https://www.figma.com

https://www.siter.io

​

​

​

No Code!

Relume - Figma - Siter

Text to Design using AI

Design Editing/Export

Website Publish

https://www.relume.io

https://www.figma.com

https://www.siter.io

Relume - Sign Up/In

Sign IN

Write any Text and Generate a Free Site

Sign IN

Sign UP

Figma - Sign Up/In

Sign IN

Sign IN

Sign UP

Siter - Sign Up/In

Sign IN

Sign IN

Sign UP

Relume - Step By Step

Launch the website builder

What is Relume?

Relume uses AI to Effortlessly generate Sitemaps and Wireframes for websites in minutes!

Relume - Step By Step

Create a New Project

إنشاء موقع ويب جديد

Access any of your old projects

الوصول إلى أي من مشاريعك القديمة

Access any Tutorial

الوصول إلى أي برنامج تعليمي

Import project saved locally

استيراد المشروع المحفوظ محليًا

Inside the Site Builder, you can Create a new Website or access any of your old projects

داخل Site Builder، يمكنك إنشاء موقع ويب جديد أو الوصول إلى أي من مشاريعك القديمة

Relume - Step By Step

Step 1: Write your Website Description

الخطوة 1: اكتب وصفًا لموقع الويب الخاص بك

Step 2: Click Generate Sitemap

الخطوة 2: انقر فوق إنشاء خريطة الموقع

Switch between Sitemap and Wireframe

التبديل بين خريطة الموقع والإطار السلكي

The Primary Sitemap is where the magic takes place

خريطة الموقع الأساسية هي المكان الذي يحدث فيه السحر

Relume - Step By Step

Website Components Menu Button

زر قائمة مكونات موقع الويب

Pages components

مكونات الصفحات

Blank Wireframe

إطار سلكي فارغ

Website Components قائمة مكونات موقع الويب

Relume - Step By Step

Step 1: Write your Website Description

الخطوة 1: اكتب وصفًا لموقع الويب الخاص بك

Step 2: Click Generate Sitemap

الخطوة 2: انقر فوق إنشاء خريطة الموقع

Start by entering your website description, with a little bit of details would be much better

ابدأ بإدخال وصف موقع الويب الخاص بك، مع القليل من التفاصيل سيكون أفضل بكثير

Relume - Step By Step

AI Generated Sitemap

خريطة الموقع التي تم إنشاؤها بواسطة الذكاء الاصطناعي

Any component can be Added, Removed or Edited to meet your requirements

يمكن إضافة أي مكون أو إزالته أو تحريره لتلبية متطلباتك

AI Generated Wireframe

إطار عمل تم إنشاؤه بواسطة الذكاء الاصطناعي

Initial Website design التصميم المبدئي للموقع

Relume - Step By Step

You can highlight any component to start your modification.

Each section has its own components

يمكنك تحديد أي مكون لبدء التعديل.

كل قسم له مكوناته الخاصة

Relume - Step By Step

When done, move to the next step, Export to Figma!

​

عند الانتهاء، انتقل إلى الخطوة التالية، التصدير إلى Figma!

Export to Figma تصدير إلى Figma

Relume - Step By Step

Step 1:

Install the Figma Plugin

قم بتثبيت البرنامج المساعد Figma

Step 2:

It will redirect you to Figma once the plugin is active

سيتم إعادة توجيهك إلى Figma بمجرد تنشيط البرنامج المساعد

Step 3:

Click “Open In” and “New File”

انقر فوق "فتح في" و"ملف جديد"

Export to Figma تصدير إلى Figma

AI-Powered Business Day 3

From Text to Website

Using AI

​

Figma - Step By Step

When Figma opens, click “Run” to start the “Import” process from Relume

عند فتح Figma، انقر فوق "تشغيل" لبدء عملية "الاستيراد" من Relume

Open in Figma Figma افتح في

Figma - Step By Step

Step 1:

Click on Primary Sitemap

انقر فوق خريطة الموقع الأساسية

Step 2:

You can add Sitemap or Wireframe

يمكنك إضافة خريطة الموقع أو الإطار السلكي

Wait until Relume-Figma import finishes

انتظر حتى تنتهي عملية استيراد Relume-Figma

Open in Figma Figma افتح في

Figma - Step By Step

Import is done, now you can also Add, Delete, Edit any component

تم الانتهاء من عملية الاستيراد، يمكنك الآن أيضًا إضافة أو حذف أو تحرير أي مكون

Figma - Step By Step

All website pages and sections

جميع صفحات وأقسام الموقع

Figma - Step By Step

Export Figma design to Siter HTML

تصدير تصميم Figma إلى Siter HTML

Click on “Manage Plugins”

انقر فوق "إدارة المكونات الإضافية"

Search for “Siter” and install it

ابحث عن "Siter" وقم بتثبيته

Run the plugin when done

قم بتشغيل البرنامج المساعد عند الانتهاء

Siter - Step By Step

Export Figma design to Siter HTML

تصدير تصميم Figma إلى Siter HTML

Use Siter.io plugin to create a New Blank website

استخدم البرنامج الإضافي Siter.io لإنشاء موقع ويب فارغ جديد

Name your website, Add domain later

قم بتسمية موقعك الإلكتروني

قم بإضافة المجال لاحقًا

Choose “Blank Template” to add components later on from Figma

اختر "قالب فارغ" لإضافة المكونات لاحقًا من Figma

Copy the link

انسخ الرابط

Siter - Step By Step

New Blank Website

موقع ويب فارغ جديد

Next step:

Export all website components from Figma to Siter.io using the plugin we already installed

تصدير جميع مكونات موقع الويب من Figma إلى Siter.io باستخدام البرنامج الإضافي الذي قمنا بتثبيته

Siter - Step By Step

Re-open the plugin and export to Siter.io

أعد فتح البرنامج المساعد وقم بالتصدير إلى Siter.io

Wait until Upload is done

انتظر حتى يتم الانتهاء من التحميل

When done, Open Site Editor

عند الانتهاء، افتح محرر الموقع

Siter - Step By Step

All website components are now in Siter.io, ready to also be modified and published

أصبحت جميع مكونات الموقع الآن في Siter.io، وجاهزة للتعديل والنشر أيضًا

Siter - Step By Step

Siter.io allows you to publish a website or download* the HTML code

يتيح لك Siter.io نشر موقع ويب أو تنزيل* كود HTML

Press Publish and Wait

اضغط على نشر وانتظر

When done, press View Page to view your newly published website

عند الانتهاء، اضغط على "عرض الصفحة" لعرض موقع الويب الذي تم نشره حديثًا

Siter - Step By Step

Congratulations!

Website has been published!

مبروك!

تم نشر الموقع!

Does your business need AI development tools?

Pros:

• Enhanced efficiency and productivity.
• Automate tasks.
• Faster project completions and innovation.
• Improved decision-making.
• Stay ahead of the curve by implementing innovative solutions.
• Cost reduction.

Cons:

• Upfront costs of AI tolls implementation.
• Requires significant initial investments in AI technologies and training.
• Complexity challenges.
• Integration challenges.
• Data privacy and security concerns: Using AI tools often involves handling large volumes of data—and that raises concerns about data protection, AI privacy laws, and the security of sensitive information.

Web development is a combination of platforms and applications working all together to accommodate most of the environments on multiple platforms and devices.

• Some are for Frontend
• Some are for Backend
• Some are APIs, linking Frontend to Backend

​

إن تطوير الويب عبارة عن مجموعة من المنصات والتطبيقات التي تعمل معًا لاستيعاب معظم البيئات على منصات وأجهزة متعددة.

• بعضها مخصص للواجهة الأمامية
• بعضها مخصص للواجهة الخلفية
• بعضها عبارة عن واجهات برمجة تطبيقات تربط الواجهة الأمامية بالواجهة الخلفية

This Combination is called “Stack”!

Each Website, App, Program, etc… has its own STACK

يُطلق على هذه المجموعة اسم "Stack"!

كل موقع ويب أو تطبيق أو برنامج وما إلى ذلك لديه مجموعة STACK خاصة به

https://stackshare.io/stacks

AI-Powered Business Day 4

NOW IT IS YOUR TURN