update
This commit is contained in:
tuz
parent
e3cf1eb82d
commit
e57ac9f526
159
README.md
159
README.md
|
|
@ -1,4 +1,4 @@
|
|||
# HTML CSS JS
|
||||
# Web
|
||||
|
||||
`html`
|
||||
`HyperText Markup Language`
|
||||
|
|
@ -6,20 +6,7 @@
|
|||
`Cascading Style Sheets`
|
||||
`js`
|
||||
|
||||
## Basic reset
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
## !
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
## div
|
||||
```html
|
||||
|
|
@ -67,7 +54,6 @@
|
|||
<a href="#" target="_blank" rel="noopener noreferrer"></a>
|
||||
|
||||
|
||||
|
||||
<img src="" alt="">
|
||||
<hr>
|
||||
<br>
|
||||
|
|
@ -188,66 +174,17 @@ https://www.w3schools.com/graphics/svg_hyperlinks.asp
|
|||
|
||||
|
||||
|
||||
|
||||
# Web
|
||||
|
||||
## Lang
|
||||
|
||||
- html
|
||||
- css
|
||||
- js
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Link:
|
||||
http://fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73fsad.onion
|
||||
http://fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73fsad.onion/public/
|
||||
|
||||
|
||||
---------------------------------------------
|
||||
|
||||
nginx
|
||||
https://nginx.org/en/
|
||||
|
||||
command:
|
||||
taskkill /IM nginx.exe /F
|
||||
|
||||
|
||||
Tor Browser
|
||||
https://www.torproject.org/
|
||||
https://www.torproject.org/download/
|
||||
|
||||
command:
|
||||
taskkill /IM tor.exe /F
|
||||
|
||||
---------------------------------------------
|
||||
|
||||
|
||||
Config:
|
||||
|
||||
Tor
|
||||
1:
|
||||
C:\root\src\zarga\TorBrowser\Browser\TorBrowser\Data\Tor\torrc
|
||||
|
||||
torrc.txt =
|
||||
HiddenServiceDir C:\root\src\zarga\TorBrowser\hidden_service
|
||||
HiddenServicePort 80 127.0.0.1:8080
|
||||
|
||||
|
||||
---------------------------------------------
|
||||
|
||||
nginx
|
||||
2:
|
||||
nginx/conf =
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Check url:
|
||||
|
||||
hidden_Service = Hotname = fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73fsad.onion
|
||||
|
|
@ -255,97 +192,3 @@ hidden_Service = Hotname = fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73f
|
|||
|
||||
|
||||
|
||||
Start:
|
||||
|
||||
win + r, sysdm.cpl
|
||||
|
||||
path =
|
||||
C:\root\src\zarga\nginx
|
||||
|
||||
Descartado [
|
||||
NGINX_CONF_PATH=C:\root\src\zarga\nginx\conf\nginx.conf
|
||||
Set Variable Name: NGINX_CONF_PATH
|
||||
Set Variable Value: C:\root\src\zarga\nginx\conf\nginx.conf
|
||||
|
||||
C:/root/src/zarga/nginx/conf/nginx.conf
|
||||
|
||||
C:\root\src\zarga\TorBrowser\Browser
|
||||
]
|
||||
|
||||
firefox.exe
|
||||
|
||||
cd C:\root\src\zarga\nginx
|
||||
nginx.exe
|
||||
|
||||
|
||||
|
||||
|
||||
////////////////////////////////////////////////////////////
|
||||
|
||||
path:
|
||||
C:\root\src\zarga\php-8.4.3-nts-Win32-vs17-x64
|
||||
|
||||
Build web server:
|
||||
|
||||
php:
|
||||
https://windows.php.net/download
|
||||
VS17 x64 Non Thread Safe (2025-Jan-15 11:07:36)
|
||||
|
||||
|
||||
php/php.ini-production
|
||||
|
||||
|
||||
cd C:\root\src\zarga\php-8.4.3-nts-Win32-vs17-x64
|
||||
|
||||
php-cgi.exe -b 127.0.0.1:9000
|
||||
|
||||
nginx -s reload
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Execute compile:
|
||||
|
||||
php-cgi.exe -b 127.0.0.1:9000
|
||||
|
||||
cd C:\root\src\zarga\nginx>
|
||||
nginx.exe
|
||||
|
||||
firefox.exe
|
||||
|
||||
|
||||
Stop run:
|
||||
|
||||
taskkill /IM nginx.exe /F
|
||||
taskkill /F /IM tor.exe
|
||||
|
||||
|
||||
|
||||
---------------------------------------------
|
||||
|
||||
https://www.apachefriends.org/es/index.html
|
||||
https://www.apachefriends.org/es/download_success.html
|
||||
https://www.apachefriends.org/es/download.html
|
||||
|
||||
|
||||
C:\xampp\htdocs\
|
||||
|
||||
taskkill /IM xampp-control.exe /F
|
||||
|
||||
DocumentRoot "C:/xampp/htdocs" to
|
||||
C:/root/src/php/htdocss
|
||||
|
||||
DocumentRoot "C:/root/src/php/htdocs"
|
||||
<Directory "C:/root/src/php/htdocs">
|
||||
|
||||
|
||||
Listen 80
|
||||
ServerName localhost:80
|
||||
|
||||
Listen 8080
|
||||
ServerName localhost:8080
|
||||
|
||||
|
||||
http://localhost:80/
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
# border
|
||||
|
||||
|
||||
```css
|
||||
border-radius
|
||||
```
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
# Flex
|
||||
|
||||
```css
|
||||
.div-flex {
|
||||
display: flex;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## flex tag
|
||||
|
||||
`Flex equivalent`
|
||||
```css
|
||||
flex: 1;
|
||||
|
||||
flex: 1 1 0%;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
```
|
||||
|
||||
|
||||
## Order
|
||||
```css
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
```
|
||||
|
||||
### Example
|
||||
```css
|
||||
Center horizontal
|
||||
<--------x-------->
|
||||
justify-content: center;
|
||||
|
||||
|
||||
Center vertical
|
||||
^
|
||||
|
|
||||
|
|
||||
x
|
||||
|
|
||||
|
|
||||
v
|
||||
align-items: center;
|
||||
```
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
# CSS
|
||||
|
||||
## Size
|
||||
```text
|
||||
px | Pixeles
|
||||
mm | Milimetros
|
||||
pt | Puntos
|
||||
|
||||
// ! 16px por defecto | Depende del navegador
|
||||
em | Herrencia [Del contenedor] px
|
||||
|
||||
rem | Referencia el root
|
||||
|
||||
vw | Viwport width [Depende de la pantalla]
|
||||
vh | Viwport height [Depende de la pantalla]
|
||||
|
||||
% | Porcentaje
|
||||
```
|
||||
|
||||
|
||||
## Template
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Movil */
|
||||
|
||||
|
||||
/* Tablet */
|
||||
@media (min-width: 600px) {
|
||||
|
||||
}
|
||||
|
||||
/* Desktop 1 */
|
||||
@media (min-width: 900px) {
|
||||
|
||||
}
|
||||
|
||||
/* Desktop 2 */
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## border
|
||||
|
||||
|
||||
```css
|
||||
border-radius
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Flex
|
||||
|
||||
```css
|
||||
.div-flex {
|
||||
display: flex;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### flex tag
|
||||
|
||||
`Flex equivalent`
|
||||
```css
|
||||
flex: 1;
|
||||
|
||||
flex: 1 1 0%;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
```
|
||||
|
||||
|
||||
### Order
|
||||
```css
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
```
|
||||
|
||||
### Example
|
||||
```css
|
||||
Center horizontal
|
||||
<--------x-------->
|
||||
justify-content: center;
|
||||
|
||||
|
||||
Center vertical
|
||||
^
|
||||
|
|
||||
|
|
||||
x
|
||||
|
|
||||
|
|
||||
v
|
||||
align-items: center;
|
||||
```
|
||||
|
||||
|
||||
## Zoom
|
||||
|
||||
```css
|
||||
/* <percentage> values */
|
||||
zoom: 50%;
|
||||
zoom: 200%;
|
||||
|
||||
/* <number> values */
|
||||
zoom: 1.1;
|
||||
zoom: 0.7;
|
||||
|
||||
/* Non-standard keyword values */
|
||||
zoom: normal;
|
||||
zoom: reset;
|
||||
|
||||
/* Global values */
|
||||
zoom: inherit;
|
||||
zoom: initial;
|
||||
zoom: revert;
|
||||
zoom: revert-layer;
|
||||
zoom: unset;
|
||||
```
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
# Template
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Movil */
|
||||
|
||||
|
||||
/* Tablet */
|
||||
@media (min-width: 600px) {
|
||||
|
||||
}
|
||||
|
||||
/* Desktop 1 */
|
||||
@media (min-width: 900px) {
|
||||
|
||||
}
|
||||
|
||||
/* Desktop 2 */
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
}
|
||||
```
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
# Zoom
|
||||
|
||||
```css
|
||||
/* <percentage> values */
|
||||
zoom: 50%;
|
||||
zoom: 200%;
|
||||
|
||||
/* <number> values */
|
||||
zoom: 1.1;
|
||||
zoom: 0.7;
|
||||
|
||||
/* Non-standard keyword values */
|
||||
zoom: normal;
|
||||
zoom: reset;
|
||||
|
||||
/* Global values */
|
||||
zoom: inherit;
|
||||
zoom: initial;
|
||||
zoom: revert;
|
||||
zoom: revert-layer;
|
||||
zoom: unset;
|
||||
```
|
||||
|
|
@ -1 +0,0 @@
|
|||
br
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<header></header>
|
||||
<nav></nav>
|
||||
<aside></aside>
|
||||
<main></main>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
|
||||
## Upload files
|
||||
|
||||
`multiple files`
|
||||
|
||||
```html
|
||||
<form action="upload.php" method="post" enctype="multipart/form-data">
|
||||
<input type="file" name="files[]" multiple>
|
||||
<button type="submit">Upload</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<input type="file" name="file">
|
||||
<button type="submit">Upload & Get Hash</button>
|
||||
</form>
|
||||
|
||||
```html
|
||||
<form>
|
||||
</form>
|
||||
|
||||
<input type="date" required>
|
||||
<input type="date">
|
||||
<input type="time">
|
||||
<input type="email">
|
||||
<input type="tel">
|
||||
<input type="color">
|
||||
<input type="range">
|
||||
<input type="number">
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
|
||||
<input type="email">
|
||||
<input type="tel">
|
||||
<input type="range">
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
<form>
|
||||
<input type="date" required>
|
||||
<input type="date">
|
||||
<input type="time">
|
||||
<input type="email">
|
||||
<input type="tel">
|
||||
<input type="color">
|
||||
<input type="range">
|
||||
<input type="number">
|
||||
<input list="facultades" name="facultad">
|
||||
<datalist id="facultades">
|
||||
<option value="Ingeniería de Sistemas">
|
||||
<option value="Ingeniería Civil">
|
||||
<option value="Ingeniería Industrial">
|
||||
</datalist>
|
||||
</form>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!-- ? Idionas -->
|
||||
<!-- ? es español -->
|
||||
<!-- ? en ingles -->
|
||||
<!-- ? ru Ruso-->
|
||||
<!-- ? ja Japones-->
|
||||
<!-- https://www.w3schools.com/tags/ref_language_codes.asp -->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- ? Cotenido clave-->
|
||||
<meta name="keywords" content="Test,Web">
|
||||
|
||||
<!-- ? Descripcon (Descripcion de la pagina)-->
|
||||
<meta name="description" content="De 70 a 140 carracteres mas o mendios">
|
||||
|
||||
<!-- ? Autor de la pagina -->
|
||||
<meta name="author" content="Nombre del author">
|
||||
|
||||
<!-- ? Si hay copyrigth -->
|
||||
<meta name="copyright" content="Empresa registrada">
|
||||
|
||||
<!-- ? Si la pagina tiene que ser indexada o no -->
|
||||
<!-- * index | noindex -->
|
||||
<meta name="robots" content="">
|
||||
|
||||
<!-- ! Es para seo -->
|
||||
<!-- * nofollow | follow -->
|
||||
<meta name="robots" content="nofollow">
|
||||
|
||||
<!-- ? Icono -->
|
||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
||||
|
||||
<title>Titulo</title>
|
||||
|
||||
<!-- ? Link del CSS -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style></style>
|
||||
|
||||
<!-- ? Link JS -->
|
||||
<script src="scripts.js"></script>
|
||||
<script></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- ? CSS -->
|
||||
<p class=""></p>
|
||||
|
||||
<!-- ? Link del Java script -->
|
||||
<script src=""></script>
|
||||
|
||||
<!-- ? Etiqueta de seccion -->
|
||||
<header>Cabeza</header>
|
||||
|
||||
<nav> Navegacion | Menu de navegacion </nav>
|
||||
|
||||
<aside>
|
||||
Cualquier contenido relacionado, pero no la principal
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
Cuerpo
|
||||
<article>Articulo
|
||||
<!-- No depende uno del otro. -->
|
||||
Secciones
|
||||
<section>1</section>
|
||||
</article>
|
||||
|
||||
<!-- ? Divicones internas del mismo contenido -->
|
||||
<section>2</section>
|
||||
<section>3</section>
|
||||
</main>
|
||||
|
||||
<footer>Pies</footer>
|
||||
|
||||
<!-- * Salto de linea -->
|
||||
<br>
|
||||
|
||||
<h1>Encabezado 1</h1>
|
||||
<h2>Encabezado 2</h2>
|
||||
<h3>Encabezado 3</h3>
|
||||
<h4>Encabezado 4</h4>
|
||||
<h5>Encabezado 5</h5>
|
||||
<h6>Encabezado 6</h6>
|
||||
|
||||
<p>Parrafo</p>
|
||||
|
||||
<!-- ? Regla horizonta -->
|
||||
<!-- ? Sirve una separacion de tema -->
|
||||
<hr>
|
||||
|
||||
<!-- Preformateado -->
|
||||
<!-- ? Mostrar el contenido tal cual esta escrito -->
|
||||
<!-- ! Respeta los saltos de linea -->
|
||||
<pre>
|
||||
1
|
||||
2
|
||||
3
|
||||
</pre>
|
||||
<code>
|
||||
<pre>
|
||||
|
||||
</pre>
|
||||
</code>
|
||||
|
||||
<!-- ? Br Salto de linea -->
|
||||
<br>
|
||||
<!-- Blockquote (Bloque de cita) -->
|
||||
<blockquote>
|
||||
Texto citado
|
||||
</blockquote>
|
||||
|
||||
<!-- Div | Divicion -->
|
||||
<div>
|
||||
Caja ed divicon
|
||||
</div>
|
||||
<!-- ? [To toma toda la caja] -->
|
||||
<b>Negrita</b>
|
||||
<i>Italica</i>
|
||||
<Strike>Tachada</Strike>
|
||||
<small>Chiquita</small>
|
||||
|
||||
<div></div>
|
||||
|
||||
<a href="http://" target="_blank" rel="noopener noreferrer">Link</a>
|
||||
<a href="carpeta/dentro_de_carpeta/archivo.html">Ir a archivo</a>
|
||||
<a href="../carpeta/dentro_de_carpeta/archivo.html">Ir a archivo</a>
|
||||
<a href=""></a>
|
||||
|
||||
<!-- ! Hacia atras ../ -->
|
||||
<!-- ! Hacia delante carpeta/ -->
|
||||
<!-- ! Relativa a la raiz / -->
|
||||
<!-- ? Siempre utilizar rutas referentes a la raiz -->
|
||||
<!-- /img/personajes/ -->
|
||||
|
||||
<a href="" download="">Descargar</a>
|
||||
<a href="" download>Descargar</a>
|
||||
|
||||
<!-- ! Atrabes delid -->
|
||||
<a href="#marcador">Ir a marcadores</a>
|
||||
<a id="marcador">Soy elmarcador</a>
|
||||
|
||||
<a href="carpeta/pagina.html#marcador">Ir a marcadores</a>
|
||||
<br>
|
||||
<!-- ? Solo puede usarse con # | ID -->
|
||||
<a href="#nota">Link nota</a>
|
||||
|
||||
<p id="nota">Esta es la nota</p>
|
||||
|
||||
<!-- * Listas
|
||||
* Listas ordenadas (ol)
|
||||
* Listas no odenadas (ul)
|
||||
|
||||
* Listas de definicion (<dl>)
|
||||
* <dt> Definition term | Que definir
|
||||
* <dt> Definition description | Descripcion del termino
|
||||
-->
|
||||
|
||||
<ul>
|
||||
<li>Lista no ordenada</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>Lista ordenada</li>
|
||||
</ol>
|
||||
|
||||
<ol>
|
||||
<li>Lista ordenada
|
||||
<ol>
|
||||
<li>Agregado anidados</li>
|
||||
<li>Anidados</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<table>
|
||||
Tablas | border
|
||||
<tr>
|
||||
<td>Casillas_1-1</td>
|
||||
<td>Casillas_2-1</td>
|
||||
<td>Casillas_3-1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Casillas_1-2</td>
|
||||
<td>Casillas_2-2</td>
|
||||
<td>Casillas_3-2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Casillas_1-3</td>
|
||||
<td>Casillas_2-3</td>
|
||||
<td>Casillas_3-3</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<center>
|
||||
No utilizar esta etiqueta, mejor usar CSS
|
||||
<br>
|
||||
Centra el contenido
|
||||
</center>
|
||||
|
||||
<!-- * Salto de linea -->
|
||||
<br>
|
||||
|
||||
<!-- ? Etiqueta de imagen -->
|
||||
<img src="#" alt="imagen" srcset="" width="" height="">
|
||||
<br>
|
||||
|
||||
<video src="" controls>Video</video>
|
||||
|
||||
<br>
|
||||
<audio src="" controls></audio>
|
||||
|
||||
|
||||
|
||||
<form action="">
|
||||
Formulario
|
||||
<!-- ! required | Obligatorio -->
|
||||
<!-- ? Entrada de datos -->
|
||||
<input type="text" name="Texto" required="Requerido">
|
||||
<input type="password" name="Contraseña">
|
||||
<input type="number" name="Numeros">
|
||||
<input type="email" name="Email">
|
||||
<input type="color" name="Color">
|
||||
<input type="range" name="Rango de numero" min="0" max="10">
|
||||
<input type="time" name="Tiempo">
|
||||
<input type="button" name="Boton" value="Boton">
|
||||
|
||||
<textarea name="" id="" cols="30" rows="10">Area de texto</textarea>
|
||||
<textarea name="" id="" cols="30" rows="10" readonly>Area de texto | Solamente leer</textarea>
|
||||
|
||||
<input type="submit" name="Enviar todos los datos">
|
||||
</form>
|
||||
<!-- * Post | Enviado por el servidor -->
|
||||
<form method="post" action=""></form>
|
||||
<form method="get" action=""></form>
|
||||
<form method="dialog" action=""></form>
|
||||
|
||||
|
||||
<!-- ? Forma de ordenar la pagina -->
|
||||
|
||||
<header>
|
||||
Cabeza
|
||||
<nav>
|
||||
Menu de navegacion
|
||||
</nav>
|
||||
</header>
|
||||
<article>
|
||||
Articulos | Todos ls Articulos
|
||||
<section>
|
||||
Las secciones del articulo
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
Menu Secundario
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
Pie de pagina
|
||||
</footer>
|
||||
<!-- Elementos en bloque
|
||||
h1, h2, h3, h4, h5, h6
|
||||
p
|
||||
hr (Horizontalrule)
|
||||
pre (preformat)
|
||||
blockquote (bloque de cita)
|
||||
div (divison)
|
||||
-->
|
||||
|
||||
<!-- Elementos en linea
|
||||
em (emphasis)
|
||||
strong (Textos mas importantes)
|
||||
small (textos menos importantes)
|
||||
wbr (Word breaking rule) # Corta una palabra larga
|
||||
span (Contenedor delinea)
|
||||
-->
|
||||
|
||||
<!-- Elementos de linea (continuacion)
|
||||
b, u, i (bold, underline, italic)
|
||||
cite (cita en linea)
|
||||
sub, sup (subindice y superindice)
|
||||
code (Codigo)
|
||||
time (tiempo)
|
||||
-->
|
||||
|
||||
Ctrl + O = Abrir archivos
|
||||
|
||||
|
||||
<!-- * Imagenes vectoriales -->
|
||||
<svg></svg>
|
||||
|
||||
<svg>
|
||||
<rect x="4" y="2" width="200" height="200"/>
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
<circle cx="100" cy="100" r="50" fill="red"/>
|
||||
</svg>
|
||||
|
||||
<img src="/img.svg" alt="Circulo">
|
||||
|
||||
<svg>
|
||||
<line x1="0" y1="0" x2="200" y2="200" stroke="red" />
|
||||
<line x1="200" y1="0" x2="0" y2="200" stroke="red" />
|
||||
<line x1="0" y1="100" x2="200" y2="100" stroke="red" />
|
||||
</svg>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<svg>
|
||||
<circle cx="100" cy="100" r="100" fill="none" stroke="red"/>
|
||||
<circle cx="100" cy="100" r="90" fill="none" stroke="red"/>
|
||||
<circle cx="100" cy="100" r="80" fill="none" stroke="red"/>
|
||||
<circle cx="50" cy="150" r="50" fill="none" stroke="red"/>
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
<rect x="20" y="20" width="160" height="160"/>
|
||||
<rect x="0" y="150" width="50" height="50" fill="#fff"/>
|
||||
|
||||
<rect x="0" y="0" width="50" height="50" fill="#fff"/>
|
||||
|
||||
<rect x="150" y="150" width="50" height="50" fill="#fff"/>
|
||||
<rect x="150" y="150" width="50" height="50" fill="#fff"/>
|
||||
|
||||
<rect x="75" y="75s" width="50" height="50" fill="#fff"/>
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
<ellipse cx="100" cy="100" rx="100" ry="40" fill="none" stroke="red" />
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
<defs>
|
||||
<!-- ! Envuelve elementos que seran referenciados -->
|
||||
<!-- ? Es como guardar una variable ¿ -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<g>
|
||||
<!-- ! Agrupar muchos elementos ( Manejar como sifuera un solo elemento ) -->
|
||||
<desc>
|
||||
|
||||
</desc>
|
||||
</g>
|
||||
<symbol>
|
||||
<!-- ! Funcionan unicamente como plantilla -->
|
||||
</symbol>
|
||||
<!-- ! Referenciasuna copia en vivo -->
|
||||
<!-- ? Instancia un elemento que se puede utilizar multples veces -->
|
||||
<use href="#id"/>
|
||||
<!-- href="#id" -->
|
||||
|
||||
<!-- ! Svg imagenes de mapa de bits -->
|
||||
<image href=""></image>
|
||||
|
||||
</defs>
|
||||
|
||||
<!-- ? Archivos.svg -->
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
<defs>
|
||||
<circle cx="50" cy="50" r="50" id="circle"/>
|
||||
</defs>
|
||||
<use href="#circle" x="50" y="50" fill="red"/>
|
||||
<use href="#circle" x="-50" y="-50" fill="green"/>
|
||||
<use href="#circle" x="50" y="-50" fill="blue"/>
|
||||
<use href="#circle" x="-50" y="50" fill="yellow"/>
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
<defs>
|
||||
<g id="gl" fill="none" stroke="red">
|
||||
<circle cx="50" cy="50" r="20"/>
|
||||
<circle cx="80" cy="80" r="30"/>
|
||||
</g>
|
||||
</defs>
|
||||
<use href="#g1" x="-50" y="-50" fill="yellow"/>
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
<symbol>
|
||||
<g id="gl" fill="none" stroke="red">
|
||||
<circle cx="50" cy="50" r="20"/>
|
||||
<circle cx="80" cy="80" r="30"/>
|
||||
</g>
|
||||
</symbol>
|
||||
<use href="#g1" x="-50" y="-50" fill="yellow"/>
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
<symbol id="gl" viewBox="0 0 100 100">
|
||||
<g fill="none" stroke="red">
|
||||
<circle cx="50" cy="50" r="20"/>
|
||||
<circle cx="80" cy="80" r="30"/>
|
||||
</g>
|
||||
</symbol>
|
||||
<use href="#g1" x="-50" y="-50" fill="yellow"/>
|
||||
</svg>
|
||||
<!-- * Mueve lascordenadas del svg
|
||||
transform="translate(x y)"
|
||||
* Escalar
|
||||
! Escala la scordenadas tambien
|
||||
transform"scale(x)"
|
||||
|
||||
* Argumentos
|
||||
d=""
|
||||
|
||||
h Horrizontal
|
||||
z = Unir al punto final
|
||||
|
||||
-->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
# CSS import
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
```
|
||||
|
||||
|
||||
## Example
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="main"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,627 @@
|
|||
# Html
|
||||
|
||||
## Template
|
||||
|
||||
**Template 0**
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form action="" method="get">
|
||||
|
||||
<input type="text" name="" id="">
|
||||
<button type="button"></button>
|
||||
</form>
|
||||
|
||||
<style></style>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Template !**
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
**Template 2**
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section>
|
||||
</section>
|
||||
<section>
|
||||
<article></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Import
|
||||
|
||||
|
||||
**CSS import**
|
||||
```html
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Semantic
|
||||
|
||||
**Header**
|
||||
|
||||
|
||||
```html
|
||||
<h1></h1>
|
||||
<h2></h2>
|
||||
<h3></h3>
|
||||
<h4></h4>
|
||||
<h5></h5>
|
||||
<h6></h6>
|
||||
```
|
||||
|
||||
**div**
|
||||
```html
|
||||
<header>
|
||||
<nav></nav>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section>
|
||||
</section>
|
||||
<section>
|
||||
<article></article>
|
||||
</section>
|
||||
<aside></aside>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
```
|
||||
|
||||
|
||||
## Table
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Form
|
||||
|
||||
## Upload files
|
||||
|
||||
`multiple files`
|
||||
|
||||
```html
|
||||
<form action="upload.php" method="post" enctype="multipart/form-data">
|
||||
<input type="file" name="files[]" multiple>
|
||||
<button type="submit">Upload</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
|
||||
**form**
|
||||
|
||||
```html
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<input type="file" name="file">
|
||||
<button type="submit">Upload & Get Hash</button>
|
||||
</form>
|
||||
|
||||
<form>
|
||||
</form>
|
||||
|
||||
<input type="date" required>
|
||||
<input type="date">
|
||||
<input type="time">
|
||||
<input type="email">
|
||||
<input type="tel">
|
||||
<input type="color">
|
||||
<input type="range">
|
||||
<input type="number">
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
|
||||
<input type="email">
|
||||
<input type="tel">
|
||||
<input type="range">
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
<form>
|
||||
<input type="date" required>
|
||||
<input type="date">
|
||||
<input type="time">
|
||||
<input type="email">
|
||||
<input type="tel">
|
||||
<input type="color">
|
||||
<input type="range">
|
||||
<input type="number">
|
||||
<input list="facultades" name="facultad">
|
||||
<datalist id="facultades">
|
||||
<option value="Ingeniería de Sistemas">
|
||||
<option value="Ingeniería Civil">
|
||||
<option value="Ingeniería Industrial">
|
||||
</datalist>
|
||||
</form>
|
||||
|
||||
```
|
||||
|
||||
### General
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Titulo</title>
|
||||
|
||||
<!-- * Posicionamiento web | Palabras cables-->
|
||||
<meta name="keywords" content="Contenido,Contenido2,Contenido3">
|
||||
|
||||
<!-- * Describir la pagina -->
|
||||
<!-- * Entre 70 a 140 carracteres -->
|
||||
<meta name="description" content="Descripcion del contenido">
|
||||
|
||||
<!-- * El author de la pagina -->
|
||||
<meta name="author" content="El autor de la pagina">
|
||||
|
||||
<!-- * Copyright -->
|
||||
<meta name="Copyright" content="La empresa inc.">
|
||||
|
||||
<!-- * Indexada o no -->
|
||||
<meta name="robots" content="index">
|
||||
<meta name="robots" content="noindex">
|
||||
|
||||
<!-- * Ni idea que es -->
|
||||
<meta name="robots" content="follow">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- * index.html -->
|
||||
<!-- * Comentario en HTML -->
|
||||
|
||||
<!-- * Titulos con valor semantico -->
|
||||
<h1>H1</h1>
|
||||
<h2>H2</h2>
|
||||
<h3>H3</h3>
|
||||
<h4>H4</h4>
|
||||
<h5>H5</h5>
|
||||
<h6>H6</h6>
|
||||
|
||||
<!-- * Typos de textos -->
|
||||
<p>Parrafo</p>
|
||||
<b>Negrita</b>
|
||||
<i>Italica</i>
|
||||
<strike>Tachada</strike>
|
||||
<small>Chiquita</small>
|
||||
|
||||
<!-- * Salto de linea -->
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<!-- * Botton -->
|
||||
<button atributo="valor">Soy un boton</button>
|
||||
|
||||
<!-- * Links -->
|
||||
<a href="#">Link</a>
|
||||
<a href="index.html">Link Index</a>
|
||||
<a href="../">Link Index</a>
|
||||
<a href="./index.html">Link Index</a>
|
||||
|
||||
<a href="./index.html" target="_blank">Link en una nueva pagina</a>
|
||||
|
||||
<!-- ? Listas -->
|
||||
|
||||
<!-- * Lista desordenada -->
|
||||
<ul>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
</ul>
|
||||
|
||||
<!-- * Lista ordenadas -->
|
||||
<ol>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Deprecate
|
||||
|
||||
```html
|
||||
<br>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Titulo</title>
|
||||
|
||||
<!-- * Posicionamiento web | Palabras cables-->
|
||||
<meta name="keywords" content="Contenido,Contenido2,Contenido3">
|
||||
|
||||
<!-- * Describir la pagina -->
|
||||
<!-- * Entre 70 a 140 carracteres -->
|
||||
<meta name="description" content="Descripcion del contenido">
|
||||
|
||||
<!-- * El author de la pagina -->
|
||||
<meta name="author" content="El autor de la pagina">
|
||||
|
||||
<!-- * Copyright -->
|
||||
<meta name="Copyright" content="La empresa inc.">
|
||||
|
||||
<!-- * Indexada o no -->
|
||||
<meta name="robots" content="index">
|
||||
<meta name="robots" content="noindex">
|
||||
|
||||
<!-- * Ni idea que es -->
|
||||
<meta name="robots" content="follow">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- * index.html -->
|
||||
<!-- * Comentario en HTML -->
|
||||
|
||||
<!-- * Titulos con valor semantico -->
|
||||
<h1>H1</h1>
|
||||
<h2>H2</h2>
|
||||
<h3>H3</h3>
|
||||
<h4>H4</h4>
|
||||
<h5>H5</h5>
|
||||
<h6>H6</h6>
|
||||
|
||||
<!-- * Typos de textos -->
|
||||
<p>Parrafo</p>
|
||||
<b>Negrita</b>
|
||||
<i>Italica</i>
|
||||
<strike>Tachada</strike>
|
||||
<small>Chiquita</small>
|
||||
|
||||
<!-- * Salto de linea -->
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<!-- * Botton -->
|
||||
<button atributo="valor">Soy un boton</button>
|
||||
|
||||
<!-- * Links -->
|
||||
<a href="#">Link</a>
|
||||
<a href="index.html">Link Index</a>
|
||||
<a href="../">Link Index</a>
|
||||
<a href="./index.html">Link Index</a>
|
||||
|
||||
<a href="./index.html" target="_blank">Link en una nueva pagina</a>
|
||||
|
||||
<!-- ? Listas -->
|
||||
|
||||
<!-- * Lista desordenada -->
|
||||
<ul>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
</ul>
|
||||
|
||||
<!-- * Lista ordenadas -->
|
||||
<ol>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
<li>Esto es una lista</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<table class="database-data">
|
||||
<tr class="tr-head">
|
||||
<th>#</th>
|
||||
<th>Nombre</th>
|
||||
<th>Apellido</th>
|
||||
<th class="test">Email</th>
|
||||
<th>Edad</th>
|
||||
<th class="test">Carrera</th>
|
||||
<th class="a">Acciones</th>
|
||||
</tr>
|
||||
<tr class="database-no-data display-none">
|
||||
<td class="database-no-data" colspan="7">
|
||||
No hay resultados.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>#</th>
|
||||
<th>#</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<th>Mul</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
```html
|
||||
<table>
|
||||
<caption>5 times table (5 × 0–25)</caption>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">n</th>
|
||||
<th scope="col">5 × n</th>
|
||||
<th scope="col">Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">0</th>
|
||||
<td>5 × 0</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>5 × 1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<!-- repeat rows -->
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
|
||||
```html
|
||||
<table>
|
||||
<caption>@Model.msg</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">n</th>
|
||||
<th scope="col">Left</th>
|
||||
<th scope="col">Right</th>
|
||||
<th scope="col">Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var row in Model.rows)
|
||||
{
|
||||
<tr>
|
||||
<th scope="row">@row.N</th>
|
||||
<td>@row.Left</td>
|
||||
<td>@row.Right</td>
|
||||
<td>@row.Result</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
```
|
||||
|
||||
|
||||
```html
|
||||
<table>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">#</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@foreach (var row in Model.rows)
|
||||
{
|
||||
<tr>
|
||||
<th scope="row">@row.N</th>
|
||||
<td>@row.Left</td>
|
||||
<td>@row.Right</td>
|
||||
<td>@row.Result</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
@{
|
||||
Layout = null;
|
||||
@model Laboratorio201.Models.WS.MulTable.MulTable
|
||||
}
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<form action="/Home/Index" method="post">
|
||||
<input type="number" name="val" placeholder="10" />
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
@if (String.IsNullOrEmpty(Model.msg) || Model.msg == "Error parse: try a number")
|
||||
{
|
||||
<h2>Tabla de mul</h2>
|
||||
|
||||
if (Model.msg == "Error parse: try a number")
|
||||
{
|
||||
<p>@Model.msg</p>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<h2></h2>
|
||||
|
||||
|
||||
<table>
|
||||
<caption>@Model.msg</caption>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Mul</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@foreach (var row in Model.result)
|
||||
{
|
||||
<tr>
|
||||
<th scope="row">Table:</th>
|
||||
<td>@row</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {color:red;}
|
||||
p {color:blue;}
|
||||
</style>
|
||||
|
||||
|
||||
class="fixed"
|
||||
<style>
|
||||
table.fixed {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table.fixed th,
|
||||
table.fixed td {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
// ! Estas son notas de programacion.
|
||||
|
||||
// ? Curso finalizados
|
||||
|
||||
CodigoFacilito - Curso Online de Inteligencia Artificial para Juegos
|
||||
|
||||
// ! Java script Info
|
||||
|
||||
|
||||
// * Librerias
|
||||
// ? Rust Instalacion
|
||||
cargo init --lib
|
||||
npm init -y
|
||||
npm install -D webpack webpack-cli webpack-dev-server
|
||||
npm install -D html-webpack-plugin
|
||||
|
||||
Web assambly
|
||||
https://github.com/rustwasm/wasm-pack
|
||||
https://rustwasm.github.io/wasm-pack/
|
||||
|
||||
npm install -D @wasm-tool/wasm-pack-plugin
|
||||
|
||||
// ! Comandos
|
||||
Ctrl + Alt + I
|
||||
|
||||
// ! Codigo
|
||||
// ? Esto es codig
|
||||
|
||||
<script src="main.js"></script>
|
||||
|
||||
// ! Para tenerlo en el propia HTML
|
||||
<script stype="text/javascript"></script>
|
||||
|
||||
|
||||
// * Comentarios
|
||||
// Comentarios
|
||||
|
||||
/*
|
||||
Comentaros
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
// * Funciones
|
||||
<- Funcionan en consola
|
||||
|
||||
// * Imprimir en consola
|
||||
console.log()
|
||||
// * Cuidado
|
||||
console.warn()
|
||||
// * Error
|
||||
console.error()
|
||||
// * Informacion
|
||||
console.Info()
|
||||
|
||||
// * Comandos
|
||||
window
|
||||
|
||||
// * Typo de datos
|
||||
typeof()
|
||||
|
||||
// * Enviar una alerta al navegador
|
||||
alert()
|
||||
|
||||
// * Variables
|
||||
// * Siempre utilizar let o const
|
||||
// ! Nunca utilizar var
|
||||
let variables = "Siempre utilizar let"
|
||||
|
||||
// ? Number | Para todos los tipos de numeros, [Enteros & Decimales]
|
||||
0
|
||||
// ? String | Cadena de texto
|
||||
"String"
|
||||
// ? Bolean | false, true
|
||||
true
|
||||
false
|
||||
// ? Coleccion de datos
|
||||
// ? Array (Arreglo) | object
|
||||
["Uno", "Dos", "Tres"]
|
||||
|
||||
// * Falta de valor
|
||||
undefined
|
||||
|
||||
// * Nulo
|
||||
null
|
||||
|
||||
// ! Codigo HTML
|
||||
|
||||
// * Al clickear el boton (Hace una funcion)
|
||||
<button onclick="presiono_click()"></button>
|
||||
|
||||
|
||||
function presiono_click() {
|
||||
console.log("Cick en boton");
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ! Objtos
|
||||
|
||||
let objeto = {
|
||||
nombre: "Nombre"
|
||||
}
|
||||
|
||||
objeto.nombre = "Objeto"
|
||||
|
||||
let objetos = {
|
||||
nombre: "Objeto",
|
||||
apellido: "Objeti",
|
||||
edad: 3,
|
||||
dirrecion: {
|
||||
tienda: "Salare",
|
||||
cuidad: "Brofoli",
|
||||
edificio: {
|
||||
nombre: "Edificio secundario",
|
||||
contacto: "2222-3333"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log( objetos.dirrecion.tienda)
|
||||
|
||||
objetos.dirrecion.zicode = 00000;
|
||||
console.log( objetos.dirrecion.zicode)
|
||||
|
||||
let edificio = objetos.dirrecion.edificio
|
||||
|
||||
edificio.nopiso = "Piso"
|
||||
|
||||
let objetos_nombre = objetos["nombre"]
|
||||
let objetos_nombre2 = objetos["dirrecion"]["cuidad"]
|
||||
|
||||
let campo_edad = "edad";
|
||||
let objetos_nombre3 = objetos[campo_edad]
|
||||
|
||||
|
||||
// ! Mas codigo
|
||||
|
||||
// ! Funcion
|
||||
function primera_funcion() {
|
||||
let a = 20;
|
||||
console.log(a);
|
||||
}
|
||||
|
||||
primera_funcion();
|
||||
|
||||
// ! Funcion 2
|
||||
function anonima( fn ) {
|
||||
fn();
|
||||
}
|
||||
|
||||
anonima(
|
||||
function() {
|
||||
console.log("Esto es una fncion anonima");
|
||||
}
|
||||
);
|
||||
|
||||
// ! Funciones
|
||||
|
||||
let mi_funcion = function() {
|
||||
console.log("Mi funcion")
|
||||
}
|
||||
|
||||
|
||||
// * Funcion random
|
||||
Math.random();
|
||||
|
||||
function numero_aleatorio() {
|
||||
|
||||
return Math.random();
|
||||
}
|
||||
|
||||
function obtener_nombre() {
|
||||
return "Nombre"
|
||||
}
|
||||
|
||||
function booleano() {
|
||||
|
||||
if(numero_aleatorio() > 0.5) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function a() {
|
||||
|
||||
}
|
||||
|
||||
// * El nombre de la funcion
|
||||
a.name
|
||||
|
||||
a.apply
|
||||
|
||||
let nombre = "nombre"
|
||||
|
||||
let persona = {
|
||||
nombre: "Maria",
|
||||
apellido: "Dubon",
|
||||
imprimir_nombre: function () {
|
||||
console.log( nombre );
|
||||
},
|
||||
direccion: {
|
||||
pais: "Costa rica",
|
||||
obtener_pais: function () {
|
||||
|
||||
const self = this;
|
||||
|
||||
let nuevaDireccion = function () {
|
||||
console.log( self );
|
||||
console.log(`Direccion es en ${pais}`);
|
||||
|
||||
}
|
||||
|
||||
nuevaDireccion();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
persona.imprimir_nombre();
|
||||
|
||||
|
||||
|
||||
|
||||
// ? Palabras reservadas
|
||||
|
||||
// * New
|
||||
// * Crea un objeto vacio
|
||||
|
||||
function personas(nombre, apellido, edad) {
|
||||
const self = this;
|
||||
|
||||
self.nombre = nombre;
|
||||
self.apellido = apellido;
|
||||
self.edad = edad;
|
||||
|
||||
self.nombre_completo = function () {
|
||||
return `${self.nombre} ${self.apellido} ${self.edad}`;
|
||||
}
|
||||
}
|
||||
|
||||
let persona = new personas("Juan", "Loper", 30);
|
||||
|
||||
|
||||
console.log(persona);
|
||||
console.log(persona.nombre);
|
||||
console.log(persona.nombre_completo());
|
||||
|
||||
|
||||
------------------------------------
|
||||
// ? Nuevo
|
||||
|
||||
// * Macro atribute
|
||||
#[]
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
## Js
|
||||
|
||||
|
||||
|
||||
```js
|
||||
var // Declarar una variable inicializada opcionalmente un valor
|
||||
let // Declarar una vasiable local en un bloque de ambito inicializando opcionales valor
|
||||
const // Declarar
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
const pi = 3.141519
|
||||
```
|
||||
|
||||
|
||||
```js
|
||||
function ()
|
||||
{
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
var carro = {
|
||||
getCarro: "Carro"
|
||||
};
|
||||
|
||||
console.log(carro.getCarro);
|
||||
|
||||
```
|
||||
|
||||
**console**
|
||||
```js
|
||||
const a = "Hola mundo!!";
|
||||
console.log(a);
|
||||
|
||||
// No re asignaicon
|
||||
const arr = [1, 2, 3, 4, 5];
|
||||
arr.push(a);
|
||||
|
||||
|
||||
let b = 10;
|
||||
|
||||
const name = "My nombre";
|
||||
const message = `Message Hola soy ${name}`
|
||||
console.log(`${name}`);
|
||||
console.error(`${name}`);
|
||||
|
||||
|
||||
document.querySelector("span").textContent = message;
|
||||
// Function landa
|
||||
// Funcion anonima
|
||||
document.querySelector("button").addEventListener("click", () => {
|
||||
document.querySelector("span").classList.toggle("red");
|
||||
});
|
||||
|
||||
function suma(a, b)
|
||||
{
|
||||
return a + b;
|
||||
}
|
||||
|
||||
suma;
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# nginx
|
||||
|
||||
https://nginx.org/en/
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
# Tor Browser
|
||||
|
||||
https://www.torproject.org/
|
||||
https://www.torproject.org/download/
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<?php
|
||||
$page = "Inicio";
|
||||
include_once "../private/template/header.php";
|
||||
|
||||
?>
|
||||
|
||||
<link rel="stylesheet" href="assets/css/page-home.css">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
|
||||
|
||||
ffmpeg -i input.mp4 out.webm
|
||||
ffmpeg -i input.mp4 out.ogv
|
||||
|
|
@ -3,7 +3,7 @@ regex101
|
|||
wappalyze.com
|
||||
|
||||
https://builtwith.com/es/
|
||||
|
||||
whois.domaintools.com
|
||||
|
||||
ipinfo
|
||||
|
||||
[whois](whois.domaintools.com)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue