Craft your own website

From XPUB & Lens-Based wiki

Craf your own website (workshop poster).jpg

Craft your own website

"My favorite aspect of websites is their duality: they're both subject and object at once. In other words, a website creator becomes both author and architect simultaneously."

Laure Schwulst, 2018

MORNING

Intro

  • Who we are? Gossip round about websites.

Lucas and Balint graduated from ArtEZ Graphic Design. This is where we learned about coding website from scratch. We believe that sharing knowledge about technology empowers people who use these technologies. Knowing how to build a website can be a starting point to understand the internet as systems of infrastructures.

  • We keen on to know why did you sign up and what do you know about websites? Where do you learnd about it?

Neocities.org

History
The spirit of neocities.org comes from the 90's/2000's Geocities, which was a platform where people could craft their own website and share it with eachother. We can think of it neighbourhoods of websites link together in a loose manner, very much community oriented organisation.

Geocities was the third most visited website back then -> yahoo.com buys them -> death of Geocities in 2009 -> revive the spirit of geocities in 2013 as neocities.org initiated by Kyle Drake.

The spirit:

The death of Geocities.png

Cultural significance
It is not a coincidence that we are hosting this workshop at De Kurk - the local queer bar in Arnhem. There is an interestin connection to explore between physical queer places and neocities.org as a queer place for personal/individual websites.

"Building a site involves coding, but also creative strategy for page layout, image use, focal points, colour motifs and other decisions not too far off from curating a show, or designing a visual arts magazine, the difference being that no one decides how things look except for you."

" personalised sites, many users have used Neocities to house different parts of the art industry digitally, often promoting their zines, curating art in cyber galleries and sharing their portfolios"

" users are brought together through community ‘webrings’, small hyperlinked widgets attached to their pages."

Webrings

Before google's search engine there was a very different way to browes the internet. Webrings are a very apparent method of connecting websites together, like a ringroad in the neighbourhood.

"pre-Google days, search kind of sucked"

Commercialazation of the web creates certain ways of interctin with the web.

"users decided to self-organize their pages through lightly-organized “rings” that would lead users to pages on a similar topic. Having a link somewhere on your site that ensured users that your page was a way station in a series of pages on a similar theme."

"when the ring gets big enough—it becomes more and more difficult to keep the ring ‘intact’ when pages go down.”"

"Web ring is like sharing a cup of tea with a group of strangers who are batty about a favorite hobby"

Webrings vs. search engines.png

Let's break for lunch and browse neocities in the meantime.

AFTERNOON

Let's craft

Register a User

  • go to [1]
  • Fill in:
    • Your-Site-Name
    • Password
    • e-mail adress
    • confirm e-mail

HTML

HTML tutorial.png

CSS

Inspect element Take some time to browes and look around on other websites and try to apply CSS to your website.

WEBRING

Technical rider

Hardware

  • Laptops
  • HDMI Cable
  • Screen
  • Extension chord
  • Table for at least 10 people
  • Maybe separate extention for Display + our laptops
  • 1 shared laptop to type code on + to show
  • Internet connection

Software

Tutorials:

Resources:

Situating articles:

Net art examples:

SUMMARY

Hello here is the promised summary of our workshop from Saturday, reflections, next steps, and links for references , articles and help for coding. If you have any questions feel free to message here!

"Its nice to build websites and examine the reasons behind them because it gives purpose for making a website. By bringing in community as part of making my own website, a whole new world opened up what social media could be. :)"

Duvan's next steps:

  • linking pages for entries
  • blog post section
  • make it prettier

Kosta's next steps:

  • render icons and add links to them
  • text styling/ editing

Niels's next steps:

  • make a homepage that link to sub pages (own pages)

Jana's next steps::

  • put the word on different parts of the brain
  • make those words a link for a subpage
  • more fire!!! and chaos

Maei's next steps::

  • make a section for healthy recipies
  • subsection for :
    • breakfast
    • lunch
    • dinner


Linklist

This is the original workshop planning:

This is where i got my information about Neocities and some metaphores, they are really nice articles:

Introduction about neocities:

Websites / sources mentioned by participants:

Other explanations about the internet:

References for coding HTML / CSS:

From us:

External links if you have practical questions about HTML, CSS:

DEBRIEF

