# data[].attributes.body
Look backwards if you will. Lightly (if you can). Recall or remember the last few years. Are you able to tell a story, from your life, work history or context, has brought you to this particular junction.  Instead of telling the story in words, I’d like you to use ideographic language to narrate the backstory, to your topic choice. Try telling the story with pictograms ( objects like a car 🚘 ) .Or an ideogram, a symbol to represent ideas or concepts ( no entry ⛔️ )

Understanding where we are, and starting journeys with a sense of direction rather than abstract goals.

Dave Snowden - Estuarine Framework

Learning Task: Select a sequence of pictograms to create and assign your own meaning to the topic – "INSERT TOPIC HERE". Try and create a meaningful story about what has brought you here. See if you can incorporate these symbols in the footer (the bottom most part of a site), where other important information goes.

# data[].attributes.body
Look at the device(s) in front of you. Consider the screen(s) you view and work on. Where do you feel at home, where do you feel lost. Think about your own propensities & dispositions. Do lurk and stare at screens on certain sites. Or do you reach out through the the functions on the screen and find ways to connect with others. Find or generate an image, photo, avatar that you currently (or want to use) that shows your habitat and indicates your desired relationship to others in this project.

Task: Upload this image of yourself (and byline if you like). Then link your selected profile pic to any site, service or page out on the web. Preferably a location where your digital propensities & dispositions are present to others.

# data[].attributes.body
Now look around you. Where do we begin? When open course designers start off, they are faced with a wide array  of unknowns. For example

1. What is my goal?

2. What motivates us in our work

3. What support do we need

4. What support can we offer (to students, to peers)?

5. What are some of the pains and gains?

6. What do you say, see, hear say and do?

Let's start refining your course unknowns with questions. Answers to these unknowns, will lead to more questions. So, we are asking for ideas. For you to see opportunities for progress, for your perspective on how to you handle this situation?

Responses to these unknowns can be found by working with each other and possible beneficiaries. Eventually, you should arrive at a problem statement.

Task: Check out “empathy maps”. This is a technique for framing questions. See if you can find instructions for creating empathy maps. And insert a link to these instructions.

a problem properly represented is a problem.

# data[].attributes.body
Look inwards. What do you do to make your digital environment a safer space? Do you have any recommendations for making it an inclusive, accessible and human friendly place? What, in this an open environment, where relationships between people, platforms and data artifacts are seen and responded to. What measures are you taking to make it safer.

Task: Combine text, shapes and a colour palette to design an info-graphic that expresses guidelines for safer behaviour. These are what is expected of people who enter this space. Think about the things you want to insist on for the widest possible audience, regardless of technology, device or ability.

# data[].attributes.body
Collect photos of open teachers, educators, facilitators who have or continue to inspire you. Or look through their open resources and find inspiration from their ongoing work. See if this inspiration sparks something for your intended work Task:

Task: Combine these inspiring figures and their work into a collage. Remember to attribute sources

# data[].attributes.body
Look to the #OE4BW network. Let’s invite or connect with an other’s in the open world. Who has a common interest in teaching wellness online. See if they want to share and play. But let’s focus the play. Share open educational kit (e.g. H5P or Moodle) with them. What you are hoping to learn?  Ask them about how they are designing and running their OE4BW course with open kit? Perhaps share an example of gear that is open, new, fresh unknown, evokes curiosity, gets their attention. Please share examples and downloads, with the hashtag #OE4BW

We know that the group is smarter than any single individual. The challenge is how to tap into a group’s collective intelligence and creativity when discussing an issue. source

Learning Task: Locate an downloadable open element that could be suitable for the course. Write a suitable message explaining why this is useful. It will accompany what you’ve made. Share it on the social media platforms you are comfortable with. Please also tag me.

# data[].attributes.body
Task: Finally. You are going to anpply and combine all these 9 artifacts into one webpage. This will be your temporary home. Use the skills that we have learned to create a particular look or feel. Discuss if it works and if you can use later, when creating your project pitch deck or presenting the project to your #OE4BW peers.

# data[].attributes.body
Open education has a goal – to make knowledge and opportunity available to all. Open educators are committed to addressing the many barriers that prevent everyone from getting a better education. They are also interested in prompting agency.

Choose which of these four webinars you would like to watch. All? None? Some? You have agency here. We can discuss what was said, watch them together, or move on.

# data[].attributes.body
There are sometimes blockers that stop me from getting started, going or completed. Let's create a gallery of these blockers in the form of cards. Locate an openly licensed image or a picture from the public domain, that represents your current work blockers, concerns or anxieties.

Task: Find suitable images for your cards. Compose ALT text to accompany the image. And don’t forget to attribute source.

# data[].attributes.attachment_caption
Thomas (LOC) flickr photo by The Library of Congress shared with no copyright restriction (Flickr Commons

# data[].attributes.body
What are you growing? Let’s arrange letters and text (typography) to create a clear, eye catching and legible phrase or tag line that you will attach, as a banner or poster, on your online office door or virtual classroom wall.

Task: Create a banner that attempts to elicit emotions, convey a message, attract attention - about your topic.  It may be intended to encourage a conducive or inclusive climate for everyone in the class or course. Whether it be about critical thinking, grit and resilience, growth mindset, social justice etc.

Note the font used and style that you applied

# data[].attributes.body
Save a copy of your mentorship charter in a central and common location where all can easily access it. Then make sure you put a hyperlink in the footer that leads to the tracker

Task: Create a Project Tracker to manage the scope, specifications, deliverables, deadlines etc

Plan out the roadmap and milestones.

Use your mentorship charter information to help determine tasks.

Work backwards from the assignment due date(s) to map out deadlines and tasks.

# data[].attributes.headline
Inspiration is everywhere, focus is everything.

# data[].attributes.subject
Inspiration is everywhere, focus is everything.

# data[].attributes.body
Prompts were written by me with inspiration drawn from these (and other) sources.

Liberating Structures

Open Education for a Better World

H5P

OE Global

I also made use of ChatGPT to generate some of the support resources for each prompt. I acknowledge that ChatGPT does not respect the individual rights of authors and artists, and ignores concerns over copyright and intellectual property in the training of the system. Details will follow.

# data[].attributes.body
4.2 Supportive information
Having critical conversation about a topic like digital wellness requires that people feel safe to participate. The time to prepare participants is beforehand. You can create ground rules, to make participants feel comfortable and safer. In your our infographic might want to cover the following

Confidentiality

Mutual respect

No interrupting

Participation (only by choice)

Differences of opinion are okay

Take care of yourself and others

If there is a synchronous online component, (for example on Zoom) your ground rules would also need to discuss recording the session.

# data[].attributes.body
An example of a  "Profile or Business Card" You can create a place to display your profile, your credentials and network

# data[].attributes.attachment_link.readable_text
 .card { width: 300px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px #ccc; padding: 20px; text-align: center; margin: 0 auto; } .profile-picture { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; display: block; margin-bottom: 20px; } .social-media-links { margin-top: 20px; } .social-media-links a { color: #555; font-size: 20px; margin-right: 10px; text-decoration: none; } .social-media-links a:hover { color: #4CAF50; }

# data[].attributes.attachment_link.description
card { width: 300px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px #ccc; padding: 20px; text-align: center; margin: 0 auto; } .profile-picture { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; display: block; margin-bottom: 20px; } .social-media-links { margin-top: 20px; } .social-media-links a { color: #555; font-size: 20px; margin-right: 10px; text-decoration: none; } .social-media-links a:hover { color: #4CAF50; }

# data[].attributes.body
Let us see your  "Digital Wellness journey". Here’s how I am narrating my personal story visually (with emoji’s) and spatially (at the bottom of the page) in the footer.

# data[].attributes.attachment_link.readable_text
Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

JavaScript

JavaScript Preprocessor
Babel includes JSX processing.
Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

# data[].attributes.attachment_link.description
Add External Stylesheets/Pens Any URLs added here will be added as s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension. JavaScript Preprocessor Babel includes JSX processing.

# data[].attributes.body
These are the frequent questions that are emerging from our empathy map

# data[].attributes.body
A ground rules infographic is a useful way to communicate important information in a clear and visually appealing way. Below are some suggestions for using text, shapes, and a color palette to create a ground rules infographic:

1. Selecting a color palette that aligns with the rest of your site. For a safer space, you may want to use colors that evoke feelings of warmth and safety, such as shades of blue, green, and yellow.

2. Use a large font to create a headline that clearly states the purpose of the infographic. For example, "Creating a Safer Space: Ground Rules"

3. Use simple shapes such as circles, squares, and rectangles to create visual dividers and to emphasize key points.

4. Use bullet points to list out the behaviors that are expected of members in a safer space. For example:

1. Treat everyone else with respect:

2. Listen actively and refrain from interrupting

3. Avoid using language or making jokes that may be hurtful or offensive

5. Use icons or illustrations to add visual interest and to help convey the message of the infographic.

6. Make sure that the infographic is accessible to the widest possible audience, regardless of technology, device or ability. For example, using a clear and simple layout, providing alternative text for images, and using a sans-serif font that is easy to read.

It's important to keep in mind that the design of an infographic should be clear and simple.

# data[].attributes.body
Here is an example of how you can create a multiple choice quiz using the H5P plugin for a website:

1. Install and activate the H5P plugin on your WordPress (if you haven't already)

2. Go to the H5P content library and select "Multiple Choice" under the "Question" category.

3. In the "Question" field, enter the question you would like to ask.

4. In the "Answers" field, enter the different options for the multiple choice question. You can add or remove options as needed.

5. Select the correct answer by clicking on the checkmark next to the correct answer.

6. Add feedback for correct and wrong answers in the "Feedback" field.

7. You can also add an image or video to the quiz by clicking on the "Add" button under the "Media" section.

8. Once you are finished creating your quiz, click on the "Save" button to publish it.

9. The quiz can be added to a post or page on your website by using the H5P shortcode or by using the H5P block in the block editor.

# data[].attributes.body
Look at how others are finding their way (or getting lost) in the digital world. Think like a someone else. Your parents? Your boss. Consider how they understand the navigation structures and mechanisms when using the web, apps, software.

One question, as you think about your project, is to decide on what routes do you want your audience to take. Not what does the organization want the user to know. How are they going to get around your pages? What navigation and orientation elements are you building into your site.

"Everything should be as simple as possible, but no simpler."

Attributed to Albert Einstein

Task: Site Navigation - think about the way that you are going to help people find their way around. Will you use tabs, columns, rows to arrange all of the information systematically. See if you can group then information into themes or sections. Perhaps create a sitemap? Or try map out a journey.

# data[].attributes.body
Extra: Add the CC license as an HTML element

# data[].attributes.body
An example of a Horizontal Navigation Bar. Used at the top of a website

# data[].attributes.attachment_link.readable_text
 /* The navigation bar */ .navbar { overflow: hidden; background-color: #333; position: fixed; /* Set the navbar to fixed position */ top: 0; /* Position the navbar at the top of the page */ width: 100%; /* Full width */ } /* Links inside the navbar */ .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Keep the highlighted element in navbar */ .home .onlive {color: #C0C0C0;} .home .banner {color: #808080;} .assessment .onlive {color: #ff663a;} .assessment .banner {background:#ff663a;} .strategies .onlive {color: #ffd25b;} .strategies .banner {background: #ffd25b;} .activities .onlive {color: #fdff6e;} .activities .banner {background:#fdff6e;} .content .onlive {color: #a1f152;} .content .banner {background:#a1f152;} .communication .onlive {color: #18ba67;} .communication .banner {background:#18ba67;} .administration .onlive {color: #137e92;} .administration .banner {background: #137e92;} .design .onlive {color: #871084;} .design .banner {background: #871084;} .support .onlive {color: #da4275;} .support .banner {background: #da4275;} /* Change background on mouse-over */ .navbar a:hover { background: #ddd; color: black; }

# data[].attributes.attachment_link.description
The navigation bar */ .navbar { overflow: hidden; background-color: #333; position: fixed; /* Set the navbar to fixed position */ top: 0; /* Position the navbar at the top of the page */ width: 100%; /* Full width */ } /* Links inside the navbar */ .navbar a { float:

# data[].attributes.body
https://www.ideou.com/blogs/inspiration/how-to-prototype-a-new-business

# data[].attributes.attachment_link.readable_text
In our Creative Confidence series chat with IDEO CoLab Co-Managing Director Joe Gerber, we explored the world of business prototyping. In his early days as a Business Designer at IDEO, Joe noticed that experimenting and prototyping were an essential part of IDEO's process and became curious about prototyping something complicated and abstract like a business. Applying the design approach and philosophy to new business ventures with techniques like prototyping creates a clearer path forward.

Here are a few highlights from Joe and Suz's discussion on prototyping new businesses. To go deeper, l earn how to design and prototype every aspect of your business in our online course, Designing a Business.
Prototype Your Business
When prototyping a business, start by asking the right questions. Determine what assumptions have to be true for this business to work and design experiments to test your assumptions.

For example, PillPack -a full-service online pharmacy that delivers your daily prescriptions in easy-to-use packages-wanted to test pricing and value propositions. They branded a kiosk in a mall where the CEO talked with potential customers. While online prototypes can be great, this instance of live prototyping allowed the team to learn directly from prospective customers, have conversations, ask follow-up questions, and get real-time feedback about the business. We call this a "lemonade stand" prototype.

"Lemonade stand" prototypes are a great way to get direct customer feedback about your business and answer questions around your value proposition assumptions.

Question Desirability, Viability, and Feasibility

One tricky and exciting thing about building a business is that to succeed, all the pieces have to work in harmony-the value proposition, pricing, financial model, etc-so often you're testing how these different pieces work together. Joe and CoLab use the three IDEO circles: desirability, feasibility, and viability to guide what questions they're going to test.
Desirability
What's the unique value proposition? Do people want this product or service? Does it make sense for them?
Viability
Can we build a sustainable business? What has to be true for this business to work? What are the costs? How will you pay for it?
Feasibility
Does this work? Is it functionally possible in the foreseeable future?

Prioritize Your Assumptions
Create a long list of questions with desirability, viability, and feasibility in mind. Try to prioritize assumptions. Which questions are dependent on an answer from the other questions? Have conversations to determine what needs to be true for your business to be a desirable, viable, and feasible endeavor.
Business Prototyping Resources
Here are some tools that Joe, CoLab, and other IDEOers use for prototyping new ventures:
Nerding Out
CoLab prototyped an internet-connected solar panel that generates renewable energy credits that can be sold on carbon markets. They're now working with CoLab member Nasdaq to move forward a pilot with a major solar field.
Learn how to prototype and design every aspect of your business in our online course, Designing a Business.

# data[].attributes.attachment_link.description
"What assumptions have to be true for this business to work? -Joe Gerber, IDEO CoLab Managing Director In our Creative Confidence series chat with IDEO CoLab Co-Managing Director Joe Gerber, we explored the world of business prototyping.

# data[].attributes.body
You have worked hard to get here. Welcome. You belong. Congratulations on being selected as a portfolio developer

I am very pleased to be working as a mentor with developers on this programme. I hope this will be a positive learning experience for both up us.

I'd like to suggest that we make a start with getting to know each other and looking “behind the curtain”. I think that it is important to understand the infrastructure upon which we build our portfolios on

Let’s both challenge ourselves with small projects and learn more about each other. Take a look at the Portfolio Template (https://codepen.io/Web-learning-the-bold/pen/dyjqNGd). You will see a page with a header, footer, nav, section and aside. I’m going to ask you to look through the ten short prompts for code and thought each week day (for the next two weeks). After doing it, you will build a full portfolio page that has a header, footer, navigation, content section and aside sections of a site.

The main purposes behind each prompt would be to

see what each other knows,

uncover more about our contexts and our “know how” practices,

discover how knowing in a context can supports the overall goals, and

exert agency, take action and do.

You can respond to 1 or all 10 of these action prompts. Some may be simple. Others could be complex. At the end of the 10 action prompts, I’m hoping to have a minimum viable product for our portfolio home page, coded in HTML.

I’ve just got one condition. Be very clear about what your response to my request is.

Are you willing to try this out? Yes or no?