Professional Documents
Culture Documents
Facultad De Telemtica
Ingeniero En Telemtica
Actividad De Listado
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Listado de alumnos</title>
<style>
ol {
color: blue;
width: 200px;
font-size: 14px;
}
li.fila1{background:#dcdcdc;fontweight:normal;width:300px;height:20px;}
li.fila2{background:#ffffff ;font-weight:normal;width:300px;height:20px;}
li {
color: blue;
cursor: pointer;
text-decoration: none;
}
div {
background-color: green;
color: white;
}
</style>
<script type="text/javascript">
function showhide(divid){
thediv = document.getElementById(divid);
if(thediv.style.display== 'none' ){
thediv.style.display='block'
}else{
thediv.style.display='none'
}
}
</script>
</head>
<body>
<h1>Programacion Web</h1>
<h2>Grupo 5to.A</h2>
<h3>Maestro:Jose Nabor Ramirez Morfin</h3>
<p>Listado de alumnos</p>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<ol id="lista" >
<li href="#" onclick="showhide('div1')">ALCARAZ VELAZQUEZ
ARNOLDO</li>
<li href="#" onclick="showhide('div2')">ALFARO OCHOA ALEXIS</li>
</script>
<div id='div1' style="display:none;"> Resultado:ALCARAZ VELAZQUEZ
ARNOLDO </div>
<div id='div2' style="display:none;"> Resultado:ALFARO OCHOA ALEXIS
</div>
<div id='div3' style="display:none;"> Resultado:BANDA FLORES ROBERTO
</div>
<div id='div4' style="display:none;"> Resultado:CEPEDA MENDIVIL ASHLEY
</div>
<div id='div5' style="display:none;"> Resultado:CHAVEZ LARIOS ALEJANDRO
GABRIEL </div>
<div id='div6' style="display:none;"> Resultado:GOMEZ AMEZCUA GUSTAVO
</div>
<div id='div7' style="display:none;"> Resultado:GONZALEZ RAMIREZ JOSE
CARLOS </div>
<div id='div8' style="display:none;"> Resultado:MARTINEZ GOMEZ EDNA
ISABEL </div>
<div id='div9' style="display:none;"> Resultado:MENDOZA OSORIO LUIS
ERNESTO </div>
<div id='div10' style="display:none;"> Resultado:PADILLA MENDOZA ALVARO
</div>
<div id='div11' style="display:none;"> Resultado:PADILLA MORFIN DIEGO
</div>
<div id='div12' style="display:none;"> Resultado:ZAMORA SANTA ANA JOSE DE
JESUS </div>
<div id='div13' style="display:none;"> Resultado:ZEPEDA RENTERIA ERICK
JAVIER </div>
</body>
</html>
Actvidad Primera PHP
<html>
<head>
<title>Prueba de PHP</title>
<style type="text/css">
body {
background-image:url("mac_os_x_lion-1920x1080.jpg")
}
tr{color:gold}
h1{color:red;
text-align:center;
font-family: sans-serif }
p{color:orange;
text-align:center;
font-weight:bold;
font-size: xx-large;
font-family: sans-serif }
</style>
</head>
<body>
<?php
for($ciclo=1;$ciclo<=10;$ciclo++)
{
print "<table border=2>";
print "<tr align=center><td colspan=5>Tabla de multiplicar del ".
$ciclo.":</td></tr>";
for($ciclo2=1;$ciclo2<=10;$ciclo2++)
{
$mult=$ciclo*$ciclo2;
print "<tr align=center><td>".$ciclo."</td><td> X
</td><td>".$ciclo2."</td><td> = </td><td>".$mult."</td></tr>";
}
print "</table>";
}
$array[0] = "Carlos";
$array[1] = "Gonzalez";
$array[2] = "Ramirez";
for($i=0;$i<count($array);$i++) {
print "<p>Elemento No.".$i.":".$array[$i]."</p>";
}
date_default_timezone_set("america/mexico_city");
print "<h1>Fecha Y Hora: " . date("d/m/y H:i:s") . "</h1>\n";
print "<h1>Fecha : " . date("l, F jS Y ") . "</h1>\n";
?>
</body>
</html>
Clases y objetos
<html>
<head>
<title>CLases y Objetos</title>
<style type="text/css">
p{color:red;
font-family:lucida console;
font-weight:bold;
text-align:center;
font-size: xx-large}
</style>
</head>
<body>
<?php
include ('ClasesSencillas.php');
$obj=new saludos("Hola Bienvenido","Jose Carlos");
$obj->mostrar();
?>
</body>
</html>
<?php
class saludos
{
private $var;
private $vare;
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Bienvenidos a estilos CSS</title>
border-width: medium;
}
a{
color:orange;
}
Derechos{color:black;}
</style>
</head>
<body>
</body>
</html>
#cssmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
font-size: 12px;
font-weight: bold;
background: #353535;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #353535;
zoom: 1;
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu li {
display: block;
float: left;
margin: 0;
padding: 0 4px;
}
#cssmenu li a {
display: block;
float: left;
color: #999999;
text-decoration: none;
font-weight: bold;
padding: 10px 20px 7px 20px;
border-bottom: 3px solid transparent;
}
#cssmenu li a:hover {
color: #FFFFFF;
border-bottom: 3px solid #00b8fd;
}
#cssmenu li.active a {
display: inline;
border-bottom: 3px solid #00b8fd;
float: left;
margin: 0;
}
Actividad en equipo
<html>
<head>
<meta charset="utf-8">
<title>Equipo 3</title>
<script type="text/javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="estilo.css">
<link rel="stylesheet" href="font-awesome-4.4.0/css/fontawesome.min.css">
</head>
<body>
<h1 class="margen"><span class="ucol"><img
src="images/uco.png"></span>Universidad De Colima</h1>
<h4 class="margeen">Facultad De Telemtica</h4>
<p class="ligas">
<a href="#" onClick="matematicas();"><i class="fa fasuperscript"></i> Matemticas |</a>
<a href="#" onClick="ingles();"><i class="fa fa-language"></i>
Ingls |</a>
<a href="#" onClick="programacion();"><i class="fa facogs"></i> Programacin</a>
</p>
<p id="imagen"><img src="images/mate.png" id="mate_img"></p>
<p id="contenido">
Es una ciencia formal que, partiendo de axiomas y siguiendo el
razonamiento lgico, estudia las propiedades y relaciones entre entidades
abstractas como nmeros, figuras geomtricas o smbolos. <br><br>
Mediante la abstraccin y el uso de la lgica en el razonamiento, las
matemticas han evolucionado basndose en las cuentas, el clculo y las
mediciones, junto con el estudio sistemtico de la forma y el movimiento de los
objetos fsicos. Las matemticas, desde sus comienzos, han tenido un fin
prctico.
</p>
<p id="objetivo">Objetivo: Que los estudiantes razonen en forma
ordenada y sistemtica.</p>
<p id="maestro">Nombre del maestro: D. en C. Andrade Archiga
Mara</p>
<p id="pagina">Visitar pgina: <a
href="https://www.facebook.com/mary.andrade.9480?fref=ts"
target="_blank">Mary Andrade</a> </p>
<div>
<a href="https://plus.google.com/" target="_blank"><i
id="google" class="fa fa-google-plus-square fa-3x"></i></a>
<a href="https://www.facebook.com/FacultadDeTelematica?
fref=ts" target="_blank"><i id="face" class="fa fa-facebook-square fa3x"></i></a>
<a href="https://twitter.com/" target="_blank"><i id="twitter"
class="fa fa-twitter-square fa-3x"></i></a>
<a href="https://instagram.com/" target="_blank"><i id="insta"
class="fa fa-instagram fa-3x"></i></a>
</div>
<p class="reservado">© Derechos Reservados - Equipo 1</p>
</body>
</html>
Css
body
{
background: url(images/BA2.jpg) no-repeat fixed center;
}
.margen
{
width: 1300px;
margin: 0px auto;
text-align: center;
padding: 40px 0px;
color: #F1EDEA;
background-color: #961A1A;
font-variant: small-caps;
font-size: 45pt;
.ucol{
height: 140px;
width: 0px;
float: left;
margin: -35px 0px 0px 5px;
}
.margeen
{
width: 1300px;
margin: 15px auto;
text-align: left;
padding: 15px 0px;
color: #F1EDEA;
background-color: #E3710E;
font-size: 20pt;
}
.ligas
{
width: 1300px;
margin: 20px auto;
text-align: left;
font-size: 16pt;
border-bottom: 1px solid red;
padding-top: 15px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #7aad47;
text-decoration: none;
}
a:hover
{
color: orange;
}
pa
{
color: #7aad47;
text-decoration: none;
}
#contenido
{
width: 1300px;
height: 140px;
margin: 1px auto;
text-align: justify;
color: #F1EDEA;
font-size: 12pt;
padding-top: 30px;
font-family: Tahoma, Geneva, sans-serif;
}
#objetivo
{
width: 1300px;
height: 40px;
margin: 3px auto 0px auto;
text-align: justify;
color: #F1EDEA;
font-size: 12pt;
font-family: Tahoma, Geneva, sans-serif;
#maestro
{
width: 1300px;
height: 20px;
margin: 0px auto;
text-align: justify;
color: #F1EDEA;
font-variant: small-caps;
font-size: 12pt;
font-family: Tahoma, Geneva, sans-serif;
#pagina
{
width: 1300px;
height: 20px;
margin: 20px auto;
text-align: justify;
color: #F1EDEA;
font-size: 12pt;
padding-bottom: 5px;
font-family: Tahoma, Geneva, sans-serif;
.reservado
{
width: 1300px;
height: 55px;
margin: 0px auto;
text-align: center;
border-top: 1px solid red;
color: #F1EDEA;
padding-top: 15px;
font-size: 11pt;
div, div a{
width: 1300px;
height: 50px;
color: white;
text-align: center;
margin: 0px auto;
padding: 170px 0px 25px 0px;
}
#google{
padding-right: 20px;
}
#face{
padding-right: 20px;
}
#twitter{
padding-right: 20px;
}
#insta{
padding-right: 20px;
}
#imagen{
width: 1300px;
margin: 0px auto;
}
#mate_img{
width: 350px;
height: 363px;
float: right;
margin: 30px auto 0px auto;
shape-outside: polygon(0px 197px, 260px 94px, 346px 47px, 73px 51px,
-73px 201px);
}
#ingles_img{
/*width: 350px;
height: 170px;
float: right;
margin: 0px auto 0px 20px;
shape-outside: polygon(12px 71px, -39px 21px, 22px 15px, 28px 81px, 41px
218px);*/
width: 464px;
height: 260px;
float: right;
margin: -20px auto 0px 28px;
shape-outside: polygon(92px 78px, 22px 63px, 12px 33px, 21px 95px,
126px 186px);
}
#progra_img{
width: 355px;
height: 383px;
float: right;
margin: 10px auto 0px auto;
shape-outside: polygon(113px 88px, 72px 93px, 70px 34px, 16px 79px,
41px 218px);
}
Js
//Variables utilizadas para almacenar el contennido de la materia
var mate_cont = "Es una ciencia formal que, partiendo de axiomas y siguiendo
el razonamiento lgico, estudia las propiedades y relaciones entre entidades
abstractas como nmeros, figuras geomtricas o smbolos. <br><br>
Mediante la abstraccin y el uso de la lgica en el razonamiento, las
matemticas han evolucionado basndose en las cuentas, el clculo y las
mediciones, junto con el estudio sistemtico de la forma y el movimiento de los
objetos fsicos. Las matemticas, desde sus comienzos, han tenido un fin
prctico.";
var ing_cont = "La enseanza del ingls con propsitos especficos es de suma
importancia dentro de cualquier rea del conocimiento. <br><br> La
generacin, distribucin e intercambio de tecnologa es una actividad global y
en constante crecimiento que requiere de su estudio y conocimiento. Este
fenmeno global, tiene como medio de comunicacin el idioma ingls, aquellos
que dominen este idioma, tendrn mejores oportunidades de acceder a
informacin y conocimiento.";
var progra_cont = "Proceso de disear, codificar, depurar y mantener el cdigo
fuente de programas computacionales. El cdigo fuente es escrito en un
lenguaje de programacin. El proceso de escribir cdigo requiere
frecuentemente conocimientos en varias reas distintas, adems del dominio
del lenguaje a utilizar, algoritmos especializados y lgica formal.<br><br> Del
proceso de programacin surge lo que comnmente se conoce como software
(conjunto de programas), aunque estrictamente este ltimo abarca mucho ms
que solo la programacin.";
function ingles(){
document.getElementById("imagen").innerHTML = "<img
src='images/ingles.png' id='ingles_img'>";
document.getElementById("contenido").innerHTML = ing_cont;
document.getElementById("objetivo").innerHTML = "Objetivo: " +
ing_objetivo;
function programacion(){
document.getElementById("imagen").innerHTML = "<img
src='images/progra.png' id='progra_img'>";
document.getElementById("contenido").innerHTML = progra_cont;
document.getElementById("objetivo").innerHTML = "Objetivo: " +
progra_objetivo;
document.getElementById("maestro").innerHTML = "Nombre del
maestro: " + prorga_maestro;
document.getElementById("pagina").innerHTML = "Visitar pgina: " +
progra_url;
}
Selectores actividad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Selectores</title>
<link rel="stylesheet" type="text/css" href="Estilos.css">
<style type="text/css">
#principal{color: brown;}
.web{color: magenta}
#secundario{color: orange;}
li{color:brown;}
.resalte{color: sienna;}
p{width: 650px;}
.herramienta{color: pink;}
.titulo{color: blue;}
.table{border: 1px; border-color: black;}
.cascading{color:aqua;}
tr td{color:green;}
tr th{color:green;}
</style>
</head>
<body>
<h1 id="principal">Pagina Web</h1>
<ul class="tabla">
<li>Webs estticas</li>
<li>Webs dinmicas</li>
</ul>
<tr>
<td>HTML</td>
<td>1era.</td>
<td>6</td>
</tr>
<tr>
<td>JavaScript</td>
<td>1era.</td>
<td>10</td>
</tr>
<tr>
<td>CSS <strong class="cascading">(Cascading Style
Sheets)</strong></td>
<td>2da.</td>
<td>6</td>
</tr>
</table>
<div id="adicional">
<p>La primera fila esta compuesta por elementos de encabezado de tabla
(th).</p>
</div>
<p><span id="derechos">©Derechos Reservados 2015.
<strong>Prohibida su reproduccin parcial o total</strong>.</span><p>
</body>
</html>
Css
body {color: black;}
h1 {color: #800000;}
h2 {color: #FFA500;}
h3 {color: #A52A2A;}
ul{color: #800000;}
a {color: #FF00FF}
<html>
<head>
<meta charset="utf-8">
<title>Captura De Calificaciones</title>
<style>
body{ background-image: url("(4).jpg");}
.center {
color:red;
font-weight: bold;
font-family:lucida console;
margin: auto;
width: 60%;
border:3px solid silver;
padding: 5px;
}
</style>
</head>
<body>
<form action="CalificacionesCapturadas.php" method="post" class='center'>
Nombre Del Alumno:<input type="text" name="alumno"/><br/ >
No. De Cuenta:<input type="text" name="acuenta"/><br/ >
Materia:<input type="text" name="materia"/><br/ >
Parcial 1:<input type="text" name="p1"/><br/ >
Parcial 2:<input type="text" name="p2"/><br/ >
Parcial 3:<input type="text" name="p3"/><br/ >
Comentarios:<input type="text" name="coment"/><br/ >
<input type="submit" name="submit" value="!Enviar"/ >
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Calificaciones</title>
<style>
body{ background-image: url("free_web_background_3_by_kgombockad4gz4lh.jpg");}
.center {
color:gold;
font-family:lucida console;
margin: auto;
width: 60%;
border:3px solid #73AD21;
padding: 5px;
}
</style>
</head>
<body>
<?php
if($_SERVER['REQUEST_METHOD']=='POST')
{
echo"<div class='center'>Nombre Del Alumno:".
$_POST['alumno']."</div>";
echo"<div class='center'>No. De Cuenta:".$_POST['acuenta']."</div>";
echo"<div class='center'>Materia:".$_POST['materia']."</div>";
echo"<div class='center'>Parcial 1:".$_POST['p1']."</div>";
echo"<div class='center'>Parcial 2:".$_POST['p2']."</div>";
echo"<div class='center'>Parcial 3:".$_POST['p3']."</div>";
$promedio= (($_REQUEST['p1'] + $_REQUEST['p2'] +
$_REQUEST['p3'])/3);
echo "<div class='center'>El promedio es:".$promedio."</div>";
echo"<div class='center'>Comentarios:".$_POST['coment']."</div>";
}
?>
</body>
</html>
Actividades de tryjquery