/Desarrollo-Webv2

Web - Portfolio con Proyectos de desarrollo web

Primary LanguageJavaScriptMIT LicenseMIT

1. Curso de desarrollo web

Este repositorio es una guía sobre los conceptos y herramientas que he ido aprendiendo en el curso de desarrollo de aplicaciones web IFCD0210, puedes encontrar un resumen teórico sobre java aquí.

Una vez aprendidos estos conocimientos teóricos hemos realizado prácticas durante 5 meses utilizando el stack (LAMP) y los siguientes lenguajes web.

Para realizar los diseños de aplicaciones web seguiremos el siguiente fases:

  1. Diseño: consiste en realizar un dibujo visual de cuales son los elementos que van a componer la aplicación. Intentaremos dibujar los máximos detalles posibles, puedes hacer el dibujo en un simple cuaderno.También tendremos que describir todas las funcionalidades, por ejemplo un buscador.

  2. Creación de la base de datos: esta fase consiste en definir todos los datos que necesitamos guardar así de como todas las relaciones posibles entre las tablas. Por ejemplo, usuarios, password, categorias, fechas, etc.

  3. Maquetación: En esta fase colocaremos todos los elementos utilizando el dibujo utilizando las etiquetas de HTML.

  4. Programación: consistirá en llevar a cabo toda la lógica y contenido dinámico utilizando php.

1.1. HTML

Conceptos estudiados:

  • Elementos fundamentales necesarios.
  • Estructura de etiquetas en HTML5.

1.1.1. Enlaces HTML

1.1.2. Librerias HTML

1.1.3. Framework HTML

1.2. CSS

Menus: para crear menus utilizamos la propiedad display con listas.

Fotabilidad de las cajas: aprendemos como colocar diferentes elementos a lo largo de una pagina web y vemos como podemos ser capaces de ubicar cada uno de elementos en una página web.

  • Float: con la opción de float podemos colocar elementos por la pantalla de forma independiente, se suele utilizar principalmente para colocar los títulos, los menús o elementos de publicidad.

  • Flex box: para elementos que son similares, por ejemplo artículos. Todos los contenedores va a ir de forma organizada hasta ocupar el ancho de la pantalla y cuando se rellene se colocará automáticamente en la siguiente linea. El tamaño de las cajas será el que tenga la mas grande de la linea, si hay otra caja en otra linea no influye. Primero indicamos cuanto queremos que ocupe la sección respecto al body y luego con la opción de flex-wrap: wrap pegará un salto de linea cada vez que los elementos ocupen el porcentaje fichado anteriormente.

Pseudoclases: son estados especiales de un elementos. Por ejemplo un enlace a que cambia de color cuando es clicado o para rellenar con un color especifico las cajas pares.

  • Ejemplo de selectores de pseudoclases aquí.

1.2.1. Enlaces CSS

1.2.2. Librerías CSS

1.2.3. Herramientas CSS

1.3. JavaScript

Lenguaje orientado a eventos, podemos provocar cambios en el DOM utilizando diferentes eventos que llamas por ejemplo a funciones.

  • Petición AJAX utilizando JQuery para envío de datos por post.
  • En javascript accedemos a los objetos, los métodos: documento.write(variable);
  • Las variables son globales cuando no la definimos con var. url = this.href
  • windows.location
  • prevent.Default() - Previene que se ejecute el evento por defecto.

Por ejemplo:

documento.write(variable);
//Escapo la cadena de texto (") para poder concatenarla.
document.write("\"" +  variable + "\"");

1.3.1. Librerías Javascript

1.3.2. Frameworks Javascript

1.3.3. Enlaces JavaScript

1.3.4. Editor de texto en Javascript

1.4. PHP

El lenguaje que nos permite crear contenido desde el lado de servidor para mostrar contenido en la lado del cliente.

  • Hay que tener en cuenta que el contenido que en HTML utilizada comillas dobles ", en para combinar PHP y HTML tenemos que utilizar comillas simples '.
  • En PHP podemos definir el límite de ejecuciones que realice un bucle, asi impedimos que se creen bucles infinitos. Esta configuración se lleva a cabo en apache.
  • Definición de variables.
  • Para concatenar código html con código php dentro de las etiquetas de <?php ?> se utiliza el punto .
  • Las variables en PHP se definen con el símbolo $ ($variable) y no es necesario indicar el tipo de variable, php es capaz de identificar si es de tipo texto o numérica.
  • Conocer como activar los errores en PHP para mostrarlo en la web(en tiempo de ejecución).
  • Con la etiqueta hidden en un input puedo llevarme los valores que recibo de un formulario para mas tarde comprobar los datos.
  • Cookies vs Sesiones. Cookies se almacenan en el cliente, las sesiones de almacenan en el servidor.
  • Securizar el control de acceso mediante cookies, sesiones y $_SERVER.
  • Variables Variables. Nos crea un variable por cada elemento de una array. Por ejemplo lo que recibimos de un formulario.
  • Retrollamadas(Callback).
  • Generadores. Nos permite ejecutar una función repetidamente, como por ejemplo para devolver todas las lineas de un fichero llamando a un función. La palabra reservar en vez de return es yield.
  • La seguridad de la constraseñas. Sin hashing, cualquier contraseña que se almacene en la base de datos de la aplicación podrá ser robada si la base de datos se ve comprometida.
  • Programación orientada a objetos con PHP
  • Serialización - Guardar datos en un fichero o base de datos de forma permanente basado en un objeto. Podemos recuperar el objeto para utilizar sin tener que consultar la base de datos.
  • Subida de ficheros mediante POST.
  • Funciones de GD para tratar imagenes
  • System command, para ejecutar comandos del sistema en ficheros php
  • Validar una imagen leyendo la cabezera mime/type

1.4.1. Programación orientada a objetos (POO)

  • Lo básico

  • Clases: se componen de...

    • Constantes: son variables que no cambian de valor durante toda la ejecución.
    • Propiedades(variables): son propiedades a las que podemos acceder utilizando $this->propiedad. Las propiedades pueden ser públicas o privadas. Las que son públicas pueden ser utilizadas en otras clases extendidas.
    • Métodos(funciones): son funciones que realizan alguna acción dentro de la clase, accedemos a ellas con $this->metodo()

  • Las variables que definimos dentro de una clase pueden ser publicas o privadas

  • Clases extendidas: las clases extendidas nos permiten añadir alguna funcionalidad extra de clase que ya tengamos creada, pudiendo acceder a sus componentes. Por ejemplo si tenemos una clase que nos genera una tabla, podemos crear una clase extendida de esta para cambiar sus atributos de estilo.

1.4.2. Librerias PHP

1.4.3. Enlaces PHP

1.4.4. Frameworks PHP

1.4.5. Libros PHP

PHP Programming (O'Reilly)

1.5. Bases de Datos SQL

1.5.1. Enlaces SQL

MySQL TUTORIAL Documentacion MariaDB

1.6. Sistemas -Alojamiento - Hosting

  • Filtrar el acceso por ip a un servidor web
  • Configurar servidor de correo

1.6.1. Hosting

1.6.2. Sistemas y seguridad

Paneles de administración para administrar nuestro servidor linux mediante una interface web:

1.6.3. Enlaces Herramientas Sistemas y hosting

1.7. Wordpress

Plugin Wordpress

1.8. Serverless

1.9. Framework para desarrollo de appmoviles

1.10. Monetizando

  • Google adsense
  • Google adwords

1.11. Awesome Links

1.12. Comunidades de programadores

1.13. Documentación

1.14. Cursos

1.15. Plataformas Freelance

1.16. Eventos

https://www.codemotion.com/

1.17. Herramientas