Si tienes un #bar o #restaurante y necesitas crear tu #carta, subirla a la #web y obtener el #codigoQR, todo de manera gratuita y con #software libre, dale un vistazo al siguiente video
Simula movimiento de personaje principal moviendo el escenario del fondo.
Creamos la parte secundaria de nuestra #web, donde normalmente se colocan los enlaces a redes, anuncios, etc.
Y asi queda el codigo que llevamos realizado hasta ahora:
<!DOCTYPE html><html><head><title>Web principal</title><meta charset=”utf-8″></head><body><!–Cabecera–><header><h1>Cabecera de mi web</h1><figure><img src=”milogo.jpg”/></figure></header> <!–Barra navegacion–><nav><ul><li><a href=”index.html”>Inicio</a></li><li><a href=”contacto.html”>Contacto</a></li><li><a href=”acercade.html”>Acerca de</a></li></ul></nav><!–Contenido principal–><section><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article></section><!–Complemento lateral–><aside><h3>Siguenos en: </h3><ul><li><a href=”#”>Facebook</a></li><li><a href=”#”>Twitter</a></li></ul></aside><!–Pie de pagina–><footer><p>Jose Ojeda 2019©</p><p>email: nombre@email.com</p></footer></body></html>
En el siguiente video vemos como crear un archivo de texto con python e imprimirlo por la impresora predeterminada.
import osdef archivaImprime(di,me,an,texto): #guarda texto en archivo con nombre fecha fecha=str(an)+str(me)+str(di) fecha=str(fecha+”.txt”) escritura=open(fecha,”w”) escritura.write(texto) escritura.close() #imprime en impresora print(texto) os.startfile(fecha,”print”) print(“fichero grabado e imprimido”) #llamamos a la funcionarchivaImprime(12,10,18,”prueba de impresion”)
Preparamos la clase que manejara los meteoritos a los que tendremos que disparar o evitar colisionar con ellos.
En el siguiente enlace esta publicado el codigo completo de este juego.
Preparamos el codigo que detecta la colision de la pelota con los ladrillos, añadimos sonido y terminamos la programacion del juego.
Codigo para automatizar la instalacion de paquetes o librerias en Python.
import os
#instala paquetes o librerias
paquete=input(‘Que paquete instalamos? ‘)
paquete=str(paquete)
while True:
try:
codigo=’pip install ‘+paquete
os.system(codigo)
print(‘Paquete instalado’)
except:
print(‘Error al instalar paquete’)
continuar=input(‘Quieres instalar otro? ‘)
continuar=str(continuar)
if continuar==’S’ or continuar==’s’ or continuar==’si’ or continuar==’SI’:
paquete=input(‘Que paquete instalamos? ‘)
paquete=str(paquete)
else:
break
print(‘Fin’)
Con este codigo realizamos pregunta al usuario de que paquete o libreria quiere instalar, ejecutamos el codigo de instalacion dentro del “try” por si ocurre algun error, una vez instalado preguntamos si quiere continuar o no para seguir o detener el programa.
Creamos un contador de tiempo para nuestra web, para ello usamos HTML, CSS y JavaScript.
El codigo es:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=”css/estilo.css” rel=”stylesheet” type=”text/css”>
<title>
Contador
</title></head>
<body>
<section>
<div id=”contenido”>
<article>
<div id=”tiempo”>
<h5 id=”titulo”>
<span>Horas</span>
<span>Minutos</span>
<span>Segundos</span>
</h5>
<h2 id=”contador”>
<span id=”horas”>00</span>
<span id=”minutos”>00</span>
<span id=”segundos”>00</span>
</h2>
</div>
</article>
</div></section>
<script src=”js/tiempo.js”></script>
</body></html>
CSS
body{
margin:0 auto;
max-width:98%;
font-family: Helvetica, Arial;
font-size:14px;}
#titulo{
font-size:1.3em;
text-align:center;
margin-top:5em;
padding:1.3em;
color:#434343;
}
#contador{
font-size:2.2em;
text-align:center;
color:#434343;
}
JavaScript
var horas,minutos,segundos;
horas=0;
minutos=0;
segundos=0;
hor=document.getElementById(“horas”);
min=document.getElementById(“minutos”);
seg=document.getElementById(“segundos”);
function tiempo(){
var contador=0;
window.setInterval(function(){
if(contador<10){
seg.innerHTML=”0″+contador;
}else{
seg.innerHTML= contador;
}
if(contador>59){
segundos=0;
contador=0;
minutos=minutos+1;
}
if(minutos>59){
minutos=0;
horas=horas+1;
}
if(horas>23){
horas=0;}
if(minutos<10){
min.innerHTML=”0″+minutos;
}else{
min.innerHTML=minutos;
}
if(horas<10){
hor.innerHTML=”0″+horas;
}else{
hor.innerHTML=horas;
}
contador++;
},1000);
}
tiempo();
En este video continuamos con la mejora de nuestra Web Curriculum, para ello vamos a ver como redondear las esquinas y asignarle un degradado de color.
Tambien vemos como dar movimiento y animar objetos de nuestra web mediante animate.css.
Codigo CSS
body{
font-family: ‘Risque’, cursive;
margin:0;
width-max:960px;
}
header,footer{
/*background-color:#f06292;*/
color:white;
text-align:center;
padding:5px;
margin-right:auto;
margin-left:auto;
border-radius:30px;
background: linear-gradient(to right,#f06292,#a84466);
}
h1{
display:inline-block;
width:400px;
font-weight:700;
}
h3{
font-size:36px;
font-weight:700;
}
p{
display:inline-block;
width:400px;
font-weight:200;
}
section{
width:80%;
margin-right:auto;
margin-left:auto;
vertical-align:top;
}
article{
display:inline-block;
width:97%;
font-size:22px;
margin-bottom:12px;
margin-top:36px;
}
#imagen{
display:inline-block;
margin-top:45px;
margin-left:10px;
width:18%;
float:left;
}
#formacion{
display:inline-block;
width:80%;
float:left;
}
/*movil*/
@media screen and (max-width:480px){
*{
display:block;
margin:1px;
}
h1{
font-weight:300;
}
h3{
font-weight:200;
}
article{
font-size:1em;
}
p{
font-size:1em;
}
#imagen{
display:none;
}
}
Codigo HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Curriculum Vitae”>
<meta name=”keywords” content=”curriculum,jose ojeda,html,css”>
<meta name=”author” content=”Jose Ojeda”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”css/estilo.css” rel=”stylesheet” type=”text/css”>
<link href=”css/animate.css” rel=”stylesheet” type=”text/css”>
<link href=”https://fonts.googleapis.com/css?family=Risque” rel=”stylesheet”>
<title>
Curriculum Vitae
</title>
</head>
<body>
<div id=”contenido”><header>
<h1>CV de Jose Ojeda</h1>
<p>Diplomado en Ciencias Empresariales</p><br/>
<p>Sobre 20 años de experiencia <br/>en tareas Administrativas y Contables
<br/><br/>ticoticotaa@gmail.com</p></header>
<section><article><div id=”formacion”>
<h3>Formacion</h3>
<dl>
<dt>
Diplomado en Ciencias Empresariales</dt>
<dd>Universidad de Sevilla</dd>
</dl>
<dl>
<dt>
Tecnico Superior en Prevencion de Riesgos Laborales</dt>
<dd>Seguridad, Ergonomia e Higiene Industrial</dd>
</dl>
</div>
<div class=”option animated rotateIn”>
<div id=”imagen”>
<img src=”img/jose.jpg”>
</div></div>
</article>
<article>
<h3>Experiencia Profesional</h3>
<dl>
<dt>
Contable – Administrativo</dt>
<dd>2000 – Actualidad</dd>
</dl>
<dl>
<dt>
Profesor Contabilidad y Matematicas Financieras</dt>
<dd>2002 – 2003</dd>
</dl>
<dl>
<dt>
Administrativo</dt>
<dd>1998 – 2000</dd>
</dl>
</article>
<article>
<h3>Otros</h3>
<dl>
<dt>
Docencia</dt>
<dd>Formador de formadores</dd>
</dl>
<dl>
<dt>
Programacion</dt>
<dd>Java, JavaScript, Php, Python, Android, Html, Css</dd>
</dl>
<dl>
<dt>
Software</dt>
<dd>Contabilidad, Nominas, Facturacion, Office, TPV, Navegadores, Correo</dd>
</dl>
</article></section>
<footer>
<address>
Mi direccion <br/>
Mi ciudad
</address>
</footer></div>
</body>
</html>
En este video vemos como obtener el valor mayor y menor de una lista de datos usando dos funciones definidas por nosotros, en las cuales recorremos la lista dada con un bucle “for” y vamos realizando la comparacion con el condicional “if”.
#Lista Funcion
#Valor menor y mayor
def ValorMenor(lista):
menor=lista[0]
for x in range(1,len(lista)):
if lista[x]<menor:
menor=lista[x]
return menor
def ValorMayor(lista):
mayor=lista[0]
for x in range(1,len(lista)):
if lista[x]>mayor:
mayor=lista[x]
return mayor
#cargamos de valores una lista
datos=[1,4,2,7,89,34,25,100,6,8,98]
print(“El valor mayor es : “,ValorMayor(datos))
print(“El valor menor es : “,ValorMenor(datos))