Apuntes curso programación web 3a Semana

Fundacio gentis salt girona

LUNES 29 DE ENERO DE 2018

 

Buenas ya estáis listos para comenzar la clase? pues venga papel y lápiz que en breve comenzamos! Hoy toca clase con el Profesor Josep, seguramente tocaremos PHP y Base de datos, en breve lo sabremos.

Hoy aprenderemos a comunicar los archivos PHP con la base de datos, comenzaremos con un pequeño proyecto de una aplicación web para gestión de clientes en base de datos o para pequeña tienda o comercio algo sencillo pero útil.

Comenzamos con la aplicación atom, una de las funciones internas de php mas importante es <?php echo phpinfo();?> se crea un script para mostrar el contenido del archivo php.ini del programa PHP después una vez abierto en navegador muestra la información del php y muchas mas cosas, muy útil para ver errores.

php info archivo importante

En este fichero podemos ver información muy útil, como el tamaño máximo de subida de archivos asignado, los apartados Core y PHP credits son los mas relevantes.

Con este script php accedemos al php.ini en pantalla y de ese modo solo estamos en modo lectura y no podemos editar nada y de ese modo no podemos crear algún conflicto por culpa de editar algún archivo relevante.

Ahora probamos la función header.

Ahora hemos hecho una re dirección automática con un tiempo de ejecución al estilo Adfly cuando tenemos que esperar 5 segundos para saltar publicidad, con la función header.

redirigir php

 

Ahora hacemos el mismo proceso pero con variables.

La linea de código 10 es la que ejecuta el Scrpti donde se encuentra el header

He estado ocupado haciendo un ejercicio en el que a través de un formulario podíamos introducir el valor en segundos para la re-dirección y en la otra casilla podíamos introducir la URL que queríamos que nos redirigiera en esos 5 segundos.

El diagrama de bloques seria así:

  • El archivo formulariourl.html recoge los datos introducidos por el usuario en las casillas Tiempo y Enlace
  • El archivo formulariourl.html envía la información introducida al apretar el botón submint al archivo headerurl.php
  • El archivo headerurl.php Guarda los valores enviados por formulariourl.html a través de la función $_POST
  • La función header ejecuta el script de variables y funciones ejecutando un re-direccionamiento en un tiempo establecido
  • El código echo muestra la información en pantalla de lo que se va ejecutar en este caso con el mensaje que dice “en 5 segundos seras redirigido, si no quieres haz clic aquí.
fundacio gentis salt
Formulario HTML
fundacio gentis salt
Header PHP

Nos enseña algunas funciones del PHP

  • La funcionalidad  $_SERVER[‘REQUEST_METHOD’]; muestra en que protocolo estamos para enviar datos entre archivos en este caso envió de parámetros entre url (GET)
  • La función  $_SERVER[‘PHP_SELF’]; nos da la ruta en la que estamos trabajando, puede servir para volver a la ruta anterior.
  • La función SERVER_NAME nos mostrara el nombre del servidor en este caso localhost

Nota: definición puerto, canal de comunicación de datos bidireccional ente maquinas y periféricos.

Ahora hemos hecho un ejercicio para comparar valores con la función strpos y dependiendo del resultado hemos hecho que muestre un mensaje o otro, la función strpos es capaz de buscar un valor dentro de una cadena y definir su posición.

En el ejercicio le hemos dicho que dentro de la cadena “abc” busque un valor y que enumere su posición (recordar que en una cadena de variables siempre se comienza por 0 y no por 1) y dependiendo del resultado mostrara un mensaje en pantalla o otro.

fundacio gentis salt
función srtpos

la variable $mystring contiene los datos “abc que son la cadena de valores en las que strpos buscara

la variable $findme contiene “d” el valor que queremos que busque dentro de la variable $mystring

la linea 9 muestra en pantalla el resultado de la búsqueda del valor d dentro de la cadena “abc”

en la linea 11 le esta diciendo si el resultado es positivo (1) muestra el mensaje: la cadena “d” fue encontrada en la cadena “abc” y existe en la posición

en la linea 14/15 dice que si el resultado es negativo muestre el siguiente mensaje: la cadena “d” no fue encontrada en la cadena “abc”

En este caso el navegador mostró este resultado:

cursos inem salt
Resultado negativo strpos navegador

y si ponemos un valor que si que exista en la cadena “abc” como la “c” nos mostrara el siguiente resultado:

cursos inem salt
Resultado positivo strpos navegador

 

Donde hay la cadena “abc” podría ser cualquier otro valor alfanumérico como un usuario y donde dice “c” podría ser cualquier otro valor alfanumérico, con esta función se podría buscar un usuario dentro de una base de datos y que lo mostrara en pantalla al hacer una búsqueda tal y como hacemos en los programas de gestión empresarial.

Por hoy hemos terminado espero haya sido divertido y entendible, saludos!

Martes 30 de enero de 2018

profesor Albert, hoy nos a enseñado un diagrama para crear un algoritmo, diagrama de flujo.

curso inem salt
Diagrama de flujo juego 3 en raya

ENLACE DESCARGA ARCHIVOS DE PRUEBAS

Ahora hemos repasado las etiquetas para crear una tabla y hemos hecho un ejercicio simple de creación de una tabla con nuestro nombre, apellidos y edad.

Archivo html tablas

Una vez terminado el ejercicio de tablas, ahora repasamos los títulos <h1> <h2> etc.. y los párrafos <p> texto del párrafo </p>

Ahora practicamos con la etiqueta <a ref=> para crear enlaces a url externas, por defecto estos enlaces se abren en la misma pagina pero si queremos que el enlace se abra en una nueva ventana tenemos que poner el parametro target=”_blank” se hace del siguiente modo:

<a href=”http://www.freeboxinformatica.club” target=”_blank”>clic aquí</a>

También podemos hacer enlaces internos con el mismo atributo solo que donde pondríamos un enlace http:// solo pondremos el nombre del archivo interno de este modo:

<a href=”paragraf.html”>  nombre del texto que contiene enlace </a> del mismo modo si el archivo se encuentra en otro directorio tendremos que navegar con los atributos /..

En la imagen vemos como queda desde la vista navegador:

curso inem salt
El primer link se abre en una pestaña nueva y el segundo enlaza a un archivo interno

El atributo rel=”nofollow” tiene la función de decirle a los robots de Google que no indexen esta enlace y se aplica del siguiente modo en la etiqueta <a> <a href=”http://www.freeboxinformatica.club” target=”_blank” rel=”nofollow” >clic aquí</a>

Archivo html links

Nota: Etiquetas que no hace falta cerrar /> <meta> <hr> <img> <br>

Con la etiqueta <meta> y el los atributos http-equiv=”refresh”content=”5;url=http://www.google.es le estamos diciendo que actualice la pagina cada 5 segundos y que nos redirija a Google esto es muy útil para hacer re direcciones por cambio de dominio por ejemplo se aplica así:

<meta http-equiv=”refresh”content=”5;url=http://www.google.com” />

<meta> tiene varios atributos:

name=”keywords” content=”palabras clave” sirve para poder asignar palabras clave

name=”description” content=”descripción de nuestra web” sirve para asignar una descripción a nuestra web

y se aplica así:

<meta name=”keywords” content=”prueba, web” />
<meta name=”description” content=”la descripcio de la pagina” />

Hay muchas metas relevantes para el posicionamiento SEO, sobretodo para ofrecer palabras clave e información relevante para Goolge.

De igual modo podemos crear un enlace con el atributo mailto en la etiqueta <a> se plica de la siguiente manera.

<a href="mailto:freeboxinfo@gmail.com"> freeboxinfo@gmail.com </a>

También podemos enlazar a un numero de teléfono con el atributo tel, se aplica del siguiente modo.

<a href=”tel:600100200″> este numero de teléfono </a> (este número es ficticio ahí tenéis que poner el vuestro o el queráis facilitar en la web.

Nota: si no tenéis ninguna aplicación de correo electrónico o de llamadas no pasara nada al apretar en el link es normal.

vista de código

Este formato que veis arriba se hace con la etiqueta <code> texto que quieras tener en formato código</code> es util para enseñar ejemplos de código (y me lo enseña ahora.. xD)

Ahora estamos practicando los superindex y subindex sirve para mostrar valeros en nivel superior o inferior por ejemplo para los metros cuadrados m2 y también hemos visto como tachar un texto con el comando <strike>

También hemos aprendido a insertar vídeos de YouTube o Vimeo, en cualquier vídeo le damos a compartir y buscamos la opción insertar copiamos el código y ya se mostrara en la web.

Aquí dejo una captura del código utilizado:

curso inem salt
Vista códigos practicados
curso inem salt
Vista navegador códigos practicados

De los vídeos insertados con la etiqueta <iframe> se puede editar el código insertado para que no muestre el titulo del vídeo el icono de compartir, el tamaño del vídeo.. etc

Ahora estamos aprendiendo a insertar audio, con la etiqueta <audio controls> <source src= lo hemos implementado de la siguiente forma:

<audio controls><source src=”A_Young_Man.mp3″type=”audio/mpeg”/></audio>

<audio src=”A_Young_Man.mp3″ controls autoplay></audio>

hay dos maneras de hacerlo la primera mas larga y la segunda mas corta pero funciona igual, además hay el atributo autoplay para que se inicie el audio solo.

MIÉRCOLES 31 DE ENERO DE 2018

Comenzamos la clase con Josep, nos comenta que quiere hacer un proyecto de un aplicación web que conecte con una base de datos para almacenar datos y procesarlos, lo primero que tenemos que hacer es hacer u esquema o diagrama de bloques pero de momento parece que hoy vamos a hablar de WordPress.

Vamos a utilizar WordPress para nuestro proyecto de aplicación web, cogeremos una plantilla y haremos una sub plantilla mas conocida como child (un tema hijo) con el que podremos trabajar y hacer modificaciones sin alterar la plantilla principal.

Además es muy recomendable ya que al hacer una actualización de la plantilla si no tubiéramos tema hijo directamente se machacarían todas las modificaciones hechas.

Ahora vamos a crear un tema hijo manualmente sin plugin directamente desde el directorio de plantillas, nos iremos a C:\Wamp\www\wordpress\wp-content\themes\carpeta del tema y vamos a localizar el archivo style.css lo copiaremos en una carpeta nueva que crearemos dentro el directorio C:\Wamp\www\wordpress\wp-content\themes la carpeta tendrá el mismo nombre que el tema original pero le añadimos _child quedara así:

C:\Wamp\www\wordpress\wp-content\themes\twentyfifteen_child y dentro de esta carpeta un nuevo archivo style que lo hemos copiado del anterior.

 

Ese archivo que hemos copiado a la nueva carpeta (style.css) se tiene que modificar de la siguiente manera:

crear tema hijo wordpress
Archivo style.css editado para tema hijo

Después hemos copiado el archivo header php de la plantilla principal y lo hemos pegado en la carpeta del tema hijo y hemos borrando una linea de código para cargar el tema hijo y ver si daba error, esto lo hemos hecho para comprobar que efectivamente funciona bien el tema y que lo que modificamos le afecta al tema hijo y no al principal.

Ahora nos a enseñado tres funciones de php:

curso inem salt

 

En el ejercicio de arriba hemos llamado al archivo formulariourl.html que se encuentra en el mismo directorio que el archivo php que estamos creando, al ejecutar en navegado da como resultado el formulario HTML.

Las diferencias entre las diferentes funciones que hemos utilizados son las siguientes:

include:

llama a un archivo para que se incluya en el.

require:

requiere que un archivo se ejecute para poder avanzar si no se ejecuta no seguirá la secuencia, si se ejecuta con normalidad seguirá y repetirá el código las veces que haga falta.

require_once:

Requiere que un archivo se ejecute pero solo una vez, si el primer código falla ya no ejecuta el segundo y aunque no falle y pongamos varios códigos solo leerá uno, no seguirá.

Ahora hemos formado equipos y vamos a comenzar con el proyecto de aplicación web!!

Grupo formado por Carmen, Alioune, Marc la aplicación será para administrar clientes en una base de datos, vamos a comenzar por un boceto en papel.

Vamos a comentar que funciones debe cumplir, cuantos usuarios tendrá, como se introducirán los datos, que datos hay que mostrar..etc

Después de reunión de grupo y estar un buen rato con papel y lápiz haciendo bocetos de como sera el programa de gestión, lleguemos a la conclusión de que estábamos apuntando muy algo y simplifiquemos al máximo.

Al final el proyecto se quedo en una web basada en un archivo index.html donde íbamos a incluir un logotipo, un titulo y un formulario donde poder recopilar y guardar los datos de registro de un usuario, nombre, apellidos, población..etc

después de recoger la información en ese archivo index.html esta información sera enviada a un archivo llamado destino.php que recogerá los datos en variables _POST y los mandara a la base de datos que vamos a crear para almacenar los datos recogidos por el formulario.

Antes de comenzar a crear el archivo html comencemos por crear el directorio que iba almacenar la aplicación web, creamos una nueva carpeta llamada gestión en el directorio c:\wamp\www\ en esta carpeta vamos a guardar todos los archivos que contienen la aplicación.

curso inem salt
Archivo index.html proyecto aplicación web
curso paro salt
Vista navegador formulario aplicación web

Ahora vamos a crear el archivo destino.php pero no nos queda mas tiempo tendremos que continuar el próximo día con Josep.

En casa por mi cuenta he creado una base de datos llamada gestión y un usuario llamado gestión (para no complicarme) ya solo quedaría crear dos tablas una para el registro de usuarios y otra para crear un usuario administrado a la espera de que Josep nos corrija y ayude en el proyecto, hay ganas de seguir y ver como se enlazan los datos obtenidos con la base de datos!

JUEVES 1 DE FEBRERO DE 2018

Clase con Albert, vamos a repasar lo aprendido en la ultima clase de Albert donde aprendimos a insertar vídeos y audios en un archivo html, hemos creado este archivo html de repaso:

curso inem salt
Vista código repaso html

Me he dejado el atributo target=_blank para que se abran los links en otra ventana se pone al final del enlace href se utiliza de la siguiente manera:

<a href=”dirección donde queremos enlazar” target _blank> texto del enlace y cerramos </a>

Vamos a ver la vista del archivo html repaso en navegador:

curso inem en salt
Los textos en azul tienen un a href y en caso del vídeo YouTube tiene el atributo target _blank

 

  1. Ahora aprenderemos a crear listas numeradas
  • Listas no numeradas, se van a utilizar mucho
  1. Para hacer listas numeradas se utiliza la etiqueta <ol> </ol> y dentro de esta estructura se añade cada lista con la etiqueta <li> texto de la lista numerar </li>
  • Para hacer listas no numeradas se utiliza la etiqueta <ul> </ul> y dentro de esta estructura se añade cada lista con la etiqueta <li> texto de la lista numerar </li>
curso inem salt
Código listas numeradas y no numeradas

También podemos añadir listas numeradas dentro de listas de la siguiente forma:

curso inem salt
Vista código sublistas

Ahora vamos a repasar los formularios en html y vamos a ver los atributos de la etiqueta <input>

  • name=”identifica el valor del formulario para guardarlo en el _POST
  • value=”es el texto que ponemos en los formularios”
  • placeholder=”sirve para texto orientador en formularios”
  • Type=”le dice el tipo de valor que contiene por ejemplo “text”
  • Disabled puedes ver el formulario pero no podemos introducir texto se aplica sin = ni comillas
  • type=”hidden”name=”id”value=”5″ sirve para asignar una id oculta a cada valor, el valor se genera automáticamente  por la posición que registra en la base de datos
  • type=”number”  sirve para forzar a escribir números en un formulario
  • type=”email” sirve para requerir formato email (la letra @)
  • type=submit sirve para enviar la información
  • required hace que un campo sea indispensable
  • type=”file” sirve para adjuntar un archivo
  • type=”date” sirve para asignar formato data (dd/mm/aaaa)
  • maxlength=”10″ limita caracteres al numero asignado, en este caso 10 caracteres
  • <select> permite asignar un menú desplegable añadiendo la etiqueta <option> nombre de a opción</option> y se cierra así </select>
  • <optgroup> sirve para agrupar opciones dentro de un menú desplegable se aplica dentro de la etiqueta <select>
  • <textarea rows=”10″ crea un area de texto y con el numero le asignamos los saltos de linea de texto que queremos permitir y se cierra así </textarea>
  • disabled select sirve para deshabilitar la opción seleccionada

Vemos la vista código donde hemos utilizado todos los atributos y etiquetas de formularios <form>

De momento hasta aquí hemos llegado hemos aprendido muchos tipos de formularios y como hacer listas numeradas, mañana mas y mejor!!

VIERNES 2 DE FEBRERO DE 2018

Clase con profesor nuevo! las clases de los viernes serán con el profesor David Flores hasta el 6 de julio, su web es www.davidflores.cat/gentis  correo gentis@davidflores.cat este modulo es nuevo y vamos a tratar todo el tema de la publicación de paginas web, osea todo el trabajo que viene después de la elaboración del código y el contenido.

También aprenderemos a posicionar y crear un estudio de palabras clave y estudio de la competencia, nos vamos a centrar en el posicionamiento local.

Aprenderemos a gestionar toda la información recogida por las cookies y tratar esa información para conocer nuestra audiencia, sus gustos aficiones y en definitiva conocer muy de cerca a todos los usuarios que pasan por nuestro sitio web.

También aremos repaso de contratación de hosting, características técnicas, ha hablado de números de Amazon y dice que se realizan mas de 900 comandas por segundo solo en el mercado nacional, wwoooww!!

También hablaremos de aviso legal y obligaciones legales de un sitio web, tocaremos seguridad informática enfocado al los servidores web y haremos pruebas con herramientas para comprobar el correcto funcionamiento de nuestro sitio web.

Psicologías de colores y marketing enfocado a la imagen ya que dependiendo el tipo de negocio o web que tengamos le convienen mas unos colores o otros.

También tocaremos maquinas virtuales con VirtualBox.

Vamos a repasar las características de seguridad.

Casi todo va atado con el almacenamiento online y de ese modo hace hincapié en la seguridad, problemas de seguridad pueden repercutir en lentitud y problemas de carga con la web, como por ejemplo el virus que utiliza tus recursos para minar BitCoins.

Seguridad web:

La seguridad externa es aquella en la que podemos intervenir físicamente como por ejemplo encerrar el servidor en una habitación protegida con llave.

Cuantas mas trabas pongamos mas difícil sera que tengan acceso a nuestra servidor, contraseñas seguras y cualquier método que podamos imaginar lo podemos poner en practica como por ejemplo llevarse el teclado y ratón, llevarse el cable de corriente.. etc

No utilizar el usuario administrador por defecto es una buena manera de proteger el acceso a nuestro ordenador, también podemos utilizar patrones para crear contraseñas por ejemplo iniciales de nuestro nombre el año de nacimiento y por ultimo las iniciales del servicio donde, quedaría de este modo: MOG.85.WP

El futuro va encaminado a la seguridad barométrica donde se utiliza una parte física nuestra única con la que nos podemos autentificar y demostrar nuestra identidad.

Concienciar al usuario es una de las herramientas mas poderosas para aumentar la seguridad informática.

También nos hace una ilustración de man in de middle:

Hombre en el medio como bien indica el nombre, se produce cuando hay un usuario en medio de tu conexión ya sea entre el Router y tu o entre el Router y el servidor de destino, si no están los datos encriptados cualquiera con conocimientos avanzados puede ver tus datos y por lo tanto coger tus contraseñas de cualquier servicio, números de tarjeta de crédito y todo lo que envíes a la red!

La tarjeta MAC address es un numero único que identifica la tarjeta de red.

Proteger los datos a través de compresión de datos con WinRar  y protección del archivo con contraseña, eso evitara que si llega el mensaje a manos no deseadas no pueda abrir el archivo si no dispone de la contraseña.

Hay métodos para comprobar si los datos llegan a la dirección deseada, se hace mediante bits de paridad ese bit comprueba si el tamaño del archivo es igual que cuando salio de casa y de no ser así lo rechaza.

El procesador tiene que tener siempre las ultimas actualizaciones disponibles.

Nos ha planteado una serie de preguntas que tenemos que responder por escrito para evaluar que nivel tenemos y si hemos entendido correctamente todo lo que ha explicado en la primera parte de la clase.

PREGUNTAS:

  1. Por que crees que hay que tener un buen sistema de seguridad en un servidor web?
  2. A partir de las explicaciones de clase optarías por tener un servidor propio en casa o uno externo y pagar por el mantenimiento.
  3. Que sistemas de protección aplicarías en un servidor casero?
  4. Hasta cuanto estarías dispuesto a pagar por un servicio de hosting y busca 5 proveedores de hosting.
  5. Busca por la red hasta 3 errores de seguridad de grandes empresas, los comentaremos en clase.

RESPUESTAS:

  1. Para evitar posibles problemas de pérdidas de datos, rendimiento, o incluso pérdidas de credenciales.
  2. Sin duda un servidor externo con un buen servicio técnico y que ellos es hagan cargo de todo el mantenimiento del servidor.
  3. No utilizar conexiones inalambricas, aplicar cortafuegos, tener bien protegido el usuario administrador, hacer copias de seguridad externalizadas y tener piezas de recambio para poder resolver un problema en el menor tiempo posible, proteger físicamente el servidor si puede ser guardado en un RAC bajo llave.
  4. Pagaría en función del rendimiento que le pueda sacar, si la web me lleva clientes y facturo bien dedicaría más dinero que si no me factura.
    SERED, CDMON, WORDPRESS, WEBEMPRESA, 1 & 1.
  5. Telefónica tuvo un ataque que encriptaba los datos, paso por no tener los ordenadores actualizados.
  • Sony sufrió un ataque de un adolescente que puso en peligro todos los datos de millones de clientes.
  • Intel ha encontrado un error en el arquitectura de sus procesadores y la predicción de ejecución.

Ahora estamos repasando las respuestas mas o menos todos hemos respondido lo mismo

  • Consejos de seguridad:
  • Copias de seguridad
  • Vigilar el acceso físico
  • Antivirus de pago
  • Vigilar temperaturas
Sobre Marc Oliveras 110 Artículos
Técnico en sistemas y redes informáticas, blogger, youtuber & gamer

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*