Instalacion de Spotify en Fedora 17

En este post voy a explicar como instalar Spotify en fedora. Introduciendome en el mundo de fedora (aferrado siempre a windows...) me esta empezando a gustar algo este sistema operativo y llevo varios dias investigando como instalar aplicaciones, personalizarlo y varias cosas sobre este s.o que nunca habia utilizado.

Lo primero que debemos hacer para instalar Spotify es descargar y instalar el programa "wine" , para ello nos vamos a la terminal y como root escribimos:
   sudo yum install wine

Una vez termine la instalacion de wine pasaremos a comprobar que el sonido funciona con el programa, escribiendo en la consola lo siguiente:
   winecfg 
En la ventana que nos aparece vamos a la pestaña de audio y pulsamos el boton de probar sonido. Si el sonido esta correctamente escucharemos un ruido.

A continuación descargamos la version para windows de Spotify.

Para instalar Spotify simplemente nos vamos a la carpeta donde se ha descargado y pulsamos boton derecho y lo abrimos con wine.

Si has seguido todos los pasos correctamente ¡Enhorabuena ya tienes Spotify instalado!

Carga de imagenes mediante un array en Javascript

La verdad es que esta tarea dio algún que otro dolor de cabeza al principio, ya que "choca" un poco que las imágenes las contenga un array,  pero después de probar lo siguiente todo fue mas fácil.

Creamos un array y lo vamos definiendo con  las rutas relativas de las imágenes (donde se encuentran).

var misImagenes= new Array(3)
  misImagenes [0]= "./img/001.jpg";
  misImagenes [1]= "./img/002.jpg";
  misImagenes [2]= "./img/003.jpg";
  misImagenes [3]= "./img/004.jpg";

Una vez creado el arrray crearemos una pequeña función que nos permita hacer la carga de imágenes, aclarar que para que la función funcione debemos tener una imagen en nuestro código html con el id="imagen":

<img name="imagen" id="imagen" alt="Imagenes">

---

function cargarImagen(){
  document.imagen.src = misImagenes[i];}

Si os fijáis no ha sido necesario utilizar ninguna función DOM para cambiar el "source" de la etiqueta img, simplemente poniendo su id después de "document", aunque si lo hiciéramos con una función DOM quizá quedaría un poco mas claro:

function cargarImagen(){     var imagen = document.getElementById("imagen");     document.imagen.src = misImagenes[i];}

Ya solo nos quedaría implementar una variable "i" al principio del código que tomará valores aleatorios entre 0 y 3 y ya tendríamos una imagen diferente en cada recarga de la pagina, y hecho en Javascript!.

var i = Math.round(Math.random()*3);

Selectores En CSS

Bueno hemos comenzado un tema nuevo en la asignatura!! El tema que vamos a ir viendo es de hojas de estilo (css). Tras una explicación introductoria de David (el profesor) el otro día me quede con una duda que el mismo me resolvió y que ahora posteo para los que tengan dicha duda tambien.
 Resulta que llevo un tiempo manejando hojas de estilo para varias paginas web y modificandolas a mi antojo, pero todo esto lo hacia sin saber diferenciar bien los selectores yo manejaba bien los selectores de tipo o de etiqueta que se explicaran mas adelante pero mi gran duda era... ¿Cuando usar selectores id o selectores de clase?
La respuesta es sencilla: El selector id se utiliza cuando queremos aplicar un estilo a un solo elemento de la pagina. Este selector permite seleccionar un elemento a través del valor de su atributo id. El valor de dicho atributo no puede repetirse en dos elementos diferentes de una misma pagina.
 Por otro lado los selectores de clase también se aplican a un elemento de la pagina pero estos se pueden usar varias veces en la misma pagina. Se usan simplemente poniendo dentro del elemento el atributo de la clase.

Ejemplos:
*Selectores de Id:
  Primero definimos el código css del selector:
   #destacado{ color: red; }

   Después aplicamos el selector a la etiqueta html deseada
   <p> Párrafo 1</p>
   <p> Párrafo 2 </p>
   <p id="destacado"> Párrafo 3</p>


*Selectores de clase:
  Para definir un selector de clase creamos en el archivo css una regla con los estilos que se aplicaran al elemento:
   .destacado{ color: red; }
En este caso en vez de llevar # delante del nombre del selecto se utilizara un punto.
 Este selector se interpretara en la pagina como cualquier etiqueta que lleve un atributo class que se llame destacado recibira el estilo de dicho selector: 
   <p> Párrafo 1</p>
   <p> Párrafo 2 </p>
   <p class="destacado"> Párrafo 3</p>

Bueno espero que os haya quedado un poco clara la diferencia entre estos dos selectores. En el proximos post hablare de mas selectores y mas trucos para css. Saludos!!!!

CREACION FRAMES

Los frames se declaran con la etiqueta <FRAMESET> y debe ser colocada antes de la etiqueta <BODY> porque si no la etiqueta sera ignorada.
Ejemplo:

