Skip to main content

My quick thoughts, back stage, and rants as I try to Teach kids about the Web while learning how to help others build a better Web.

IndieWebRing

Come Journey Through the IndieWeb Sites

‚Üź ūüēłūüíć ‚Üí

Greg McVerry

Getting started with PHP File-Trying to Create a Guest Book for My #IndieWeb Blog

5 min read

I have very limited experience with PHP. Basically I have copy and pasted contact forms for years and occasionally hack around in WordPress.

More recently I have started to dig into Known as I find stuff I would like to do on my site.

Right now I am trying to have a php form on a website and spit out the results on the same page. I don't want to save the data anywhere but the webpage.

Here is my attempt to write the form and the template. Would love feedback on the fundementals. Here is a link to a Gist as well.

If I can get this part proper I can then go and figure out what magic I need to do to make it happen.

<main>
     <div class="contain">

  <div class="Contactwrapper">
   

    <div class="form">
      <h3>Send us a message</h3>
      <form action="guestbook.php" method="POST">
        <p>
          <label for="name">Your name</label>
          <input type="text">
        </p>
        <p>
          <label for="website">My URL is...</label>
          <input type="text">
        </p>
      
        <p>
          <label for="instagram">Instagram</label>
          <input type="text">
        </p>
        <p>
          <label for="twitter">Twitter</label>
          <input type="text">
        </p>
        <p>
          <label for="email">Email Address</label>
          <input type="text">
        </p>
        <p>
          <label for="subject">Topic</label>
          <input type="text">
        </p>
        <p class="full-width">
          <label for="text">Write your message</label>
          <textarea name="" id="" cols="30" rows="7"></textarea>
        </p>
        <p class="full-width">
          <button>Send</button>
        </p>
      </form>
    </div>
  </div>
</div>
    <section class="h-feed">
            <h2 class="p-name">My Guestbook</h2>
            <h3>Curated by <span class="p-author">Insert Name</span></h3>
     <ul class="h-entry">
  <ul class="h-card">
  <li class="p-name">
            <?php echo htmlspecialchars($_POST['name']); ?></li>
   <li class="u-url"><a href="https://<?php echo htmlspecialchars($_POST['wesbite']); ?>"><?php echo htmlspecialchars($_POST['website']);</a></li>
  <li><a href="https://instagram/<?php echo htmlspecialchars($_POST['intagram']);"></a></li>,
<li><a href="https://twitter/<?php echo htmlspecialchars($_POST['twitter']);"></a></li>,
 </ul>
   <li class="dt-published">    <?php $currentDateTime = date('Y-m-d H:i:s'); echo $currentDateTime;?></li>
   <li class="p-content"><?php echo htmlspecialchars($_POST['name']); ?></li>
   </ul>
    </section>
    </main>

Greg McVerry

Greg McVerry

How to Add Webmentions to Blogger

2 min read

If you want to connect your Blogger account to other  sites you have to do two things:

What are webmentions?

Webmention, unlike the Google+ comments that you will soon lose, are a a w3c spec (the W3c are the group that oversee web standards) that allow sites to talk to each other.

I can post a reply on my website to a post someone else makes and it will display as a comment. I can also pull in comments from social media back to my website.

Why webmentions?

Did you build your entire PLN on Google+ and rely on their closed APIs for comments? What will you do in April when the house of cards come crashing down? Building your web presence on open standards rather than the whims of search engine giants who suddenly decide fixing a security bug is too much trouble makes sure you stay in control.

How to add webmentions?

First go to Bridgy. Click on Blogger and authenticate. If you are like me and have many different blogs select the one you want.

Then you will copy the line of code and click on the link to open your blog editor to the layout page. Select edit html and put the link inside the tag called "head".

That is it! You have no completed all the steps to IndieWeb your Blogger account.

Greg McVerry

How to Add an h-card to Blogger #IndieWeb

2 min read

If you want to connect your Blogger account to other  sites you have to do two things:

What is an h-card?

The modern social web, free of corporate silos slurping up data and attacking our privacy, relies on sites to display a calling card for other websites to find. This h-card tells the world this site is my home and on other website your h-card links back to the palace you build your self on Blogger.

Why an h-card?

These little tools only require a few lines of HTML. Unlike other tools to capture metadata about users the h-card is always human readable.

When your website includes an h-card and you add optional rel=me properties you are also verifying that you are the owner of that specific account. You can then use this feature to login to IndieWeb sites that use the IndieAuth protocol and support IndieLogin (a ton of words to say you log into websites using your url).

How to add h-card to Blogger

go to layout

When you go to Blogger, login and then select layout. You will then click add gadget and select the HTML/Javascript gadget.

Then you go to the microformats wiki and copy and paste the h-card example. 

Then you edit the h-card with your details.

The final optional step is to add links to other places you live online and include a rel="me"

 

Greg McVerry

Greg McVerry

A successful Homebrew Website Club New Haven

2 min read

Creating a learnign space on campus for students and alumni to gather to share their experiences has enriched my online teaching and provided students with an avenue for agency and artisty

On 2019-02-06 the local New Haven Homebrew Website Club met. As part of the global movement we join together to hack on websites. For many of my students this means building a site for the first time. For @SCSU alumni who attend they carry the website they began as students out in the real world and bring examples of how they use their sites in their classrooms.

New Name

At Wednesday's meeting we did decide a few things. Participants do not connect with the Homebrew Website Club. They do not know the history of the computer club once attended by Jobs and Gates and do not really care once they learn. So after some discussion we decided to revert our name back to the Elm City Webmakers. We will still host homebrew websiote club meetings but will brand these gatherings of the Elm City Webmakers.

