Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Datumbereik

Categorieën

AND

Onderwerpen

AND

Subforum

Topicstarter

Topicstatus

62 topics - Pagina 1 van 3

Embedded video player html5?

15-10-2015 discussie 7
Hallo, ik wil een html5 video player maar op deze manier:
Ik wil dat als je op de source klikt dat je dan een popup met een video player krijgt die de source afspeeld.

Grid met 35k cellen en performance issues

15-03-2015 discussie 19
Bij het verdelen van medewerker uren over activiteiten/projecten is het krijgen van overzicht best lastig. Ik gebruik daar enige tijd een Excel document voor, op zich werkt dit prima, echter loop ik ook geregeld tegen bepaalde problemen aan. De ins en outs zal ik nu even laten voor wat het is, want dat is voor deze post niet zo belangrijk. Om deze problemen het hoofd te bieden ben ik dit weekend aan de slag gegaan om een variant te maken in een .NET webapplicatie. Niet alleen leerzaam, ook nog eens praktisch :-)

De gekozen oplossingsrichting is een tabel met verticaal de activiteiten en horizontaal de medewerkers. Door gemiddeld een 150-200 medewerkers en 150-200 activiteiten komt de tabel grofweg op 35000 cellen. Het op het scherm slingeren van deze cellen is dan ook het hoofdprobleem:De pagina wordt al snel 500kbyte groot Het initieel renderen van 35k cellen Het scrollen gaat met hoten en stotenZoals gezegd dit weekend heb ik besteed aan een eerste versie. Deze is nog niet interactief en voorzien van uitgebreide opmaak. Linkje: http://leosiepel.nl/t/test.html


Naast algemene tips voor cosmetische en technische verbeteringen heb ik concreet twee vragen:Voor het scrollen maak ik nu gebruik van een tabel die achter een div valt en met jQuery en scrollLeft / scrollTop heen en weer geschoven wordt, dit hakt, is er een beter mechanisme? Met enkele optimalisaties is het me gelukt om het HTML-bestand van 4MB naar 450KB te verkleinen, zien jullie nog verbeteringsmogelijkheden?

Geen margin aan linker- en rechterkant.

05-11-2014 discussie 9
Beste Forumleden,

Ik hoop dat iemand mij kan helpen met het volgende probleem. Ik had een plugin geinstalleerd met om je site mobiel te krijgen. Alles werkt perfect alleen de homepagina krijg ik niet aan de praat. Ik heb het er toen maar via een html code (die plugin heeft deze optie)ingekregen, alleen het probleem is dat ik dus nu geen ruimte aan de linker- en rechterkant op de gebieden waar tekst staat. Welke html code kan ik gebruiken zodat ik aan de linker en rechterkant ruimte overhoudt? Mijn website is *niet relevant* (het gaat dus alleen om de mobiele weergave)



alvast hartelijk bedankt voor de tips!

groetjes,

Contra33

Een beginnende Ontwikkelaar/Developer Tips/Tricks?

21-05-2013 discussie 1
Beste mensen,

Ik ben "Dommejongen", 20 jaar oud (voel me 30), woon in Amsterdam en ga binnenkort na de zomervakantie een nieuw opleiding volgen voor Applicatie Ontwikkeling. Het bouwen van Website en Apps.

Omdat ik nu nog relatief nieuw ben in dit vak, vroeg ik mij af.. Of jullie misschien tips/tricks hebben om mij kennis "beter" te vergaren?

Ik weet de kleine basis dingen van HTML/CCS, JavaScript, PHP, en MySQL, maar dat was meer kopieer/plak werk. Ik zou graag vanaf de begin willen beginnen, maar weet me god niet waar ik moet beginnen.

Alvast hartelijk dank voor jullie steun en hulp.
@: Moderator, ik weet niet exact of ik hier dit kan vragen, alvast excuses als ik het fout heb gedaan.

Groetjes,

Dommejongen

Background onzichtbaar op WebKit gebaseerde mobiele browsers

17-04-2013 discussie 11
Ik heb een (in mijn ogen) simpele webpagina. Iets wat gewoon een tijdelijke placeholder dient te zijn voor een een site die later ingevuld wordt.

Dit werkt op mijn desktop op de laatste versies van IE, Chrome en Firefox en op mobiele telefoons werkt het prima op iOS en Windows Phone.. Dan komen we bij Android aan. De standaard mobiele browser werkt prima. Heeft men echter Chrome of Opera geïnstalleerd gaat het mis; men krijgt gewoon een lege pagina.

Iemand een idee wat ik verkeerd heb staan in m'n code?

.
HTML: index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <title>Ga eens eerst genieten van jullie huwelijksreis?!</title>
        <style>
            html, body
            {
                background-image: url("gfx/bg.png");
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center bottom;
            }
        </style>
    </head>

    <body>
    </body>

</html>

HTML5 Shoutcast player

13-02-2013 discussie 2
Voor een hobbyproject heb ik een Shoutcast-server geprogrammeerd. Voorheen speelde ik de stream af met een fat-client (Winamp, VLC, ...) Maar sinds VLC geen shoutcast meer speelt out-of-the box, heb ik een Java-applet gemaakt die de shoutcast-stream kan afspelen. Dit stukje Java speelt de stream af over de geluidskaart, extraheert metadata uit de stream, en geeft dit in het browservenster weer, evenals een plaatje van het huidige liedje (à la Soundcloud).

