D3 les 05

Simplenews + Cron

Bij Simplenews hebben tot hier toe geen rekening gehouden met grote aantallen ingeschrevenen voor onze nieuwsbrief. Vanaf meer dan honderd leden, moet je eigenlijk al één en ander instellen.. Als je bij cron kijkt dan zie je standaard zo iets. Je ziet ook dat je een cron op afstand kunt uitvoeren. Als je dit doet, moet je gewoon de url plakken in een leeg tabblad. Kijk je dan naar de ververste pagina dan zie je dat inderdaad de cron werd uitgevoerd. Dit is interessant voor programmeurs die deze link via een programma kunnen oproepen.

De cron regelt taken van periodieke aard, zoals het indexeren van pagina's om het zoeken te vergemakkelijken, kijken naar updates,.. maar ook bvb het verzenden van mails voor een nieuwsbrief. Dit kan niet in één keer omdat je dan de server overbelast. Je moet dus deze verzending instellen als een cron (een test van de nieuwsbrief gebeurt zonder cron). In Drupal 6 moest je nog de module 'poormans cron' installeren om een cron te kunnen uitvoeren. Deze module is nu achterhaald en zit in de core. De ingebouwde cron is goed, maar kan bvb niet een taakuitvoeren elke 5 minuten. De minimum tijdspanne is 1 uur. Lastig als je 1000 nieuwsbrieven moet verzenden.

Ultimate Cron

Deze module zorgt er voor dat je de cron veel beter kunt instellen.

Als je deze module verkent dan zie je tal van crons waar je misschien geen weet van had. Je ziet hier dat er om de 15 minuten een update is van de indexes. Omdat ik simplenews heb geïnstalleerd zie je ook dat de wachtrij van de nieuwsbrieven ingesteld staat.

Ik heb daarvoor niet de standaard regeling genomen. 1 minuut vind ik te kort, 15 te lang.

Ik kies voor de crontab.

Hoe je dit invult...Bekijk aandachtig onderstaande print. Als je een getal invult zal dit uitgevoerd worden als het tijdstip is gekomen. vb 5 * * * * zal om 5 minuten na het uur uitgevoerd worden.vb 9.05, 10.05,.. De '/' is een jokerteken om dit te herhalen. Als je met de muis over de cronjob gaat zie je voor wanneer de nieuwe taak gepland staat. Speel daar eens mee.

Je kunt ook via de CPanels een cron uitvoeren. Je ziet dezelfde instellingen als bij onze ultimate cron.

Je moet dan wel weten wat je moet invullen. Ik verwijs hier naar het internet waar je volledige handleidingen vindt hoe je iets moet instellen. Aangezien wij ultimate cron gebruiken stel ik voor om hier niet dieper op in te gaan.

Sommige hosting hebben niet graag dat je hun servers zwaar belast. In dit geval kan je beroep doen (tegen betaling) om bvb je nieuwsbrieven te laten verzenden. Elastic mail is zo'n firma. Er is zelfs een drupal module om dit in te integreren. https://www.drupal.org/project/elastic_email

Simplenews Content Selection

Met deze module kan je een nieuwsbrief maken met de inhoud van een node of een view. Voor de view moet je ook VBO (views Bulk Operations) installeren.

Als je bij de instellingen kijkt is onderstaande weergavemodus zeer belangrijk. Hiet bepaal je wat je in je nieuwsbrief gaat te zien krijgen. Standaard staat dit op SCS en krijg je slechts een link!

Zo kan je nu via inhoud=>Newsletter creation ( de s zijn ze vergeten) selecteren wat je wil opnemen in je nieuwsbrief.

Maak een newsletter.

We kiezen voor Drupal 3 en nu zie je dat er een nieuwsbrief klaar staat waar de inhoud reeds werd in geimporteerd.

Bij views is het wat complexer... maak een view aan type tabel. Kies bij de velden zoals wordt getoond. Meer velden heeft geen zin! De isntelling van hierboven overruled alles.

Bij de instellingen van het veld kies je voor newsletter. Merk de vele mogelijkheden op.

Selecteer wat je wilt opnemen en klik op uitvoeren:

Je kunt daarna nog de volgorde wijzigen. Je krijgt dan enkel de titels te zien. Geen paniek, de view zal de globale instelling volgen.