<HTML>
<HEAD><TITLE> Título de la página </TITLE></HEAD>

     <FRAMESET ROWS=75,*>

           <FRAME SRC="frames1.htm" >
           <FRAME SRC="frames2.htm" >

     </FRAMESET>

     <NOFRAMES>
         <BODY>
             Lo siento,su navegador no soporta frames.
             Pulse <a href="frames1.htm>aquí </A> 
             para acceder a los contenidos de estas páginas.
         </BODY>
     </NOFRAMES>

</HTML>

EL atributo rows (filas) es el que define el número y el tamaño de los frames. También se puede dividir en columnas mediante cols.
El tamaño de los frames se puede especificar de más formas:COLS=*,5* dos columnas, la segunda cinco veces mayor que la primeraCOLS=150,*,150 tres colunmas, la primera y tercera de 150 píxels, la segunda ocupa el resto.ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio.
Las etiquetas FRAME SRC="frames.html" cargan las página indicadas en el frame correspondiente.
También es posible anidar frames, llamando a una página que tenga de nuevo frames o bien declarándolo explicitamente por ejemplo:

<FRAMESET COLS=20%,*>

    <FRAME SRC="frames1.htm">

        <FRAMESET ROWS=20%,*>
               <FRAME SRC="frames2.htm">
               <FRAME SRC="frames3.htm">
        </FRAMESET>

</FRAMESET>

Este código divide la ventana en dos columnas, la primera del 20 % del ancho total, y la segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del total

El atributo TARGET

Lo más interesante de los frames es la posibilidad que tienen de interactuar entre si, es decir pulsar un enlace en el frame 1 y cargar el contenido en el frame 2.
Para conseguir esto hay que darle un nombre a los frames y luego indicar en el enlace donde se va a cargar mediante el atributo TARGET. Ejemplo:

<HTML>
<HEAD><TITLE> Frames --Ejemplo 3--</TITLE></HEAD>

     <FRAMESET COLS=150,*>

           <FRAME SRC="frames4.htm" NAME=margen>
           <FRAME SRC="frames5.htm" NAME=principal>

     </FRAMESET>

</HTML>

Hay ciertos valores reservados para TARGET, estos son
->TARGET=_top, hace que la página se cargue en la ventana completa del navegador.-> TARGET=_self, hace que la página se cargue en la misma ventana del frame actual.-> TARGET=_parent, hace que la página se cargue en el frame "padre", del que desciende el actual->TARGET=_blank, hace que la página se cargue en una nueva ventana.->TARGET=nombre, hace que la página se cargue en el frame llamado nombre. Si no existe se carga en una ventana nueva

Atributos de FRAME

En los frames se pueden modificar algunas de sus características por medio de las etiquetas que siguen:
SCROLLING= yes, no , auto . Indica si el frame llevará siempre, nunca o cuando lo necesite, barra de deslizamiento vertical
BORDERCOLOR="color" . Indica el color del borde
MARGINWIDTH=n . Indica el margen horizontal, tanto derecho como izquierdo, en píxels
MARGINHEIGHT=n . Indica el margen vertical, tanto superior como inferior, en píxels
NORESIZE . Indica que el frame no se puede redimensionar. Si no se pone este atributo colocando el cursor en el borde del frame, permitiría su deslizamiento

Realizar consultas con PHP a la base de datos MySql

Para poder realizar la consulta necesitaremos conectarnos a la base de datos como se vio en la publicación anterior


Y este es el codigo para realizar consultas a nuestra base de datos dbpepito.

<html>
<head>
 </head>
<body>

<?php 

$conex = mysql_connect("Host","Usuario","contraseña")
or die ("No se ha establecido la conexion"); 

mysql_select_db("bdpepito", $conex)
or die("Error no se ha podido selecionar ");

//Aqui realizamos la consulta, como podemos ver es una sentencia sql 
//normal, aqui realizaremos unas seleción completa a la tabla
 $result=mysql_query("select * from pepito",$conex); 

//Como esta consulta devuelve mas de una fila necesitaremos extraerlos
//uno a uno y necesitaremos realizar un while

  while($fila = mysql_fetch_array($result)) { 


//Donde Nombre es el nombre de la calumna, si tiene mas columnas
 //tendriamos que poner ,$fila['nombre_columna']
 
 echo $fila['Nombre'];
   } 

mysql_close($conex); 

?>

</body>
</html>

Conectar a tu base de base de datos Mysql con PHP

Con este pequeño codigo vemos como se establece la connexion y se cierra tal conexion.

<html>
 <head>
 </head>
 <body>

<?php
//Conexion a nuestra base de datos
$conex = mysql_connect("Host","Usuario","contraseña")
or die ("No se ha establecido la conexion");

//selecionamos la base de datos pepito que es con la que vamos a trabajar
mysql_select_db("bdpepito", $conex)
or die("Error no se ha podido selecionar ");

// Cerrar la conexion a nuestra base de datos
mysql_close($conex);
?>

</body>
</html>

Como hemos observado para la conexión hemos usado mysql_connect, para selecionar la base de datos con la que queremos trabajar del servidor mysql_select_db y para cerrar la conexión mysql_close