Extensiones para Mozilla Firefox

Extensiones para Mozilla Firefox
============================
- Traducir paginas web
- Buscar por imagen en Google
- Ublock origin
- Lastpass

Atajos:

ALT                       -->     Barra de Menú
CTRL + H             -->     Panel lateral de Historial

CTRL + Shift + O -->     Abrir Ventana Marcadores
CTRL + O             -->     Abrir Archivo
CTRL + Shift + B -->     Mostrar barra de Marcadores
CTRL + TAB        -->     Navegar entre pestañas

SASS

Patrón 7–1
==============
Basicamente, tienes todas las partes almacenadas en 7 carpetas diferentes, y un único archivo en el directorio raíz (normalmente llamado main.scss) y que importa todas estas partes para luego compilarlas en una hoja de estilo CSS.

Crear multiples directorios en VSCode con mkdir:
$>cd sass
$>mkdir base components layout pages themes utils vendors


Clasificacion:
-base: Carpeta con los estilos que compartirán todas las páginas.
-components: Es donde se almacenan los bloques BEM que son más autónomos, como botones,card, carousel, modal, dropdown.
-Layout: es donde se almacenan bloques BEM que contienen cosas que se pueden reutilizar, como un formulario,header,footer,sidebar.
-Pages: contiene bloques de código que solo se aplican a una sola página.
-Themes: Es donde almacenas código temático, como estilo personalizado para Navidad o Halloween. Esto no se aplica al sitio que estamos creando.
-Vendors: Es un directorio para hojas de estilos de biblioteca de terceros como Bootstrap o jquery.

HTML5

html5
=======
Elementos en linea:

- button, input, label, select, textarea, b, small, code, strong, cite
- img, span, a

Elementos en bloque:

- h1,h2,h3,h4,h5,h6, p
- article, main, aside, footer, header, section, div, table, nav
- ul, li, ol, fieldset, audio, video, form, figure, hr

Ilustraciones Vectoriales

--------------------------------

https://www.manypixels.co/

https://undraw.co/illustrations

Icons

--------------------------------

https://boxicons.com/

ATAJOS DE TECLADO ILLUSTRATOR

ATAJOS DE TECLADO ILLUSTRATOR
================================
PEGAR                         -->     CTRL + F
Bloquear                       -->     CTRL + 2
Previsualizar contornos -->  CTRL + Y
Deshacer                        -->    CTRL + Z
Rehacer                          -->   CTRL + SHIFT + Z

Convertir Vector            -->   CTRL + SHIFT + O

Instalar Browsersync y Sass

Instalar Browsersync
======================
Descargar e instalar Node https://nodejs.org/es/
$> npm install -g browser-sync
$> browser-sync start --server --files *.html

Instalar Sass
======================
Descargar e instalar Sass https://sass-lang.com/

$> npm install -g sass

$> sass --version

Enlazar los archivos Sass con los archivos Bootstrap css

$> sass --watch libs/scss/bootstrap.scss libs/dist/css/bootstrap.css

Compilar archivo SAS a CSS

$> sass --watch scss/styles.scss:css/styles.css

Instalar Apache y PHP en Windows 10

Instalar Apache y PHP en Windows 10

==============================

Instalar Apache y Visual C++ Redistributable for Visual Studio 2015-2019 en windows 10

https://www.apachelounge.com/download/

https://aka.ms/vs/16/release/VC_redist.x64.exe

Descomprimir el archivo en
C:\Program Files

Configurar las variables de entorno
En Path ->Editar -> Nuevo
C:\Program Files\Apache24\bin

C:\Program Files\php

Seleccionar el directorio del Apache:
ingresar a la carpeta conf -> httpd.conf
:37 Define SRVROOT "c:/Program Files/Apache24"

Instalar e iniciar Apache
Ingresar al cmd como Administrador:

$> cd C:\Program Files\Apache24\bin
$> httpd.exe -k install

Ejecutar:services.msc -> iniciar Apache

ó

cmd: httpd -k start

Ingresar al navegador

http://localhost

-----------------------------------------------------------------------------------------------
                                         Instalar PHP en Windows 10

-----------------------------------------------------------------------------------------------
https://www.php.net/downloads

Descomprimir el archivo en
C:\Program Files

Cargar modulo de PHP en Apache
ingresar a la carpeta conf  de Apache

En el archivo httpd.conf al final agregar:
-------------------------------------------------------------------

ServerName localhost

LoadModule php_module "C:/Program Files/php/php8apache2_4.dll"

AddHandler application/x-httpd-php .php

PHPIniDir "C:/Program Files/php"

-------------------------------------------------------------------
Cambiar de ubicacion el DocumentRoot en Apache

ingresar a la carpeta conf -> httpd.conf
:251 DocumentRoot "d:/PHP"

:252 <Directory "d:/PHP">

Crear archivo info.php en D:\php

<?php

phpinfo();

?>

Renombrar archivo php.ini-development por php.ini 

Ingresar a la carpeta C:\Program Files\php\

php.ini

Reiniciamos servicio de Apache
Ejecutar:services.msc -> Reiniciar Apache

Ingresar al navegador web y verificar
http://localhost/info.php

============================================================

                              Instalar XDEBUG en Visual Studio Code

============================================================

Ingresar a VSCode y Descargar Extension

Instalar -> PHP Debug V.3.X

Ir a https://xdebug.org/wizard   -> Descargar versión para php8

Copiar todo el contenido de info.php y pegar https://xdebug.org/wizard

Analizar configuración y ejecutar las siguientes instrucciones:

1. Descargar php_xdebug-3.1.3-8.1-vs16-x86_64.dll

2. Copiar el archivo descargado en C:\Program Files\php\ext

3. Editar C:\Program Files\php\php.ini y añadir al final

 [xdebug]

  zend_extension = "C:\Program Files\php\ext\php_xdebug-3.1.3-8.1-vs16-x86_64.dll"

4. Reiniciar Apache

Abrir VSCode ir al menu lateral 

Click en Run and Debug 

  -> Click en Crear un archivo launch.json ->PHP

*****************************************************

{

  "configurations": [

    {

      "name": "Listen for Xdebug",

      "type": "php",

      "request": "launch",

      "port": 9003

    },

    {

      "name": "Launch currently open script",

      "type": "php",

      "request": "launch",

      "program": "${file}",

      "cwd": "${fileDirname}",

      "port": 9003

    }

  ]

}

*****************************************************

-----------------------------------------------------------------------

Configurar var_dump en PHP con colores y ordenado

-----------------------------------------------------------------------

Ingresar a php.ini y agregar las siguientes líneas

C:\Program Files\php\php.ini

-------------------------------------------------------------------------------------------------------

[xdebug]

xdebug.mode = develop,debug

xdebug.start_with_request=yes

xdebug.idekey=VSCODE

zend_extension="c:\Program Files\php\ext\php_xdebug-3.1.3-8.1-vs16-x86_64.dll"

-------------------------------------------------------------------------------------------------------

Reiniciar Apache

Ingresar al navegador web y verificar
http://localhost/prueba.php

Arquitectura en N-Capas

1.Capa presentacion: Encargada de interactuar con el usuario.

Representa a los formularios que se implementaran en el proyecto. La cantidad de formularios lo determina el desarrollador.

2.Capa de Negocio: Es la encargada de negociar los procesos entre la capa de presentacion y la capa de datos. Es la capa que recibe las peticiones del usuario y una vez tenga la respuesta lo envía a la capa de presentacion.

EntidadCN:Contiene la llamada a todos los metodos implementados en la clase EntidadDAO(Capa de datos).

3.Capa de Datos: Es la encargada de conectarse al servidor de datos e implementar metodos que permiten obtener toda la informacion solicitada por el usuario.

Conexion:  Contiene un metodo para conectarse a la base de datos.

EntidadDAO:Contiene la implementacion de todos los metodos que permiten realizar el listado y mantenimiento de registros de una determinada entidad.

4.Capa Entidad: Se encarga de contener todos aquellos objetos (clases) que representan al negocio, y esta es la única que puede ser instanciada en las 3 capas anteriores.

Contiene los atributos y los metodos get y set de la clase, a la cual se realizara el mantenimiento o consulta.

Patrón Value Object o VO (Anteriormente conocidas como DTO Data Transfer Object)

Consiste en tener clases con sus atributos y metodos get y set y que representan a cada una de las tablas de la BD. De esta manera podremos transportar un objeto con todos estos valores por medio de los métodos set y get de cada atributo.

Este patrón nos facilita para el transporte de la información, evitando que se envíen gran cantidad de parámetros a un método cuando queremos hacer un registro o actualización.

Data Access Object o DAO

Permite separar la lógica de negocio de la lógica para acceder a los datos, de tal forma que el DAO encapsula toda la lógica de acceso de datos al resto de la aplicación. Si cambiamos nuestra base de datos simplemente modificamos nuestra capa DAO

el DAO nos va a permitir obtener información de la base de datos, proporcionará los métodos necesarios para insertar, actualizar, borrar y consultar la información.