Great Location

picture of room

Huge shout out to Dean Hegedus for building the active learnign lab where we meet. Today I was joined in person by two people. Natalie Caldwell, a student, and Drew McWeeney, an almuni

Awesome Goals

Natalie began byworking on her WordPress.com site. She wanted to learn how to add Bridgy and then to customize fonts and colors. Natalie even played with a bit of microformats

Drew came to the Elm City Webmaker gathering to work on his Grav site. Drew is working on instructional design for the American Red Cross. After discussing why he was using Grav for whta was a single webpage we decided to roll up opur sleeves and learn to spin up a web page by writing HTML.

Overall a great first meeting this month. I am looking forward to seeing even more people in two weeks.

Greg McVerry

How I feel about #IndieWeb and HTML

1 min read

Nobody's got a thing against you
Unless you've got something to prove 
We don't need no set of standards
We don't need a new set of rules 
Heard all that shit before, 
about stomping out any difference 
We say stand together, 
(Not to fight just to exist)

Operation Ivy-Take Warning

Greg McVerry

Creating an #IndieWeb friendly experience on @weebly

1 min read

I am seeing more and more teachers join Weebly as their first website and blog. I am so stoked! Getting teachers online is the ultimate goal.

Yet I do get a few messages from teachers who want all the love on their site. I do not have an answer for them...so I started digging.

I think we can do it:

Here is the documentation on themes http://www.weebly.com/editor/codeEditorDocs.php

Seems with edits to some headers and adding partials to the theme we can do it https://dev.weebly.com/pf_themes_partials.html

Then we just need to port existing IndieWeb building block plugins into Weebly apps which use the REST API.

https://dev.weebly.com/pf_apps_elements.html

https://dev.weebly.com/pf_getStarted.html

Greg McVerry

Paper Prototype of #IndieWeb Story Builder

2 min read

 

The goal is to spit out an HTML only file someone could add to their site or embed through an iframe using CSS grid.

Want to be able to layer html elements in series of slides using divs or sections. 

User first select full screen or chooses width

They can then click a button to add a slide which will have a 4X4 CSS Grid.

Then on the slide the user can select the plus button and choose the media to select. In a perfect world it would be a drag and drop , pinch, and zoom interface but I could never build that. I could build HTML forms, however for now.

The user drops in a media url or uses an embedded creative commons search, the url gets parsed for attribution page.

For now a saavy user could decide the size of the media bo, and indicate the grid column and grid row to start in. This would be a no good horrible UI but trying to restrict myself to stuff I could theoretically build (I still can't build this).

They could then have other options like font, opacity, a sliding scale for Z index.

This would then spit out an HTML file with the style and the all the embedded media links that someone could throw on their website.

 

Greg McVerry

Changes to My Core Instructional Design #literacies #digped

3 min read

I got some expected feedback from my online Children's Literature class. A reoccuring theme amongst my students is they feel overwhelemed by the number of tools. To me it fels like the natural tools of networked knowledge building but many students have trouble navigating the tools. I used o use:

  • Class website-¬†https://edu305.jgregorymcverry.com for example
  • Class Feed-Linked on the page
  • Wordpress.com-Their website, usually a first, where they learn to blog
  • Slack-Our chatroom and hangout
  • Hypothesis-Online Annotation

This semester I am dropping Slack and Hypothesis. I love the tools but clearly my students want less places.....And I am itching tio add more like wikis....but I won't. The shift of mindset alone requires enough effort.

Slack

I always want to recreate the culture we have in our online pedagogy groups. A fool's errand. Many of us have hung online toggether for ten years. A decade of of practice can not be baked into one semester.

Though I am starting to get students who have helped to create learning speaces with me in two other classes so maybe this will improve.

Still no students hang out in Slack like we roll in Slack, IRC, or Twitter. The primary reason lies in the realities of the students I serve. Many have two to three jobs. 25% of of my undergraduates have children. Each as a unique life story and experience to bring. This ain't the cookie cutter white fence lives of Ivy League students or even UCONN students. They worry about making rent not the next Spring Break destination.

Having the capcity for networked learning reflects priviledge. No one used the channel. I tried Slack because when I used Known turned into a file cabinent to hand in assignments. If I wanted that I would use Blackboard. Slack was no different. 

Maybe I could have tried more welcoming messages each days, diret messaging people, but I coudl not increae engagement in any class.

The Replacement

I still need chat. It reduces student emails a hundred fold, plus it's how humans learn. So I added a chat room to my IndieWeb Course template.

Hypothesis

I love hypothesis. My students do not. Partly because I did not spend as much time in the arrticle stream, but also just preference. Many do not want to read and take notes this way. I feel have a moral obligation not to demand students use a specific method for the external storage of knowledge.

The Replacement

I am going to have students publish Read posts and include block quotes and analysis, and then publish an analysis post synthesizing the readings. Our students, even in their sophmore year of college need support in text based analysis. I feel this step will add in greater reflection.

Class Feed

I have used inoreader the past few years and create a page of class feeds on the website. I am debating whether to try Malcom Blaney unicyclic.com but all my students use WordPress.com so I wouldn't get the benefits of having a microsub/micropub social reader.

I don't have a one button push solution for IndieWeb sites and the best we can do with WordPress.com is webmentions with Bridgy.

Probably just stick to Inoreader.

Meeting the Student Needs

This will greatly reduce student navigation. They now will only have to vist the class website and post on their website.