Har precis sett introduktionsfilmen som du hittar i releaselänken ovan och testkört själva editorn.
Man använder sig av HTML5-taggen Canvas för att rita upp scrollbars, de grafiska elementen samt även själva texten om jag förstått det hela rätt. Det gör att man kan finna funktioner som inte funnits på nät-applikationer innan. T ex kan de mäta längden på textsträngar och få texten att anpassa sig efter de omliggande panelerna och hur mycket utrymme som finns tillgängligt.
Prestandan på textediteringen blir med hjälp av Canvas-rendereringen väldigt god. I videon visas exempel på hur man redigerar en fil på över 30000 rader och det fortfarande går väldigt snabbt att skriva. Något vi inte sett på webben innan.
Även fast det är en tidig protoyp ser det mycket lovande ut och jag tror detta kan utvecklas till något riktigt häftigt. Senast för nån timme sen satt jag och försökte editera kod i en TinyMCE-editor som jag har konfigurerat själv och det är verkligen en stor möda. Det behövs något bättre på webben och Bespin kan vara svaret.
Målet med projektet är att skapa en produkt som kan mäta sig med med traditionella kodredigerare som körs i skrivbordsmiljö. Än är det nog läng väg kvar innan jag ska byta ut Visual Studio mot ett webbaserat alternativ, men kanske blir det tillräckligt bra i framtiden för att man ska göra viss del av sitt kodande ute i molnet. Möjligheten till att kollaborera många andra användare samtidigt i samma filer är minst sagt intressant.
I det första utförandet stöjder Bespin syntax highlighting för Javascript, HTML och CSS, men fler språk kommer att läggas till i senare versioner.
Man kan programmerar egna kommandon och på så sätt utöka editorn med egen funktionallitet. Det kommer även finnas en modell för att kunna dela dessa påbyggnader med andra användare.
Har precis fixat så att kodexempel i denna blogg får syntaxen framhävd med färger så den förhoppningsvis ska bli mer lättläst. Det engelska uttrycket är ju "syntax higlighting" men jag hade lite svårt att hitta en svensk motsvarighet först. Kristoffer på Bloggy hjälpte mig och tipsade om "syntaxmarkering", som fick blir titel på detta inlägg.
När jag sökte efter en metod att få till detta hittade jag några olika alternativ, i en tråd på Stack Overflow går man igenom några av dem.
Vissa tycker att det är en bra ide att märka upp koden med html och css i förhand, och spara den färdigformatterad i databasen. Detta kan man bland annat göra med ett plugin till Visual Studio som heter CopySourceASHtml. Jag dock att jag inte ville ha in detta i databasen utan att koden skulel sparas helt utan extra HTML och CSS. För om man vill ändra på det i efterhand så är det ju omständigt att behöva ändra alla gamla exempel.
Istället beslutade jag mig för att använda Javascript och att formatteringen ska ske i besökarens webbläsare. Uppritningen blir ju något långsammare, men de andra fördelarena var tillräckligt stora för att jag skulle gå på detta spåret.
Ett sådant javascript är google-code-prettify men eftersom det inte verkar ha stöd för C# så var det inget alternativ för denna blogg som har större delen av kodexemplen på det programmeringsspråket.
Istället valde jag samma som Scott Hanselman och bloggplattformen Wordpress använder sig av. Det heter SyntaxHighlighter och är utvecklat av Alex Gorbatchev.
Ett litet problem är dock att koden ska märkas upp på följande sätt och name inte är godkänt attribut på <pre>-taggen enligt XHTML-standarderna.
<pre name="code" class="javascript">
// the code
</pre>
Lars Corneliussen har dock fixat ett jQuery-plugin beautyOfCode som ändrar beteendet i SyntaxHighlighter så man istället kan använda följande struktur:
<pre class="code">
<code class="javascript">
// the code
</code>
</pre>
Än så länge har jag bara gjort om kodexemplena på förstasidan i bloggen till att använda syntaxmarkeringen. Ska fundera lite på hur jag ska ändra alla gamla exempel som fortfarande bara visas med en grå ruta.
Blev nyligen kontaktad av Turbotrollet, med en fråga om hur hon skulle kunna lägga till en spalt med reklam längst ut till höger på hennes blogg. Hon har även lagt ut frågan tidigare på bloggen men inte kunnat hitta någon bra lösning än.
För att få till en sådant utseende på den befintliga designen hon har så tror jag att själva den behållare som heter #main bör breddas till typ 960 pixlar (nu är den 630). Sen ändra #sidebar så den har float:left och sedan lägga till ytterligare en div med float:right till höger om den och kalla den #ads.
Inte helt lätt alltså om man inte är duktig på html och css, vi brukar säga att CSS-positionering är ungefär lika lätt som kvantfysik ;)
Så mitt råd är nog att försöka hitta ett färdigt Wordpress-tema med den design som eftersökes. Vet att jag läste nyligen om nån svensk bloggare som gjorde om sin blogg ungefär så, men hittar inte länken.
Någon som har tips om bra Wordpress-tema att använda, som har en sådan högerspalt för reklam?
Att skapa hemsidor utan rullningslistor har varit en strävan inom viss webbdesign. Nu för tiden börjar folk vänja sig vid dem och det börjar till och med göras sidor som rullar i evighet.
Om man har en webbplats med olika långa sidor på, och innehållet dessutom är centrerat, så kan detta få till följd att sidan "hoppar" i sidled när man navigerar. Detta beror på att när scrollbarsen visas så minskas webbytan med ca 16px.
För att förhindra detta kan man som CSS-Tricks förklarar, ställa in i stilmallen att scrollbars alltid ska vara framme. Om innehållet är mindre än tillgänglig yta så blir rullisten inaktiv.
Som ni kanske märker på mina senare inlägg så är jag i en hård batalj med IE6. Webbläsaren stödjer inte CSS-attributet position:fixed så vill man ha element som ligger på samma plats så blir det problem.
I mitt fall ville jag ha en footer som hela tiden låg i nedre kanten av skärmen. På de moderna webbläsarna fungerar denna CSS.
#footer { width:700px; z-index:10; }
div[id=footer] { /* for real browsers */ position: fixed !important; top:auto !important; bottom:0; }
För att få till samma effekt på IE6 så kan man länka in ett speciellt stylesheet med hjälp av conditional comments. För att bara länka på IE6 eller lägre versioner kan man köra så här.
Jag hittade sen scriptet jag behövde på en sida som visar hur man kan positionera element på IE6, uppe i mitten eller som i mitt fall i nederkanten. Eftersom CSSen använder "stjärn-hacket" så hade det inte behövt att ligga i en egen stylesheet. Men det kändes bättre eftesom jag inte ville blanda in denna bizarra kod för de moderna webbläsarna.
Att inkludera CSS-filer dynamiskt är något jag märker att vi gör allt oftare i projekten. Så dags att spara på bloggen hur man gör så vi slipper hitta exempel varje gång.
HtmlGenericControl includeCss = new HtmlGenericControl("link"); includeCss.Attributes.Add("type", "text/css"); includeCss.Attributes.Add("rel", "stylesheet");
Imorgon ska jag lära en kille grunderna i webb-design och html-programmering. Tänkte även att detta kan vara något att skriva om i bloggen, så andra läsare kan få nytta av detta.
Ett enkelt exempel i XHTML
Nu ikväll har jag förberett en enkel stuktur för en webbplats för att ha något att börja med. Denna kan ni se på följande länk:
Exempel-sajten är kodad i XHTML 1.0. Funderade ett tag på om det var bättre att använda HTML som första exempel, men vi kör med XHMTL till en en början så får vi se.
Layout utan tabeller
Sajten i exemplet är kodad utan tabeller använder istället <div>-taggar som positioneras med hjälp av CSS.
Validerad
Ofta stöter man på konstigheter med att olika webbläsare visar layouten olika. Det första man bör göra är att se till att korrekt CSS och HTML (länkarna går till valideringsverktygen hos W3C). Det är en förutsättning för att de olika webbläsarna ska få en chans att visa ditt innehåll som det var tänkt.
Övrigt
Till sajten har jag använt lite externa resurser. "Lorem Ipsum"-texterna har jag fått genererade här och bakgrundbilden lånade jag från Kaliber 10000.
Måste först passa på att tacka Andy Budd (även om han antagligen inte förstår svenska så bra). Många av mina senaste CSS-relaterade inlägg kommer från hans länk-RSS.
Där snappade jag även upp det förträffliga tipset om Firefox-tillägget Dust-Me Selectors.
Ni som hängt med här på bloggen kanske kommer ihåg att vi skrev om ett annat verktyg för CSS-redundans-kontroll. Det fungerade bara lokalt och med statiska HTML-filer så vi eftersökte ett liknande verktyg som fungerade online. Nu har vi alltså funnit det i form av detta Firefox-godis.
Dust-Me Selectors ger alltså en rapport på ej använda CSS-klasser och ID och man kan välja att spara ner dem i en komma-separeras CVS-fil.
Ni kan se en del av rapporten för vår webbplats här ovan, där man kan se att det finns en del oanvända klasser. Detta gäller bara fronten som är den sida som jag scannade, de flesta av selektorerna använd någonstans längre in i sidans struktur. En del av dem läggs till med Javascript och dessa kan inte tillägget hitta.
Blueprint är ett projekt på Google Code som är släppt som öppen källkod under MIT licens. Det är en uppsättning CSS-mallar som skapar en smidig grund att bygga din CSS-design ovanpå. Efter en snabb koll tycker jag det ser riktigt bra och man har lagt fokus på att följa webbstandarder och tabell-lös design.
Intressant att notera är demosajtens bredd (skärmdump här ovan) som är exakt 960px bred. Det ger en ytterligare bekräftelse att detta börja bli ett slags standardmått, nu när fler och fler användare sitter på 1024-skärmar. Läs gärna vår tidigare artikel som handlar om att designa webbsidor med 960px bredd och rutnät. Kan tänka mig att dessa ideer har inspirerat folket bakom Blueprint.
Något annat värt att notera i Blueprint-projektet är att man har möjlighet att placera textraderna i jämna rader vertikalt. Tidigare länk på detta ämne finns hos oss, här.
Blueprint verkar alltså vara ett riktigt intressant projekt värt att kolla närmare på, för alla som vill ha en bra grund till CSS-design och ger ett bra rutnät, mall för utskrift och typografi-regler.
Den senaste månaden har vi jobbat en hel del med pappersutskrifter av olika det slag, så det kan nog bli en del blogg-material om det i framtiden.
Tänkte börja med grunderna i för hur man formaterar en sida för utskrifter med CSS. Ofta vill man ju inte att allt som syns på skärmen ska komma mer på utskriften, då lägger man till en separat stilmall enligt följande.
I denna stilmall kan det vara bra att ställa in fontstorleken i punkter. Här kommer ett exempel där jag har angett hur all text ska visas i body-elementet. Font-storleket har jag satt till 7 punkter som ger en rätt liten text och gör att man får plats med mer på ett papper. Vit bakgrund är ju också bra om man har något annat i sin riktiga stilmall. Grådaskiga utskrifter är inget bra och drar en hel del bläck i onödan.
body { color : #000000; background : #ffffff; font-family: Verdana, Arial, Helvetica, san-serif; font-size : 7pt; }
De delar som inte ska vara med på utskriften sätter man till display till none, så här:
Sen ett sjysst tips på Snook.ca som förklarar hur man kan ange vart en ny sida ska börja när man skriver ut. Det kände jag inte till innan men har eftersökt ett sätt att göra detta på.
