Archieven

Internet Explorer 8 voor developers

Website testen gaat niet meer – IE8 deelt cookies?

V. Ik heb een website waarop de gebruikers moeten inloggen, en ik wil die testen. Vroeger had ik een venster waarin ik admin was, en een venster waarin ik gebruiker was. Nu gaat dat niet meer. Moet ik een andere browser installeren?

A. Ja, een andere browser installeren kan helpen. Maar eerst iets over de oorzaak: IE8 deelt (omwille van performantie) de cookies – onafgezien van of je in een nieuwe tab dan wel een nieuw venster werkt. Oplossingen?

  • Gebruik in de InPrivate modus. In die modus worden geen cookies gedeeld.
  • Of maak een IE8 instantie aan met de nomerge optie. Start, Uitvoeren,
    iexplore -nomerge
    en enter

Je kan ook een snelkoppeling maken met de -nomerge optie: kopieer een bestaande snelkoppeling, rechtsklike, Eigenschappen – en voeg -nomerge toe na het iexplorer.exe stuk.

Internet Explorer 8 is gereleased

De definitieve versie van Internet Explorer 8 is net gepubliceerd.

http://www.microsoft.com/windows/internet-explorer/default.aspx

Nederlands, Frans en Spaans staan tussen de beschikbare talen.

IE8 Firestarter

Ter gelegenheid van MIX09 houdt het IE8 team een uitzonderlijke reeks van chatsessies op 26-27 maart onder de titel Firestarter. Dit zijn de uren voor de tijzone Brussel (CET = GMT+1)

  Session Name Speaker
15:15 – 15:30 Kick off Mithun Dhar
15:30 – 16:30 Keynote – A lap around IE8 Dean Hachamovitch
18:30 – 19:00 Creating value with IE8 Giorgio Sardo
19:00 – 19:15 Break  
19:15 – 20:45 Trustworthy Browsing in Internet Explorer 8 Eric Lawrence
20:45 – 21:30 Lunch  
21:30 – 22:30 Designing cross-browser websites using Steven Guttman
22:30 – 23:00 Application Performance with IE8 John Hrvatin
23:00 – 23:15 Break  
23:15 – 00:15 Compatibility & Migration Michel Barnett
00:15 – 00:45 IE8 Deployment Michel Barnett
00:45 – 01:00 Break  
01:00 – 02:00 Browser War 2.0 David Tesar

 

http://blogs.msdn.com/ie/archive/2009/03/17/ie8-firestarter-event-on-march-26th.aspx

IE8 video’s op Channel9

Op Channel 9 zijn er en aantal video’s over Internet Explorer 8 gepubliceerd:

Op MSDN is er een video over AJAX navigatie beschikbaar gekomen.

Nieuwe API’s voor IE7 add-ons

Sinds de laatste update beschikklen de ontwikkelaars van add-ons over nieuwe API’s voor IE7 en IE8 om dialoogvensters te laten, openen in een nieuwe tab, waardoor opstaande dialooggvensters (met de invoer van de gebuiker) niet meer verdwijnen.

A new set of public APIs lets Internet Explorer 7 add-ons add a “peer” tab thread for opening dialog boxes without unintended dialog suppression

http://support.microsoft.com/kb/958585

IE8 RC 1 uit

Versie RC1 (Release Candidate 1) van Internet Explorer 8 is zonet gepubliceerd.

  • De features zijn afgewerkt en stabiel.
  • Er is gewerkt aan de verbetering van betrouwbaarheid, performance en compatibiliteit.
  • En uiteraard ook aan veiligheid.

Gebruikers worden opgeroepen om deze versie te installeren en feedback te geven, zodat zoveel mogelijk gebeuikeservaing kan meegenomen worden in de afwerking van het eindproduct.

http://blogs.msdn.com/ie/archive/2009/01/26/internet-explorer-8-release-candidate-now-available.aspx

