Blog Harricot

flora
webdev


WebDev-logboek — harricot.nl

Onderdelen - nu en straks

Oud & nieuw nieuws

NB 'Blogvolgorde'- de oudste inhoud staat onderaan!

  • Warande… De Oude Warande is verhuisd naar harriebaken.nl. Er zijn/komen vertakkingen naar de Lustwarandes, in de eerste plaats Lustwarande '15 en Luster '16. Daarna een paar pagina's voor de foto's die ik van de eerdere edities van 'Lustwarande' terug kan vinden. Waarschijnlijk ook de foto's die ik heb geparkeerd op Google Plus, want daar wil ik weg. Temeer omdat Picasa binnenkort door Google eigenhandig door de plee wordt gespoeld. Dat maakt godje Google er niet betrouwbaarder op. In 2016 was er tot eind oktober Luster 16, met klei en aardewerk als materiaal. Nee, er stonden niet her en der wat bloempotten. Integendeel, de meeste beelden waren geweldig.

  • Filosofie De afdeling filosofie is apart komen te staan. Ook splits ik die steeds meer op in uiteenlopende onderwerpen, bijvoorbeeld taal & denken, Chomsky, Simone de Beauvoir, anarchisme, en zoal. Ook komen er onderwerpen bij, zoals psychologie.

  • Flora Het merendeel van mijn foto's van planten e.d. van Google Plus verhuis ik naar hier, naar harricot.nl. Google Plus is tijdrovend, labiel en zeer vermoeiend voor het hoofd. De ellende is, in het kort: Google Plus zit vast aan Google Photos én aan Picasa Webalbums van ja… Google uiteraard, maar hoe die koppeling precies is? Ik kan het nergens vinden. En gooi ik ergens een foto weg, komt die daarna doodleuk weer terug! Om deze gek- en boosmakende chaos compleet te maken, heeft 'Google Plus' een 'klassieke' en een 'nieuwe' versie. Meestal is 'klassiek' een eufemisme voor 'verouderd', maar in dit geval betekent het: 'tenminste nog enigszins te volgen'. Tweewerf bah! Er deugt nog véél meer niet in die hoek, maar dat zou op een aparte pagina moeten komen.

  • Mail-art Staat op stapel. Ter voorbereiding heb ik al wat literatuur verzameld en poststukken opgeduikeld uit mijn verzameling.


Lustwarande, boekje bij Rapture & Pain, 2015

Lustwarande '15, Rapture & Pain
boekje bij de expositie

