PHP. tractament per a la carrega del diccionari Pons

Cada paraula amb la seva definició en una línia

//Es carregen les paraules amb les seves definicion què comencen amb a, a l'array $dic
$dic= file('A-mut.txt');

$num_linies=count($dic); //conta el numero d'elements de l'array $aux
echo "Num:". $num_linies."<wp-br>";
$aux="";
$i=0;
$catala="";
//$dic1= str_replace("\x0d\x0a", "",$dic[1]);
for ($i=0; $i <$num_linies ; $i++) { 
	//$dic= str_replace("·$aux[$i]", "★$aux[$i]",$dic);//en les substitucions s'han de cuidar els espais
	$primer_char=substr("$dic[$i]",0,1);//s'agafe el primer caracter
	$primer_2char=substr("$dic[$i]",0,2); //s'agafen els dos primers caracters
	//echo  bin2hex($primer_caracter . "<wp-br />";

	if (($primer_char == "A") || ($primer_char == "a")||($primer_2char == "\xc3\xa0")||($primer_2char == "\xc3\x84")||($primer_2char == "\xc3\xa4")) {
	// 41hex, 61hex, c3a0(à), c384(Ä), c3A4(ä)	
		$aux=$aux."<wp-br> ". $dic[$i];
		$parts = explode( " ", "$dic[$i]" );
		$catala=$catala."<wp-br>"."$parts[0]";
		//A,a,à(xc3a0)
}
else {
	$aux= $aux. str_replace("$dic[$i]", " |$dic[$i] ", $dic[$i]);
    }
    //$aux=$aux.$dic[$i];
}

echo "<wp-br> <wp-br> fi: <wp-br> $aux";
echo "<wp-br> <wp-br> fi: <wp-br> $catala";

PHP fwrite($myfile, $txt)-> escrivint en fitxers

Per a que funcioni he hagut de donar permisos  d’escriptura des de l’explorador de fitxers de Windows.


 <?php

$myfile = fopen("newfile.txt", "w") or die("Unable to open file!"); //a-> mode append, w->esborra contingut
$txt = "Donald Duck\n"; //primera linia
fwrite($myfile, $txt);
$txt = "Goofy Goof\n"; //segona linia
fwrite($myfile, $txt);
fclose($myfile);

?> 

PHP Transforma un fitxer en una variable


<?php
$wordlist="";
$myfile = fopen('pons_ger.txt', 'r') or die('Unable to open file!');// tot el fitxer en una linia sense cr lf

//echo bin2hex($wordlist) . "<br />";
//$search_string = "abbaubar";

while(!feof($myfile)) {
 	$wordlist= $wordlist. fgets($myfile).'·'; //afegeix indicador de CRLF
	//$wordlist= str_replace("$search_string", ".|$search_string",$wordlist); 
	 echo '<br>'.$wordlist. '<br>';
	}
echo "<br>". $wordlist."<br>";
 ?>

Llegir un fitxer línia per línia amb PHP

Hi ha dos mètodes de fer-ho

Utilitzant file() per llegir el fitxer


<?php
 
$aux = file('wordlist_ger.txt',FILE_SKIP_EMPTY_LINES|FILE_IGNORE_NEW_LINES);

$count = 0; 
foreach($aux as $linia) {
    $count += 1;
    echo $linia."<br>";
}

echo "<br> UN ALTRA FORMA DE FER-HO <br>.";

$num_linies=count($aux); //conta el numero d'elements de l'array $aux

for ($i=0; $i <$num_linies ; $i++) { 
	echo "<br> $aux[$i]";
}

?>

===============================================================
Utilitzant fgets() per llegir el fitxer

<?php
//require('../func.php');// func.php es la llibreria de funcions
 
//El primer que haurem de fer és obrir el fitxer .txt en mode lectura:

$archivo = fopen('pons_ger.txt','r');
  
//Tot seguit podem recórrer les línies de l’arxiu mitjançant un bucle:

 while ($linea = fgets($archivo)) {

 echo $linea."<br>;";
 
$aux[] = $linea;
 
$numlinea++;
 
}

/*
A cada iteració d’aquest bucle estem llegint una nova línia del fitxer, l’imprimim
 per pantalla i el guardem en un vector per processar cada línia després.
 La variable $numlinea la podem utilitzar per realitzar una acció quan estiguem 
llegint segons quina línia.
*/

fclose($archivo);

