HTML-specifikationen - Overholder i den?

[thj01]

@ thomasjohansen

Det problem du beskriver der er jo egentlig ikkke wc3's eller CSS's skyld, men de forskellige browser-producenters dårlige arbejde. Egentlig fungerer alle browserer ad H.... til med standard html/css, og de skal alle tweakes på specielle punkter for at få tingene til at spille.

Det er netop årsagen til at man definerer helt nye HTML5 og CSS3 regler og det interessante er også, at der ved hvert tag i wc3 schools er angivet hvilke browsere der understøtter de nye formater

se f.eks. http://www.w3schools.com/css3/css3_2dtransforms.asp og http://www.w3schools.com/html5/tag_canvas.asp

Desværre skal vi nok vente helt til 2021 før at alt er fuldt ud impplementeret i en standardiseret form, men i følge de kloge hoveder går processen langt hurtigere lige nu end forventet. Bl.a. fordi især Google men også Firefox bevidst knokler for at understøtte mest muligt.

Speciet MS er jo i deep shit, fordi en del af deres argumenter med hele deres produktlinie er jo at den er integreret og samarbejdende. Og dem af os der følger med i odf og docx føljetonen ved hvor store vanskeligheder MS har haft og har med at få deres format til at makke ret.

Browseren er der hvor data i dag udstilles og i stor udstrækning også fremstilles og indtastes. Og MS mister hele klient siden, hvis det er et fedt hvilken browser og hvilket styresystem man anvender.

På min uddannelse programmerede vi i HTML5 i sidste halvår - og der var Chrome den eneste browser der kunne klare al mosten. ( og jeg havde STOR fordel af at anvende Linux gg) Og så er det jo væsentligt at huske på at HTML5 understøtter det semantiske web i langt højere grad end tidligere versioner.

[thomasjohansen]

Sad og så en video igår omkring html5.


her var finten for midterstilling ca sådanne:

position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;


Den skal prøves, når jeg får tid, dog erindrer jeg noget om at IE ikke er så meget for negative pixle værdier...

link til video 4:51 min inde i videoen:
http://youtu.be/U6iH1B2tkuc

[AJenbo]

Problemet skulle gerne være løst mindst siden IE7.
Et problem med den teknik er at man skal have en fast brede på elementet samt at den kan glide uden forskærmen i venstre side. Jeg har dog selv brugt den i visse tilfælde.

Jeg er foresten også overgået til Geany som editor nu, der er nogle små ting ved den som jeg ikke har fundet mig helt tilpads med men alt i alt er det en af de bedste jeg har brugt.

[lath]

Problemet skulle gerne være løst mindst siden IE7.
Et problem med den teknik er at man skal have en fast brede på elementet samt at den kan glide uden forskærmen i venstre side. Jeg har dog selv brugt den i visse tilfælde.

Jeg er foresten også overgået til Geany som editor nu, der er nogle små ting ved den som jeg ikke har fundet mig helt tilpads med men alt i alt er det en af de bedste jeg har brugt.

Geany har ekstra plugins, det kan være nogle af dem løser dit problem. De er nok nemmest at finde og installere med Synaptic (som er min favorit pakke-manager).

Det er i øvigt en ret god letvægt-editor, der er generelt kun noget super-hurtigt over det program

/Lars

[thj01]

Geany er GUD

Og hvis i mangler nogle HTML5 snippits, kan jeg levere. Programmerede HTML5 dokumenter til den store guldmedalje på sidste semester

De andre sad og fedtede notepad++, som også er udemærket - men bare ikke lige så god som geany!!!

[NickyThomassen]

Og hvis i mangler nogle HTML5 snippits, kan jeg levere. Programmerede HTML5 dokumenter til den store guldmedalje på sidste semester

Dem vil jeg gerne se, hvis det altså ikke er for meget arbejde

Måske i sandkassen hvis det er?

[lath]

Og hvis i mangler nogle HTML5 snippits, kan jeg levere. Programmerede HTML5 dokumenter til den store guldmedalje på sidste semester

Dem vil jeg gerne se, hvis det altså ikke er for meget arbejde

Måske i sandkassen hvis det er?

oxo mig!
Jeg synes at HTML5 er ret interessant

Smid enelig et link - haster ikke, tag dig god tid

/Lars

[buddig]

Geany er GUD

Og hvis i mangler nogle HTML5 snippits, kan jeg levere. Programmerede HTML5 dokumenter til den store guldmedalje på sidste semester

De andre sad og fedtede notepad++, som også er udemærket - men bare ikke lige så god som geany!!!

Det lyder da helt vildt.
Notapad++ er absolut rigtig god, bluefish og gedit er også gode, men jeg skal åbenbart opleve den rigtige goddommelighed.
Jeg skal undlade at spørge, den eneste måde at forstå det på, er vel at prøve.
Så jeg installerer geany nu...
Henning