Nu is er een hoop gedoe met Java-Applets de laatste tijd. En bovendien zijn applets sowieso een verouderde technologie. Soundcloud gebruikt flash, zover ik weet. Flash programmeren heb ik nog nooit gedaan. Ik heb eens de ontwikkelstudio geïnstalleerd, en was er danig van geïntimideerd. Ik zou deze funtionaliteit dus graag met html-5 willen vormgeven.

Wat ik van jullie graag wil weten: is het uberhaupt mogelijk om met de html-5 audio-tag een shoutcast-stream (= een mp3-stream met elke x bytes metadata) af te spelen? En kan ik dan met javascript op de één of andere manier de metadata uit die stream extraheren? Heeft iemand voor mij de juiste sleutelwoorden, of wellicht een voorbeeld site, waar ik de kunst kan afkijken? Mijn hobbyproject is opensource, dus een eventuele oplossing voor mijn probleem komt automatisch tot ieders beschikking.

meerdere canvas meerdere plaatjes

31-01-2013 discussie 27
Hallo Tweakers,

Ik ben fotograaf en heb een flash website (*snip* spam). Met de uitfasering van flash probeer ik al weken alles om te zetten naar javascript en html5.

In de code hieronder wordt wordt een array geladen met daarin de urls van de plaatjes. De code werkt prima met de <img> tag. Het probleem met de <img> tag is dat mijn werk makkelijk te kopiëren is. Om dat te voorkomen wil ik ieder plaatje in een canvas zetten.

Het probleem met onderstaande code is dat ik de plaatjes allemaal kort eventjes zie, maar alleen het plaatje in het laatste canvas blijft staan. Kan iemand mij richting de oplossing sturen.
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function loadImages(arr, i)
{
    img = new Image();
    img.src = arr[i];
    img.onload = function()
    {
        var dim = resizeSlides(img, window.innerWidth, heightCorrected);
        
        document.getElementById("holder").innerHTML += '<canvas id="loadedimg' + i + '" width="'+ dim[0] + '" height = "' + dim[1] + '" style="position:absolute;left:' + startPos + 'px;border:solid 1px #000000;">Your browswer does not support Html5 canvas</canvas>';
        imgCanvas = document.getElementById("loadedimg" + i);
        
        context = imgCanvas.getContext("2d");
        context.drawImage(img,  0 , 0 , dim[0] , dim[1]);
        
        //document.getElementById("holder").innerHTML += '<img src="' + img.src + '" id="loadedimg' + i + '" onclick="clickSlides('+ i +')" width="' + dim[0] + '" height="' + dim[1] + '" style="position:absolute;left:' + startPos + 'px;" />';
        
        startPos = startPos + dim[0] + 5;
        if( i < arr.length-1 ){ loadImages(arr, i+1);};
    }
};

Interactieve animatie, wat zijn de alternatieven voor Flash?

28-01-2013 discussie 6
Het internet landschap is flink veranderd de afgelopen jaren en daarmee ook de manier waarop je dingen doet. Nu kreeg ik van een kennis de vraag wat er mogelijk is naast Flash. Hij was met iemand een animatie aan het maken, namelijk een overzicht van leidingen waar water doorheen stroomt. Daarnaast moeten er wat knopjes zijn voor verschillende situaties. Deze animatie wilde hij graag op z'n website weergeven, maar als er Flash gebruikt word is de animatie meteen niet zichtbaar voor iOS gebruikers.

Zelf weet ik dat het mogelijk is met HTML5 canvas en JavaScript om interactieve animaties en zelfs games te maken. Maar dat gaat weer niet werken in Internet Explorer 8 en lager, dus wat zijn de alternatieven?

- Flash: Werkt niet op alle (mobiele) platformen
- HTML5/JS: Geen support voor IE8 en lager
- ...?

[HTML][PHP] a href dupliceert zich in onderliggende elemente

13-11-2012 discussie 4
Probleem is opgelost, het lag hem bij de a tag binnen de a tag, te zien op regel 19


Ik ben bezig met een foto-album waar een thumbnail van de foto te zien is (op dit moment gewoon geschaald) om de volledige div zit me a href naar een lightbox (versie 2).

echter dat de a alleen om de div heen zit gaat die ook om alle elementen zitten (fysiek, de link zelf is wel gewenst) met als resultaat dat 1 foto ongeveer 6 keer terugkeert in me lightbox fotoalbum

zelf heb ik bij eerdere site's gezien dat dit wel gewoon zou moeten werken zoals ik het nu wil hebben
(één enkele a die alleen inliggende elementen een href geeft)

ook een display: block; heb ik geprobeerd (werd aangeraden bij soortgelijke problemen) maar ook dit had geen effect.

plugins/library's die draaien op mijn site zijn jQuery, lightbox 2 en GoogleAnalytics
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
    $fotos = $this->fotos;
    foreach($fotos as $foto):
    ?>
        <section id="header"  style="background-image: url(<?php echo $foto->filepad; ?>); background-position: 0 400px;"></section>
    <?php
        break;
    endforeach;
