Gå til innhold

Webkafeen

enden

Av enden
i Programmering og webutvikling

Anbefalte innlegg

j--

j--

Skrevet
Skrevet

Har en løsning som kjøres på lokalnettet hos meg som bruker JS-rammeverket Prototype til å hente en HTML-side hvert 5. sekund via Ajax.PeriodicalUpdater. Skulle gjerne hatt denne løsningen over på jQuery istedenfor, da jQuery og Prototype ser ut til å krangle litt.

 

Noen erfaring med tilsvarende plugins/funksjonalitet til/i jQuery?

 

Videre så kunne jeg nok spart en del båndbredde ved å overføre dataene via JSON istedenfor som en HTML-tabell. Hvordan vil en browser i dag takle å f.eks generere opp en tabell på 500 rader utfra et stort JSON-objekt kontra å vise 500 rader i ren HTML-kode?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Occi

Occi

Skrevet
Skrevet (endret)

Har en løsning som kjøres på lokalnettet hos meg som bruker JS-rammeverket Prototype til å hente en HTML-side hvert 5. sekund via Ajax.PeriodicalUpdater. Skulle gjerne hatt denne løsningen over på jQuery istedenfor, da jQuery og Prototype ser ut til å krangle litt.

Det er et kjent fenomen at de to krangler pga. de begge to tar i bruk $ til funksjonene sine. Virker som om jQuery er mye større, så er ikke et veldig smart trekk av Prototype akkurat.. Hvis du heller har lyst å bruke noe i jQuery og noe i Prototype, så finnes det løsninger. Du kan f. eks prøve denne. Den er noen år gammel, så kan hende den ikke virker lenger, men er ikke værre enn å google "prototype jquery fix" eller noe slikt noe.

 

 

Dog er det best å holde seg til en, da de tar ganske stor plass/"mye" ressurser hver :)

Endret av Occi
Lenke til kommentar
j--

j--

Skrevet
Skrevet (endret)

Har en løsning som kjøres på lokalnettet hos meg som bruker JS-rammeverket Prototype til å hente en HTML-side hvert 5. sekund via Ajax.PeriodicalUpdater. Skulle gjerne hatt denne løsningen over på jQuery istedenfor, da jQuery og Prototype ser ut til å krangle litt.

Det er et kjent fenomen at de to krangler pga. de begge to tar i bruk $ til funksjonene sine. Virker som om jQuery er mye større, så er ikke et veldig smart trekk av Prototype akkurat.. Hvis du heller har lyst å bruke noe i jQuery og noe i Prototype, så finnes det løsninger. Du kan f. eks prøve denne. Den er noen år gammel, så kan hende den ikke virker lenger, men er ikke værre enn å google "prototype jquery fix" eller noe slikt noe.

 

 

Dog er det best å holde seg til en, da de tar ganske stor plass/"mye" ressurser hver :)

Ønsker jo egentlig ikke å fikse problemet mellom Prototype og jQuery, men å fjerne jQuery Prototype helt. Blir fort unødvendig å bruke begge rammeverkene, som du skriver :-)

 

Du kan endre jQuery-prefiksen med noConflict() til feks jq.

Planen er jo å kvitte seg helt med Prototype-rammeverket, og kun bruke jQuery. Håpet derfor det var mulig å hente data inn fra en ekstern side med fast intervall. Per nå genererer den eksterne siden Prototype henter data fra ren HTML-kode. Kan fint gå over til å sende JSON istedenfor, om det er bedre.

 

Har funnet "jQuery Periodic Updater", men blir litt skeptisk til "v0.2 beta"-stempelet. Noen som har noen andre tips å komme med? :)

 

---

 

Edit: Mente å fjerne Prototype, ikke jQuery..

Endret av µp1is
Lenke til kommentar
j--

j--

Skrevet
Skrevet

Ble følgende løsning hittil (om noen snubler over posten min om ett år..):

 

<script type="text/javascript">
jQuery(document).ready(function($){
	// initialising facebox
	$('a[rel*=facebox]').facebox();

	// reapplies facebox after fetching new html content with $.ajax completes. Ref.: http://stackoverflow.com/questions/3412459/ajax-and-facebox-problem
	function reinit_facebox() {
       $('a[rel*=facebox]').facebox();
	}

	(function worker(){
		$.ajax({
			url: 'x.php', 
			success: function(data) {
				$('#throughput').html(data);
			},
			complete: function() {
				setTimeout(worker, 1500);
			},
		});
     })();

     (function worker2(){
		$.ajax({
			url: 'y.php',
			data: 'a=1&b=2',
			success: function(data) {
				$('#content').html(data);
				reinit_facebox();
			},
			complete: function() {
				setTimeout(worker2, 2000);
			},
		});
     })();
});
</script>

 

Kjører den i kombinasjon med facebox, så ble enda en liten utfordring der. Måtte initialisere facebox på nytt etter at ajax-kallet er ferdig.

 

Fungerer veldig godt. Liker at tidstakeren for når neste ajax-kall skal kjøres ikke begynner å gå før den er ferdig med å hente data fra ajax-kallet.

Lenke til kommentar
  • 3 uker senere...
agm

agm

Skrevet
Skrevet 
	// initialising facebox
	$('a[rel*=facebox]').facebox();

	// reapplies facebox after fetching new html content with $.ajax completes. Ref.: http://stackoverflow.com/questions/3412459/ajax-and-facebox-problem
	function reinit_facebox() {
	   $('a[rel*=facebox]').facebox();
	}

 

Skal ikke endre for mye på noe som funker, men det vil vel være mer effektivt med noe slik:

 

(reinit_facebox = function() {
$('a[rel*=facebox]').facebox();
})();

Lenke til kommentar
  • 2 uker senere...
Sono Juventino

Sono Juventino

Skrevet
Skrevet
Hvordan vil en browser i dag takle å f.eks generere opp en tabell på 500 rader utfra et stort JSON-objekt kontra å vise 500 rader i ren HTML-kode?

 

Dette er jo serverens jobb, ikke nettleseren, med mindre du planlegger å gjøre det via JS. Å generere dette med et serverscriptspråk som PHP vil være svært enkelt og resursvenlig. Med caching og sjekking av om noe er oppdatert før nye data hentes, vil nok dette være en enkel løsning. PHP har også funksjoner knyttet til dette som er svært enkle til bruk. JSON_encode/decode er i prinsippet alt du ønsker.

 

Om tanken er å gjøre det i JS, så er det nok ikke like effektivt, men 500 rader er jo ikke spesielt store datamengder uansett.

Lenke til kommentar
MikkelRev

MikkelRev

Skrevet
Skrevet

Kom over et prosjekt som så litt interessant ut: OPA - http://opalang.org.

Det er et sterkt typet webapplikasjonsspråk for både klient og serversiden.

 

"Opa is an open source, simple and unified platform for writing web applications. All aspects are directly written in Opa: Frontend code, backend code, database queries and configuration. And everything is strongly statically typed."

 

Jeg liker idéen om ikke annet.

Lenke til kommentar
banansplitt™

banansplitt™

Skrevet
Skrevet

Jeg har lest en del rundt, men blir oppgitt av hvor mange forskjellige tolkninger det er av hvordan man bygger opp strukturen i HTML5.

 

Så noen som har lyst til å se koden min og kommentere den? Ble mye rot der jeg skulle vise hva som var innhold og hva som var sidebar, men er vel brukbart.

 

<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="utf-8">

<title>xxxxxx</title>

<link rel="stylesheet" href="/public/css/stylesheet.php" media="screen">

</head>
<body>
<header>
 <h1>xxxxxx</h1>
 <nav>
  <ul>
<li><a href="">xxxxxx</a></li>
<li><a href="">xxxxxx</a></li>
<li><a href="">xxxxxx</a></li>
<li><a href="">xxxxxx</a></li>
<li><a href="">xxxxxx</a></li>
  </ul>
 </nav>
</header>

<section>
 <header>
  <h2>xxxxxx</h2>
 </header>
 <section>									// sidebar
  <header>									// sidebar
<h3>xxxxxx</h3>								 // sidebar
  </header>									// sidebar
  <nav>									// sidebar
<ul>									// sidebar
 <li><a href="">xxxxxx</a></li>							   // sidebar
 <li><a href="">xxxxxx</a></li>							   // sidebar