http://www.microsoft.com/windows/internet-explorer/beta/default.aspx

IE8 User-Agent

De user-agent is de string waarmee de browser kan geïdentificeerd worden. Internet Explorer 8 is een nieuwe versie en heeft dus ook een nieuwe user-agent string. Op Vista is dat

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)

Ook in compatibility mode is IE8 identificeerbaar: de versie is wel 7, maar er staat ook Trident bij.

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0)

http://blogs.msdn.com/ie/archive/2009/01/09/the-internet-explorer-8-user-agent-string-updated-edition.aspx

Conclusie voor de webontwikkelaars: ga er niet van uit dat je alle user agent strings van alle browsers kent. En als je toch exclusief wil testen, neem deze beiden dan op.

IE8 on Windows Vista

Meerdere CSS op één pagina

Het is mogelijk om aan één pagina meerdere stylesheets te hangen en de gebruiker te laten kiezen welke stylesheet effectief gebruikt wordt. Bijvoorbeeld, als je met IE8 surft naar  en klikt op Page, Style, krijg je de volgende keuzelijst te zien:

Hoe is dat gedaan? Voor elk van de stylesheets is er een lijn gemaakt in de HEAD sectie die er uit ziet als
<link rel=”alternate stylesheet” title=”Gold (left, fixed) + navbar” href=”../../threepart-left-f.css”>
<link rel=”alternate stylesheet”title=”Gold (right, fixed)” href=”../../threepart-nobanner-f.css”>
<link rel=”alternate stylesheet”title=”Gold (left, fixed)” href=”../../threepart-left-nobanner-f.css”>

IE blog geeft toe dat dit weinig verspreid is omdat IE tot nu toe deze mogelijkheid niet ondersteunde. Maar misschien is het moment nu aangebroken voor de webmasters opm te gaan experimenteren.

Accesibility in IE8

Internet Explorer 8 heeft een aantal accessibility features die de moeite waard zijn:

  • De onvolprezen accelerators. Vertalen is hier al aan bod gekomen, en zal voor veel gebruikers onmisbaar worden.
  • Bij het zoeken (Ctrl+F) licht de gevonden tekst in het geel op. We kennen dat al van Google toolbar, maar zijn heel blij dat vanaf nu het in IE zelf zit.
  • Het contectuele menu komt op bij het indrukken van de menu-toets
  • Caret browsing: na het indrukken van F7 kan je een stuk tekst selecteren zoals je dat in Word zou doen. Heel handig bij het kopiëren.

Verder vindt de professional nog:

  • Nieuwe support voor Accessible Rich Internet Applications
  • IAccessibleEx support
  • Nieuwe WinEvents in DHTML: EVENT_OBJECT_REORDER, EVENT_OBJECT_STATECHANGE,
    EVENT_OBJECT_LOCATIONCHANGE, EVENT_OBJECT_VALUECHANGE

http://blogs.msdn.com/ie/

11.12 Add-on-Con

Op 11 decemeber wordt Add-on-Con gehouden, conferentie waarbij Microsoft, Google en Mozilla samen overleggen over add-ons.
http://www.add-on-con.com/

IE8: wat is de planning?

Microsoft plant na de huidige beta 2 nog één preview versie (RC – release candidate) uit te brengen in de eerste trimester van 2009, en dan nadien het definitieve product.

http://blogs.msdn.com/ie

Default HTML editor wijzigen in IE?

V. Ik heb een programma geïnstalleerd enwil dat programma instellen als standaard HTML editor, maar dat gaat niet: het programma verschijnt niet in de lijst van programma’s waar ik uit kan kiezen in IE, Tools, Internet Options, Programs.

A. Je kan dat ook rechtsreeks in het register instellen.

Start, Run, REGEDIT. Wijzig de volgende entries:

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Default HTML Editor]
“Description”=*NAAM VAN HET PROGRAMMA*

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Default HTML Editor\shell\edit\command]
@=”\”C:\\Program Files\\*MAP*\\PGM.EXE\” \”%1\””