?>
<section class="content">
    <section class="links">
        <?php foreach ($fotos as $foto): ?>
            <a href="<?php echo $foto->filepad; ?>" rel="lightbox[outerlink]">
                <div>
                    <article class="foto">
                        <h1><?php echo $foto->titel; ?></h1>
                        <img src="<?php echo $foto->filepad; ?>" width="244" height="115" title="<?php echo $foto->titel; ?>" alt="<?php echo $foto->titel; ?>" />
                        <footer>
                            <a href="<?php echo $foto->filepad; ?>" rel="lightbox[innerlink]" class="link">Bekijk het origineel</a>
                        </footer>
                    </article>
                </div>
            </a>
        <?php endforeach; ?>
    </section>
</section>

Windows Zoom Functie - YouTube Bug

07-08-2012 discussie 2
Hallo Tweakers,

Nadat ik een vers PC'tje heb gebouwd met o.a. een i7 en Windows 7 Professional 64 Bit kom ik voor een probleempje te staan. Ik heb de computer op een 46" TV aangesloten dus logischerwijs is alles slecht te lezen. Nu heeft Windows een Zoom functie (Configuratiescherm -> Vormgeving en Persoonlijke instellingen -> Beeldscherm), als ik deze op 150% zet dan geeft Windows al aan dat niet alles meer goed zal werken. Als ik hierna YouTube open in Google Chrome (die geheel up-to-date is) en de video op Fullscreen zet dan kom constant de startbalk voor de video, en deze krijg ik niet weg.

Is er een manier om dit toch werkend te krijgen? Als ik de Zoom op 125% zet dan werkt hij namelijk wel perfect! Helaas zijn de letters op de TV dan nog steeds niet goed leesbaar, bij 150% wel.

Alvast bedankt!

ObAt

Chrome video ruist

05-06-2012 discussie 4
Ik ben een aantal films aan het converteren naar MP4 formaat om deze met de videotag die html5 biedt af te spelen op een webpagina. Nu is het converteren gelukt en wordt deze perfect afgespeeld in Internet Explorer 9 wanneer ik deze stream vanaf de website.

Nu is het probleem dat wanneer ik de site open in Chrome, deze de video juist weergeeft maar dat het geluid gewoon compleet weggevallen is en er een lange harde ruis voor in de plaatst is gekomen.

Maar nu komt de mysterie:
Wanneer ik dezelfde video direct in Chrome sleep, is het geluid perfect. Rara hoe kan dit?

web-app voor iPhone en Android OS

15-05-2012 discussie 4
Hallo,

ik ben momenteel bezig met mijn afstudeerproject waarbij ik een concept voor een mobile-app moet vertalen en presenteren naar een demo. Programmeren is te hoog gegrepen, maar html5 lukt me aardig dus ik wil graag een werkende web-app maken. Helaas heb ik geen ervaring op het gebied van web-apps, wie zou me een beetje op weg kunnen helpen?

Ik heb tot nu toe ook nog geen html5 mobile template kunnen vinden die meer biedt dan alleen basis code. Een alternatief is ook welkom!

Vraag over Forms

16-04-2012 discussie 2
Beste tweakers,

Ik ben sinds kort bezig met het leren van HTML5 en ben nu bezig met het maken van een formulier. Ik heb hier een deel van het formulier waarbij er een keuze moet worden gemaakt:
code:
1 2 3 4 5 <p><label for="stageofproject">Ik wil mij aanmelden:</label> <select id="stageofproject"> <option>Voor een project</option> option>Als stagebedrijf</option> </select></p>
De gebruiker maakt dus de keuze uit "Voor een project" of "Als stage bedrijf". Nu is mijn vraag of het mogelijk is om een nieuw form te laten verschijnen als de gebruiker een keuze heeft gemaakt. Dat formulier moet dan eronder verschijnen. Is dit moeilijk om te maken? Hoe maak dit?

Bedankt!
Kratos

Presenteer.js : CSS3 HTML5 presentatie tool zoals Prezi

30-03-2012 discussie 4
Ha allemaal,

Hierbij wil ik graag introduceren: Presenteer.js voor Chrome en Firefox!

Het is een Presentatie tool zoals Prezi, maar een stuk flexibeler, in HTML5/CSS3 en Open Source op Github. Het doel is dat je eenvoudig een HTML pagina kan bouwen en dan een rij elementen kan aanduiden die een presentatie vormen: Presenteer.js plaatst steeds (met een mooie CSS3 transitie) het gewenste element in de viewport.

Je kan ook verschillende presentaties op 1 pagina draaien, en zelfs aan elkaar koppelen. Zie onderaan de projectpagina voor een voorbeeld.

Mocht je het gebruiken voor een presentatie, dan is een berichtje leuk Kan ik het opnemen in de "Presenteer.js wordt gebruikt op" sectie.

[htm5] Graag feedback op mijn gebruik van semantiek

17-03-2012 discussie 1
Ik ben een site aan het bouwen en ga voor het eerst gebruik maken van html5. Logischerwijs heb ik mij hierin verdiept en omdat ik dit niet professioneel doe zou ik graag feedback willen. Ik vind mijzelf iets bijbrengen niet erg, maar ik vind het vervelend dat ik nooit feedback krijg, ik blijf namelijk twijfelen of ik het correct doe. Mocht je tijd en ervaring hebben met html5 dan zou ik het tof vinden als je me van feedback wilt voorzien! Uiteraard zal ik je credit geven als alles af is door je te vermelden in mijn humans.txt.