[buddig]

Mange tak for tippet, så er geany installeret.
Jeg åbnede lige et par filer i mit projekt, bl.a. en css fil, og indtil videre må jeg give jer ret, det er Gud.
Lækkert at få bekræftet at når man tager imod med et åbent sind, så kommer Guds gaver til en.
Henning

[Rattus Norvegicus]

Jeg har brugt Aptana Studio 3 de sidste par måneder, selv om det ikke er i Ubuntu's repos, men skal hentes fra deres hjemmeside:
http://www.aptana.com/

Jeg synes den er alle de andre open source editorer langt overlegne og html og css redigering har mildest talt været legene let, og det siges at understøtte både html5 og css3, plus det undestøtter javascript, php samt en masse andre programmeringssprog

[thj01]

Snippits her:

Kode: Vælg alt

# Geany's snippets configuration file
#
# use \n or %newline% for a new line (it will be replaced by the used EOL char(s) - LF, CR/LF, CR).
# use \t or %ws% for an indentation step, it will be replaced according to the current document's indent mode.
# use \s to force whitespace at beginning or end of a value ('key= value' won't work, use 'key=\svalue').
# use %key% for all keys defined in the [Special] section.
# use %cursor% to define where the cursor should be placed after completion. You can define multiple
#     %cursor% wildcards and use the "Move cursor in snippet" to jump to the next defined cursor
#     position in the completed snippet.
# You can define a section for each supported filetype to overwrite default settings, the section
# name must match exactly the internal filetype name, run 'geany --ft-names' for a full list.
#
# Additionally, you can use most of the template wildcards like {developer} or {date} in the snippets.
# See the documentation for details.

# filetype names:
# ASM, C, C++, C#, CAML, D, Fortran, FreeBasic, Haskell, Haxe, Java, Pascal, VHDL, Ferite, Javascript,
# Lua, Make, O-Matrix, Perl, PHP, Python, Ruby, Sh, Tcl, CSS, Docbook, HTML, XML, Conf, Diff, LaTeX,
# reStructuredText, SQL, None

# Default is used for all filetypes and keys can be overwritten by [filetype] sections
[Default]
if=if (%cursor%)%block_cursor%
else=else%block_cursor%
for=for (i = 0; i < %cursor%; i++)%block_cursor%
while=while (%cursor%)%block_cursor%
do=do\n{\n\t%cursor%\n} while(%cursor%)\n%cursor%
switch=switch (%cursor%)%brace_open%case %cursor%:\n\t\t%cursor%\n\t\tbreak;\n\tdefault:\n\t\t%cursor%\n%brace_close%%cursor%
try=try%block%\ncatch (%cursor%)%block_cursor%

# special keys to be used in other snippets, cannot be used "standalone"
# can be used by %key%, e.g. %brace_open%
# nesting of special keys is not supported (e.g. brace_open=\n{\n%brace_close% won't work)
# key "wordchars" is very special, it defines the word delimiting characters when looking for
# a word to auto complete, leave commented to use the default wordchars
[Special]
brace_open=\n{\n\t
brace_close=}\n
block=\n{\n\t%cursor%\n}
block_cursor=\n{\n\t%cursor%\n}\n%cursor%
#wordchars=_abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

[C++]
for=for (int i = 0; i < %cursor%; i++)%brace_open%\n%brace_close%

[Java]
for=for (int i = 0; i < %cursor%; i++)%brace_open%\n%brace_close%

[PHP]
for=for ($i = 0; $i < %cursor%; $i++)%brace_open%\n%brace_close%

[Python]
for=for i in xrange(%cursor%):\n\t
if=if %cursor%:\n\t
elif=elif %cursor%:\n\t
else=else:\n\t
while=while %cursor%:\n\t
try=try:\n\t%cursor%\nexcept Exception, ex:\n\t
with=with %cursor%:\n\t
def=def %cursor% (%cursor%):\n\t""" Function doc """\n\t
class=class %cursor%:\n\t""" Class doc """\n\t\n\tdef __init__ (self):\n\t\t""" Class initialiser """\n\t\tpass

[Ferite]
iferr=iferr%block_cursor%fix%block%
monitor=monitor%block_cursor%handle%block%

[XML]
cmt=<!-- %cursor% -->

[HTML]
#HTML5 addons
#by Thomas Jensen <thj001@gmail.com>
#Some of Tomasz Karbownicki's <tomasz@karbownicki.com> snippits has ben HTML5'ified
#
#If you use his snippets you have to outcomment (#) the lines vith: html and utf
#

#top

doctype=<!DOCTYPE html>