What went well?

  • It went well, that people who signed up they all came!!
    • not everyone came who signed up and some people were late a but we managed to channel them by giving a brief summary what we have done so far also gave a moment to briefly summarise what we have done and going to do
  • People with veeeeeeeery different background m wtih eeeeeven more divers level of knowledge about the internet
    • everyone who were there had fun despite the difference levels of knowlegde,
    • we should keeep it diverse!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    • how do we deal with different people want to do different thigngs on the website?
    • How do we teach them about teaching themselves ??? >> ERROR fixing focus
    • "Oh there is an error what do i do ??? "
  • the presentation of the neocities and the intro went really well.
    • Lucas wants to talk more >> B. says do your research babe
    • Situating into the hitory of the internet and cultural contex, we got feedback this gave purpose for making websites
    • people emphasised that the community aspect is very good
    • accidently we went off script and started explaining the history and just in the middle of explaining we reminded ourselves to do a round of intro whic acutally turned out good becaus people alredy relate to the context given.
    • is there something else how we can situate our workshop that it goes deeper >> yes pick specific tool or method we want to work with on that sess and do a research on that
    • maybe reuse indieweb principles
    • what are other contexts out there to explore?? >> selfhosting?
    • do we keep exploring specific cases or examples, also when everyone is going into their own direction with a website
  • communication with the kurk thumbs up
    • just opening time
    • we got a table arranged
    • there was a yoga session next to us
  • people were felt that they can ask questions altough we didnt communicate that explicitly
    • "oh yeah, i forgot" ~ Lucas
    • the atmosphere at the start was already very open, so if feel like we created a enviromnent where people felt safe enough to ask.
    • a brave space
  • the beginning of the day it was nice to give an outline what we are going to do
    • we didn't promise anything that we didn't complete, i think that's very important ~b, it's ok if we don't reach that point, that's ok. we're at least going into that direction.
    • no super concrete expected results (more like we're gonna learn about this, instead of you will have this by the end).
    • setting a tone in way that we are all in this together which opens up for mutual teachin moments
    • also that we didn/'t promise anything but that they will have sense of navigation how to do it, how to search for references themselves
    • most really enjoyed the background information (intro) at the start, with the added context
  • people around us were also interested there was a person who joined just because we were there
    • how would we deal with someone who's interested, but missed the beginning and also doesn't know anything yet?
    • we should have something like website where we put the next workshop time and we can reference for the peeps outside
    • we need a website for the workshop series
    • ical feed? +++
  • people were surprised at how much they learned
    • yes im not surprised , it seem that we did a lot and i think it is due to the good planning
    • i also think we estimated it good time-wise what we could fit in.
    • also that we went through the planning the day before which helped with the timing
  • people want to have a follow up, and left with more things they wanted to add to their website still.
    • the notes on the next steps at the very end is a good practice++++++++++++++++++
      • that's also nice to keep in future workshops (maybe we can ever start with looking at if people played around on their own, or changed anythign in the meantime, if we have recurring participants).
    • we got an invite from De KURK for a second iteration they are going pay our drinks
  • presentation moment in a form of webring!
    • next time we can use the random function so that we have a different starting person for the presentation moment.
  • it's nice that moment we started thinking together how to design, we taught each other (also participant to participant)
    • i think is due to how we introduced the workshop
    • the moments when we also got lost showed that we are all teaching eachother on the spot
    • maybe we can also spend some time learning inspect element, by (temporarly) changing each others websites.>> To learn from each other
    • collective debugging that we didnt, if we didn't know something then we could show them how we went about googling it.
      • what do we do if we don't have time to figure it out / it's too complex to cover? >> we have a signal group and fell free to send a message there !!!!>>>> COMMUNICATE
    • someone actually figured out on the fly how to do the background cover before us. >> EVERYONE CONFUSED BUT THE PERSONE SOLVES BEFORE US NICEEEE
      • we should also encourgage that, like try to figure stuff out if we're struggling, instead of just waiting for us.(was already happening)
      • encourage to try things out and break them,bump into errors
  • we didn't stumble upon anything that we couldn't adress, like if we came across a problem we'd just google it collectively and take the time to figure it out. >>
    • this add to the collective learning moment about how to navigate and how to find info about code
    • I really enjoyed drawing the internet and the ip adresses
  • signal group has established for future communication and debugging
    • sharing links and a summary after the workshop>>>> we still have to do that (might also be nice to put on the website)

What could be improved?

  • checking opening time of the cafe so we dont wait outside in the rain
    • start at 11.30
  • could've had more back-and forth (between us) agree DJ + explainer method (or asking each other questions without "DJing", so you pass explanations to the other person)
    • putting ourselves into the naive role and ask ""stupid"" questions
  • bigger screen!!!!! +++ HOW??? do they have screen? can we leave a screen there?
    • if we do more workshops, how often? once a month?
  • dry sockets xD
    • they have it, if we need special cables we can also leave them with the screen if needed.
  • didn't get to inspect element, and didn't cover syntax highlighting
    • yes and I think there could be a session just on that
    • introductio into text editors
    • B. proposes to to have the next session is about using text editor VS code
    • L. proposes to have the next session about inspect element, and looking at other people's source code (look at history of inspect element, and devtools in the browser)
      • B.
  • sometimes it's hard to find the right words to explain (topics that we didn't prepare), that's where balint felt less connected to the participants. WHen you couldn't find the word, you think out loud, and felt like he's overexplaining.
    • at the same time there were moments when improv turned out good and lets focus on those
    • explaining flexbox and divs was a strugle
    • i think with the explaining flexbox, it would've helped if we did that together, because then we can finish each others blocks.
      • if multiple people have the same problem/question, maybe bring it back to the group and discuss it with everyone
        • such as how to open in new tab.
        • could've also done it with flexbox, good to keep our ears open for each others explanations as well if we're helping people individually.
      • diring preparation, if we think we're got gonna get into a topic we should go over it again, and maybe perpare it just in case.
  • Practice to teach one person and let that person to teach others
    • Another practice to invole everyone into the collective editing by asking them to pick onel element to change and they have to tell the syntax and the steps
    • { outline: 1px solid red; }
    • view > page style > nostyle
    • stylus extention for custom css on pages
  • sometimes it was hard to talk over the noise and the music in the bar
    • maybe nexttime in the back
    • but ssaturdays the yoga is happening there
  • Lucas: forgot to take space sometimes, DJ + explainer method / asking each other questions
  • sometimes we both had a different interpretation of a question, and we'd both give a different answer.
    • mis interpreting the question
    • before we give an answer ask for clarification
  • Lucas: maybe I should've taken the lead a (tiny) bit more on the introduction part. I feel like balitn explained a lot there. do your research babe
  • messy moment: how do we disable CSS in inspect element.

view > page style > nostyle

    • proposal , we could have a session to look at major social media platforms in a plane html format or at least it is a good way to show that every website is the same at the core
      • we can also look into userstyles / custom css for third-party websites
      • wbesite customization session
  • there was some confusion around p tags
    • go into divs and color them, there's also css styles (external ones) that you can load in, and it'll give like an outline to each element.
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Craft_your_own_website&oldid=327796"