"No hay viento favorable para el barco que no sabe adónde va"
Lucio Anneo Séneca
Github permite subir nuestro proyecto frontend Angular a través de la librería 'angular-github-pages'. Básicamente son 4 archivos Javascript y una hoja de estilos CSS, los compilados para realizar el deploy en el dominio github.io.
REVISAR EN DETALLE
Esta es una práctica inicial sobre PHP trabajando con AJAX en un formulario de búsqueda, en primer instancia solo esta pasando el objeto de búsqueda a la sección inferior identificada con un ID, más adelante se presentará con un resultado más apropiado de búsqueda.
Esta práctica requiere de bootstrap, como de jquery previamente instalados sobre todo en los archivos donde se llame a alguna de las funciones
<?php
$palabra = $_POST["palabra"];
echo $palabra;
echo "Respondiendo desde el servidor";
$productos = array
(
array("Arroz", "KG", "3000",10),
array("Arroz", "KG", "3000",10),
array("Arroz", "KG", "3000",10),
array("Arroz", "KG", "3000",10)
);
echo var_dump($productos);
?>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<?php
echo "<table class='table table-dark'>
<tr>
<td>NOMBRE</td>
<td>UNIDAD</td>
<td>VALOR</td>
<td>CANTIDAD</td>
</tr>";
foreach($productos as list($nombre,$unidad,$valor,$cantidad))
{
echo "<tr>
<td>$nombre</td>
<td>$unidad</td>
<td>$valor</td>
<td>$cantidad</td>
</tr>";
}
echo"</table>"
?>
</div>
<div class="col-md-3"></div>
</div>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<h1 class="text-center mt-3">BUSCADOR</h1>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<form name="frm_Buscador" id="frm_Buscador" action="consultarDatos.php">
<div class="form-group">
<label for="">Digite la palabra a buscar</label>
<input class="form-control" type="text" id="palabra" name="palabra">
</div>
<button name="btnConsultar" class="btn btn-danger btn-block mt-3" id="btnConsultar">Consultar</button>
</form>
<div id="resultadoBusqueda">
<h2>Aquí se mostrará el resultado de la búsqueda</h2>
</div>
</div>
<div class="col-md-2"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="js/funciones.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
//defino funcion jquery
$("#frm_Buscador").submit(function(event) {
event.preventDefault(); //evitar submit autmatico
alert("Registrando");
datos=$('#frm_Buscador').serialize();
$.ajax({
type:'POST',
url:'consultarDatos.php',
data:datos,
success:function(data){
document.getElementById('resultadoBusqueda').innerHTML = data;
}
});
});
Aquí estan dos hojas de código, una en "HTML" y otra en "CSS", y claro que inicialmente se debe tener agregado bootstrap 4. También puedo decir que este es un diseño muy elegante para un portafolio con mucho contenido, claro que lo ideal es tratar de que quede en un tamaño imprimible a hoja tipo carta o un formato en esas dimensiones.
<div class="pag-one font-one">
<div class="row">
<div class="col-md-4 bg-dark">
<div class="text-center mt-5">
<img src="img/alex.png" class="foto" alt="">
</div>
<div class="subtitle p-5 text-light">
<h2>A CERCA DE MI</h2>
<div class="decor">
<hr class="decor-two">
</div>
<p>
Me describo como Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut sit magnam, nostrum ipsam expedita suscipit commodi quasi id asperiores, perferendis veniam sunt cupiditate architecto nobis dicta hic eligendi quia molestiae..
</p>
</div>
<div class="contact p-5 text-light">
<h2>CONTACTO</h2>
<div class="decor">
<hr class="decor-two">
</div>
<p class="mt-4"><strong>Dirección:</strong></p>
<p>xxxxxxxxxxxx<br>
(La pradera - parque el triangulo)
</p>
<p class="mt-3"><strong>Teléfonos:</strong></p>
<p>xxxxxxxxxxxxx</p>
<p class="mt-3"><strong>Email:</strong></p>
<p>xxxxxxxx@gmail.com</p>
<p class="mt-3"><strong>Fecha y lugar de nacimiento:</strong></p>
<p>xxxxxxxxx</p>
<p class="mt-3"><strong>Blog</strong></p>
<p>https://maximo2014.blogspot.com/</p>
<h2 class="mt-5">SKILLS</h2>
<div class="decor">
<hr class="decor-two">
</div>
<div class="skill mt-4">
<p><strong>HTML</strong></p>
<div class="decor2">
<hr width="80%" height="5">
</div>
</div>
<div class="skill mt-3">
<p><strong>CSS</strong></p>
<div class="decor2">
<hr width="70%">
</div>
</div>
<div class="skill mt-3">
<p><strong>JAVASCRIPT</strong></p>
<div class="decor2">
<hr width="40%">
</div>
</div>
<div class="skill mt-3">
<p><strong>TYPESCRIPT</strong></p>
<div class="decor2">
<hr width="30%">
</div>
</div>
<div class="skill mt-3">
<p><strong>PHP</strong></p>
<div class="decor2">
<hr width="60%">
</div>
</div>
<div class="skill mt-3">
<p><strong>JAVA</strong></p>
<div class="decor2">
<hr width="40%">
</div>
</div>
<div class="skill mt-3">
<p><strong>C#</strong></p>
<div class="decor2">
<hr width="20%">
</div>
</div>
<div class="skill mt-3">
<p><strong>SQL</strong></p>
<div class="decor2">
<hr width="50%">
</div>
</div>
<div class="skill mt-3">
<p>ASP.NET</p>
<div class="decor2">
<hr width="30%">
</div>
</div>
<div class="skill mt-3">
<p>Bootstrapt</p>
<div class="decor2">
<hr width="80%">
</div>
</div>
<div class="skill mt-3">
<p>Ajax</p>
<div class="decor2">
<hr width="20%">
</div>
</div>
<div class="skill mt-3">
<p>jQuery</p>
<div class="decor2">
<hr width="20%">
</div>
</div>
<div class="skill mt-3">
<p>Angular</p>
<div class="decor2">
<hr width="40%">
</div>
</div>
<div class="skill mt-3">
<p>Wordpress</p>
<div class="decor2">
<hr width="80%">
</div>
</div>
<div class="skill mt-3">
<p>Joomla</p>
<div class="decor2">
<hr width="20%">
</div>
</div>
</div>
</div><!-- fin col-4 -->
<div class="col-md-8 pl-0 pr-0">
<div class="title-one mt-5 p-5">
<h1 class="text-light pl-5">ALEX MUÑOZ</h1>
<h5 class="pl-5">DESARROLLADOR WEB</h5>
<hr class="decor-one pl-5">
</div>
<div class="descriptions p-5">
<div class="experience ml-5 mr-5 mt-3">
<h2 class="text-body mb-0">EXPERIENCIA</h2>
<div class="decor">
<hr class="decor-two">
</div>
<div class="company">
<h3 class="text-secondary mt-5 mb-0">SIMBOLO INTERACTIVO / 2018 - 2019</h3>
<h4 class="color-one"><strong>DESARROLLADOR WEB</strong></h4>
<p class="text-secondary">
Me desempeñe en la construcción de páginas web con CMS Wordpress, Actualizaciones web con Joomla y Prestashop. Desarrollo con enfasis en PHP y bases de datos SQL.
</p>
<div class="d-flex justify-content-between">
<p><strong class="color-one">Jefe inmediato: </strong> xxxxxxxxxx</p>
<p><strong class="color-one">Teléfonos: </strong> xxxxxxxxxxxxxxxx</p>
<p><strong class="color-one">Dirección: </strong> xxxxxxxxxxxxxxx</p>
</div>
</div>
<div class="company">
<h3 class="text-secondary mt-5 mb-0">ESTRATEGICO DIGITAL / 2017 - 2018</h3>
<h4 class="color-one"><strong>DESARROLLADOR WEB</strong></h4>
<p class="text-secondary">
Desarrollo de páginas web con Wordpress, Actualizaciones con Joomla, Magento y Wix. Desarrollo a través de PHP y bases de datos SQL.
</p>
<div class="d-flex justify-content-between">
<p><strong class="color-one">Jefe inmediato: </strong> xxxxxxx Rocha</p>
<p><strong class="color-one">Teléfonos: </strong> xxxxxxxxxxxxxx</p>
<p><strong class="color-one">Dirección: </strong> xxxxxxxxxxxxxxx</p>
</div>
</div>
<div class="company">
<h3 class="text-secondary mt-5 mb-0">FOTOS DIGITALES / 2016 - 2017</h3>
<h4 class="color-one"><strong>ADMINISTRADOR</strong></h4>
<p class="text-secondary">
Administración general, toma de fotografías y edición, ingreso de datos a la Web del Ejército Colombiano Papelería para tramites INDUMIL
</p>
<div class="d-flex justify-content-between">
<p><strong class="color-one">Jefe inmediato: </strong> xxxxxxxxxxxxxx</p>
<p><strong class="color-one">Teléfonos: </strong> xxxxxxxxxxxxx </p>
<p><strong class="color-one">Dirección: </strong> xxxxxxxxxxxx</p>
</div>
</div>
</div><!-- end EXPERIENCIA -->
<div class="experience m-5">
<h2 class="text-body mb-0">EDUCACIÓN</h2>
<div class="decor">
<hr class="decor-two">
</div>
<div class="company">
<h3 class="text-secondary mt-5 mb-0">TECNOLOGÍA EN DESARROLLO DE SOFTWARE / 2018 - <small>(ACTUALMENTE)</small></h3>
<h4 class="color-one"><strong>SENA (Centro de gestión empresarial)</strong></h4>
<p class="text-secondary">
Trabajamos en Bases de datos SQL-SERVER, con Java, la parte de web que consta de HTML, CSS y Javascript, actualmente estamos desarrollando las primeras instancias del proyecto de grado en ASP.NET (Framework) con C#.
</p>
</div>
<div class="company">
<h3 class="text-secondary mt-5 mb-0">TÉCNICA EN DESARROLLO DE SOFTWARE / 2016 - 2017</h3>
<h4 class="color-one"><strong>SENA (Centro de gestión empresarial)</strong></h4>
<p class="text-secondary">
Desde los inicios nos basamos en el modo MVC, trabajamos en Java, en Angular y el proyecto de grados se basó en Angular.
</p>
</div>
</div>
<div class="experience m-5">
<h2 class="text-body mb-0">PROYECTOS</h2>
<div class="decor">
<hr class="decor-two">
</div>
<div class="company">
<h3 class="text-secondary mt-5 mb-0">TIENDA DE LIBROS ONLINE / 2016 - 2017</h3>
<h4 class="color-one"><strong>Comercio de libros</strong></h4>
<p class="text-secondary">
Es un aplicativo web para comercio de libros de varios géneros, con su propio sistema de ventas integrado, desarrollado en conjunto con el salón de clase. Se desarrolló en Angular.
</p>
</div>
<div class="company">
<h3 class="text-secondary mt-5 mb-0">MEDICSOFT / 2018 - <small>(Actualmente)</small></h3>
<h4 class="color-one"><strong>Sistema de agendamiento de citas</strong></h4>
<p class="text-secondary">
Aplicativo web para gestionar los procesos de registro de pacientes asignación de citas, ventas y gestión de servicios de salud.
</p>
</div>
</div>
<div class="experience m-5">
<h2 class="text-body mb-0">REFERENCIAS</h2>
<div class="decor">
<hr class="decor-two">
</div>
</div>
</div>
</div><!-- fin col-8 -->
</div><!-- fin row -->
</div><!-- fin pag-one -->
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700&display=swap');
:root {
--color-one: #cdab4a;
--font-one: 'Open Sans Condensed';
}
.font-one{
font-family: var(--font-one);
}
.color-one{
color: var(--color-one);
}
.foto {
height: 300px;
width: 300px;
object-fit: cover;
border-radius: 50%;
padding: 15px;
border: 4px solid var(--color-one);
}
.title-one{
background: var(--color-one);
}
.title-one h1 {
font-size: 6rem;
font-weight: 600;
margin-bottom: 0;
line-height: 6rem;
margin-top: 30px;
}
.decor-one {
background: white;
height: 5px;
width: 30px;
margin-left: 50px;
margin-top: 0;
}
.title-one h5 {
color: white;
font-size: 2.3rem;
font-weight: 600;
letter-spacing: 2px;
}
.subtitle h2, .contact h2 {
font-weight: 600;
}
.subtitle p, .contact p {
text-align: justify;
margin-bottom: 0;
}
.decor-two {
background: var(--color-one);
height: 4px;
width: 10%;
margin-left: 0;
}
.decor{
background: linear-gradient(to bottom, #fff 0%,#fff 0%,#fff 0%,#e0e0e0 28%,#050404 88%);
}
.decor2 {
background: white;
}
.decor2 hr {
background: var(--color-one);
height: 10px;
margin: 0;
}
.experience h2{
font-size: 2.5rem;
font-weight: 600;
}
.experience h3 {
font-weight: 600;
}