html=<html>\n\t%cursor%\n</html>
head=<head>\n\t%cursor%\n</head>
utf=<meta charset="UTF-8" />
script=<script>\n\t%cursor%\n</script>
style=<style>\n\t%cursor%\n</style>



title=<title>%cursor%</title>
meta=<meta id="%cursor%" />
header=<header>\n\t%cursor%\n</header>
hgroup=<hgroup>\n\t%cursor%\n</hgroup>
details=<details>\n\n\t<summary>%cursor%</summary>\n\n\t<p></p>\n\n</details>
article=<article>\n\t%cursor%\n</article>
nav=<nav>\n\t%cursor%\n</nav>
aside=<aside>\n\t%cursor%\n</aside>
footer=<footer>\n\t%cursor%\n</footer>
q=<q cite="%cursor%"></q>
blockq=<blockquote cite="%cursor%"></blockquote>
figure=<figure id="%cursor%">\n\n\t<figcaption>%cursor%</figcaption>\n\n\t<img src="%cursor%" alt="%cursor%" title="%cursor%" />\n\n</figure>
abbr=<abbr title="%cursor%"></abbr>
dfn=<dfn>%cursor%</dfn>
adress=<address>%cursor%</address>

iframe=<iframe src="%cursor%"></iframe>

section=<section>%cursor%</section>
address=<address>%cursor%</address>

audio=<audio controls="controls">\n\n\t<source src="%cursor%" type="audio/ogg"/>\n\t<source src="" type="audio/mp3" />\n\tYour browser does not support the audio tag.\n\n</audio>

video=<video width="" height="" controls="controls">\n\n\t<source src="%cursor%" type="video/mp4" />\n\t<source src="" type="video/ogg" />\n\tYour browser does not support the video tag.\n\n</video>

#SEO Schema.org
#by Thomas Jensen <thj001@gmail.com>
is=itemscope itemtype="%cursor%"
it=itemtype="%cursor%"
ip=itemprop="%cursor%"
ir=itemref="%cursor%"





# by Tomasz Karbownicki <tomasz@karbownicki.com>
# top


js=<script type="text/javascript">\n\t%cursor%\n</script>
js2=<script src="%cursor%" type="text/javascript"></script>
css=<style type="text/css">\n\t%cursor%\n</style>
css2=<link href="%cursor%" rel="stylesheet" type="text/css" />
rss=<link rel="alternate" type="application/rss+xml" title="%cursor%" href="%cursor%" />