Wat nog te doen?

  • Studeren: responsive web design, html5, css3. En het uitstellen van het laden van de data die 'na de vouw' komen. Moeilijk gedoe vind ik dat. Had ik maar hbs-b gedaan.

  • Ontwerp maken: header, footer, hoofdkolom. Een of twee zijkolommen? Of geen? Misschien links een kolom voor de navigatie en de horizontale nav opheffen. Dat hangt vooral af van hoe het responsive gedoe in mekaar komt te zitten.

  • Modernizr, boilerplate, foundation en/of grid maken/regelen. Het zijn de rwd-onderdelen. (Twee weken later: ik ben op onderzoek uit geweest en denk dat ik bootstrap doe. Pak. Vat. Gebruik. Het zweet breekt me uit!  :)

  • Navigatiemenu's verbeteren, horizontaal(?) en verticaal. (Deels gelukt.)

  • font-family voor menu's. Compact (condensed) maar duidelijk. 'Open Sans Condensed' van Steve Matteson, misschien. (Gedaan.)

  • Favicons Voor Simone is er al een nieuwe. Dat was ook hard nodig, want de oude was bijna identiek met de standaard-avatar die Google aan YouTube-abonnees geeft. Dat is: één intiaal in het font Roboto.

    De nieuwe 'favicon.ico' voor Simone is gebaseerd op haar 'gezicht' op de afschuwelijke foto van het Sapi-bestuur in het studiejaar 2016/2017.

  • Standaardbullets voor de list-item vervangen, onder meer door ♦, ruiten; ♣, klaver; ♠, schoppen; ♥, harten. (Gedaan, maar hier en daar is het geen succes.)

  • Links De lay-out voor de links maken. Misschien de onderstreping slopen. Of die van Wired.com na-apen. Zowel gewone als bezochte als actieve links voorzien van een bepaalde, functionele kleur. Ook nog voor a:hover (= 'mouseover', dus met je tamme plastic muis erover, erboven bewegen). (Is nog steeds een puinzooi. 2017-10-22)

  • Leuke plaatjes Voor De Mensen, maar vooral voor mezelf! Dus vooral van wilde planten. (Het zal eens niet! Het was meteen al duidelijk door die eeuwige teunis, linksboven.)

  • Google Plus Het verhuizen of afdanken van de spullen die bij Google Plus staan, wordt steeds dringender.
    Panoramio wordt namelijk opgeheven. Sinds 4 november 2016 kun je op Panoramio je foto's niet meer aanvullen of bewerken. Na november 2017 kun je er niet meer bij.

  • Grijpt uw kans!
    De 26 foto's die ik vanaf oktober 2012 op Google Earth en Panoramio heb gezet kun je nog een tijdje zien en jatten op Panoramio - Photos by Harrie Baken. (Hou daarom altijd in je achterhoofd dat je maar beter onafhankelijk kunt zijn van de "gratis dienstverlening" van privébedrijven.)

    [Naschrift, april 2018] In het voorjaar van van 2018 is Panoramio uiteindelijk gestopt.

  • Contactformulier maken.
    Daarmee kun je gemakkelijk (flinke) bestanden (mee) sturen. En het maakt dan ook niet uit of je je eigen doos bij je hebt of een andere gebruikt.

  • Horizontal rules

    Alternatieve vormgeving(en) voor de horizontale lijn, de hr (horizontal rule). Af en toe maak ik er een, zoals die hieronder.
    De html-code is:

    <hr class="Strp1H" />

    en de css-code:

    
    hr.Strp1H
    {
    height:0px;border:0px;
    border-top:10px dotted #8dbc8f;
    margin:3em 4em 3em 1em
    }
    

    ('Strp1H' is de naam die ik de class heb gegeven en staat voor iets als: 'streep 1 voor de afdeling harricot'.) Het resultaat van deze combinatie van html en css is de nu volgende reeks lichtgroene bolletjes (dots):


  • Blokjes

    Eh… neen, dammit, in sommige browsers zijn het blokjes! Dit soort verschillen tussen de weergave van html door browsers waren er 15 jaar geleden bij bijna alle elementen en attributen. De laatste jaren is dat tijdrovende gedoe (want je moet het zelf oplossen) gelukkig zeldzaam geworden.

  • Bolletjes of blokjes

    Ik heb noch M$-Winloos noch Mac OS bij de hand, dus volgt nu een voorlopige inventarisatie.
    Fx 50.1.0/Linux bolletjes, Google Chrome 55.0.2883.87/Linux, blokjes, Opera 41.0.2353.69/Linux blokjes, Fx Linux 51.0beta/Android 6.0.1, bolletjes, Google Chrome 55.0.2883.91/Linux Android 6.0.1, blokjes, Opera 41.3.2246.112432/Linux Android 6.0.1, blokjes
    Bij vrienden, buren en bekenden heb ik af en toe mijn als bolletjes bedoelde 'dingen' bekeken, en de voorlopige conclusie is dat de browsers consequent zijn in hun weergave, ongeacht het OS waarvoor ze zijn geschreven.


Gereedschap

  • html5 Doctor - met onder meer een handige lijst van html5-elementen plus toelichtingen
  • Bruce Lawson - web developer, htlm5-specialist
  • HTML Symbols, Entities and ASCII Character Codes, zeer uitgebreide lijst #htmlentities
  • Html-entity's - uitgebreide lijsten #htmlentities
  • Lijsten met html-entity's in een pdf [357 KiB] #htmlentities
  • PageSpeed Insights - van Google #PageSpeed
  • Google Webmasters - onmisbaar (zoals het precies Google's bedoeling is, als je snapt wat ik bedoel)
  • Microsoft Bing - 'Hulpprogramma's voor webmasters' - leuk geprobeerd, niet onmisbaar  ;-) #Bing
  • IP List - zoek ip's op, ook CIDR's om een hele 'range' te blokkeren in de achterbuurten van de interwebs (zorg dat je weet wat je doet)
  • Bootstrap - 'HTML, CSS, and JS framework for developing responsive, mobile first projects'
  • Web technology for developers - MDN, Mozilla, html, css, JavaScript, Scalable Vector Graphics
  • Embedding - Instagram Developer Documentation
  • Wayback Machine van het Internet Archive - ruim 300 miljard opgeslagen webpagina's
  • 6 Ways to Save Pages in the Wayback Machine
  • WebPagetest - Laadtijd, snelheid, compressie, caching
  • Validator.nu - voor html5. Super de luxe! Hij geeft je (na het aanvinken van de betreffende 'options') ook een overzicht van afbeeldingen en hun alt-text én een schematische weergave van je paginastructuur, die zelden meteen al in orde is.
  • Web Developer - add-on voor Firefox - Zwitsers zakmes, een musthave #WebDeveloper
  • RGB Colors (WDG Group) - lijst met RGB-kleuren, kei-oud, gebruik ik al vanaf pakweg 1999 #RGB #kleuren #WebColors
  • Lorem Ipsum-generator - voor snelle bladvulling met potjeslatijn #LoremIpsum
  • glot.io - an open source pastebin with runnable snippets and API
  • The Open Graph protocol - enables any web page to become a rich object in a social graph - for instance, Open Graph is used on Facebook to allow any web page to have the same functionality as any other object on Facebook

❧ ❧ ❧

  MiniMenu

 Met de validator van W3C kun je deze pagina controleren op html-fouten, structuur en alt-text.