×

Electrate Fuego

Electracy Coding Tools

Hello, maker! Welcome to the Electrate Fuego web design tutorial. I'm glad you found it – for this might be a real intersection on your way to becoming. You'll make a really cool web document that not only introduces you to the other people, but will help you process how different discourse communities in your life have contributed to your arrival in this space -virtual and actual - and also contribute to where you might be going.

Go to the GitHub Repository

Preview Electrate Fuego Demo

Close Project

×

I AM - A Project in Becoming

A great tool for making introductions

Using this tool, you'll use the questions of stasis theory to figure out where you stand and where you're going. You'll also learn the basics of reading through code, add/modify content, and gain a better understanding of computer science

Go to the I AM - A Project in Becoming Repository

Preview I AM - A Project in Becoming Demo

Close Project

×

Pitt Fuego Webtext Generator

The everyday coding tool!

Pitt Fuego Webtext Generator is designed to be fast and light. Add elements that will look good on any screen, whether you're trying to circulate a message of make a keynote visual aid. Add a QR code link to the project, and your audience will be able to easily take your message home in their pockets. Pretty cool, right?

Go to the Pitt Fuego Repository

Preview Pitt Fuego Webtext Generator Demo

Close Project

×

Elevator Pitch Generator

Did you know the Greeks invented the elevator?

It's true. The Greeks invented the elevator, and quickly realized the awkward communication that results when one is locked in a box with their interlocutor. Luckily, in addition to being great inventors, the Greeks were also skilled rhetoricians.

Open this generator and follow the directions to utilize the available means of persuasion to concisely language exactly what you want to say. The result: an elevator pitch. Ding! - Doors Closing - How high do you want to go?"

Go to the Elevator Pitch Generator Repository

Preview Elevator Pitch Generator Demo

Close Project

×

Stasis Theory Machine

The original global positioning tool

Most people would say the goal of stasis theory is a kind of stopping. But I would argue that we're actually figuring out how and why people are moving in different directions and different speeds in relation to one another. I like to use stasis theory to better understand this movement with the goal of addressing my own direction and speed, and possibly convincing others to do the same.

In this doc., you will work through the four questions of stasis: conjecture, definition, quality, and policy. This method is tried and true, 100% guaranteed to help you say something meaningful about almost anything. While the Greeks used it to help them explore questions and issues, the design can easily be adapted to other ends.

Go to the Stasis Theory Machine Repository

Preview Stasis Theory Machine Demo

Close Project

×

My Nature Study

Embed in nature and learn to code our networked ecology

We've adapted the holistic, nature-centered methods we witnessed in the field to create My Nature Study, a coding template offering students an opportunity to work with tools to construct meaning in their world. Through this project of languaging and communicating their relationship with the natural environment, students will learn essential computer science concepts and learn to read/edit .html and .css documents.

Go to the My Nature Study Project Page

Close Project

×

Presentation Organizers

Lean on the available means of persuasion to help you organize your message

Lean on the available means of persuasion to help you organize your message

Coming Soon!

Close Project

×

Project/Internship/TA Reflection

Process and Package your Experience

In this project, you will make a really cool web document that helps you process your learning experience, learn a little bit about coding, and strategically package the work you have accomplished in your project/internship/teaching assistantship.

Go to the Pitt Fuego Project Reflection Repository

Preview Project/Internship/TA Reflection Demo

Close Project

×

Directed Reading

This Tool Helps Students think critically about their readings and connect ideas together.

SGo to the Directed Reading Repository

Preview Directed Reading Demo

Close Project

×

Online Training Manual

Training tool for a distributed workforce

While workforces are becoming increasingly diversified, they are also becoming increasingly distributed across spaces. This means our student’s ability to effectively communicate across media with a diverse workforce will be of great importance in professional settings. Companies are increasingly turning to online training documents to teach policy and procedure for their field employees. These documents prove valuable in that they can be accessed at the user’s leisure, hold the user responsible for the content, and transfer liability from the company to the employee. From an education standpoint, online training documents serve an important tool for training employees.

Go to the Online Training Manual Repository

Preview Online Training Manual Demo

Close Project

×

Content

Content

Content

HERE

Close Project

×

Content

Content

Content

HERE

Close Project

×

Professional Portfolio

Starter Content

Ok, here is all the stuff you need to get going using a template built in bootstrap. Head over to Bootstrap's Startstrap should you need extra code snippets.

Go to the Professional Portfolio Repository

Preview Professional Portfolio Demo

Close Project

×

Bootstrap Portfolios

.css style, y'all!

