create

From IndieWeb
(Redirected from creating)
Jump to: navigation, search

ūüďĚ


create in the context of the indieweb refers to the act of and UI for creating a new post, in its simplest form, a new note.

Related: creator, someone who is creating UI, design, code for their own site.

IndieWeb Examples

Contents

Barnaby Walters

Barnaby Walters hosts a public Taproot creation interface:

For screenshots see:

Aaron Parecki

Aaron Parecki is the creator of Quill.

To bookmark a page (create a bookmark post on his own site), Aaron uses:

  • a bookmarklet to activate quill.p3k.io/bookmark with the URL to bookmark pre-filled in
  • quill uses micropub to
  • create a bookmark post on his site.

(screenshot needed)

Previously, Aaron's software included a creation interface. Old screenshots can be seen at p3k-v1.

Tom Morris

Main article: Ferocity#Posting_UI

Tom Morris uses Ferocity on tommorris.org with the following note creation interface since 2013-03-25 (or perhaps earlier)

Ferocity posting UI.png

  • The circle-in-circle is for geolocation: clicking it on uses the browser geolocation API to set the location of the post.
  • The tickbox for Twitter lets him decide whether to syndicate the post to Twitter or not.

Jeena

Jeena's posting interface (project unnamed)

Jeenas-notes-post-UI-2014-01-18.png

Jeremy Keith

adactio notes

Since 2014-05-27, Jeremy Keith's note creation UI ("simple update form") on his home page when he's logged into his site adactio.com:

adactio-form.png[1]

and adactio photos