Ik bouw mijn site eerst statisch en daarna ga ik er een WordPress theme van maken. Dit meldt ik even voor het geval je vraagt waarom iets een bepaalde class heeft. Ik zal alleen markup posten die voorkomt tussen de body tag. Mocht ik iets vergeten zijn dan hoor ik het graag, ik zal mijzelf dan verduidelijken. Ik zal beginnen met de blog listing.

Blog listing:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<body class="blog">

  <div id="page-wrapper">

    <header id="main-header">
      <h1>Site Title</h1>
    </header> <!-- #site-header -->
      
    <nav id="main-nav">
      <ul>
        <li id="current-page"><a href="#">Blog</a></li><li><a href="#">Archives</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>
      </ul>
    </nav> <!-- #main-nav -->
      
    <section id="main-content">
      <article class="entry-content">
        <header class="entry-header">
          <h1 class="entry-title"><a href="#">Entry Title</a></h1>
          <ul class="entry-meta">
            <li><time datetime="2000-01-01">DAY, YYYY-MM-DD</time></li>
            <li><a href="#">Category A</a></li>
          </ul>
        </header>
        <p>
          Article text here.
        </p>
      </article> <!-- .entry-content -->
    
      <article class="entry-content">
        <header class="entry-header">
          <h1 class="entry-title"><a href="#">Entry Title</a></h1>
          <ul class="entry-meta">
            <li><time datetime="2000-01-01">DAY, YYYY-MM-DD</time></li>
            <li><a href="#">Category A</a></li>
          </ul>
        </header>
        <p>
          Article text here.
        </p>
      </article> <!-- .entry-content -->
    </section> <!-- #main-content -->
    
    <footer id="main-footer">
      <p>&copy; 2010&mdash;2012 <a href="#">Author</a></p>
      <p class="rss-feeds"><a href="#">Entries RSS</a> <a href="#">Comments RSS</a></p>
    </footer> <!-- #main-footer -->
  </div> <!-- #page-wrapper -->
</body>

Frontend development resource website

12-03-2012 discussie 1
Ik heb een vraag voor mijn mede frontend developers.

Op het gebied van frontend development resource websites ben ik wat informatie verzamelen en interesse aan het peilen.

Zelf merk ik namelijk dat de resources op frontend gebied een beetje her en der verspreid staan. Voor bv. javascript kan je het beste bij site X zijn, voor css bij site Y en jquery bij site Z.

Nu is mijn vraag: vinden jullie dat dit beter kan? Zo ja, is er interesse in een nieuwe community website, voornamelijk gericht op frontend developers, gefocused op nieuwe technieken, resources, voorbeelden, etc.?

8 divs naast elkaar, 2 uitvullend

11-03-2012 discussie 15
Ik wil een website ontwerp volgens onderstaande afbeelding:



De 2 gele divs moeten van gelijke grootte zijn en zorgen dat het geheel in de breedte van het browser venster uitgevuld wordt.

De overige divs hebben een vaste breedte.

Nu heb ik vele voorbeelden op internet gevonden, maar niets wat mij helpt met mijn ontwerp. Ik heb tot nu toe het volgende, echter daarna loop ik vast:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">


Body {
    margin: 0px 0px 0px 0px;
    }

#main {
    min-width: 700px;
    margin:0;
    padding:0;
    background-position: top center;

}

#left-side-outer {
    width:50%;
    float:left;
    margin-right:-50px;
    min-height: 100px;
}
#left-side{
    margin-right:50px;
    background-color: #FF9900;
    min-height: 100px;
}
#center-column {
    width:100px;
    float:left;
    color: #FFFFFF;
    background-color: #000000;
    position:relative;
    z-index:10;
    min-height: 100px;
}
#right-side-outer {
    width:50%;
    float:right;
    margin-left:-311px;
    min-height: 100px;
}
#right-side {
    margin-left:310px;
    min-height: 100px;
    background-color: #FF9900;
}
#header{
    clear:both;
    height: 100px;
    text-align: center;
    background-color: #CC0000;
}
#left {
    float:left;
    width: 260px;
    height: 200px;
    text-align: center;
    background-color: #00aa00;
    }
</style>
</head>
<body>
<div id="header"></div>
<div id="left"></div>
<div id="main">
    <div id="left-side-outer">
        <div id="left-side">
        </div>
    </div>
    <div id="center-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div id="right-side-outer">
        <div id="right-side">
        </div>
    </div>
</div>
</body>
</html>
De oplossing met negatieve margins en width 50% geeft met een div aan de linker zijde gelijk een probleem, dat namelijk het rechter gele vak niet gelijk is aan het linker gele vak. Tevens moeten er dus nog 4 smalle divs bijkomen. (In bovenstaand voorbeeld worden andere breedtes gebruikt als in het definitieve ontwerp)

Wie kan mij verder op weg helpen?

Winkelmand toevoegen aan statische website.

09-03-2012 discussie 5
Ten eerste ik hoop dat ik hier in het goede forum zit. Kwam er met het 'Waar hoort mijn topic?' niet helemaal uit.