</ul>									// sidebar
  </nav>									// sidebar
 </section>									// sidebar
 <header>									// innhold
  <h3>xxxxxx</h3>									// innhold
  <p>xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx.</p>			  // innhold
 </header>									// innhold
 <h4>xxxxxx</h4>									// innhold
 <table>									// innhold
  <tr>									// innhold
<th>xxxxxx</th>						// innhold
<th>xxxxxx</th>					   // innhold
<th>xxxxxx</th>						// innhold
<th>xxxxxx</th>					   // innhold
  </tr>									// innhold
  <tr>									// innhold
<td>xxxxxx</td>					 // innhold
<td>xxxxxx</td>					// innhold
<td>xxxxxx</td>					  // innhold
<td>xxxxxx</td>						// innhold
  </tr>									// innhold
  </tr>									// innhold
 </table>									// innhold
</section>

<footer>

</footer>

<script src="/public/js/jquery.js"></script>
<script src="/public/js/layout.js"></script>
</body>
</html>

Lenke til kommentar
agm

agm

Skrevet
Skrevet

Jeg ser du bruker mange <header> tags. Selv pleier jeg bare å legge inn én av disse - som bodyheader. Jeg synes det er mest ryddig, men det du har gjort er på ingen måte feil etter standarden, og dette blir bare personlig preferanse.

 

Ser i tillegg du bruker <section> til sidebar. Passer kanskje bedre med <aside>?

 

Og du legger inn sidebar før innholdet. Mest sannsynlig er innholdet viktigst, og da bør det også komme først? Min erfaring er at det da er lettere å tilpasse en responsiv layout til mindre enheter (Du kan da enkelt f.eks. gjemme sidebaren under hovedinnholdet)

 

Ellers ser det veldig bra ut i mine øyne, og jeg har tolket taggene på samme måte. :)

 

Mitt inntrykk er at folk legger inn veldig mange <section>, <header> og <footer> tags i HTML5, men at disse stort sett er bortkastet. De nye HTML5-elementene er jo ikke annet enn <div>s med en semantisk betydning, og da er det ikke vits å presse dem inn steder du ellers ikke ville hatt <div>s.

 

Kan være greit å starte med å bygge opp layouten med <div>s, se hvilke av disse som faktisk har noen semantisk betydning, og erstatte de med et passende HTML5-element. En grei måte å unngå tagsoup og unødvendige tags.

 

Det er ihvertfall mine 2 ¢

 

Til mine prosjekter har jeg dratt ut det jeg følte jeg trengte fra HTML5 Boiler Plate, laget meg en mal og lagt inn denne i Notepad++. Den tilpasses selvsagt forskjellig fra prosjekt til prosjekt, men her er sånn jeg pleier å starte:

 

 

<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="utf-8">

<title>Tittel</title>

<meta name="viewport" content="width=device-width,initial-scale=1" />

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="canonical" href="" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400" />
<link rel="stylesheet" href="/css/normalize.min.css" />
<link rel="stylesheet" href="/css/stil.css" />
</head>
<body>
<header>
 <h1>Tittel / Logo</h1>
 <div>Her kommer slagordet</div>
 <nav>
  <ul>
<li><a href="#">Lenke 1</a></li>
<li><a href="#">Lenke 2</a></li>
<li><a href="#">Lenke 3</a></li>
<li><a href="#">Lenke 4</a></li>
  </ul>
 </nav>
</header>

<section role="main">

 <article>
  <h1>Overskrift</h1>
  <div class="detaljer">
Postet DDMMÅÅ i kategoriene <a href="#kat1">Kategori 1</a> og <a href="#kat2">Kategori 2</a>.
  </div>
  <p>Tekst</p>
  <p>Tekst</p>
 </article>

</section>

<aside>
 <h1>Tilleggsinfo</h1>
 <p>Her kommer sidebar med tilleggsinfo og ekstrainnhold.</p>
</aside>
<footer>
 <p>
  © 2012
  <a href="#">Om oss</a> |
  <a href="#">Kontakt</a>
 </p>
</footer>