On 2014-07-05 he added the ability to attach a photo to a note, as a way to do simple photo posts (which POSSEd to both Twitter and Flickr

You can barely see the UI with the addition of a "Choose File" HTML file input, in the second window on his laptop screen here in this photograph:

Jeremy Keith's laptop with a window of code in the foreground and his home page with posting UI in a window behind it.

per silo POSSE toggles

He then subsequently ~2014-10-01 added the ability to selectively (per post) toggle POSSEing to Twitter and/or Flickr (both default on).

checkboxes.png

Jeremy has also open sourced these animated sliding toggles:

Calm Technology

calmtechnology.com is a topic focused indieweb site by Amber Case that runs WordPress and P2.

16357718359_133a897e38.jpg

Note the simple one big text box with big "Post it" button as the focus of the UI, with minor optional elements to add media and tags, all inline above the most recent posts for context.

gRegor Morrill

gRegor Morrill posts notes using this interface. For more information, see his ongoing notes documentation.

gregorlove-add-note-2014-06-23.png

Mobile

Mobile note creation is particularly challenging for various reasons:

  • less reliable network (thus possible loss of user data if depending on JS / AJAX)
  • smaller displays (less space to see what you're typing)
  • touch keyboards (clumsier / less accurate than physical tactile keyboard)

Silo Examples

Facebook

Facebook, at the top of your profile/wall "timeline" presents a UI for creating a new post with three explicit post-type options:

  • Status | Photo/Video | Life Event

With "Status" chosen by default, and the prompting text: "What's on your mind?"

Facebook profile create post 2015-09-20.png

This is a big simplification from their past create UIs that had various post types explicitly differentiated in the UI like checkin, link/bookmark, etc.

If you activate the text area (where the default text is), new options are provided below it:

Facebook profile create post options 2015-09-20.png

The icons represent (and show as tooltip text if you hover)

  • "Add photos to your post"
  • "Tag people in your post"
  • "Add what you're doing or how you're feeling"
  • "Add a location to your post" (auto-filled with a city name, and showing a close box to remove)
  • "Set date and time of your post"
  • Who should see this? Public, Friends, Only Me (default), Custom, school, company1, company2, ... companyN

Selecting "Life Event" expands the create box into a set of categories to choose from:

  • Work & Education, Family & Relationships, Home & Living, Health & Wellness, Travel & Experience

Facebook profile create life event 2015-09-20.png

If you now reselect "Status" - it activates the text field, and shows the same status options as noted above.

Facebook-create-for-pages.png

When creating from the home page instead of your profile, the interface is slightly different. It also includes an option to select background color. After clicking "Background Color" you have several color options to choose:

Facebook-background-color-2017-04-07.png

After choosing a color, the background changes in the window: Facebook-background-color-selected-2017-04-07.png

Facebook Events

Noticeably absent from the above create UI is anything to do with creating events (the kind you invite people to).

Event creation UI is only present contextually, when viewing your events or your calendar.

  • facebook.com/username/events ->
    [ + Create Event ] [ ‚úŹÔłŹ ]
    buttons (the pencil button is for "Manage" - not sure what that means
  • https://facebook.com/events ->
    [ + Create ]
    button in the left column

Clicking "+Create [Event]" presents a dialog to enter event details:

Facebook-create-event-ui.png

After the initial event has been created, the edit event UI does include an option to select an existing photo. Read more on edit#Facebook_Events.

Event public/private options:

  • Private Event with "Guests can invite friends" (default)
  • Private Event - only hosts can invite friends
  • Public Event - anyone can view it, even without being logged in

Issues:

  • "Upload Photo" makes little sense since people typically upload numerous photos to Facebook already - it should let you choose from your (recent) photos rather than having to upload another!
  • "[x] Guests can invite friends" should have another option:
    • "[x] Guests can invite mutual friends"
  • gRegor Morrill: As of 2017-01-11, when I clicked the "Duplicate Event" button on one of my past, public events, the UI populated with all of the event's information, but defaulted to "Create private event." I did not notice that until after I had published the event. Private events cannot be switched to public, so I had to delete the event and restart.
    • On the second attempt, when I switched the toggle to "Create Public Event," it removed the event photo.
    • Additionally, when I changed the event start date, the start time field switched back one hour automatically.
Duplicate Event

Facebook has a feature to duplicate a previous event to partially automate creating a new event.

fb-duplicate-event-menu.png

Clicking "Duplicate Event" pops up the event creation UI with all of the information copied from the existing event.

fb-duplicate-event-ui.png

Google Calendar

Google Calendar has the ability to create an event from brief plain text like expressions like "Dinner tomorrow night" ‚ÄĒ need a citation / documentation of actual plain text expressions supported by Google Calendar.

Amazon Reviews

Amazon Reviews provides a UI to create reviews about products. It begins by prompting you to choose a star rating, and then progressively adds fields as you complete each step.

amazon-review-start.png

Brainstorming

Photo

Some of the above #IndieWeb_Examples have photo post creation UIs inline, typically as extensions to note creation UIs.

This section is for brainstorming about photo-centric creation UIs.

Brainstorming of UIs to create photo posts.

See: photo upload for the process/challenges of uploading a photo to your server.

UI flow

A possible UI flow for a low-perceived-latency photo post creation experience:

  1. user chooses photo to post. web app immediately starts uploading it to the server in the bg.
  2. user filters / crops the photo. web app captures the sequence of filter/crop instructions, and when the user is "done" editing, web app sends that instruction sequence to the server.
  3. server applies the filter/crop on its end
  4. user adds person-tags, text content (caption) etc.
  5. user taps "post" or whatever, and only that text is left to send, everything else is already at the server, and the post appears *immediately*

You could maintain the sequence of filter/crop instructions purely as CSS filter and crop (width, height, object-fit:cover, object-position) properties and values, using them to display the image clientside, and serve that CSS from the server to make people's browsers do that filtering/cropping for you so you don't have to actually use ImageMagick or other server-side image manipulation software.

Applying Filters

Here are some libraries/resources to apply filters to images:

The CSS Filter feature allows you to do all sorts of image manipulation effects on images:

See Also

Retrieved from "http://indieweb.org/create"
Personal tools
Namespaces
Variants
Actions
Recent & Upcoming
Resources
Toolbox