ie7=<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
body=<body>\n\t%cursor%\n</body>
# table
table=<table>\n\t<thead>\n\t\t<tr>\n\t\t\t<th>%cursor%</th>\n\t\t</tr>\n\t</thead>\n\t<tbody>\n\t\t<tr>\n\t\t\t<td>%cursor%</td>\n\t\t</tr>\n\t</tbody>\n</table>
td=<td>%cursor%</td>
tr=<tr>%cursor%</tr>
th=<th>%cursor%</th>
caption=<caption>%cursor%</caption>
# form
form=<form action="%cursor%" method="post">\n\n\t<input type="submit" value="%cursor%" />\n</form>
formp=<form action="%cursor%" method="post">\n\n\t<p>{{ form.as_p }}</p>\n<p><input type="submit" value="%cursor%" /></p>\n</form>
label=<label for="%cursor%"></label>
input=<input type="text" name="%cursor%" value="%cursor%" id="%cursor%" />
pass=<input type="password" name="%cursor%" id="%cursor%" />
textarea=<textarea name="%cursor%" cols="50" rows="10" id="%cursor%" ></textarea>
select=<select name="%cursor%" id="%cursor%">\n\t<option value="%cursor%"></option>\n</select>
radio=<input type="radio" name="%cursor%" value="%cursor%" />
checkbox=<input type="checkbox" name="%cursor%" value="%cursor%" />
button=<button type="%cursor%">%cursor%</button>
fieldset=<fieldset>\n\t<legend>%cursor%</legend>\n</fieldset>
# list
ul=<ul class="%cursor%">\n\t<li>%cursor%</li>\n</ul>
ol=<ol class="%cursor%">\n\t<li>%cursor%</li>\n</ol>
li=<li>%cursor%</li>
dl=<dl class="%cursor%">\n\t<dt>%cursor%</dt>\n\t<dd>%cursor%</dd>\n</dl>
dt=<dt>%cursor%</dt>
dd=<dd>%cursor%</dd>
# inline
a=<a href="%cursor%">%cursor%</a>
span=<span>%cursor%</span>
em=<em>%cursor%</em>
small=<small>%cursor%</small>
big=<big>%cursor%</big>
cite=<cite>%cursor%</cite>
strong=<strong>%cursor%</strong>
img=<img src="%cursor%" alt="%cursor%" title="%cursor%" />
thumb=<a href="%cursor%"><img src="%cursor%" alt="%cursor%" title="%cursor%" /></a>
# block
div=<div class="%cursor%">%cursor%</div>
h1=<h1>%cursor%</h1>
h2=<h2>%cursor%</h2>
h3=<h3>%cursor%</h3>
h4=<h4>%cursor%</h4>
h5=<h5>%cursor%</h5>
h6=<h6>%cursor%</h6>
p=<p>%cursor%</p>
pre=<pre>\n%cursor%\n</pre>
code=<code>%cursor%</code>
prec=<pre><code>%cursor%</code></pre>
quote=<blockquote>\n\t<p>\n\t\t%cursor%\n\t</p>\n</blockquote>
# other
cmt=<!--\n\t%cursor%\n-->
cmt2=<!-- %cursor% -->
br=<br/>
hr=<hr/>
1s=&nbsp;
3s=&nbsp;&nbsp;&nbsp;
7s=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
# Django templates
if={% if %cursor% %}\n\t\n{% endif %}
for={% for sth in %cursor% %}\n\t%cursor%\n{% endfor %}
dv={{ %cursor% }}
db={% %cursor% %}
dbl={% block %cursor% %}\n\t%cursor%\n{% endblock %}
trans={% trans "%cursor%" %}
# jQuery
jquery=<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
jqueryui=<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
jready=$(document).ready(function(){\n\t%cursor%\n});
jfunc=$(function(){\n\t%cursor%\n});
log=console.log('%cursor%');
[CSS]
# by Tomasz Karbownicki <tomasz@karbownicki.com>
bc=background-color: %cursor%;
bct=background-color: transparent;
ba=background: %cursor% url('%cursor%') %cursor%;
ma=margin: %cursor%;
pa=padding: %cursor%;
bo=border: %cursor%;
co=color: %cursor%;
he=height: %cursor%;
wi=width: %cursor%;
di=display: %cursor%;
fs=font-size: %cursor%;
ff=font-family: %cursor%;
fw=font-weight: %cursor%;
ta=text-align: %cursor%;
fl=float: %cursor%;
im=!important
po=position: %cursor%;
ov=overflow: %cursor%;
ra=-moz-border-radius: %cursor%px; -webkit-border-radius: %cursor%px; border-radius: %cursor%px;
sh=border-shadow: %cursor%px %cursor%px #%cursor% %cursor%px;
cmt=/* ######### %cursor% ######### */

#CSS addons by Thomas Jensen <thj001@gmail.com>

ml=margin-left: %cursor%;
mr=margin-right: %cursor%;
mt=margin-top: %cursor%;
mb=margin-bottom: %cursor%;

pl=padding-left: %cursor%;
pr=padding-right: %cursor%;
pt=padding-top: %cursor%;
pb=padding-bottom: %cursor%;

bl=border-left: %cursor%;
br=border-right: %cursor%;
bt=border-top: %cursor%;
bb=border-bottom: %cursor%;

Personligt bruger jeg langt hellere end kode editor til at arbejde med HTML/CSS end en WYSIWYG editor. For det første kan man arbejde semantisk og korekt med indholdet - og for det andet, så får det en til at lave nødvendige kommentarer med det samme.

Og specielt det med kommentarerne er til STOR hjælp når man ½ år efter skal kigge sin kode igennem

[AJenbo]

Det er især søge funktionen jeg ikke er så glad for i Geany.
1: Det kunne være godt hvis den ikke kom med en besked om den skulle starte for fra når den når enden af dokumentet.
2: Fremhævede alle resultater.
3: At man kunne trykke ctrl+g for at gå til næste selv om føge vinduet står åbnet.

Nogen der har en løsning på de 3?

P.s. Kunne også godt tænke mig at "go to line" blev udført mens man skrev.

[AJenbo]

Ok her er noget jeg lige har "lavet" til Geany til at tjekke for syntaxt fejl i ens PHP script.

Start med at installere PHP_CodeSniffer:

Kode: Vælg alt

sudo pear install PHP_CodeSniffer

(Den i softwarecenteret er forældet ifht den PHP der er i Ubuntu)

Åben Build->Set Build Commands, sæt Command til:

Kode: Vælg alt

phpcs "%f" | sed -e 's/^/%f |/'

Sæt Error Regular Expression til:

Kode: Vælg alt

(.+) [|]\s+([0-9]+)

Når du her efter køre compile/make vil du få en liste af fejl i det nedereste vindue og tilmed kunne trykke på linjerne for at hoppe til fejlen i din kode. Det virker desuden også med CSS og JavaScript filer.

Der ud over har jeg også Compile til at være:

Kode: Vælg alt

php -l "%f"

Her er Error Regular Expression dog tom da Geanys egen parser virker til den.