<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery.min.js">\x3C/script>')</script>
<script src="/js/respond.min.js"></script>
<script src="/js/ga.js"></script>
<script src=""></script>
</html>
</body>

 

 

Lenke til kommentar
sunsunsun

sunsunsun

Skrevet
Skrevet

Jeg er enig med agm at sidebaren bør komme etter hovedinnholdet, og legges i en aside-tag. At DIVs er det samme som de nye HTML5-taggene, er feil. Visuelt sett gjør de ingenting, men de er der for å gjøre siden semantisk riktig. Det blir mye mer HTML-kode, men det gjør faktisk siden mye bedre, dersom det er gjort riktig.

Her er et flowchart som kan hjelpe deg, dersom du er usikker på hvilken tag du skal bruke.

post-109420-0-84553900-1333885806_thumb.png

 

 

Sånn ville jeg gjort det:

 

<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="utf-8">
<title>xxxxxx</title>
<link rel="stylesheet" href="/public/css/stylesheet.php" media="screen">
</head>

<body>
<header>
 <h1>xxxxxx</h1>
 <nav>
<ul>
<li><a href="">xxxxxx</a></li>
<li><a href="">xxxxxx</a></li>
<li><a href="">xxxxxx</a></li>
<li><a href="">xxxxxx</a></li>
<li><a href="">xxxxxx</a></li>
</ul>
 </nav>
</header>  

//Main content
<article>
<header>																  
 <h1>xxxxxx</h1>														  
 <p>xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx.</p>					
</header>															  
<h2>xxxxxx</h2>														
<table>																
 <tr>											
  <th>xxxxxx</th>							
  <th>xxxxxx</th>							
  <th>xxxxxx</th>
  <th>xxxxxx</th>
</tr>			  
<tr>			  
  <td>xxxxxx</td>
  <td>xxxxxx</td>
  <td>xxxxxx</td>
  <td>xxxxxx</td>
</tr>			  
</tr>			  
</table>			
</article>

//Sidenbar
<aside>
 <h1>xxxxxx</h1>
 <section>																	
<h2>xxxxxx</h2>														
<nav>																	  
 <ul>																  
 <li><a href="">xxxxxx</a></li>										
 <li><a href="">xxxxxx</a></li>										
 </ul>																  
</nav>																	  
</aside>


<footer>
</footer>

<script src="/public/js/jquery.js"></script>
<script src="/public/js/layout.js"></script>
</body>
</html>

 

Fjernet header-tagen der det bare er en overskrift. Dersom det følger med en paragraf, så brukes header-tagen.

Bruker H1-tag flere steder.

Byttet section med article til hovedinnholdet.

La sidebar under hovedinnholdet.

Byttet section med aside på sidebaren.

Lenke til kommentar
banansplitt™

banansplitt™

Skrevet
Skrevet

Ok. Takk for input. Begynner å danne meg et bilde av hvordan det skal bygges opp nå. Er usikker på om sidebar skal under eller over innhold ettersom den fungerer som en "submeny" til hovedmenyen.

 

Bruker H1-tag flere steder.

Hvorfor det? Jeg har alltid praktisert én h1-tag, nemlig den første overskriften som beskriver hele siden.

 

Og om jeg har forstått det riktig: der hvor jeg har innholdet har jeg egentlig flere like tabeller slik den som er der nå, jeg bare fjernet dem for å gjøre det litt mer oversiktlig her. Skal hver av disse tabellene deles inn i <section>'s ?

 

:)

Lenke til kommentar
sunsunsun

sunsunsun

Skrevet
Skrevet

Hvis sidebaren ikke er en del av headeren, så er det mest logisk å legge den etter hovedinnholdet. Det viktigste kommer først. Prøv å se det som en liste.

  1. Header: logo og navigasjon.
  2. Innholdet.
  3. Sidebar: mer navigasjon og/eller annen informasjon.

Måten du legger disse elementene ut på websiden, styres av CSS.

 

Hvorfor det? Jeg har alltid praktisert én h1-tag, nemlig den første overskriften som beskriver hele siden.

Med HTML4/XHTML kunne man bare ha en h1-tag. Dette er endret i HTML5, så man kan bruke dem flere ganger på siden. Jeg er ikke 100% sikker på dette, men for meg er det mest logisk at hver del har sin h1-tag. Mulig jeg tar feil.

 

Og om jeg har forstått det riktig: der hvor jeg har innholdet har jeg egentlig flere like tabeller slik den som er der nå, jeg bare fjernet dem for å gjøre det litt mer oversiktlig her. Skal hver av disse tabellene deles inn i <section>'s ?

Jeg tror det er riktig å legge hver tabell i en section, ja. Hvis man følger flowchartet.

 

Jeg driver også med å lære meg HTLM5, den beste websiden jeg har funnet hittil er html5doctor.com

Lenke til kommentar
agm

agm

Skrevet
Skrevet (endret)

Hvorfor det? Jeg har alltid praktisert én h1-tag, nemlig den første overskriften som beskriver hele siden.

Med HTML4/XHTML kunne man bare ha en h1-tag. Dette er endret i HTML5, så man kan bruke dem flere ganger på siden. Jeg er ikke 100% sikker på dette, men for meg er det mest logisk at hver del har sin h1-tag. Mulig jeg tar feil.

 

elos har rett. Etter standarden kan hver del ha sin egen H1.

 

Det er nyttig om du f.eks. har flere artikler under hverandre, hvor hver artikkel starter med en H1.

 

Men det viktigste er å opprettholde en oversiktlig struktur og et tydelig hierarki på siden. Om du ender opp med 100 H1-tagger og ingen H2, blir strukturen utydelig og hierarkiet blir ikke-eksisterende. Da bør du falle tilbake til én H1 for tittel og deretter H2 osv, som du sier.

Endret av agm
Lenke til kommentar
Suic

Suic

Skrevet
Skrevet

Noen som har no forslag til et drit tøft design til en fotoside? :) Er heeelt blank på de greiene her.. Vant en side fra itpro så tenkte jeg skulle prøve meg fram litt, men er vansklig å finne/lage no tøft no

Lenke til kommentar
mikk-

mikk-

Skrevet
Skrevet

Noen som har no forslag til et drit tøft design til en fotoside? :) Er heeelt blank på de greiene her.. Vant en side fra itpro så tenkte jeg skulle prøve meg fram litt, men er vansklig å finne/lage no tøft no

Det letteste er nok å finne et passende CMS med en fin template. Nå er det lenge siden jeg har drevet med slikt, mulig Wordpress (.org) fortsatt er et godt alternativ?

Lenke til kommentar
Suic

Suic

Skrevet
Skrevet

Noen som har no forslag til et drit tøft design til en fotoside? :) Er heeelt blank på de greiene her.. Vant en side fra itpro så tenkte jeg skulle prøve meg fram litt, men er vansklig å finne/lage no tøft no

Det letteste er nok å finne et passende CMS med en fin template. Nå er det lenge siden jeg har drevet med slikt, mulig Wordpress (.org) fortsatt er et godt alternativ?

Nå er jeg helt ny innen dette så jeg forstår veldig lite av det du sier, hehe. CMS? Wordpress? Er det ett redigeringsprogram?

Lenke til kommentar
torbjørn marø

torbjørn marø

Skrevet
Skrevet

Var på et HTML5-foredrag med en web-dude fra Opera i fjor, og han sa at man ikke behøvde å bruke HEAD og BODY-taggene lengre. Siden har jeg stort sett droppet dem - alt fungerer like fint uten dem ser det ut til. Er dette riktig oppfattet? Hvorfor bør man gjøre det? Hvorfor bør man ikke gjøre det?

Lenke til kommentar
Bolson

Bolson

Skrevet
Skrevet

Ja, de kan droppes uten at det går "gærnt". Nettleserene forstår uansett tagger som title, meta, link selv om de ikke er inne i en head. HTML5 er ennå mer tilgivende enn html har vært tidligere.

 

Nå ser jeg ingen grunn til ikke å bruke de - så vidt jeg vet er det ingen fordeler med å droppe de, og jeg synes det er greit å ha skilt ut "head" og "body". I tillegg har jeg en god del css reset som benytter seg av body-taggen.

 

Ser ellers at HTML5 Boilerplate og en lang rekke andre ressurser for HTML bruker head og body.

  • Liker 2
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...