You are on page 1of 33

Universidad De Colima

Facultad De Telemtica
Ingeniero En Telemtica

Jos Carlos Gonzalez Ramrez


5-A
Programacin Web
M. En T.I. Jos Nabor Ramrez Morfin
Memoria De Todos Los Trabajos Realizado
En La Segunda Parcial.
Fecha: 9 de noviembre de 2015

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>

<li href="#" onclick="showhide('div3')">BANDA FLORES ROBERTO</li>


<li href="#" onclick="showhide('div4')">CEPEDA MENDIVIL ASHLEY</li>
<li href="#" onclick="showhide('div5')">CHAVEZ LARIOS ALEJANDRO
GABRIEL</li>
<li href="#" onclick="showhide('div6')">GOMEZ AMEZCUA
GUSTAVO</li>
<li href="#" onclick="showhide('div7')">GONZALEZ RAMIREZ JOSE
CARLOS</li>
<li href="#" onclick="showhide('div8')">MARTINEZ GOMEZ EDNA
ISABEL</li>
<li href="#" onclick="showhide('div9')">MENDOZA OSORIO LUIS
ERNESTO</li>
<li href="#" onclick="showhide('div10')">PADILLA MENDOZA
ALVARO</li>
<li href="#" onclick="showhide('div11')">PADILLA MORFIN DIEGO</li>
<li href="#" onclick="showhide('div12')">ZAMORA SANTA ANA JOSE DE
JESUS</li>
<li href="#" onclick="showhide('div13')">ZEPEDA RENTERIA ERICK
JAVIER</li>
</ol>
<div id="datos"></div>
<script>
$( "li" ).on( "mouseover", function() {
$( this ).css( "color", "orange" );
});
$("li").on("mouseover"),function(){$(this).css(" cursor:pointer; cursor: hand");}
$(function() {
$("ol:even").css("background-color", "#f5f5f5");
});
$(function() {
$("li:even").addClass("fila1");
$("li:odd").addClass("fila2");
});

</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;

public function __construct($vari,$vari1)


{
$this->var=$vari;
$this->vare=$vari1;
}
public function mostrar()
{
echo '<p>'.$this->var.'</p>';
echo '<p>'.$this->vare.'</p>';
echo '<br>';
}
}
?>
Menus

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Bienvenidos a estilos CSS</title>

<style type ="text/css">


body{margin:0px;padding:0px;backgroundimage:url("fondo.jpg");background repeat:repeat;}
h1{background-color:#F3F3;width:800px;margin:0 auto;textalign:center;padding:20px 0px;color:green}
.Borde {
background-color: gray;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
border-color:black;
border-style: solid;

border-width: medium;
}
a{
color:orange;
}
Derechos{color:black;}

</style>
</head>
<body>

<h1>Bienvenidos a estilos CSS</h1>


<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Inicio | </span></a></li>
<li><a href='#'><span>Acerca de CSS | </span></a></li>
<li><a href='#'><span> Selectores | </span></a></li>
<li class='last'><a href='#'><span>Fondos</span></a></li>
</ul>
</div>

<p><b><a href="MenusPractica.html" >Inicio >></a></b></p>


<div style="margin: 10px auto; text-align: center; display: block;">
<IMG SRC="2015-09-10 23.45.51.jpg" WIDTH=250 HEIGHT=250 align=right
>
<IMG SRC="2015-09-12 00.05.11.jpg" WIDTH=250 HEIGHT=250
align=middle >
<IMG SRC="2015-10-04 23.53.18.png" WIDTH=250 HEIGHT=250 align=left >
</div>
<div class="Borde">

<footer id="Derechos">&copy;Derechos Reservados-Jose Carlos.</footer>


</div>

</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">&copy; 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;

font-family: Tahoma, Geneva, sans-serif;

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.";

//Variables utilizadas para almacenar el objetivo de la materia


var mate_objetivo = "Que los estudiantes razonen en forma ordenada y
sistemtica.";
var ing_objetivo = "Comprender y comunicarse en Ingls";
var progra_objetivo = "Crear programas que exhiban un comportamiento
deseado.";

//Variables utilizadas para almacenar el nombre de los maestros


var mate_maestro = "D. en C. Andrade Archiga Mara";
var ing_maestro = "M. en P. Ramos Madrigal Abel";
var prorga_maestro = "Ramrez Morfn Jos Nabor";

//Variables utilizadas para almacenar la URL del sitio cada profesor


var mate_url = "<a href='https://www.facebook.com/mary.andrade.9480?
fref=ts' target='_blank'>Mary Andrade</a>";
var ing_url = "<a href='https://www.facebook.com/TeacherAbel?fref=ts'
target='_blank'>Teacher Abel</a>";
var progra_url = "<a href='https://www.facebook.com/jose.n.morfin?
fref=ts&__mref=message_bubble' target='_blank'>Jos N. Ramrez
Morfn</a>";

//Funciones para modificar los contenidos, objetivos y nombres de los maestros


de cada materia
function matematicas(){
document.getElementById("imagen").innerHTML = "<img
src='images/mate.png' id='mate_img'>";
document.getElementById("contenido").innerHTML = mate_cont;
document.getElementById("objetivo").innerHTML = "Objetivo: " +
mate_objetivo;
document.getElementById("maestro").innerHTML = "Nombre del
maestro: " + mate_maestro;
document.getElementById("pagina").innerHTML = "Visitar pgina: " +
mate_url;
}

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;

document.getElementById("maestro").innerHTML = "Nombre del


maestro: " + ing_maestro;
document.getElementById("pagina").innerHTML = "Visitar pgina: " +
ing_url;
}

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>

<p>Es un documento creado en formato HTML (Hypertext Markup Language)


que es parte de un grupo de documentos hipertexto o recursos disponibles en
el <strong class="web">World Wide Web</strong>. Una serie de pginas web
componen lo que se llama un <span class="destacado">sitio
web</span>.</p>

<h2 id="secundario">Clasificacin y tipos de pginas Web</h2>

<p>Podemos agrupar o clasificar todas las <span class="especial">pginas


web</span> en 2 grandes grupos:.</p>

<ul class="tabla">
<li>Webs estticas</li>
<li>Webs dinmicas</li>
</ul>

<h3 class="resalte">Tablas en nuestras pginas web</h3>

<p>En HTML, una poderosa <a class="herramienta"


href="https://es.wikipedia.org/wiki/Herramienta">herramienta</a> a la hora
de mostrar cierto tipo de informacin son las tablas.</p>
<table class="table">
<caption class="titulo">Ttulo de la tabla</caption>
<tr>
<th>Temas</th>
<th>Parcial</th>
<th>Horas</th>
</tr>

<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>

<p>Para mayor informacin sobre estilos en pginas web y otros contenidos


pulsa en este link: <a
href="http://www.w3schools.com/html/html_tables.asp">http://www.w3schools.
com/html/html_tables.asp</a></p>

</div>
<p><span id="derechos">&copy;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}

caption {color: #0000FF;}


table{color:#008000;}
strong {color:#00FFFF;}
a {color:#FF00FF;}
strong{color:#008000;}
table, th, td {border: 1px solid black;}
actividad post y get

<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

Aqu se muestra que se complet la primer parte de la parte introductoria a


jquery.

Aqu se muestra que ya est completado la parte nmero 2 de traversing the


dom

Aqu se muestra la tercera parte ya completada de working with the dom.

You might also like