Samen met een vriend spelen we al een tijdje met het idee om iets voor onszelf te gaan doen. Onlangs kwamen we in contact met een leuk product. Hebben dus maar besloten gewoon in het diepe te duiken en willen dit in het oranje naar Nederland halen. Met het oog op het aankomende EK is er echter haast bij gemoeid.

De bedoeling is om het primair via het internet te verkopen. Het is een simpel product in 3 varianten. Een volledige webshop is dus echt overkill. Veel meer dan een net formulier met een goede ideal koppeling is al genoeg voor de front end en in de backend willen we natuurlijk de voorraad en bestelling goed kunnen regelen.

Nu is dit allemaal goed mogelijk binnen bestaande cms systemen. (Opencart, Prestashop, oscommerce, drupal en weet ik veel wat nog meer) Of diensten als shopify en bigcartel. De laatste hebben meestal als nadeel dat je de boel behoorlijk uit handen geeft, wat zonde is aangezien ik prima in staat ben zelf de website te bouwen.

Een statische website maken lukt mij heel goed, html en css zijn als m'n moedertaal. Zodra het dynamischer wordt krijg ik echter al snel pijn aan m'n hoofd.

De meeste cms systemen die ik ken en uitgeprobeerd heb zijn ten eerste heel geavanceerd en zijn meer toegespitst op grotere webwinkels met veel categorieën etc. Dat is op zich nog wel te overkomen. Het grootste probleem heb ik met het feit dat het cms de basis is dat je naderhand naar wens kunt aanpassen.

Eigenlijk wil ik het juist andersom doen. Dat ik zelf gewoon een nette statische website maak. En vervolgens d.m.v. een bestaande oplossing een winkelmandje en betaalopties toevoeg. (Graag met opties voor couponcodes) Wat is hier in jullie ogen de beste (betaalbare, of nog liever open source) oplossing voor?

[WiP][web] Project Webdesign (1Ba IT)

03-03-2012 discussie 0
Hallo allemaal!