Hier een stukje van de view in de mail die werd verzonden:

Laat ons tenslotte nog eens kijken naar VBO. Bij structuur vind je de mogelijkheid om sommige zaken zoals bvb views te exporteren naar een module. Een soort features voor views. (Dit heeft niets te maken met Simplenews)

Responsive design

We gaan een belangrijk onderwerp behandelen. Toekomstige sites zullen responsive, adaptive en fluid moeten zijn. Dit wil zeggen dat al naar gelang het scherm (smartphone, tablet, PC) je toch een aangename manier hebt om de inhoud te bekijken.

  • Responsive: de inhoud en figuren pasen zich procentueel aan. Blokken komen onder elkaar te staan als er plaatsgebrek is.
  • Adaptive: zorgt er voor dat er nieuwe objecten ontstaan bij plaatsgebrek. Bvb de horizontale menu wordt een verticale met nieuwe knoppen.
  • Fluid: krijg je als je met kolommen werkt. als er één kolom geen inhoud bevat, dan zal de buurkolom breder worden.

Zoals gewoonlijk werken we een case uit. ik heb deze keer gekozen voor een vergelijking van de drie belangrijkste CMS'sen: Drupal, Joomla en Wordpress. De inhoud komt van Wikipedia.

Maak volgend inhoudstype aan:

De weergave wordt met classes bepaald.

En geeft dit resultaat: (voor Drupal)

Als je dit test in het Danland thema, dan zal dit een teleurstelling worden. Danland is niet Responsive en Adaptive. Je zou via veel CSS dit kunnen aanpassen. waarom zouden we echter geen thema gebruiken die wel alle kwaliteiten in huis heeft.. Adative them vna Drupal is zo'n thema. Zowel responsive, adaptive. Fluid heb ik nog niet getest..  Er is ook een subthema bij. Drupallers komen met hun CSS niet graag aan het origineel thema en doen de wijzigingen in een subthema, dat bij upgrades buiten schot blijft. Wij hebben daar echter geen last van omdat we de CSS injector gebruiken. In deel 3 gaan we wel werken met subthema's..

Het Adatiptive theme is knap, maar is zo basic dat we het als basis gaan gebruiken voor een meer gebruiksvriendelijk thema 'SKY'. Zet dit thema actief voor het  CMS inhoudstype.

 

Bij de instellingen zie je één van de meest uitgebruide interfaces die ik ken voor Drupal thema's. Je ziet duidelijk de drie layouts met hun instellingen én ook (zeer belangrijk) Panels!

Er is ook een mogelijkheid om CSS toe te passen via deze gebruiksvriendelijke interface:

 

Als je vindt dat het lettertype te groot is:

Als je nu het SKY thema nu op je inhoud los laat, zie je ook het adaptive karakter. Er is een nieuwe knop menu bijgekomen.

Onze classes werken nu wel responsive:

Je kunt nu ook een view maken met panes (panelen).

De paneelvelden zie je zoals vroeger:

Er is echter een mogelijkheid bijgekomen bij de indeling:

Vanaf nu zullen je views er anders gaan uitzien. Je zet alles op de plaats die jij wilt én het is geschikt voor elk scherm.

Tenslotte kan je het zelfde doen met panelen. Zij hebben dezelfde keuzemogelijkheid.

Ik laat dit als oefening over aan jullie. Maak voor de full inhoud een paneelversie, volgens de nieuwe normen.

 

 

Image effects

Op het net zijn er talrijke voorbeelden beschikbaar van effecten toegepast op afbeeldingen, menus, ....  Op http://tympanus.net/Tutorials/OriginalHoverEffects/index.html kan je daar enkele voorbeelden van zien. Surf maar eens op hun site om andere effecten te ontdekken. Het is belangrijk om te controleren dat de effecten multibrowser zijn. Zeker in combinatie met javascript is dit niet altijd zo.

De image effecten beginnen sterk aan belang te winnen, omdat ze een mooie presentatie geven van afbeeldingen. Webshops maken er ook meer en meer gebruik van. De manier om dit te implementeren is nagenoeg dezelfde voor elk effect. Vandaar dat ik met één uitgewerkt voorbeeld een gans gamma voor je open. Ik merk wel op dat dit een niveau 5 is qua moeilijkheid.

We gaan een foto overzicht maken met een view:

