oriolrius.cat

Des del 2000 compartiendo sobre…

Tag: css

Imprimir color de fons en una taula HTML

2007/09/20 2 comentaris

Reading time: 5 – 8 minutes

Com molts sabreu, sobretot els que ho heu intentat. Si tenim una pàgina web amb una taula que té algún color de fons o imatge al enviar-la a la impresora aquesta no s’imprimeix. Només és possible imprimir la lletra i el contorn de la taula. Doncs bé, alguna vegada es pot tenir la necessitat que això passi. Aquí és on comença el problema i on intento explicar la solució que em van donar l’Oriol i la Sara.

La idea és per exemple, tenir una taula tan simple com aquesta:

Gràcies al següent codi HTML i CSS. Podriem tenir la vista anterior per pantalla i el color de fons blavós que es veu a la captura del final de l’article a l’imprimir:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
	<head>
		<title>PROVA</title>
		<style media='screen'>
		<!--
		body{font-family:arial,sans-serif; font-size:12px; text-align:left;}
		.marc tr td {border-width:1px; border-style:solid; border-color:#999999;}
		.capçalera {background-color:#ABAE8A; font-weight:bolder; text-align:center;}
		-->
		</style>
		<style media='print'>
		<!--
		body{font-family:arial,sans-serif; font-size:13px; text-align:left;}
		.marc tr td {border-width:1px; border-style:solid; border-color:#999999;}
		.capçalera {font-weight:bolder; text-align:center; font-size:11px;}
		table, td {margin: 0; padding: 0;}
		td {margin: 0; padding: 0;}
		div { border-bottom: 14px solid ; border-bottom-color:#ADCEF7;}
		span {display: block; margin-bottom:-14px; float:left;}
		-->
		</style>
	</head>
	<body>
		<table>
			<tr><td class='capçalera'>
				<div><span>TITULO</span></div>
			</td></tr>
			<tr><td >
				alsjfaljfaljflask
			</td></tr>
			<tr><td >
				Salñsjfalñjfdalñskf
			</td></tr>
		</table>
	</body>
</html>

Descarregar el codi.

La taula imprimida quedaria així:

Com podeu veure el que fa el codi CSS és jugar amb les cantonades de la taula que si que s’imprimeixen, llavors els dona el suficient gruix com perquè pintin tota la capçalera i finalment col·locant el text al damunt de les cantonades perquè doni la sensació que esta al seu lloc. Un gran eginy realment, llàstima que no hi hagi res més elegant per fer-ho.

FireBug: complement del firefox perfecte pels programadors de webs

2007/02/08 No hi ha comentaris

Reading time: 3 – 4 minutes

Pensava que la extenció web developer toolbar del firefox era la bomba, però avui l’Ernest m’ha obert els ulls. Realment el Firebug li dona mil patades. És realment impresionant. El meu no és programar web ni molt menys varallar-me sovint amb els CSS, JavaScript ni HTMLs. Però sovint quan programes aplicacions ASP una eina d’aquestes t’estalvia moltes hores de feina. Per exemple, el model de templates que usa symfony no seria precisament un model WYSIWYG. Així doncs, quan toca escriure codi pelat, el Firebug ens pot fer anar molt al gra. La veritat és que l’Oriol ho hagués agraït en algún moment en que depurava un codi JavaScript, oi Oriol?

Les funcions del Firebug són tantes que fa fins hi tot mandre repassar-les, però en faré una breu llista a base de copy/paste:

Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
Inspect and edit HTML Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
Tweak CSS to perfection Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
Visualize CSS metrics When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.
Monitor network activity Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.
Debug and profile JavaScript Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
Quickly find errors When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.
Explore the DOM The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.
Execute JavaScript on the fly The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities.
Logging for JavaScript Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.

aptana: eina professional per programar UI Web

2006/08/04 No hi ha comentaris

Reading time: 2 – 2 minutes

aptana esta disponible per Mac, Windows, Linux i fins hi tot com a plug-in per l’Eclipse. Així doncs es tracta d’una eina que ens ajudarà a programar. Com ja posava en el títol esta orientada a la creació d’interficies d’usuari via web. Ralment és per gent molt i molt professionals, abstenir-se principiants. Ja que li treurem realment el suc quan treballem amb JavaScript, AJAX, Yahoo UI, CSS, Dojo Javascript library, etc. De fet no em declaro ni usuari de l’eina ni segurament futur usuari de la mateixa, però això no treu que després de veure els screencast que té l’eina m’hagi caigut la baba i hagi sabut apreciar la gran feina que s’ha fet per crear una eina com aquesta.

Per si tot això fos poc es tracta d’una eina OpenSource i com ja he dit multiplataforma. L’aspecte gràfic esta molt acurat i a més suporta força navegadors per comprobar que el codi que anem programant és compatible en tots ells. Com passa en tots els projectes vanguardistes també disposa d’un blog des d’on podeu anar seguint les millores que va tenint el programa, ja que ara mateix només hi ha disponible la versió beta.