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.

Specific types of create UIs:

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.

FB activate create

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

FB Life Event

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

FB reselect status

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

Facebook-create-for-pages.png

FB create bgcolor

When creating from the home page instead of your profile (n.b. I found this true from profile also - Tantek Çelik), 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

FB create new feature

Sometimes Facebook adds a new feature to their create UI, and notifies you with a little blue mini-overlay:

2017-06-30-facebook-create-ui-new-feature.png

Facebook Events

Main article: create event:Facebook

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

For more details, including issues, duplicate event which itself can cause cryptic errors like "Something went wrong", "Warning Slow Down", and having events created despite error messages, see:

Google Calendar

Main article: create event: 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 "https://indieweb.org/create"
Personal tools
Namespaces
Variants
Actions
Recent & Upcoming
Resources
Toolbox