die per foto een effect vertoont. Je ziet bij hoveren de titel, een stukje uit de body en een knop om naar de inhoud te gaan.

Live Demo

Je kunt op hun site ook een demo zien en de bijhorende code met bestanden downloaden. Waarvoor dank.

Als je nu op een indexpagina klikt zie je lokaal al dat het werkt. Test dit uit. Hoe ga je dit nu online zetten?

1e methode: het klakkeloos overnemen van de code

Daarvoor zouden we moeten we de mappen uploaden naar onze sitesmap. We maken dan een basic page pagina aan, waar we php als tekstmodus nemen. Deze mogelijkheid moet eerst als kernmodule geactiveerd worden.

Daarna moet je alle links in je pagina naar de betrokken mappen verleggen. Ik heb dit bvb uitgewerkt voor een soort 3D effect (jammer genoeg niet goed werkzaam in IE): http://drupalsnelcursus.be/demo/javascript/3D

Je begrijpt echter dat dit er hier geen integratie is in Drupal. Er zijn geen velden, geen inhoudtypes,...Stel je voor dat je bvb een webshop hebt, waar je voor elk artikel een nieuwe pagina zou moeten maken...

2e methode: integratie in Drupal

We maken een inhoudstype aan met een zestal nodes, telkens met een foto. Je kunt gebruik maken van de images die meegeleverd werden uit de download. Daarna gaan we een view maken om deze foto's te tonen.

De lees meer tekst heb ik vervangen door een afbeelding met een link. ik heb een figuurtje vna het net gehaald.

<img alt="" src="/demo/sites/default/files/more_icon.png" style="left:45%;height:34px; width:34px" />

Je krijgt dit voorbeeld als resultaat:

We kopiëren nu de CSS (hier is er geen javascript) naar de CSS injector en passen dit toe op onze view. Ik heb hier en daar al iets gewijzigd omdat ik het mooier vond... De CSS die ik gebruik staat hier onder.

.links_uitlijnen{
display:block;
float:left;
}

.view {
    /*width: 300px;*/
    height: 200px;
    /*margin: 10px;*/
    margin: 10px 5px 10px 5px;
    float: left;
    /*border: 10px solid #fff;*/
    /*overflow: hidden;*/
    position: relative;
    text-align: center;
    /*box-shadow: 1px 1px 2px #e6e6e6;*/
    cursor: default;
    /*background: #fff url(../images/bgimg.jpg) no-repeat center center*/
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}
.site-footer{
display:none;
}

Je zult zien dat er nog niet gebeurt. Logisch de CSS is wel al aanwezig, maar de classes zijn nog niet toegekend.

Om te zien wat er aan wat meot gekoppeld worden kijken we aandachtig naar de code die in de index.html pagina wordt getoond:

We zien dat er een class view en view-first rond elke figuur staat en dat de tekst de klasse mask toegekend krijgt. OK. Hoe pas je dit nu toe op je Drupal view? Wel omdat je in een view de inhoud kunt herschrijven, kom je in een codeveld terecht, waar je gelukkig ook nog de tokens kunt gebruiken. Herschrijf het laatste veld. Je kunt niet herschrijven met een veld dat lager staat. Vergelijk eens onderstaande print met bovenstaande print. Zie je hoe ik de structuur behoud?

Tenslotte moeten we ook nog bij de instellingen van de onopgemaakte lijst, de klasse toekennen. Blijkbaar is de container (waar de figuren in zitten) ook van belang.

Views bieden dus de mogelijkheid om door te herschrijven een combinatie te maken van Drupal, met zijn flexibele instellingen, en de stugge HTMLcodes die verwijzen naar de classes.

Om hetzelfde bij nodes te doen is andere koek. Bij nodes kan je wel classes toekennen bij de weergave met de field formatter class module. Zeker het proberen waard, maar dit laat ik het aan jullie over...Ik vrees dat geneste divs niet echt tot de Drupal flexibiliteit horen.

Oefening:

ga naar http://css3.bradshawenterprises.com/flip/

en maak dat er bij het hoveren een andere foto verschijnt. Deze overgang gaat via een mooi transform effect. Je ziet de foto draaien. Deze toepassing kan gebruikt worden in webshops waar je vóór- en achterkant van kleding kunt tonen. Je kunt ook tekst laten verschijnen ipv een foto.