Bootstrap provides .html snippets and web templates that sync to Bootstrap CSS master stylings. With Bootstrap, you'll be able to make stylish websites that follow UI design best practices. We've provided PDF tutorials you can follow to make your own Bootstrap site and host it on a server using an FTP tool. Sorry, we lost you? We'll explain how it all works in the our tutorial. Why Bootstrap? Two reasons: First, Bootstrap offers free "Startstrap" themes that demonstrate current trends in UI design...and they look great. Second, it's always good to see how other people work with code. You got this!

MAC USERS OPEN MAC PDF

WINDOWS USERS OPEN WINDOWS PDF

Close Project

×

Digital Making Portfolio

A scaffolded approach to multimodal making

I use this portfolio in my digital media productions course following the scaffolding method I developed to teach digital literacy.

Go to the Digital Making Portfolio Repository

Preview Digital Making Portfolio Demo

Close Project

×

Content

Content

Content

HERE

Close Project

×

Content

Content

Content

HERE

Close Project

×

Content

Content

Content

HERE

Close Project

×

PITT FUEGO CLASSROOM BEST PRACTICES

Work with Code – most all of the code your students will need to write has already been written. Encourage students to work with code, not write it. (Disagree? See our final entry)

Admit ignorance – your students will be much more responsive to learning about code and computer science when they realize that their teachers are also learners.

Be flexible – there are many solutions to any given problem. Use difference as an opportunity to engage learning, asking questions, and assessing quality in different circumstances.

Don’t fix things for your students – teach students to learn how to learn by directing them to the right resources.

Promote online learning spaces – most of the questions and answers we seek have already been discussed somewhere on the internet. Encourage students to discover and contribute to these spaces on sites like GitHub and Stack Overflow, and to use other learning spaces like W3.

Leverage classroom knowledge – acknowledging your own limitations will encourage students who may possess more knowledge than you to speak up and take leadership roles.

Set Deadlines, but be flexible – give your students all the time they need to figure out how to work with code. Demand excellence, but ensure learning.

Think Small Groups – small groups provide a great way to help students learn to connect with the other through code.

Debugging Sessions – students will often arrive to class with big problems that require simple solutions. Allow students time to meet in small groups to solve their coding problems.

Small Group Presentations - presenting work in small groups takes the pressure off of presenting in larger ones. They also allow students to ask more questions and learn more about their own learning.

Group Share - After small group presentations, require each group to share-out the highlights of their experience, not only sharing what they made, but what they learned.

Build Confidence – Be proud of your students! Encourage them to continue working with code and learning new technologies.

Promote Transfer - Offer plenty of time for students to assess what they learned and to process how they learned it. Focus on aspects of rhetoric, writing, and computational thinking.

Promote Other Kinds of Coding Experience – It may be unrealistic to learn more than Pitt Fuego in your classroom, but that doesn’t mean you shouldn’t encourage students to transfer their new knowledge and skills to learn more about code, even learning how to write their own.

SAMPLE TEACHING CYCLE (3 projects)

-Classroom/Code Icebreaker Start your class with code. Combine the standard introduction with code, presenting who they are, where they came from, and where they want to go. (see: Electrate Fuego or I AM; A Project in Becoming.)

-Stasis Theory Project Students will work with code to figure out what they want to write or what they want to make by constructing a question, conjecture, definition, quality, and policy. (see: Stasis Theory Machine, Elevator Pitch Generator)

-Multimodal Communication DocumentStudents will use the tools in Pitt Fuego to make a mobile-ready multimodal communication document. (See Pitt Fuego or any of our other Presentation Methods.

Close Best Practices

×

FAQ

Q: How do I get started teaching students to work with code?

A: Start with our introductory programs, Electrate Fuego or I AM; A project in becoming.

Q: Wait a minute! What about me? How do I get started learning to work with code?

A: The same way silly! But YOU should get started working with code before you facilitate these lessons in your class. Get to know your code editor. Get to know the affinity spaces to which you will be sending your students for answers. Share your own work - even your own problems and frustrations – with your students.

Q: Where are the directions?

A: They are embedded in the code. Teach students to use a code editor to open the index.html fime and style.css file to find the directions.

Q: Can my students really figure out how to work with code?

A: If you and your students can’t figure out Pitt Fuego, then WE have a problem. Please let us know.

Q: How do I assess this?

A: Set expectations: demand students work with code to meet specific requirements and goals for content, usability, and aesthetics, but assess actual learning, presentation, and participation rather than product.

Q: What if a student already knows everything there is to know about .HTML and .CSS?

A: No problem. Pitt Fuego is only a multimodal communication tool. While we can use the code to help us arrange, style, and circulate our content, we still need to invent content and connect with our audience.

Q:` What is computational thinking?

A: Computational thinking includes aspects of pattern recognition, algorithmic thinking, decomposition, and abstraction. While experts have argued that writing code is not the same thing as computational thinking, the process can be…if we encourage our students to focus on aspects of computational thinking throughout our praxis.

Close FAQ