Cacauet Wiki - Contribucions de l'usuari [ca]

Web Applications

2013-10-07T18:02:36Z

Toni:

This is part of the subject of technical studies in informatics SMX (Sistemes Microinformàtics i Xarxes).

You can find here contents for the subject.

I recommend the following <u>book</u> to follow the course:

'''Aplicaciones web'''
Editorial McGraw-Hill
Authors: R.V. Lerma-Blasco, J.A. Murcia, R.Juncos, E. Misfund

== UF5: HTML and CSS ==
Will be done along the academic year, in parallel with the rest of UFs.

UF5 will be done along the year all the Wednesdays. People that cannot come on Wednesday have to complete the tasks at home (indicated in the moodle site).

* [http://iesgregorimaians.edu.gva.es/ManualHTML/manual.html Curs de HTML en català].
* [http://www.dense13.com/wec/curscss/ Curs de CSS en català] de Gonzalo Pérez de la Ossa.
* [http://www.w3schools.com/ W3Schools] is a good reference for HTML and CSS.
* [http://en.wikibooks.org/wiki/HTML HTML in Wikibooks]
* [http://en.wikibooks.org/wiki/CSS CSS in Wikibooks]

<br/>

== UF1: Online office ==
[[Imatge:browser_war3.jpg|400px|float|dreta]]

Some theory:
* [[Web technology overview]]
* [[WWW History]]

Online office and groupware:
* [[IMAP vs POP3 email protocols]].
* [[Online Google calendars]]
* [[Google Groups]]
* [[Google Docs]]
* [[Google Forms]]

Desktop web applications:
* [[Desktop web applications]] (Prism and Gears)
* [[Kiosk mode]]. Not done yet. Podeu llegir aquest [http://enricmieza.com/blog/?p=14 article del mode kiosk] en català.
* [[Online desktops]] (EyeOS)
* [[EyeOS installation]]

== UF2: Online file sharing ==
* [[Google Sites]] as a wiki environment and file sharing.
* [[File Sharing Services]]
* [[Dropbox]]
* [[Groupware web applications]]
* [[Mediawiki]]
* [[Gallery]]
* You may need to use this tools to install the CMSs:
** [[SQL creacio]] (to create and import MySQL databases)
** [[Subversion]] (to download software from svn repositories)
*...

== UF3: Content Management Systems (CMSs) ==
For the rest of the course we'll need to publish our works. You will need to set up a domain name and hosting service. It can be free or not (it's up to you to pay if you don't want to have advertisements in your website).
* [[Setting up a free website]]
* [[Wordpress]]
* [[Joomla!]]
** [[Joomla! users and articles]]
* [[Drupal]]
* ...

== UF4: E-learning ==
* [[CMS backup and restoring]]
* [[Moodle]]

[[Imatge:browser_war4.jpg]]

[[Imatge:firefox-open-standards.jpg|600px]]

[[Imatge:real-firefox2.jpg|350px]]

Curs de HTML i CSS

2013-10-07T18:01:39Z

Toni:

Repetidament durant el curs utilitzarem referències a aquestes webs:

*[http://iesgregorimaians.edu.gva.es/ManualHTML/manual.html HTML i CSS en català].
*[http://www.dense13.com/wec/curscss/ CSS en català].

<br> El curs de HTML comprèn els següents capítols:

*[[HTML estructura del document]]
*[[HTML text]]
*[[HTML imatges]]
*[[HTML headings i paragrafs]]
*[[HTML exercici resum 1]]
*[[HTML links]]
*[[HTML colors i ajustos del body]]
*[[HTML llistes]]
*[[HTML taules]]
*[[HTML taules 2]]
*[[HTML exercici resum 2]]
*[[HTML taules arrodonides]]
*[[HTML marcs]]

<br> El curs de CSS comprèn els següents capítols: (utilitzarem [http://www.dense13.com/wec/curscss/ aquest curs de CSS en català])

*[[CSS introducció]]
*[[CSS basics]]
*[[CSS selectors]]
*[[CSS classes]]
*[[CSS box model]]
*[[CSS posicionament]]
*[[CSS menus desplegables]]
*...

CSS basics

2012-01-17T12:29:26Z

Toni: /* Aplicar estils CSS a un document HTML */

Llegeix les [http://www.dense13.com/wec/curscss/curscss.php?seccio=1&capitol=0 primeres passes] del curs de CSS de Gonzalo Pérez de la Ossa.

També pots llegir la [http://www.imaginaserveis.com/manuals/css/manual_css.html introducció al CSS] d'aquest altre manual.

Per començar cal aclarir que el CSS és un afegit de l'estàndard HTML per manipular elements d'un document HTML. En caldrà, doncs:
* '''Adreçar-nos''' a un element del document (tag). Per exemple, al tag <nowiki><P></nowiki> (paràgraf) o al tag <nowiki><H1></nowiki>.
* Aplicar-li una determinada '''propietat'''. Per exemple, que volem el <span style="color:red">text en color vermell</span>.
Llegiu aquest [http://www.dense13.com/wec/curscss/curscss.php?seccio=1&capitol=2 apartat sobre l'adreçament i les propietats] (dins del capítol de ''primeres passes'').

== Aplicar estils CSS a un document HTML ==
Agafem l'exemple del paràgraf en color vermell. En HTML utilitzaríem el tag FONT. En CSS ho podem fer de 3 maneres:
#Inline.
#Amb el tag STYLE (dins el HEAD).
#En una fulla apart (document .css).

En el cas 2 i 3 caldrà adreçar-se a quin element HTML (tag) volem aplicar el color. Vegeu l'exemple per al paràgraf (tag <nowiki><p></nowiki>).

=== Inline ===
Apliquem l'estil dins del l'element concret amb el '''paràmetre style="..."'''.
<syntaxhighlight lang="xml">
<p style="color:red;">El text en vermell</p>
</syntaxhighlight>

Aquesta forma inline s'utiltiza força en el cas dels elements sense format SPAN (dintre d'un paràgraf). Per exemple:

{| border="1" width="800" style=""
! Aquest exemple:
! Donaria com a resultat:
|-
|<syntaxhighlight lang="xml">
Això seria un text normal amb alguna
<SPAN style="color:green">nota verda</SPAN> entre mig.
</syntaxhighlight>
|Això seria un text normal amb alguna <SPAN style="color:green">nota verda</SPAN> entre mig.
|}

=== Fulla d'estils incrustada (embedded) ===
Podem reunir tots els paràmetres CSS en un apartat del HTML, en particular dins el HEAD en l''''element STYLE'''. Assignarem als tags de paràgraf (<nowiki><p></nowiki>) el color vermell.
<syntaxhighlight lang="xml">
<HTML>
<HEAD>
<TITLE>...</TITLE>
<STYLE type="text/css">
p { /* aquest selector apunta als tags <p> (paràgraf) */
color: red;
}
</STYLE>

<BODY>
<p>El text en vermell.</p>
</BODY>
</HTML>
</syntaxhighlight>

=== Fulla d'estils externa ===
Com a '''document extern amb el tag LINK''' dins del HEAD (caldria fer un document "estils.css" amb les dades incloses abans en l'element STYLE).

El document HTML pintaría així:
<syntaxhighlight lang="xml">
<HTML>
<HEAD>
<TITLE>...</TITLE>
<LINK rel="stylesheet" type="text/css" href="estils.css" />
</HEAD>

<BODY>
<p>El text en vermell.</p>
</BODY>
</HTML>
</syntaxhighlight>

I per altra banda necessitem fer un '''arxiu estils.css''' amb el següent contingut:
<syntaxhighlight lang="css">
p {
color: red;
}
</syntaxhighlight>

== Exemple amb 2 propietats ==
Hem vist com canviar el color del text amb la propietat CSS ''color''. Si volem canviar el tamany de la lletra ho podem fer amb la propietat '''''font-size'''''. Per exemple, farem una lletra molt gran (40px) pel H1 en color verd i una lletra molt petita pel P (8px) en color magenta:

<syntaxhighlight lang="xml">
<HTML>
<HEAD>
<TITLE>Exemple de CSS</TITLE>
<STYLE type="text/css">
H1 { /* aquest selector apunta als tags <H1> */
color: green;
font-size: 40px;
}
P { /* aquest selector apunta als tags <P> (paràgraf) */
color: magenta;
font-size: 10px;
}
</STYLE>
</HEAD>

<BODY>
<P>Comencem amb un paràgraf normal, petitet.</P>
<H1>Seguim amb un encapçalament grossot</H1>
<P>I finalitzem amb un altre paràgraf peitet.</P>
</BODY>
</HTML>
</syntaxhighlight>

Donaria com a resultat:
<DIV style="color:magenta;font-size:10px">Comencem amb un paràgraf normal, petitet.</DIV><br/>
<DIV style="color:green;font-size:40px">Seguim amb un encapçalament grossot</DIV><br/>
<DIV style="color:magenta;font-size:10px">I finalitzem amb un altre paràgraf peitet.</DIV><br/>

== Exercicis ==
Òbviament s'han de resoldre utilitzant CSS i sense utilitzar tags HTML com <strike>FONT</strike>.
# Fes un document HTML amb CSS incrustada. Escriu:
#* <span style="color:green">El títol del document amb '''H1''' (en verd, tamany 30)</span>
#* <span style="color:maroon">Els teus plats favorits (mínim 3!) amb '''H2''' (en marró, tamany de lletra 24)</span>
#* <span style="color:olive">Una llista d'ingredients per cada plat (utilitza llistes HTML amb els tags '''UL''' o '''OL'''). Color oliva ("olive").</span>
#* <span style="color:teal">Una petita descripció o recepta de cuina amb el tag '''P''' (color "teal" o cyan).</span>
# Passa l'exercici 1 a una fulla d'estils externa.</span>

Xassís

2009-12-01T12:11:30Z

Toni: Es crea la pàgina amb «== '''La font d'alimentació''' == '''Introducció''' La font d'alimentació es un dispositiu o subsistema que converteix la corrent alterna de la xarxa elèctrica, en un...».

== '''La font d'alimentació''' ==
'''Introducció'''
La font d'alimentació es un dispositiu o subsistema que converteix la corrent alterna de la xarxa elèctrica, en un tipus de corrent adequat per l'ús de dispositius electrònics. Per tant podríem dir que la font d'alimentació és un muntatge elèctric o electrònic que pot transformar la energia elèctrica en un tipus adequat per fer funcionar, en el nostre cas, els ordinadors.
En el nostre cas concret la tensió d'alimentació i la potencia necessària depenen del dispositiu que s'ha d'alimentar en un PC, per tant aquesta font haurà de subministrar diferents tensions per cada una de les necessitats diferents.
'''Característiques'''
Una característica important i que normalment no la tenim en compte és la tensió suportada. En principi a tot Europa la tensió de xarxa és de 220/240V AC 50Hz. Però no en tots els països és així. També encara hi han llocs del nostre territori en que la tensió és de 110V. Per tant si comprem material directament des de un país no comunitari ens haurem d'assegurar que és compatible amb la nostra tensió, com si fabriquem PC's per altres països, ens haurem d'informar quines tensions són les estàndard i utilitzar les fonts adequades. Existeixen models que només funcionen amb un tipus determinat de tensió i altres que permeten ser utilitzats pràcticament en qualsevol zona del món per que poden treballar de forma automàtica amb un nombre molt gran de tensions. N'hi han d'altres que inclouen un petit commutador per a passar d'un voltatge a un altre.
Altres aspectes a tenir en compte són la protecció contra curtcircuits i pujades de tensió, encara que en la pràctica aquesta característica no ens la subministren sempre haurem de suposar que com més cara, més bona i per tant aquesta característica serà millor.
Un dels aspectes d'una font d'alimentació que ens haurem de fixar bé és la seva potència. Aquesta be expressada en Watts (P=V*I) i indica la capacitat per a realitzar un treball, per tant a més potència més dispositius i de major consum podrà alimentar. Actualment per les prestacions de la tarja gràfica i pels dispositius d'emmagatzematge massiu sol ser habitual utilitzar fonts entre 400 i 500 W (watts), encara que també existeixen altres, sobretot per PC de poca capacitat com MicroATX o FlexATX que al tenir menys dispositius i de menor potència oferixen un consum menor.
Una altre característica a tenir en compte es que totes les fonts d'alimentació de pc's per poder ser petites, econòmiques i amb una gran potència la única manera d'aconseguir-ho es eliminant el transformador i per fer-ho aquestes hauran de ser fonts d'alimentació commutades que són completament diferents de les convencionals fonts lineals.
'''Connectors d'una font d'alimentació'''
Els connectors d'una font d'alimentació seran diferents en funció del tipus de font que sigui. N'hi han dos tipus la AT, que és el format més antic, i l'ATX. La diferència està bàsicament en el connector de la font d'alimentació, però també em de tenir en compte que com L'ATX és més modern els nous connectors destinats als nous dispositius que han sortit desprès de la desaparició de l'AT.
En la part del darrere trobarem el típic connector que utilitzarem per a endollar la font a la xarxa elèctrica, i també és pot trobar altre del mateix tipus però "femella" al que podem connectar el monitor en el cas que tinguem el cable adequat. Així quant es para el PC també es pararà el monitor. En tot cas, sempre podrem adquirir un.
Trobarem els cables d'alimentació per a les unitats d'emmagatzematge tals com discs durs, CDROM,...
Aquest és el connector dels dispositius IDE, ATA o PATA, el podrem trobar tant per fonts del tipus AT com ATX. Per els nous dispositius serial ATA el connector és diferent i només el trobarem amb fonts ATX.
O també trobarem un o dos per a la disquetera.
Aquests són els dos connectors que van a la placa base AT anomenats com P8 i P9. En aquest últim cas és molt important no confondre'ls, doncs ambdós són físicament iguals. Una forma de comprovar que els estem connectant de forma correcta és comprovar que els cables de color negre estiguin junts.
En les màquines ATX pot haver-hi un connector i només es pot connectar d'una manera concreta, i en els casos que n'hi han dos un és de 4 pins i l'altre és de 20 o 24 pins, per tant no es poden confondre. Aquest petit és per una alimentació suplementària per la tarja gràfica o la CPU ja que les potents necessitem un consum més elevat.
Aquí veiem un connector de 20 pins del format ATX 2.0. El de la versió 2.1 és igual però de 24 pins.
Aquí tenim un exemple de uns quants connectors el de abaix a l'esquerra és el connector de 4 pins 12V.
En els models per a màquines AT sempre incorporen un interruptor per a encendre i apagar la màquina, no es així en les ATX, doncs l'ordre d'encès li arribarà a través d'un senyal des de la pròpia placa base. Tot i així és bastant habitual trobar un per a "tallar" el fluid elèctric al seu interior, doncs els ordinadors basats en aquest estàndard estan permanentment alimentats, tot i que estan apagats.
És per això que sempre que trastegem en el seu interior és IMPRESCINDIBLE que o bé utilitzem l'interruptor comentat o bé desendollem el cable d'alimentació.
'''Comprovació del "correcte" funcionament d'una font ATX'''
Finalment comentar que per a poder provar una d'aquestes fonts sense necessitat de connectar-les a un ordinador (seguim parlant de les ATX) és necessari fer un pont elèctric (curt circuit) en els pins 14 i 15 ( en el cas del connector de 20 pins) del connector d'alimentació de la placa base amb el que aconseguirem simular el senyal d'arrencada que envia la placa base. Tot seguit hem de veure com el ventilador s'engega. En cas de tenir un connector de 24 pins són el 16 i el 17. Un altre forma més fàcil d'en recordar-se és saber que el pont s'ha de realitzar entre el fil verd i qualsevol dels negres.

Pàgina principal

2009-12-01T11:34:46Z

Toni:

<big>InforWiki: un espai pels continguts de FP d'Informàtica</big>

'''InforWiki''' vol ser un espai col·laboratiu per les assignatures de les titulacions de FP:

*Cicles formatius de grau mig (CFGM)
**ESI: Explotació de Sistemes Informàtics
**SMX: Sistemes Microinformàtics i Xarxes
*Cicles formatius de grau superior (CFGS)
**ASI: Administració de Sistemes Informàtics
**DAI: Desenvolupament d'Aplicacions Informàtiques

La iniciativa és destinada inicialment a les assignatures de ''hardware'' (Muntatge i manteniment d'equips, de SMX) però confiem en què pugui ser útil per a altres.

La idea és que tinguem uns '''apunts online en català''', de utilitat pels professors i alumnes i que estiguin adaptats a les necessitats del currículum de FP.

De moment està penjat de la meva web, però si tenim èxit podem pensar en posar domini propi, podeu començar a proposar noms (jo he posat InforWiki però és el primer que se m'ha passat pel cap...).

Per editar caldrà que us registreu i valideu el vostre email.

== Articles proposats ==
*[[La caixa]]
*[[La font d'alimentació]]
*[[Microprocessador]]
*[[Memòria principal]]
*[[Disc dur]]
*[[Interfícies dels discs durs]]
*[[Estructura lògica del disc dur]]
*[[Placa mare]]
*[[CD]]
*[[DVD]]
*[[Bluray disc]]
*[[Diskette]]
*[[Controlador gràfic]]
*[[Controlador de so]]
*etc.

Animeu-vos a contribuïr!!

== Per a començar ==
Usuaris del wiki:

Consulteu la [http://meta.wikimedia.org/wiki/Help:Contents Guia d'Usuari] per a més informació sobre com utilitzar-lo.

* [http://www.mediawiki.org/wiki/Manual:Configuration_settings Llista de característiques configurables]
* [http://www.mediawiki.org/wiki/Manual:FAQ PMF del MediaWiki]
* [https://lists.wikimedia.org/mailman/listinfo/mediawiki-announce Llista de correu (''listserv'') per a anuncis del MediaWiki]