Achtergrondinfo
Voor het vak webdesign in mijn eerste bachelor Toegepaste Informatica/IT moeten we een website ontwerpen. Beginners moeten in XHTML1.0 (Strict) werken, wie al wat ervaring had mocht HTML5/CSS3 gebruiken. Compatibiliteit: leesbaarheid in 'alle' browsers (WebKit's/FF/Opera/IE8+), en moet bruikbaar zijn zonder javascript.

Ik gebruik Dreamweaver, maar puur in code view, omdat ik de code completion aangenamer vind werken dan in de meeste andere software.

Bedrijf
Ik heb enkele jaren geleden al een site gemaakt voor mijn nonkel, eigenaar van een fruitbedrijf.
Huidige site: https://538337.webontwerp.khleuven.be/HF2011/home (is een mirror die geen zoekmachines toelaat, en hier en daar werken een paar pagina's niet, maar da's omdat de FTP van de school vreemd doet)

In het algemeen zijn de reacties positief, maar de website was een ramp om te onderhouden wegens enorm rommelige code. Aan de Google Analytics merkten we ook dat de website zijn doel niet bereikt, en dat de bouncepercentages van bezoekers die van relevante sites komen enorm hoog liggen (80%+).

Wat we in het fruitbedrijf doen (naast fruit kweken) is aan één kant een aanbod van teambuildingsactiviteiten te voorzien voor bedrijven die met de Vespa op bezoek komen, en aan de andere kant tijdens de toeristische periode (april-mei-juni-juli) allerlei activiteiten te organiseren.

De huidige site is niet relevant genoeg voor deze activiteiten, en dus ga ik ze in het kader van webdesign helemaal herwerken. Inhoud en structuur komen nog in orde, maar ik kon niet wachten met het maken van het design. Alles moet uiteindelijk pas tegen het einde van dit academiejaar af zijn.

Nieuw ontwerp
https://538337.webontwerp.khleuven.be/design
Ik had een concept in gedachten, en ik denk dat ik al vrij goed geslaagd ben om mijn idee om te zetten in code. Ik kan niet werken met Photoshop, dus eerst een template daarin ontwerpen is voor mij moeilijker dan gewoon in HTML/CSS beginnen werken. De centrale foto zou kunnen rotaten naar andere items, om bijvoorbeeld de aandacht te kunnen leggen op activiteiten die binnenkort gaan plaatsvinden, ...

Wat denken jullie er van?
Enerzijds ben ik van mening dat het lekker clean is en er allemaal best leuk uitziet, aan de andere kant mis ik iets. Op de vorige site stonden enorm veel foto's en verschillende kleuren (veel te veel), en dit andere uiterste lijkt een beetje vreemd.

Gepland
- Foto's in de inhoud zou ik de volledige breedte van de kolom laten gebruiken, eventueel met wat margin erboven en eronder (die terug transparant is, dus zoals het "New @ HF"-stukje).

Problemen
Alles is getest in:
IE6+, FF3.5+, Chrome13+, Opera11+ op Windows
Safari3+, FF4+ en Chrome13+ op OSX
FF4+ op Mint en Ubuntu

Alleen Chromium op Mint/Ubuntu geeft problemen. Daar krijg je dit:
http://ubuntuone.com/2jBLVog9aR6FlAyO9lUlhA
Na een F5 ziet het er wel normaal uit, bij een CTRL+F5 is het dan weer fout.

Waardoor kan dit zijn?


Ik sta open voor alle kritiek en ideeën!

(PS: Alles op mijn schoolwebruimte heeft een robots.txt disallow, en ik gebruik in de tekst de naam van het bedrijf niet om geen zoekresultaten te beïnvloeden - als mijn topic niet voldoet aan de regels: sorry, ik heb alles doorgelezen en denk dat het in orde zou moeten zijn, als dit niet zo is, mijn excuses!)

Native vs. webbased mobile apps

02-03-2012 discussie 44
Vandaag vroeg ik me af waarom er nog steeds zoveel native apps ontwikkeld worden.
Tegenwoordig is het genoeg ondersteuning (met HTML5) om web-based apps te maken.

Dit geeft verder ook veel voordelen, zo hoef je (als je het goed doet) maar één keer je app te ontwikkelen. Hebben mensen gelijk de meest nieuwe versie, etc.

Wat is jullie mening hier eigenlijk over?

----

Geen idee of dit het goeie forum is, indien niet mag deze verplaatst worden

Het grote HTML5 topic

22-02-2012 discussie 182
(X)HTML5Introductie:quote: http://en.wikipedia.org/wiki/HTML5HTML5 is currently under development as the next major revision of the HTML standard. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.Een aantal nieuwe features:MathML en SVG gebruiken in text/html Nieuwe elementen Nieuwe form controls en methods Nieuwe attributen Offline data storage Nieuwe forms Multi-threaded javascript Offline applicatie caching Canvas element voor 2D drawingDoctype:Met HTML5 bestaat er niet langer een verschil tussen Strict/Transitional/etc. Tevens gebruiken HTML5 en XHTML5 dezelfde doctype, lekker makkelijk!quote: http://xhtml5.nl/naslag/html/doctype<!DOCTYPE html>Het verschil tussen HTML5 en XHTML5 kun je aanduiden door het correcte MIME type mee te geven:

HTML5: text/html
HTML5: text/xml
XHTML5: application/xhtml+xml
XHTML5: application/xmlNieuwe elementen:<article> <aside> <audio> <canvas> <command> <datalist> <details> <embed> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <video>Bron: http://www.w3schools.com/html5/html5_reference.asp

Zie tevens een lijst met deprecated elementen.Nieuwe attributen:contenteditable contextmenu data-yourvalue draggable hidden item itemprop spellcheck subjectBron: http://www.w3schools.com/...ef_standardattributes.aspLocal storage:Met HTML5 komt er ook een nieuwe manier om data lokaal (dus op de PC van de gebruiker) op te slaan. Door deze vorm van local storage op te nemen in de HTML5 specificatie heeft men ervoor gezorgd dat de opslagmethode browseronafhankelijk is en dus in principe in elke browser zou moeten kunnen werken.

Met de nieuwe opslagmethode zou je ongeveer 5MB aan data op de clientpc op kunnen slaan (de beschikbare ruimte kan variëren, afhankelijk van de wensen van de gebruiker en implementatie van de browser), wat gebeurt via een key/value pair. Hier zie je een voorbeeld van local storage:quote: http://diveintohtml5.org/storage.htmlLet’s see HTML5 Storage in action. Recall the Halma game we constructed in the canvas chapter. There’s a small problem with the game: if you close the browser window mid-game, you’ll lose your progress. But with HTML5 Storage, we can save the progress locally, within the browser itself. Here is a live demonstration. Make a few moves, then close the browser tab, then re-open it. If your browser supports HTML5 Storage, the demonstration page should magically remember your exact position within the game, including the number of moves you’ve made, the position of each of the pieces on the board, and even whether a particular piece is selected.Zie ook: http://www.w3schools.com/html5/html5_webstorage.aspOffline applicatie caching:Met HMTL5 is er een nieuwe manier op webpagina's/bestanden offline op te slaan zodat deze gebruikt kunnen worden wanneer er geen beschikking is over een internetverbinding. Dit gebeurt via het zogenaamde cache manifest, waarmee ingesteld kan worden welke bestanden lokaal opgeslagen mogen worden en welke van het netwerk gehaald moeten worden.

De voordelen hiervan kunnen vrij groot zijn:quote: http://www.webreference.c...TML5-Application-Caching/* offline browsing
As the name indicates, the user will be able to browse through the site even when he is offline.
* speed
Files that are cached locally will load much faster. Usually style sheets are shared across all pages of a website. The first time you load a page from a website, it will take some time to download the style sheet, but when you click on other pages, the browser won't need to download the file again.
* reduced load on server
Every time you load a page that has some cached elements, the browser will poll the server to check if the cached file has been updated; if it hasn't, then it won't download it. By doing so, the load on the server is considerably reduced.Forms:De HTML5 specificatie biedt een dertiental nieuwe field types, namelijk:Color Date Datetime Datetime-local Email Month Number Range Search Time Tel Url WeekZie ook: http://www.w3schools.com/html5/html5_form_input_types.asp

Deze nieuwe form types kunnen de gebruiker een aantal hele handige features bieden wanneer ze volledig geïmplementeerd zijn door de browser. Een aantal voorbeelden:Bij date, datetime, week, etc. field types kan html automatisch een datepicker tevoorschijn toveren waar de user een tijdstip uit kan kiezen. Dit zorgt ervoor dat je niet meer met Javascript hoeft te rommelen hiervoor. Automatische controle op bijvoorbeeld het email field type. Dit biedt een client-side controle of het ingevoerde e-mailadres een echt adres is (of in ieder geval een adres met een @ en een .). De iPhone (en vast ook andere smartphones) passen hun toetsenbord aan aan het field type. Bij de keuze voor number krijg je dus een toetsenbord met nummers, in plaats van letters. Wanneer de browser het field type niet herkent wordt deze gewoon als type="text" weergeven, waardoor je je form alsnog gewoon kunt gebruiken. Het kiezen voor de nieuwe forms heeft dus altijd voordeel. Nieuwe attributen zoals autofocus, autocomplete, placeholders,etc. Zie http://www.w3schools.com/html5/html5_form_attributes.aspSemantiek:Door de toevoeging van nieuwe elementen kunnen documenten veel semantischer worden opgebouwd. Enkele voorbeelden:
HTML:
1
2
3
4
5
6
7
8
<div class="article">
    <div class="head">
        <h1>Artikelnaam</1>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
</div>
Zou geschreven kunnen worden als:
html5:
1 2 3 4 5 6 7 8 9 10 <section> <article> <header> <h1>Artikelnaam</h1> </header> <section> <p>Lorem ipsum dolor sit amet, ...</p> </section> </article> </section>
Semantiekfreaks kunnen dit naar hartelust aanpassen.

Zoals te zien is beschrijf je elementen in een document veel beter op deze manier.

En ander voordeel:
HTML:
1
2
    </div>
</div>
Wordt:
html5:
1 2 </article> </section>
Op deze manier is veel duidelijker te zien waar de afsluittag bij hoort. Erg handig als je een hele zooi geneste elementen hebt Browsersupport:Op de volgende pagina is een overzicht te vinden van tags die ondersteund worden door de verschillende lay-out engines:

Wikipedia: Comparison of layout engines (HTML5)FAQ:Q: Wanneer komt HTML5 uit
A: Hierover verschillen de meningen... Volgens de W3C time table zal HTML5 eind 2010 een W3C Recommended status krijgen. Ian Hickson daarentegen gokt dat de nieuwe versie van HTML5 pas volledig compleet zal zijn in het jaar 2022. Veel browsers ondersteunen echter al een hoop features van HTML5, dus je kunt er al prima mee werken.

Q: Alle nieuwe elementen zien er raar uit in mijn browser
A: Dat kan kloppen, de elementen zijn al wel te gebruiken maar hebben nog geen eigen stijl. Het toevoegen van display: block aan de CSS van alle nieuwe elementen zou dit op moeten lossen.

Q: Help, mijn <opmaakelementen> zijn verdwenen
A: Don't worry! Dit kan simpel met CSS worden opgelost.

Q: Heeft er iemand nog vragen
A: DM me Links:Why you should use HTML5 Is HTML5 ready yet? Wikipedia over HTML5 Periodieke tabel met HTML5 elementen W3C specs overview W3Schools HTML5 reference Dive into HTML5 blog WHATWG HTML5 FAQ HTML validator HTML vs. XHTML Browser support overzichtTot slot:HTML5 is nog niet klaar, maar kan al wel gebruikt worden. Dit topic is bedoeld om je ervaringen te delen, handige informatie met elkaar te delen en discussies te voeren over de toepassingen van HTML5.

DHTML vs HTML5

17-02-2012 discussie 6
In de jaren 90 werd DHTML bijzonder populair. Dankzij DHTML kon je namelijk je frontend wat 'dynamischer' maken.
DHTML zorgde voor flash-achtige menu's, liet grafieken tekenen en zorgde in het algemeen voor een betere userexperience.

DHTML aldus W3c:
DHTML combines HTML, JavaScript, the HTML DOM, and CSS

Nu, anno 2012, is HTML5 bijzonder hip. Standaard wordt hier javascript bij betrokken en bij aanvang van elke training wordt netjes vermeld dat HTML5 zoveel meer is dan een Markup Language.

Kortom, HTML5 is helemaal hip.
Echter, ik blijf maar constant terugdenken aan DHTML.
HTML5 lijkt DHTML opgeslokt te hebben.

Nu weet ik dat HTML5 wel nieuwe mark-up heeft ontvangen, webworkers, local storage heeft etc. en dus in veel vormen dus enorm veel meer biedt dan DHTML. Toch, elke keer als ik iemand enthousiast hoor praten over het canvas element, dan schiet DHTML door mijn hoofd.

Nu is mijn vraag, waar is DHTML gebleven in deze hipheid? Is DHTML nu net zo 'uitgestorven' als XHtml?
Gebruiken we uberhaupt nog de term DHTML en waarom is dit zo ineens verdwenen?
Wat was er mis met DHTML, waarom we veel elementen herpakt hebben en nu onder de HTML5 noemer verkopen?

Het voelt een beetje net als de xmlHTTPrequest van Netscape die afgelopen jaren ineens populair werd onder de noemer AJAX. (kleine notitie het canvas-element werkt inderdaad wel wat anders dan het aloude DHTML, maar de resultaten zijn praktisch gelijk).

Kortom, kan iemand de gaten voor mij invullen?

TechDays 2012: GeekNight

10-02-2012 discussie 3
     GeekNightHet leukste gratis tech-event van het jaar - 16 februari 2012GeekNight is de ‘place to be’ voor knappe koppen zoals jij waar je kunt leren én proberen. Met meer dan 20 korte sessies over o.a. HTML5, hoe te beginnen met het bouwen van een mobiele app voor iOs, Android of Windows Phone. Hoe kun je geld verdienen met maken van app’s? Kom kijken naar flitsende Windows demo’s en wat programmeren nou zo leuk maakt. Lees verder...
Er zijn dus 3 tijdsblokken waarin je zelf kan kiezen naar welk onderwerp je gaat.

TijdTitel19:15 - 19:55• Beginnen met HTML5
• Stop, drop and release - an introduction to minimally viable products, or : how and why I write all my apps in <40 hours
• The good and bad of 3D gestures for Kinect
• Mobile APIs: Client and server should be friends
• Beginnen met ontwikkelen voor Windows Phone
• 75 Visual Studio Tips and Trucks in 40 minutes
• iMidas!
20:05 - 20:45• Having fun with HTML5
• The importance of Visibilty and how to get it
• Writing Clean Code
• Push notifications en live tiles
• Flickr’ing with Silverlight
• Kinect Mayhem: Psychedelic ghost cameras and a Head Tapping Game
• Room Rental Ervaringen
20:55 - 21:35• Jquery for HTML5 Developers
• Rocking the Enterprise with Kinect
• How to Develop your Windows Phone Apps, for Non-Developers
• Sketching and Paper Prototyping Techniques
• The Who, What, Where and When of Apps, applying Situational Thinking
• Stand Up Windows Phone Development



Welke Twiekers gaan er nog meer?

Ik ga samen met een vriend

html5 blockquote tag, semantiek en seo

04-02-2012 discussie 6
Beste Tweakers,

Ik wil graag weten hoe jullie de html5 blockquote tag gebruiken en wat jullie ervaring is m.b.t. tot SEO.

Stel dat je op een homepage enkele verkorte artikelen hebt met een "read more" link. Zou je daarvoor een blockquote tag gebruiken? Wordt het anders als duplicate content beschouwd en wordt je daarvoor gestraft? Of wordt je niet gestraft omdat de duplicate content op het zelfde domein staat? Wordt content in de blockquote tag genegeerd door Google? Het liefst wil ik wel dat de homepage de landing page blijft.

Zelf denk ik dat het semantiek juist is om blockquote te gebruiken aangezien de originele content op een andere pagina staat.

Ik weet dat CMS'en zoals Wordpress dit niet doen. Daar is vast wel een reden voor.

Anyway, ik wou graag jullie mening horen.

[HTML5] Video speelt niet af op Win Safari5 en mogelijk iPad

29-01-2012 discussie 9
Mijn video's via HTML5 spelen op nagenoeg alle browsers op Windows, Ubuntu en Anrdoid af, maar onder Safari wil het maar niet lukken. De bedoeling is dat de video's op de iPad e.d. ook afspeelbaar zijn, maar die heb ik geen, dus is het lastig testen. Dat het niet op Win Safari werkt geeft mij het idee dat het ook niet op de iPad werkt.

Ik gebruik nu de volgende code. Het is een beetje aangevuld (volgens mij met formaten die niet eens ondersteund worden), maar dat is puur in een zoektocht geweest naar een alternatief.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
<video width="450" height="450" autoplay loop  onended="this.play()">
<source src="video/homefin.mp4" type="video/mp4" />
<source src="video/homefiniphone.mp4" type="video/mp4" />
<source src="video/homefin.m4v" type="video/mv4" />
<source src="video/homefin.webm" type="video/webm" />
<source src="video/homefin.ogv" type="video/ogv" />
<source src="video/homefin.ogg" type="video/ogg" />
 <object width="550" height="400" id="flash_fallback_1" class="vjs-flash-fallback">
<param name="movie" value="video/home.swf">
<embed src="video/home.swf" width="400" height="400">
</embed>
</object>
</video>
Na uren klooien met omzetten van filmpjes kreeg ik het idee dat het gewoon simpelweg niet mogelijk is. Dus ben ik gaan zoeken naar alternatieven. Deze bleken echter ook geen een van allen te werken. Ik heb als volgt geprobeerd:

- Youtube HTML5
- VideoJS
- JWplayer Pro
- SublimeVideo
- Projekktor
- FlareVideo
- Kaltura
- Etc.

Waar gaat het mis? Ligt het aan Windows? Als dat zo is, dan hoort Safari toch ook gewoon HTML5 video ondersteunen?

Dan nog een vraag die er los van staat. Bovenin zie je een hoop formaten oa m4v, ogv. Worden deze op bovenstaande manier ondersteund, of kan ik ze beter allemaal weglaten?

edit:

Net op een iPad kunnen testen. Het werkt, maar iOS blokkeert autoplay. Dat betekent dus dat animeren als ontwerp van een site gewoon niet meer mogelijk is. Ik heb gezocht naar workarounds, maar die werken niet meer op iOS4 en 5.
Resultaten per pagina: 25 | 50 | 100


Huawei Nexus 6P Apple iPad Pro WiFi FIFA 16 Samsung Galaxy S7 Fallout 4 Apple iPhone 6C Athom Homey LG G5

© 1998 - 2016 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Carsom.nl de Persgroep Online Services B.V. Hosting door True