LUNES 5 DE FEBRERO DE 2018

Hoy tenemos al profesor Alber por que Josep no ha podido venir, estamos repasando las listas ordenadas recordar <ol> <ul> li> y además vamos a volver hacer formularios.

Hemos creado un formulario con 11 apartados y una lista desplegable con categorías.

Ahora vamos a pasar toda la información que recojemos del formulario a un archivo php con el method post de la siguiente manera <form method=»post» action=»destino.php»> destino es el nombre del archivo php, que se encuentra en la misma ruta que el archivo formulario.html

Nos a enseñado la funcion print_r que lo que hace enseñarnos todo lo que recibe de la variable especificada, por ejemplo:

print_r($_POST);
nos enseña todos los datos de los formularios sin tener que especificar ni hacer un echo con todas las variables POST, y podemos especificarle lo que queramos, como print_r($_GET) devuelve todos los valores de GET.

Ahora vamos a ver el atributo multiple que sirve para poder seleccionar varias opciones en una lista de formulario, se hace dejando la tecla control apretada mientras seleccionamos varias opciones.

Nos enseñado la opción checkbox del atributo type, que sirve para que aparezca la típica casilla para marcar, como por ejemplo las condiciones de uso.. etc y con el atributo required hacemos que para poder terminar el formulario tenga que aceptar si o si las condiciones de uso, se aplica así:

<input type="checkbox" required name="base_legal">Acepto las condiciones legales..<br>

<input type="radio" name="estudi"> Sicologia<br>
 <input type="radio" name="estudi"> Empresariales<br>
 <input type="radio" name="estudi"> Artes gráficas<br>

La opción radio del atributo type sirve para poder seleccionar varias opciones dentro de un formulario, la condición es que tienen que tener el mismo name todos de ese modo solo podemos escoger una opción, abajo vemos las opciones checkbox y radio en vista navegador.

Ahora comenzaremos con el CSS!!

Dentro de un mismo archivo html abrimos las etiquetas <style> aqui dentro va los estilos </style>

El formato de trabajo dentro de las etiquetas CSS es el siguiente body  {aqui dentro van las instrucciones }

Hemos utilizado las etiquetas:

• text-transform:uppercase; pone todo el texto en mayúsculas
• text-align: center; centra el texto
• background-color: #F03434; cambia el color de fondo
• color: white; cambia el color del texto
• font-size: 20; cambia el tamaño del texto

Si queremos asignar un estile en los títulos los hacemos con el h1 {aquí dentro el estilo que queramos para los títulos}

se aplica del siguiente modo:

<style>

body {
 text-transform:uppercase;
 text-align: center;
 background-color: #F03434;
 color: white;
 font-size: 20;
 }
 h1{text-align: center;
 color:#8bf20f
 }
 </style>

Por hoy ya hemos terminado, mañana mas y mejor!!

MARTES 6 DE FEBRERO DE 2018

Hoy tenemos clase con Albert, de momento aún estamos esperando a los demás compañeros y pasando lista.

Parece que hoy vamos a seguir con CSS y algo de html, hay varias formas de implementar estilos CSS.

• Implementando código directamente dentro de un archivo HTML
• Enlazando un archivo HTML a un archivo de estilos CSS

Se implementa dentro de la etiqueta <style>  aquí código css </style> y se aplica con los nombres de las etiquetas HTML por ejemplo si queremos cambiar algún estilo del titulo lo haremos así h1 { aquí dentro etiqueta css}  para un párrafo lo haremos así p{aquí dentro etiqueta css} y así con las demás etiquetas.

Siempre después de la etiqueta ponemos: y luego de poner el atributo que queremos cerramos con ; de este modo:

background-color: #F03434;

Ahora nos ha enseñado como utilizar tipos de letras desde Google fonts, escogemos el tipo de letra que nos guste y luego copiamos el texto @import de la pagina de Google Fonts y luego aplicamos el estilo con la etiqueta css.

En código se aplica así:

@import url(‘https://fonts.googleapis.com/css?family=Rammetto+One&subset=latin-ext’); esta linea se pone arriba de todo del style para que se plique primero.

Luego tenemos que poner la etiqueta css font-family: ‘Rammetto One’, cursive; para que llame la tipografía importada.

Podemos modificar el tamaño, tipografía, grosor de la letra en cada párrafo, alineación o titulo por independiente.

font-family: 'Montserrat', sans-serif; // aplica estilo de letra importada de google fonts

font-size: 90px; // Cambia el tamaño del texto en pixels

text-transform: uppercase; // Aplica mayúsculas 

font-weight: 800; // Grosor del texto

text-align: center; // Centra el texto

font-style: italic; // Cursiva para el texto

Hay etiquetas de linea y de bloque.

Etiquetas HTML Linea:

Se aplican en linea por ejemplo si ponemos dos imágenes aparcaren en linea y no una encima de otra.

• Input
• img
• b/i/u
• a
• iframe
• table
• div/header/footer

Etiquetas HTML Bloque:

Estas etiquetas se sobreponen una encima de otra.

• p
• h1-h6
• hr
• code
• pre
• ul/ol

Se puede cambiar la posición de una etiqueta para que una etiqueta de linea se convierta a bloc y al revés.

Se hace con código CSS y la etiqueta display: block; esto es para convertir un código de linea a bloc.

También podemos dar estilo a los formularios con la etiqueta input { aplicar estilos} a las imágenes con la etiqueta img, vamos a ver el código:

input   //hace referencia al formulario
{ abre etiquetas para imput
display: block;    // convierte etiquetas de linea a bloc
width: 44.7%;    // le dice el tamaño que tienen el formulario
text-align: center;  // Alinea el formulario, pero solo si esta dentro de parráfo
font-family: 'Montserrat', sans-serif;  le asigna una tipografía a los formularios 
font-size: 50px; le asigna tamaño de letra a los formularios en pixels
text-transform: uppercase; le aplica mayúsculas al formulario 
font-weight: 800; es el grosor del texto del formulario
font-style: italic; le aplica cursiva al texto del formulario
} cierra etiquetas para imput

abajo lo vemos aplicado a una imagen.

img     // hace referencia a la etiqueta de las imágenes

{    // abre etiquetas para img

width: 90%;     // le dice el tamaño con relación en tamaño a la ventana en tanto por ciento, se adapta automáticamente
 height: auto;  //  le dice la altura en este caso esta en automático
 /* display: block; */      // pasa una etiqueta de linea a bloc (esta comentada y no tiene efecto)
 } cierra etiquetas para img

7 DE FEBRERO DE 2018

Case con Josep, hoy vamos a prender a insertar, modificar, extraer y eliminar datos en una base de datos.

$variable almacena todo lo que viene a continuación= «INSERT INTO nombre de la tabla VALUES (variable de los datos recogidos por input en el mismo orden que ha sido recibido el código)»; y la función mysqli_query insertara en la base de datos la información recogida con las variables ($connect, $sql_user);

Para poder crear el formulario que recoja la información en la variable _POST y la envié a la base de datos lo hemos hecho en este orden:

• Crear base de datos.
• Crear usuario de la base de datos.
• Crear una tabla dentro de esta base de datos para almacenar los usuarios que la gestionaran esa tabla que ha creado con 4 columnas id, nombre, contraseña y correo, el id se ha creado con tipo de archivos INT de 10 valores y auto incrementar y para los demás campos hemos escogido VARCHAR y 50 caracteres.
• Crear una tabla dentro de esta base de datos para almacenar los registros que vienen del formulario esta tabla se ha creado con 8 columnas un campo para la id se ha creado con tipo de archivos INT de 10 valores y auto incrementar y para los demás campos hemos escogido VARCHAR y 50 caracteres, todos los campos hay que ponerlos en el mismo orden que los recoge el post.
• Crear un formulario en HTML que recoja los datos y los envié ha al un destino php.
• Crear un archivo php que almacene todas las variables recibidas de los inputs y los envié a la base de datos.
• Crear la función INSERT INTO y configurar la con los datos de la base de datos.

Para que la función de insertar el contenido en las tablas de la base de datos funcione primero hay que darle una serie de para metros para que encuentre la base de datos y se autentifique, se hace de esta manera:

<?php
/* Nom de la base de dades */
define('DB', 'nombre de la base de datos');
/** Nom de l'usuari de la base de dades */
define('USER', 'usuario de la base de datos');
/** Nom del password de la base de dades */
define('PASS', 'la contraseña del usuario de la base de datos');
/** Nom del servidor on s'executa la plataforma */
define('HOST', 'localhost');
/** Connexió */
$connect = mysqli_connect (HOST,USER,PASS,DB);

JUEVES 8 DE FEBRERO DE 2018

Clase con Albert, nos enseña algunos de los ejercicios que hacen para las clases en ERAM para enseñarnos ejemplos de lo que podemos hacer en utilizando Java y PHP.

Repasamos la propiedad para cambiar tipografías en  HTML con estilos CSS con la etiqueta font-family: y se pueden importar de la web www.fonts.google.com y utilizar fuentes sin tener que instalar nada en el sistema.

Repasamos la etiqueta font y la text:

Font:

• family
• weight
• stile
• sice

 

Text:

• Aling
• transfom

Se aplica así:

text-align: center; // Alinea el formulario, pero solo si esta dentro de parráfo 

font-family: 'Montserrat', sans-serif; le asigna una tipografía a los formularios 

font-size: 50px; le asigna tamaño de letra a los formularios en pixels 

text-transform: uppercase; le aplica mayúsculas al formulario 

font-weight: 800; es el grosor del texto del formulario 

font-style: italic; le aplica cursiva al texto del formulario

También repasamos la diferencia entre etiquetas de linea y etiquetas de block, las etiquetas de linea se se añaden en linea y no una encima de la otra, por ejemplo si insertamos dos <img apareceran las imágenes en linea.

Etiquetas HTML Linea:

Se aplican en linea por ejemplo si ponemos dos imágenes aparcaren en linea y no una encima de otra.

• Input
• img
• b/i/u
• a
• iframe
• table
• div/header/footer

Etiquetas HTML Bloque:

Estas etiquetas se sobreponen una encima de otra.

• p
• h1-h6
• hr
• code
• pre
• ul/ol

Se puede cambiar la posición de una etiqueta para que una etiqueta de linea se convierta a bloc y al revés.

Se hace con código CSS y la etiqueta display: block; esto es para convertir un código de linea a bloc.

La estructura para aplicar estilos es:

Nombre etiqueta (body) abrimos {

Nombre e la propiedad que queremos asignarle(color): valor que le asignamos a la propiedad(white); cerramos siempre con punto y coma y cerramos con este signo

}

Ahora nos ha enseñado a crear un menú haciendo una lista no ordenada sacando le los puntos y ponerlos en linea de la siguiente forma:

ul {
list-style: none;
}
li {
 display: inline-block;
}

También lo hemos centrado para tener el menú en medio, le hemos dado un color de fondo, aumentado el grosor a las letras y el tamaño para tener un resultado mas vistoso.

ul {
list-style: none; le quita el punto negro a la lista desordenada
text-align:center; centra el texto del menu
font-size: 25px; Le asigna tamaño en pixels
text-transform: uppercase; transforma el texto a mayusculas
font-weight: 400; cambia el tamaño del grosor de la letra
background-color: red; cambia el color del fondo solo para el menú
}
li {
 display: inline-block; esta propiedad es para que se muestre como linea y no como bloque
 y tener un menú en linea como estamos acostumbrados a ver en la mayoría de web's
}

Hemos creado un enlace href personalizado y redondeado los bordes para darle efecto botón, lo hemos hecho con el siguiente estilo:

a {
 text-align:center; centra el link en este caso no funciona
 font-size: 80px; tamaño de texto en pixels
 text-transform: uppercase; mayusculas
 font-weight: 800; grosor de la letra
 color: green; le asigna un color al texto del link
 background-color: white; color de fondo blanco para el link
 text-decoration: none; quita el subrayado del link
 cursor: crosshair; cambia el tipo de cursor
 border-radius: 50px; redondea los bordes
}

Hemos aprendido algo muy útil desde mi punto de vista y es que podemos dar estilos a etiquetas en concreto para que dejen de aplicarse los estilos generales creados en la etiqueta style, de ese modo un párrafo que ya esta aplicando un estilo general le podremos añadir un estilo propio.

Esto se hace gracias a la etiqueta <span allí donde se aplique esta etiqueta y se aplica del siguiente modo:

<h1><span> TIENDA ONLINE PARA INDECISOS</span></h1>

y después abrimos etiqueta en los estilos para aplicarle el estilo que nos de la gana solo para este h1 y se aplica de este modo:

h1 span {
background-color: red;
}

9 DE FEBRERO DE 2018

Hoy toca clase con David Flores y vamos a tocar temas de seguridad en diferentes sistemas de archivos.

Estamos hablando de los privilegios de usuario, vamos a tocar sistemas operativos de todo tipo, Windows, Linux, OS X.

El sistema Linux es multiusuario pueden iniciar sesiones varios usuarios a la vez, eso puede convertirse en un inconveniente para la seguridad.

En Linux por defecto crea un usuario sin apenas privilegios y eso evita que hagamos un uso inadecuado ya que necesitaremos permisos de administrador.

La estructura de ficheros de Linux esta en la arrel / de ahí cuelgan todas las carpetas de sistema, bin, usr, etc, si no sabemos la contraseña de administrador no podemos acceder ni modificar ningun de estos directorios.

• Bin tiene todos los binarios de usuario y es necesaria para el arranque del sistema.
• Boot contiene información de arranque
• Dev información de volúmenes
• Etc archivos de sistema
• Home contiene el usuario
• Srb usuarios que se conectan al servidor
• Root contiene datos del usuario administrados

Linux usa el sistema de arranque LILO (linux loader) es muy editable y se puede configurar de muchas maneras, con eso pueden venir problemas.

Uno de los problemas en servidores es causado por los mismos trabajadores, un descuido del usuario puede ser la causa de un paro en el servidor, los errores comienzan por el usuario mas débil.

A medida que nuestro servidor va creciendo vamos obteniendo mas datos y somos mas interesantes de cara a los ciber criminales y podemos recibir ataques.

Mantener la seguridad 100% es imposible así que lo mejor es tener copias de seguridad siempre.

Hablamos sobre la seguridad de los sistemas operativos y hasta que punto son privados y no conectan todos nuestros datos con un servidor ajeno.

Un hacker tiene que conocer como funciona un sistema operativo a la perfección, por tanto es un experto en seguridad y se sabe todos los escondites del sistema que quiere atacar.

Aparte de habilidades técnicas un hacker puede llegar hackear un sistema mediante ingeniería social.

También hablamos de los servidores proxy, podemos navegar a través de ellos para mantener nuestra privacidad, tener acceso a servidores capados por región y para ganar velocidad en depende que configuraciones.

Seguridad informática.

Hemos visto como se hace para descifrar archivos de sistema encriptados y de ese modo poder acceder al texto plano o sea descifrar los archivos para poder ver los usuarios y contraseñas que contiene.

Hemos utilizado el programa hash suite free, para ver como trabaja con diferentes tipos de encriptacion.

En un sistema unix (linux/mac) solo tienen permisos para su carpeta.

 

Ejercicios de la hoy:

¿Que es LILO?

LILO es el sistema de arranque que utiliza linux, le dice que sistema operativo debe iniciar.

¿Que pasa cuando configuramos LILO en modo INIT SINGLE?

Si iniciamos en modo Single iniciaremos como super usuario (mono usuario) se usa para tareas de mantenimiento y para cambiar contraseñas, entre otras cosas.

¿Que pasa cuando iniciamos en modo RESTRICTED?

Cuando iniciamos en modo RESTRICTED estamos haciendo que no se pueda acceder en modo mono usuario o que se pida la contraseña root para poder acceder.

¿Diferencias entre poder bloquear los terminales con XLOCK y VLOCK?

Con XLOCK Y VLOCK podemos evitar el phishing (suplantación de identidad) de manera que cada vez que tengamos que iniciar sesión se bloquean la pantalla para que se requiera nuestra intervención.

¿Pon algunos ejemplos de ingeniería social que hayamos citado en clase?

Podemos obtener información muy valiosa a través de los meta datos de un archivo, tan solo descargando una imagen de alguien o documento de cualquier tipo, word, pdf..etc podemos saber cosas como versión del sistema operativo, nombre de usuario, impresora, software con el que se elaboro el documento y mas información muy valiosa para los hackers.

Podemos enviar una solicitud de amistad en alguna red social haciendo nos pasar por una chica atractiva y una vez nos acepte podemos ver toda su información de perfil.