IE8 code in Code Magazine

Ter voorbereiding van PDC heeft het IE8 team een en ander gepubliceerd in Code Focus Magazine.

IEblog bevat verder ook de link naar één enkel PDF bestand met alle bijdragen.

Bron bekijken en doorzoeken

Internet Explorer 8 heeft een vernieuwd scherm voor het bekijken avnde HTML bron van een pagina.

Wat mij enorm interessant lijkt, is de zoekfunctie (Ctrl+F). Dat dialoogvenster toont namelijk onmiddellijk (dus vóór het drukken op de knop) of de ingetikte tekst gevonden is.

Je eigen zoekmachine in IE8

Als je wil, kan je eigen website laten verschijnen bij de mogelijke zoekmachines in het Internet Explorer 8 zoekvak, zonder dat de gebruiker het volledige adres moet intikken. Dit heb je daarbij nodig:

  • Een definitie van de dienst die in een XML bestand komt in de root van je webserver.
    <?xml version=”1.0″ encoding=”UTF-8″?>
    <OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/”&gt;
        <ShortName>example Search</ShortName>
        <Url type=”text/html” template=”http://www.example.com/results.aspx?q={searchTerms}” />
        <Url type=”application/x-suggestions+xml” template=”http://www.example.com/suggestions.xml”/>
        <Image height=”16″ width=”16″ type=”image/icon”>http://www.example.com/favicon.ico</Image>
    </OpenSearchDescription>
  • In dat bestand worden een aantal dingen gedefineerd:
    • Een URL voor de resultatenpagina
      Het MIME type moet text/html zijn, en de gebruiker gaat op die pagina terechtkomen bij de zoekopdracht. Het {searchTerms} gedeelte zal vervangen worden door de zoektermen.
      Als je website geen eigen zoekmachine heeft, kan je ook gebruik maken van een andere, zoals
      http://search.live.com/results.aspx?q=site:www.example.com+{searchTerms}
    • Een suggestiedienst (hier suggestions.xml)
    • Een icoon (hier favicon.ico) dat zal verschijnen bij QuicPick.
  • De zoekdienst vindbaar maken voor de browser doe je door een stuk code toe te voegen aan de <HEAD> sectie van de pagina’s waarin de dienst moet gevonden worden door IE.
    <link rel=”search” type=”application/opensearchdescription+xml” href=”http://blogs.msdn.com/opensearch.xml&#8221; title=”example Search” />

http://blogs.msdn.com/ie/archive/2008/09/18/hello-world-getting-started-with-ie8-visual-search.aspx

Application Compatibility Toolkit

De Application Compatibility Toolkit is gepubliceerd en te downloaden van op http://www.microsoft.com/downloads/. Het pakket moet programmeurs helpen om compatyibilietsproblemen met hun applicaties te identificeren en op te lossen. De IE8 componenten zijn bevat:

  • IECTT – Internet Explorer Compatibility Test Tool
    met real-time detectie van problemen
  • IECE – Internet Explorer Compatibility Evaluators
    dat in de achtergrond draait.

http://blogs.msdn.com/ie/archive/2008/09/23/application-compatibility-logging-in-ie8.aspx

Javascript in IE8

Wat is er nieuw aan Javascript in Internet Explorer 8?

  • AJAX wordt hoe langer hoe belangrijker. IE8 kent native JSON – JavaScript object notation. Hierdoor kunnen Javascript objecten geserialiseerd en gedeserialiseerd worden.
  • In de developer tools zit een script debugger. Die heeft syntax colouring en een console voor het bekijken van scriptfouten.
  • De Developer tools bevatten verder een Script profiler. Die moet je helpen bij het vinden van performantie problemen in je scripts.

Zie
What’s new in Javascript for Internet Explorer 8 beta 2 – http://blogs.msdn.com/ie/archive/2008/09/09/what-s-new-for-jscript-for-ie8-beta-2.aspx

Native JSON in Internet Explorer 8 beta 2 – http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

Hoe kan ik als webmaster bepalen in welke modus mijn pagina’s worden weergegeven?

V. Hoe kan ik als webmaster bepalen in welke modus mijn pagina’s worden weergegeven?

A. Normaal gezien, moet je dat doen met <!DOCTYPE>. Daarme definieer je welke standaard je respecteert in je webpagina. Maar zo eenvoudig is het niet: somoge webpagina’s vertrouwen immers om eiogenaardigheden van specifieke versies of specifieke browsers om zich correct te gedragen.

Internet Explorer 8 kan een pagina in verschillende modi weergeven:

  • IE8 mode
    CSS 2.1 standaarden volledig gerespecteerd.
  • Emulate IE8 mode
    Gebruikt de <!DOCTYPE> directief. Standaard modus directieven zijn weergegeven in IE8 modus, quirks mode directieven in IE5 modus.
  • Emulate IE7 mode
    Internet Explorer moet <!DOCTYPE> gebruiken om te bepalen hoe de pagina wordt weergegeven. Standard modus directieven, wiorden in IE7 modus weergegeven, quirk modus directieven in IE5 modus. Veel websites worden best in deze modus weergegeven.
  • IE7 mode
    De pagina wordt weergegeven in IE7 modus, ongeacht <!DOCTYPE> directieven.
  • IE5 mode
    Geef de pagina weer in IE7 quirks mod, wat ongeveer gelijk is aan IE5.
  • Edge mode
    Zegt aan IE om de pagian weer te geven in de hoogst mogelijke modus. In IE8 is dat IE8 modus. Deze modus is belangrijk voor wanneer volgende versies van IE worden uitgebracht.

Je kan compatibiliteit instellen met een X-UA-Compatible element in de META sectie van het HEAD:

<html>
<head>
  <!– Mimic Internet Explorer 7 –>
  <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html>

De andere modu krijgen deze code:

<meta http-equiv=”X-UA-Compatible” content=”IE=4″>   <!– IE5 mode –>
<meta http-equiv=”X-UA-Compatible” content=”IE=7.5″> <!– IE7 mode –>
<meta http-equiv=”X-UA-Compatible” content=”IE=100″> <!– IE8 mode –>
<meta http-equiv=”X-UA-Compatible” content=”IE=a”>   <!– IE5 mode –>

Je kan deze setting ook meegeven in de header van de server.

<!– This header mimics Internet Explorer 7 and uses
     <!DOCTYPE> to determine how to display the Web page –>
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″>   

<?xml version=”1.0″ encoding=”utf-8″?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name=”X-UA-Compatible” value=”IE=EmulateIE7″>
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Zie ook: Defining Document Compatibility

IE8 developer tools: menu

<beta 2>

In deze reeks  over de Developer tools van Internet Explorer willen we tenslotte ingaan op het menu.

  • File laat toe om de wijzigingen ongedaan te maken.
  • Met Find kan je een element selecteren/identificeren door te klikken. Je kan overd e pagina bewegen en alle elementen lichten op met een blauwe rand.
  • Disable laat toe om een aantal dingen uit te schakelen: de scripts, de popup blocker, de stijlen.
    ie8devtoolsdisable.jpg
  • Met View kan je een aantal dingen zichtbaar maken:
    ie8devtoolsview.jpg
    klasse en ID informatie voor de stijlen, paden voor de links, link verslagen, tab indexen, access key (sneltoetsen), broncode in het DOM
  • Outline laat je toe om tabellen, cellen, DIVs (layers), beelden, gepositioneerde elementen zichtbaar te maken
    ie8devtoolsoutline.jpg
  • Via Images kan je beelden al dan niet zichtbaar maken, hun pad tonen, de alternatieve tekst laten oplichten enz.
    ie8devtoolsimages.jpg
  • Cache laat je toe om de cache en de cookies te beheren, om te kijken hoe de pagina of de applicatie zich gedraagt.
    ie8devtoolscache.jpg
  • Tools geeft de mogelijkheid om het venster qua formaat aan te passen, en geeft je een ruler om een en ander na te meten.
    ie8devtoolstools.jpg
  • Validate tenslotte geeft je toegang tot hulpmiddelen om je pagina of webapplicatie te checken tegen de standaarden van HTML, CSS en accessibility.
    ie8devtoolsvalidate.jpg
    Waarschijnlijk is het pijnlijk om je eigen werk aan deze harde tests bloot te stellen, maar nuttig is het zeer zeker om ontgoochelingen te voorkomen!