//I finalment, recorrem l’array amb les línies de l’arxiu:

echo '<pre>';

print_r($aux);

echo '</pre>';

?>

CSS LAYOUT TECNIQUES

http://web.simmons.edu/~grabiner/comm244/weeknine/css-layouts.html#two_column_layouts

2-column-stretch.css

/*

    This is basic CSS code for a website with a header, footer, and 2 columns

    The sidebar is on the left.

    The site is centered and the content is 960px wide, but the backgrounds stretch to fit the page

*/

/* Basic Reset */

* {margin:0; padding: 0;}

/* Basic Structure */

body {

    text-align: center;                /* This is a hack for older browsers to center the page */

}

.centerLayout {

                                    /* We use a class for this since we’re using it in several places */

    margin: 0 auto;                 /* This centers the page in modern browsers */

    text-align: left;                 /* This is a hack for older browsers to center the page */

    width: 960px;                     /* This sets our total page width */

}

#navigation li {

    float: left;                     /* Floating also makes our navigation display in a line */

}

#content {

    float: left;                    /* This causes the content to move to the left */

    width: 700px;                    /* We need to set the width whenever we float an element */

}

#sidebar {

    float: left;                     /* This causes the sidebar to move to the left */

    width: 260px;                     /* We need to set the width whenever we float an element */

}

#footer {

    clear: both;                     /* This makes sure that the footer clears both the sidebar and content floats */

}

/*

* For Demonstration Only

* This code is just for the purpose of the demonstration to hightlight things so that you can see them

*/

body {

    background-color: #666;

    color: white;

}

#header {

    background-color: aqua;

    height: 100px;

}

#navigation {

    background-color: red;

    line-height: 2;

    overflow: auto;                    /* Elements that only contain “floated” content have no height.

                                         In order to give then height and force them to wrap around their content,

                                        we use overflow: auto

                                    */

}

#navigation li {

    list-style: none;

    width: 150px;                    /* This sets the width of our links to 150px wide */

}

#content {

    background-color: #666;

}

#sidebar {

    background-color: #999;

    clear: left;                    /* We have to make sure that the sidebar clears the navigation, since we’ve floated it */

}

#footer {

    background-color: black;

}

2_Column_Layout.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title>Basic 2 Column Layout that stretchs</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    
    <link rel="stylesheet" href="2-column-stretch.css" type="text/css" media="screen" charset="utf-8" />
    
</head>
<body>
    
            
<div id="header">
    <div class="centerLayout">
    
        <p>logo</p>
    </div>        
</div>
<div id="navigation">
    <div class="centerLayout">
        <ul>
            <li>link 1</li>
            <li>link 2</li>
            <li>link 3</li>
        </ul>
    </div>    
</div>
<div class="centerLayout">
    <div id="sidebar">
        <h2>Sidebar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="content">
        <h1>Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    </div>    
    
</div>
<div id="footer">
    <div class="centerLayout">
        <h3>Footer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
    
        
    </div>
    
</body>
</html>


Escriure i llegir valor en entrada html

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Document</title>

</head>

<body>

    <!–<input type=”text” id=”id_name” name=”name” value =”<?echo $_POST[name]; ?>” > –>

    <input type=”text” id=”id_name” >

<script>

document.getElementById(“id_name”).value = “urqt”; //escriu valor

</script>

<script >

a= document.getElementById(“id_name”).value //llegeix valor

</script>

<script>

    alert(a); //valor llegit

</script>

</body>

</html>


Shift F6

JavaScript Hello world!

Hello, world!

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <script type=’text/javascript’ src=’js/functions.js’></script>

    <title>Document</title>

</head>

<body>

    <p>Before the script…</p>

<script>

alert( ‘Hello, world!’ );

</script>

<script>

hello();

</script>

<p>After the script…</p>

</body>

</html>

Aqui es pot veure el resultat:

Hola mon

 

Using CSS

What is CSS

CSS can be added to HTML documents in 3 ways:

  • Inline – by using the style attribute inside HTML elements
  • Internal – by using a <style> element in the <head> section
  • External – by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

CSS extern

S’utilitza un full d’estil extern per definir l’estil de moltes pàgines HTML. Per utilitzar un full d’estil extern, afegiu-hi un enllaç a la secció <head> de cada pàgina HTML:


I styles.css


Carregant aquests examples a Sublime Text 3


Que vist al navegador Firefox (alt F6) queda: