apuntes curso

Primera clase lunes 15 de enero de 2018

Curso de creación de paginas web, primeros pasos con el profesor Josep.

Clases de Programación del 15 de enero al 18 de Junio las clases de Josep se harán los lunes y los miércoles.

Josep colabora en un programa de radio en St Vicens de Montalt.

Diferencias entre web estática o dinámica.

La web Estática el contenido ya esta creado y una web dinámica no existe, se genera a cada petición del usuario, básicamente todas las paginas son dinámicas, las estáticas ya están en desuso a finales del 90 casi todas eran estáticas, solo utilizaban HTML y CSS casi sin programación. Esta en el hosting sin una base de datos estructurada.

Mas adelante se generaron lenguajes de programación web como PHP ASP.NET  o javascript dando lugar a las web’s dinámicas, normalmente el contenido de la web se guarda en la base de datos en un directorio diferente al del contenido visual como estilos CSS, la web dinamica no muestra el contenido hasta que no se hace la petición.

Landing page (pagina de aterrizaje) suele ser en formato estático y con un contenido especifico para una tarea en concreto, carga mas rápido al no tener que acceder a una base de datos.

FTP es el protocolo para comunicarse entre la web y el hosting, filezilla sirve para subir archivos al hosting por protocolo FTP, pero no es imprescindible ya que podemos subir los archivos al hosting a través del Cpanel y el administrador de archivos de nuestro hosting.

Los diferentes tipos de lenguaje de  programación de las web’s.

• PHP es software libre y se ejecuta directamente en servidor
• Javascrpt se ejecuta en el navegador del cliente
• ASP.net se ejecuta en el servidor es de Microsoft o sea de pago
• La combinación de PHP, MySQL y javascript permite el funcionamiento de CMS (gestores de contenido) como WordPress

Si el navegador no esta actualizado no podrá mostrar algún contenido programado con un lenguaje que se ejecute en cliente.

Sin poder programar, las web’s serían muy pobres y no se podrían crear proyectos complejos como facebook ni existiría el software online (EX. hootsuite, fidelitza)

 

Segunda clase martes 16 de enero de 2018

Profesor Albert Sanchez Prada es programador y asesor web tiene un equipo de 5 personas el se encarga del departamento multimedia trabaja en ERAM, estudios de Grado superior sistemas informáticos, carrera y máster en aplicaciones multimedia.

su contacto es hola@albertsanchez.cat proyectos personales y ayuda en general.

copy left y copy right hay que saber muy bien que contenido se pone en la web, en caso de ser programador y no propietario de la web hacer contrato para no sufrir responsabilidades.

• creación de paginas con lenguaje de marcas  80h
• elaboración de hojas de estilo 70h
• elaboración de plantillas y formularios 60h
• la curva de aprendizaje es muy lenta no hay que frustrarse tenemos que ser conscientes y aceptarlo
• primera explicación Internet
• Internet es la red de redes
• se conectan a través de un protocolo TCP/IP se conectan a través de un numero único, se llama ip publica
• INTERconected NETworks / INTERnational NET

Internet se fundo durante la guerra con rusia para poder comunicarse y coordinarse para evitar ataques, crearon centros de datos en lugares seguros como hospitales para comunicarse y mas adelante 1969 crearon ARPANET para dividir departamentos crearon la MILNET así separaron lo militar del gobierno.

1985 se crea el CIBERSPACIO se comercializa Internet en 1990 teníamos mas 100.000 servidores en todo el mundo, tim berners lee es el creador de la world wide web  (www) creador de Internet comercial, creador del hipervínculo y las URL.

Mosaic fue el primer navegador web, interpretaba código y lo mostraba en una ventana creado en 1995 por Marc Andreesen.

 

Tipos de servidores:

• Archivos
• Mensajería
• Correo
• Base de datos
• P2P compartir archivos entre ordenadores Emule, Ares, torrent.. etc
• VPN acceso remoto
• Voip voz ip
• DNS nombres de dominio
• proxy
• DHCP se encarga de administrar IP’s a los ordenadores de una area local

El servidor DNS es el encargado de resolver la ip de un nombre, por ejemplo si vamos al navegador y escribimos una web como www.freeboxinformatica.club el servidor DNS es el encargado de resolver el numero de IP que le corresponde y enviarnos al servidor que físicamente guarda la información de esa web que hemos consultado.

Cuando un servidor hosting tiene varias web’s con una misma IP, el servor DNS aparte de facilitar la IP debe proporciona mas datos para saber que web alojada en ese hosting tiene que mostrarte.

La información adicional que proporciona el servidor DNS para saber que web con la misma IP tienen que mostrare  es binaria de 0 y 1.

Who Is es el identificador de un dominio traducidoal español significa (es quien es) algo asi como la factura de compra que se debe emitir en la web Who Is podemos consultar los datos de una web en concreto para conocer su propietario.

Hay muchos tipos de dominio, algunos restringidos solo para efectos gubernamentales o de la industria del transporte por ejemplo, podemos ver todos los tipos de dominio en el siguiente ENLACE

Hablamos también de los tipos de servidores que podemos contratar y de los parámetros que tenemos que mirar al comprar un Hosting, tipos de discos duros los hay sólidos (ssd) y mecánicos (hdd) los sólidos son mucho mas rápidos es aconsejable contratar un hosting con SSD para asegurar una carga rápida, la capacidad de transferencia también es importante ya que dependiendo de la capacidad contratada podrán entrar mas o menos usuarios a nuestra web simultáneamente sin sufrir colapso.

Si tenemos poca tasa de transferencia y un gran volumen de usuarios conectados a nuestra web se bloqueara la web por exceso de transito, al igual que si pasan demasiadas personas por un pasillo si el pasillo es pequeño quedaran colapsadas de inmediato, por eso es importante valorar cuanto transito va a tener nuestra web.

Albert ha hecho referencia ha que si ya sabemos algo de ingles, el lenguaje de programación comparte muchas ordenes o comandas que vienen del ingles como size, table.. etc

También mirar que tenga seguridad SSL para que la transferencia de archivos entre un usuario y la web sea cifrada, de lo contrario cualquier que este escuchando nuestra conversación (man in the midle) podría saber que contenido tiene el mensaje.

Tareas cron sirven para crear tareas automatizadas, como el seguimiento del envió de un paquete.

Angularjs 5 no refresca pagina ofrece el código en tiempo real y carga muy rápido, se suele usar este lenguaje de programación en Servidores EC2 (los de Amazon) viene sin SO no es compatible con apache.

el subdominio siempre va adelante por ejemplo es.eram.cat, este otro ejemplo no es un subdominio si no que es una carpeta www.elteunegoci.com/nombre-del-negocio/

A ultima hora nos ha enseñado el plugin translate x para wordpress para poder tener una web multi idioma.

Tercera clase con Josep miércoles 17 de enero de 2018

Josep muestra mi web para tener apuntes a mano y poder compartir experiencias con los demás alumnos del curso.

se propone crear un almacenamiento compartido como por ejemplo un dropbox donde subir archivos relacionados con el curso.

Josep nos enseña un proyecto propio que tiene en stantby fidelitza.cat ofrece servicios de administración de clientes en base de datos para (PYMES) pequeña y mediana empresa tener base de datos de todos sus clientes, gestión de mailing marketing, enviar  sms convencionales, lo mas destacable de este software online es que desde cualquier dispositivo se puede operar solo hace falta que tenga un navegador y conexión a Internet esto lo hace muy versátil.

Para elaborar este sofware online se utilizo base de datos mysql script php y javascript con esta aplicación nos enseña que se puede llegar hacer con la programación web, crear un producto a partir de varios tipos de lenguaje de programación, es importante tener presente esto.

Cuando se refiere a script también se refiere a programa, como hacer que un programa haga una acción recomendada, primero de todo dejar claro que la maquina no piensa por si solo seguira los paso que le ordenemos nosotros o sea que hay que pensar que pasos queremos hacer antes de ponernos a programar.

Antes de nada hay que hacer un diagrama de bloque, con papel y lapiz algo simple con lo que ver mas claramente que vamos hacer abajo podemos el ver un diagrama de bloques

Comenzamos por abrir fichero, comprobar si el fichero contiene datos, si no hay datos no hace falta continuar y vamos a cerrar fichero, en caso de a ver fichero pasamos al siguiente paso leer datos y la secuencia que sigue es mostrar los datos.  Te permite la elaboración de un algoritmo.

Este es un diagrama de bloques muy simple pero lo podríamos extender todo lo que quisiéramos

A modo de ejemplo seria como los planos de un arquitecto antes de comenzar a construir una casa necesitamos elaborar los planos para tener claro que materiales y que trabajos vamos a realizar.

Las ideas hasta que no comenzamos a trabajarlas aun que sea en un papel no le vemos la verdadera utilidad o sentido de la idea o proyecto.

Seudocodigo

Lenguaje informal que se utiliza para elaborar tu esquema es como un borrador antes de la programación después tendremos que pasar en limpio y en el idioma de programación que convenga para ese proyecto.

El objetivo es centrarse en desenvolupar una solución lógica sin tener que usar el lenguaje de maquina.

Comenzamos la práctica!!

Comenzamos abriendo el programa bluefish lo podemos descargar aqui

Josep nos hace ir al directorio C:/Wamp/www en este directorio es donde se publica todo o sea es un directorio publico donde podemos acceder a través de la red desde cualquier navegador, en resumen estamos haciendo de servidor web, para poder acceder a este directorio primero debemos de tener instalado el programa wamp, como hay muchas versiones y da algún que otro problema con las dll, he subido una carpeta con todos los archivos necesarios para instalar Wamp y bluefish con instrucciones Aquí enlace

Josep a dicho que puede que instalemos un WordPress , de mientras nos hace iniciar el servidor (abrir el programa wamp) y después ir al navegador que nos de la gana y escribir localhost ahora veremos el panel principal de wampserver

Con este servidor funcionando ya podemos comenzar a trabajar como si hubiésemos contratado un hosting pero trabajando en local o sea en nuestro ordenador, podemos instalar un wordpress o subir una web hecha en por nosotros.

Vamos a crear una carpeta nueva en el directorio C:\Wamp\www en mi caso la carpeta apuntesaula ahora tendremos que crear un archivo index en esta carpeta, para ello lo haremos con bluefish

Primer ejercicio practico

La forma correcta de sintaxis para php seria esta <?php // aquí ponemos el código y se cierra con la siguiente sintaxis ;?>

una vez escrita la linea de código le daremos en guardar como y le damos el nombre de index.php ahora lo guardamos en el directorio C:\Wamp\www\apuntesaula

Ahora vamos al navegador y escribimos localhost/elnombre de nuestra carpeta en mi caso apuntesaula/index.php

ahora deberíamos ver un ventana en blanco eso es por que hay las dos barras // delante del código eso hace que sea oculto y que no se muestre en el navegador, lo comenta, esto sirve para añadir comentarios de texto solo visibles por el programador por ejemplo para añadir una observación.

Si sacamos las barras // guardamos el archivo y actualizamos el navegador nos dará error, ese error es por que le hemos hablado en nuestro idioma y no sabe interpretar lo escrito como código php.

ahora si guardamos el archivo que estamos creando en bluefish en .html y quitamos las etiquetas solo texto podremos ver el resultado en la web, tendría que quedar así.

Como no hemos definido ningún código de programación nos ha mostrado este texto así, para que interprete mejor el texto con acentos y tildes tendríamos que decirle que se trata de contenido de un texto con etiquetas especificas html.

php también puede mostrar texto en pantalla pero hay que darle unas instrucciones determinadas en este caso el comando echo y después entre comillas el texto que queremos enseñar en pantalla <?php echo «aquí el texto que queramos mostrar en pantalla y cerramos de la siguiente manera ?>  para ser mas correcto y evitar problemas pondremos punto y coma para indicarle que el comando echo ya ha acabado lo hacemos del siguiente modo <?php echo «aquí el texto que queramos mostrar en pantalla y cerramos de la siguiente manera» ;?>

Observación las comillas simples (‘) también sirven igual que las dobles («)

una variable seria como un sitio donde guardar algo como un cajón o un porta papeles, vamos a definir una variable y mostrarla en pantalla, en php el signo de variable es el signo del dolar $ por ejemplo

si hacemos $variable1=2; hemos credo una variable y si ahora después le ponemos echo $variable1; nos mostrara el numero 2 que es la variable que le hemos asignado anteriormente echo le dice que lo muestre en pantalla $variable1 le dice que variable es la que tienen que recordar y ; le dice que aquí se acaba el código php, es importante por si queremos continuar con HTML así diferencia un código del otro.

por ejemplo una variable se puede aplicar a un formulario imaginemos el campo donde pide código postal le podemos decir que los valores sean numéricos por obligación para que no introduzcan un texto o código en el campo del código postal.

Podemos jugar un poco con las variables y decir que nos haga una suma de variables de la siguiente manera:

resumen de hoy, hemos levantado el servidor para poder mostrar el contenido dentro de la carpeta www/ en el navegador el archivo index.php o ,html que hemos creado con el editor de texto bluefish.

Jueves 18 de enero de 2018

Clase con Albert nos enseñara programacion en HTML y CSS y el lenguaje de marcas, el lenguaje de marcas no tiene funcion de crear programas si no que lo que hace es describir los datos en un entorno web.

Cuando programamos en php no se muestra hasta que lo hacemos visible con HTML.

Html (hyper text markup language) no tiene funciones aritméticas ni contiene variables, html sirve para destacar fragmentos de texto y marcar diferentes visiones del texto, paragrafo, titulo.. etc

el formato de las etiquetas html es el siguiente <nombre de la etiqueta> se abre <p> y cerramos con </p> hay excepciones como el salto de linea que no se tiene que cerrar y se utiliza la etiqueta <br> linea horizontal <hr> y la imagen tampoco se cierra <img> hay mas ejemplos de momento nos enseña estos.

las etiquetas se escriben en mayúsculas o minúsculas, es totalmente indiferente lo podemos utilizar para diferenciar zonas que nos convenga aunque los editores de texto actuales ya lo hacen por colores.

Cualquier lenguaje de marcas esta definido por DTD (document type definition) es lo que define en que tipo de lenguaje se esta programando para decir que estamos programando en html comenzaremos siempre con

<!DOCTYPE html>   con esta etiqueta le estamos diciendo que estamos programando en html 5 dentro de un mismo archivo html podemos insertar código php poniendo sus etiquetas <?php  código   ;?> una pagina de referencia es www.w3schools.com es la biblia de las etiquetas en diferentes tipos de programación y podemos practicar en tiempo real.

El navegador es el que interpretara el código html , puede que algunas etiquetas solo las interprete con un navegador en concreto, cada navegador tiene un motor diferente, siempre trabajaremos en html5.

Algunas etiquetas son opcionales por ejemplo el formato de caracteres las bases de datos interpretan el texto occidental (sin signos) por ASCII o UTF8 y si queremos otro idioma con otro tipo de caracteres le tendremos que especificar.

Hay editores de texto que hacen una pre visualización de como se vería en un navegador por ejemplo el Dreamweaver no hay que fiarse mucho de esas pre visualizaciones ya que utilizan un motor para emular navegador muy simple, es mejor guardar el documento y abrirlo directamente en el navegador, nosotros utilizamos bluefish.

Alber hace referencia a varios programas para programación especializados con muchas funciones avanzadas, como almacenamiento online, multiusuario, copia de archivos automática en servidor y muchas mas tareas avanzadas.

Hay editores que te llenan de código basura como Dreamweaver entre otros lo hacen por que incorporan muchas funciones para automatizar y facilitar nuestro trabajo.

W3C world wide web consortium, se creo este consorcio para proporcionar estandards de programación para que todos los editores y programadores trabajen por igual y con los mismos códigos eso hace que después se mucho mas fácil para los navegadores tener compatibilidad y crear motores y herramientas web.

Un ejemplo las presentaciones de apple de sus productos en vídeo solo se pueden ver desde safari.

El código CSS 3 aun se tiene que especificar los códigos para depende de que navegador los lea.

HTML 5 es la quinta versión del lenguaje mas básico de la www tiene una serie de nuevos elementos de web’s modernas, ejemplo de <div> a <nav>

Albert hace referencia que los nav son para crear contenido de navegación que contiene menús.

Comenzamos la practica!

comenzamos un nuevo archivo en bluefish con <!DOCTYPE html>

despues las etiquetas <html>   y </html>  dentro de estas dos etiquetas ira todo el contenido de la web

despues le especificaremos donde va la cabecera con la etiqueta <head> nos recomienda hacer una tabulacion en la siguiente etiqueta quedaria así:

Ahora si abrimos el archivo index guardado con el navegador veremos que no nos muestra nada solo el titulo en la pestaña superior del navegador

Ahora hemos añadido contenido dentro body y se visualiza bien con chrome y con caracteres raros en iexplore

para generar texto rápidamente podemos ir a la pagina lorem ipsum y podemos copiar párrafos enteros con acentos y otros caracteres para ver si los muestra bien el navegador, el resultado en este caso es con chrome es así:

Ahora para indicarle el tipo de codificación de caracteres que estamos escribiendo usaremos la etiqueta <meta charset=»UTF-8″> siempre la pondremos dentro la etiqueta <head>   aquí dentro a la altura que queramos   </head> las meta etiquetas no hace falta cerrarlas, hay que tener en cuenta que todo el texto que tengamos encima como en este caso el titulo si contiene acentos o caracteres especiales no sabrá interpretarlos, comenzara la codificación de la meta etiqueta hacia abajo.

Ahora ya se muestra con todos los caracteres correctamente pero no hace saltos de párrafo para ello utilizaremos la etiqueta <p> contenido del párrafo  </p> para saltar a la linea de abajo y comenzar otro párrafo haremos lo mismo abajo.

Ahora vamos a usar la etiqueta <h> esta etiqueta permite crear títulos de diferente tamaño para indicarle el tamaño utilizaremos los números del 1 al 6 siendo 1 el mas grande y 6 el mas pequeño lo aplicaremos así:

<h1> titulo del articulo </h1>

el uso del conjunto de etiquetas tiene que quedar así

 

 

Para ver paralelamente como se ve en vista de navegador y vista de código podemos usar en el navegador botón derecho inspeccionar.

La vista de inspección se utiliza mas cuando estamos programando estilos CCS.

Ahora vamos a ver las etiquetas mas básicas para dar formato al texto.

• Ahora utilizamos el etiqueta <br> para hacer salto de linea en este caso no hace falta cerrarlo y para añadir una linea horizontal le aplicamos utilizamos la etiqueta <hr> esta tampoco se cierra.
• Después esta la etiqueta <b> que sirve para hacer un texto en negrita <b> texto que quieres en negrita </b> estas etiquetas se pueden utilizar dentro de otras etiquetas.
• De igual modo si queremos tener un texto en cursiva utilizaremos la etiqueta <i> del siguiente modo <i> texto que quieres en cursiva </i>
• Ahora utilizamos la etiqueta para subrayar <u> y se aplica del mismo modo que las etiquetas anteriores <u> texto que quieras subrayar</u>

En el editor se tendría que ver así:

Con esto y un bizcocho.. mañana mas y mejor!

Viernes 19 de enero de 2018

Hoy tenemos clase con Josep, de momento solo tenemos charla de clase sin trata un tema en concreto.

Acabamos de compartir un almacenamiento Google drive para compartir archivos del curso.

Vamos a hablar sobre una noticia Facebook priorizara los contenidos personales frente a las noticias, estamos haciendo debate sobre esta noticia, creemos que facebook esta intentado recuperar su esencia y volver a los inicios donde fue creado, para encontrar personas que hacia mucho tiempo que no veíamos, compañeros de clase, amigos de la infancia, familiares lejanos… etc

Fijaros que Facebook no te muestra información de todos los contactos, solo muestra la información de unos pocos usuarios, esto hace tiempo que es así por el cambio de algoritmo que se produjo en Facebook, ese algoritmo solo te muestra contenido relevante y el decide que es lo mas relevante para cada usuario.

Ese algoritmo se basa en el historial de contactos y evalúa cuales son las personas con las que tenemos mas contacto, si hacemos una reflexión en el teléfono móvil tenemos cientos de contactos sin embargo solo hablamos con un numero reducido de personas.

Entonces Facebook esta ocultando o limitando la información que te muestra, lo que no sabemos es si lo hace para que tengas una mejor experiencia de usuario o para mostrarte lo que mas le convenga a Facebook para sus campañas publicitarias.

Estamos debatiendo sobre privacidad de datos, seguridad informática, adjunto una conferencia muy interesante sobre este tema.

Ahora comenzaremos con WordPress, vamos ver el archivo de configuración de wordpress el fichero www/wp-config.php este archivo esta ubicado en el hosting que aloja wordpress, este archivo es el que guarda todos los parámetros de la plataforma.

En este archivo hay mucho texto que no forma parte del código es solo para observaciones se diferencia por tener /** */ dentro de este fichero hay esta web  https://codex.wordpress.org y es la web donde hay todas las referencias de WordPress, es como la biblia de wordpress para un desenvolupador.

En el apartado define (DB_NAME’, ‘ wp- nombre de la base de datos de igual manera hay un apartado donde se define el usuario define (DB_USER’, ‘ wp- nombre de usuario y el pasword se define (DB_PASSWORD’, ‘  contraseña, esto y muchos mas parámetros son los que contiene el archivo wp-config.php ya veis que tiene mucha importancia.

define (‘WP_DEBUG’, sirve para que wordpress nos lance un mensaje de error cuando se produzca algún fallo.

Cosas a tener en cuenta en base de datos:

El nombre de la base de datos debe ser único en la maquina que ejecuta la base de datos, hay que definir un nombre de usuario y una contraseña, esto es lo mínimo que hay que hacer al generar una nueva base de datos.

Entramos al panel principal de WordPress, el 25% de las web’s del mundo están hechas con WordPress.

WordPress

WordPress es tan utilizado por que hay miles de plugins y plantillas que pueden añadir funciones de todo tipo para que una web se adapte a tu proyecto lo máximo posible, otra de las características que hacen de wordpress el CMS mas utilizado es que hay una comunidad detrás de WordPress que te permite encontrar información prácticamente de cualquier duda o problema que tengas.

Una se las opciones principales de wordpress es los ajustes generales donde podemos configurar a grandes rasgos la identidad de nuestro sitio web.

La identidad del sitio tendrá repercusión en el posicionamiento en los buscadores y en definitiva el posicionamiento en los indexadores y el transito orgánico.

• El transito orgánico es que se consigue de forma natural si pagar por publicidad ni campañas de marketing.
• En el apartado Dirección de WordPress (URL) es la ubicación de la instalación de WordPress
• El apartado dirección del sitio (URL) es la ubicación de la base de datos

Josep recomienda proteger con login para las web’s en pruebas o construcción que ya trabajan bajo el dominio y hosting definitivo de ese modo cuando alguien se encuentra con nuestra web no puede ver el contenido por que esta protegido con pasword y contraseña, esto se hace con el plugin Force Login.

El profesor no recomienda hacer una web con servicios como wix, 1 and 1, y servicios de este tipo donde podemos crear web’s con pocos clics, por que no tenemos las posibilidades que tenemos con un CMS como wordpress.

El Archivo robots.txt es el archivo que leen los robots de google para indexar una web.

Perfil determinado de los nuevos usuario, en este campo definimos que tipo de permisos tendrá el usuario que creemos en wordpress, por defecto esta en permisos de suscriptor.

En definitiva en opciones generales podemos modificar diferentes aspectos del archivo wp-config de manera gráfica sin tener que editar o escribir código.

Aquí podemos ver una parte muy importante para el posicionamiento ya que dependiendo de la configuración que tengamos no mostrara el nombre de los artículos y mostrara una serie de caracteres y números muy poco comerciales y que un usuario nunca buscaría en Google.

La estructura personalizada con las etiquetas que veis es la mas recomendada para un posicionamiento correcto /%categori%/%postname%/

Como curiosidad la web del profesor Josep www.solucions360.cat a dado un fallo al enseñarnos el plugin force login y no tenemos acceso al panel de control de wordpress en este caso para solucionarlo ha ido al hosting y ha accedido al administrador de archivos y a abierto la carpeta de wp-content que contiene los plugins y temas, ahora dentro de carpeta temas hay la carpeta de plugin wp-force login y vamos a renombrar el nombre de la carpeta.

Con este sencillo paso ya hemos solucionado el acceso a la web y al panel de control de wordpress, como mola!

Hasta aquí la clase de hoy!! el lunes mas y mejor!

para no crear artículos tan largos comenzamos la segunda semana en otro articulo nuevo AQUÍ