IE8 InPrivate

De Inprivate Modus van Internet Explorer 8 is een speciale modus van IE8 waarbij geen cookies worden opgeslagen (dus ook niet opgevraagd) en tijdelijke bestanden niet worden bijgehouden. Je opent een Inprivate scherm door een niewe tab te maken (Ctrl+T) en te klikken op Start InPrivate Browsing. Je krijgt een venster met InPrivate voor de adresbalk.

Als je dit venster sluit, worden de tijdelijke bestanden opgekuist en InPrivate is weg.

Is dit de fameuze porn mode? Ja, zeker. Maar het heeft alles met privacy te maken. Het is bv. interessant in een internetcafé – waar je geen paswoorden wil achterlaten, of voor het testen van een webpagina.

IE8 developer tools: document mode

<beta 2>

Het is de webmaster (of de programmeur van de webapplicatie) die bepaalt – door de DOCTYPE declaratie of een META instructie – hoe een document wordt weergegeven. Zonder explicite tegenindicatie, zal Internet Explorer 8 strict de CSS2.1 specificaties opvolgen. De gebruiker kan desnoods ervoor kiezen om een document in Compatibility mode weer te geven, wat betekent: weergeven zoals Internet Explorer 7 dat zou doen. Maar sommige pagina’s zijn gemaakt voor vroegere versies.

Dit kan je simuleren met de Developer Tools: Je krijgt aanduiding van het document type dat IE8 hanteert, en je kan dat wijzigen. De pagina wordt dan opnieuw geladen, en je kan het verschil zien.

ie8devtoolsdocumentmode.jpg

De ontwikkelaar-troubleshooter kan er ook voor kiezen om de browsermodus te wijzigen, en het verschil te bekijken:

ie8devtoolsbrowsermode.jpg

Zie ook IEBlog: Introducing Compatibility view

IE8 developer tools: elementen bekijken

<beta 2>

De developer tools van Internet Explorer 8 laten je toe om de opbouw van de pagina te bekijken.

  • Je kan de opbouw van het document  en zijn constitutieve HTML bouwstenen bekijken.
    ie8html.jpg
  • Je kan de CSS van het document bekijken. Handig om te zien welke stijl nu effectief wordt toegepast.
    ie8css.jpg
  • Je kan de (clientside) scriptcode van een pagina bekijken.
    ie8devtoolsscript.jpg
    In dat venster kan je debuggen, breakpoints instellen en locals opvragen.
  • Tenslotte is er de Profiler

IE8: developer tools – voorstelling

<beta 2>

Onder F12 (Developer tools) zitten een aantal krachtige tools in Internet Explorer 8 die de webmaster kunnen helpen bij het ontwikkelen en troubleshooten van webpagina’s of webapplicaties.

We willen een aantal aspecten onder de loupe nemen in deze reeks posts. Maar eerst en vooral willen we een tip geven: als de Developer tools worden opgestart voor de eerste keer, krijg je een apart venster.

ie8devtoolsunpinned.jpg

Je kan dat venster vastpinnen met een knop

ie8devtoolspin.jpg

waarna de developer tools vastgeklikt wordt in de browser. Mijn ervaring is dat dat een stuk handiger werkt, omdat je een aantal bewerkingen kan doen op de pagina die in de browser wordt weergegeven. Wisselen van venster om het resultaat te bekijken is, lang niet altijd praktisch.

IE8 CSS 2.1 testbatterij vrijgegeven

Het Internet Explorer 8 team heeft de tests vrijgegeven waarmee ze hun interpretatie van CSS2.1 toetsen aan wat IE8 er van maakt. Je kan ze vinden op hun CSStestpages.

IE8: wat moet ik aanpassen aan mijn website?

Katrien DG heeft juist een bericht gepost met als titel IE8 Beta – Pointers for making your website compatible with IE8 standards rendering mode. We onthouden:

  • Als je je webpagina echt compatibel wil zijn met IE8, moet het CSS2.1 compliant zijn. Dat kan wat werk vragen.
    Overigens: ik heb een en ander over HTML en CSS bij elkaar staan.
  • Als je wil dat je websrver wordt gedraaid met IE7 emulatie modus, kan je
    X-UA-Compatible: IE=EmulateIE7
    als HTTP header toevoegen aan je server configuratie.
  • Je kan dat ook pagina per pagina afdwingen met de volgende regel in de META sectie:
    <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
  • Als je wil bekend maken dat je pagina IE8 compliant is, kan je een standaard DOCTYPE declaratie egbruiken, of de volgende regel toevoegen aan de HEAD sectie van je pagina’s:
    <meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

IE8 en de webbrowser control

Zoals je weet, wordt de functionaliteiten van Internet Explorer opengesteld op elk Windows toestel, waardoor een programmeur die IE wil gebruiken in zijn applicatie slechts een control (instantiatie van shdocvw.dll) op een WinForm moet plaatsen om een browser ter beschikking te hebben. Nieuw is dat de programmeeur nu kan beslissen hoe deze control zich gedraagt:

  • Bij verstek wordt IE7 strict mode of IE7 quircks mode gebruikt – afhankelijk van de DOCTYPE.
  • Met de volgende registry setting kan de programmeur IE5 mode forceren:
    [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_NATIVE_DOCUMENT_MODE]
    “MyApplication.exe”=dword:C350
    Bekijk http://support.microsoft.com/kb/183412 voor een workaround voor een probleem met de user-agent string.
  • IE7 standards mode kan geforceerd worden met
    [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_NATIVE_DOCUMENT_MODE]
    “MyApplication.exe”=dword:11170
  • IE8 standards mode kan geforceerd worden met
    [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_NATIVE_DOCUMENT_MODE]
    “MyApplication.exe”=dword:13880
  • Als de applicatie start, gaat de IE webbrowser control het register na om te bepalen in welke mode de control zal functioneren.

IEBlog over de IE8 webbrowser control

IE8 developer tools: CSS

De developer tools van Internet Explorer 8 bevatten een krachtige CSS viewer waarmee je als webmaster de CSS van je eigen webpagina (of van een andere) kan analyseren.

ie8-devtools-css-iepagina.jpg

IE8 developer tools: Outline

<IE 8 beta 2>

De Outline feature van IE8 toont de webmaster  tabellen, layers (DIVs), beelden en andere gepositioneerde objecten.

ie8-devtools-outline.jpg

Op die manier kan je met visuele ondersteuning achterhalen wat er eventueel schort aan je webpagina.

IE8 developer tools

<IE 8 beta 1 en 2>

Internet Explorer 8 bevat een stevige set developer tools waarmee de webmaster een pagina kan analyseren. Je kan de HTML code,  de CSS code en de script (JS) code onder de loupe nemen.

ie8-devtools.jpg

IE8 developer tools: compatibility mode

<IE 8 beta 1>

Als je met de IE8 developer toolbar aan het werk bent, kan je instellen welke compatibiliteit je wil: IE5 (quirks mode), IE7 (strict mode) of IE8 (standards mode).

ie8-devtools-compatmode.jpg

ip-location