como hacer un texto en negrita con contentEditable

Iniciado por tecasoft, 22 Marzo 2013, 17:33 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

tecasoft

22 Marzo 2013, 17:33 PM Ultima modificación: 22 Marzo 2013, 18:13 PM por tecasoft
wenass ante todo gente del foro, necesito que al seleccionar un boton me ponga el texto en negrita, es decir que si selecciono:

Código [Seleccionar]

<div id="negrita" contentEditable="true">
   Acá puedes escribir
</div>


pueda escribir y que luego aprete un boton y lo que yo quiera me lo cambie a negrita y otro para cursiva que proximamente lo pondre,etc, con esto que no esta terminado:

Código [Seleccionar]

<script type="text/javascript" >
$('#negrita').css('font-weight','bold');
</script>


muchas gracias x saber la respuesta
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits

kalvinman

#1
22 Marzo 2013, 23:58 PM
Si lo que estas buscando es un editor en pantalla deberias probar con algun editor WYSIWYG (What You See Is What You Get) como CKEditor, Tiny MCE, etc

tecasoft

#2
24 Marzo 2013, 00:31 AM
me gustaria hacer 1 yo mismo nada de codigo de terceros, me podrias ayudar un poco, gracias
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits

dank_

#3
24 Marzo 2013, 04:43 AM
Mira este tutoríal.

http://www.youtube.com/watch?v=SSAQK4Nwkm4

Obviamente puedes usar un div con contentEditable en lugar del iFrame como se ve en el vídeo. La vedad yo también tenía mucha curiosidad por saber como se hacen estas cosas y parece que resultó más sencillo de lo que imaginé.

tecasoft

#4
24 Marzo 2013, 16:42 PM Ultima modificación: 27 Marzo 2013, 20:57 PM por tecasoft
 ;-)  ;-) gracias  un 10  ;-)

pero ahora viene un problemilla que tengo con publicar y vista previa, alguien que me sepa del tema y me pueda ayudar:

editor.php

Código [Seleccionar]

<html>
<head>

<meta charset="utf-8">
<title>Tecasoft.com | Editor</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />

<link rel="StyleSheet" type="text/css" href="css/estilos_clientes.css">

</head>
<body>

<div id="editor_contenido">

<a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar">&nbsp;&nbsp;&nbsp;
<input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa">&nbsp;&nbsp;&nbsp;

<a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a>&nbsp;
<a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a>&nbsp;
<a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a>&nbsp;
<a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a>&nbsp;

<img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion">&nbsp;

<a id="color" href=""><img src="imagenes_clientes/check-green.gif" alt="Color" title="Color" class="color"></a>&nbsp;

<a id="lista_con_vinetas" href=""><img src="imagenes_clientes/Text-List-Bullets-32.png" alt="Lista con viñetas" title="Lista con viñetas" width="20" height="20" class="lista_con_vinetas"></a>&nbsp;
<a id="lista_numerada" href=""><img src="imagenes_clientes/Text-List-Numbers-32.png" alt="Lista numerada" title="Lista numerada" width="20" height="20" class="lista_numerada"></a>&nbsp;

<a id="alinear_izquierda" href=""><img src="imagenes_clientes/Text-Align-Left-32.png" alt="Alinear a la izquierda" title="Alinear a la izquierda" width="20" height="20" class="alinear_izquierda"></a>&nbsp;
<a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a>&nbsp;
<a id="alinear_derecha" href=""><img src="imagenes_clientes/Text-Align-Right-32.png" alt="Alinear a la derecha" title="Alinear a la derecha" width="20" height="20" class="alinear_derecha"></a>&nbsp;

<a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a>&nbsp;
<a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a>&nbsp;
<a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a>&nbsp;
<a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a>&nbsp;
<a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a>&nbsp;
<a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a>&nbsp;

<a id="insertar_enlace" href=""><img src="imagenes_clientes/Textfield-Add-32.png" alt="Insertar enlace" title="Insertar enlace" width="20" height="20" class="insertar_enlace"></a>&nbsp;
<a id="eliminar_enlace" href=""><img src="imagenes_clientes/Textfield-Delete-32.png" alt="Eliminar enlace" title="Eliminar enlace" width="20" height="20" class="eliminar_enlace"></a>&nbsp;

<a id="hr" href=""><img src="imagenes_clientes/Text-Horizontalrule-32.png" alt="Barra horizontal" title="Barra horizontal" width="20" height="20" class="hr"></a>&nbsp;

<a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a>&nbsp;

<input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones">

<br>

<hr>
</div>


<div id="contenedor">
<center>

<div id="cabecera">

<div id="logo">

<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>

</div>

<div id="anexo">

<img src="imagenes_clientes/flag-spain.png">&nbsp;&nbsp;<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Spanish (Cambiar ▼)</a>

</div>

</div>

<!-- Menu navegador -->

<div id="navegador">






</div>

<!-- El contenido central -->

<div id="contenido">

<h1 class="naranja">Inicie Sesión</h1>

<form action="login.php" method="post" name="form1">

<label for="usuario">Usuario:</label>
<input type="text" name="usuario" id="tv_3" class="tv_box text ui-widget-content ui-corner-all">
&nbsp;&nbsp;&nbsp;
<label for="contrasena">Contraseña:</label>
<input type="password" name="contrasena" id="tv_4" class="tv_box text ui-widget-content ui-corner-all"><br><br>



<input type="button" class="tv_sim" value="1">
<input type="button" class="tv_sim" value="2">
<input type="button" class="tv_sim" value="3">
<input type="button" class="tv_sim" value="4">
<input type="button" class="tv_sim" value="5">
<input type="button" class="tv_sim" value="6">
<input type="button" class="tv_sim" value="7">
<input type="button" class="tv_sim" value="8">
<input type="button" class="tv_sim" value="9">
<input type="button" class="tv_sim" value="0">

<input type="button" id="backspace" value="←">
<br>

<!-- Cambia a mayusculas y minusculas -->
<input type="button" id="caps" value="Bloq.Mayus">
<!-- End -->

<input type="button" class="tv_let" value="q">
<input type="button" class="tv_let" value="w">
<input type="button" class="tv_let" value="e">
<input type="button" class="tv_let" value="r">
<input type="button" class="tv_let" value="t">
<input type="button" class="tv_let" value="y">
<input type="button" class="tv_let" value="u">
<input type="button" class="tv_let" value="i">
<input type="button" class="tv_let" value="o">
<input type="button" class="tv_let" value="p">
<br>
<input type="button" class="tv_let" value="a">
<input type="button" class="tv_let" value="s">
<input type="button" class="tv_let" value="d">
<input type="button" class="tv_let" value="f">
<input type="button" class="tv_let" value="g">
<input type="button" class="tv_let" value="h">
<input type="button" class="tv_let" value="j">
<input type="button" class="tv_let" value="k">
<input type="button" class="tv_let" value="l">
<input type="button" class="tv_let" value="ñ">
<br>
<input type="button" class="tv_let" value="z">
<input type="button" class="tv_let" value="x">
<input type="button" class="tv_let" value="c">
<input type="button" class="tv_let" value="v">
<input type="button" class="tv_let" value="b">
<input type="button" class="tv_let" value="n">
<input type="button" class="tv_let" value="m">

<input type="button" class="tv_sim" value="-">
<input type="button" class="tv_sim" value="_">
<input type="button" class="tv_sim" value="@">
<input type="button" class="tv_sim" value="#">


<br><br>
<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
&nbsp;&nbsp;&nbsp;
<input type="submit" class="boton" value="Iniciar sesión">
</form>
</div>

<!-- Pie Pagina -->

<div id="pie">

<hr>

<div id="pie-izq">

<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a>
<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
<span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
<span class="pie-izq">Hora: </span>


</div>

<div id="pie-der">

<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>


</div>

<br><br>

</div>


</center>

</div>

<script type="text/javascript" >

$(".tv_sim").button();
$(".tv_let").button();
$("#backspace").button();
$("#caps").button();
$(".boton").button();
</script>

<script type="text/javascript" src="js/wysiwyg.js"></script>

</body>
</html>


quiero que se vea el "contenedor"

estilos_clientes.css

Código [Seleccionar]

:link,:visited { text-decoration:none } :focus,:active { outline: 0 }
a { color: black; }

/* Contenedor contiene todo */
#contenedor { text-align:left; width: 1000px; margin: auto; margin-top: 10px; float: center; }


/* Cabecera */
#cabecera { width: 1000px; }

#logo { float: left; width: 150px; }

#anexo { float: right; width: 350px; }

.anexo { color: gray; font-size: 70%; }

/* Navegador */
#navegador { float: left; width: 1000px; height: 40px; background-color: black; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */
opacity: 0.7; filter: alpha(opacity=70); /* Transparencias */}


#nav-izq { float: left; width: 600px; margin-top: 10px; }

.nav-izq { color: white; font-size: 90%; margin-right: 1%; font-weight: bold; }


#nav-der { float: right; width: 300px; margin-top: 10px; }

.nav-der { color: white; font-size: 90%; margin-right: 1%; font-weight: bold; }


/* Contenido */
#contenido { float: left; width: 1000px; margin-top: 10px; }

#columna1, #columna2, #columna3, #columna4, #columna1-votaciones, #columna1-sitemap {border-top: 2px solid orange;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-left: 2px solid orange; }

#columna1 { float: left; width: 680px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-1 { float: left; width: 300px; background-color: orange; margin-left: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-2 { float: right; width: 300px; background-color: orange; margin-right: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-3 { float: left; width: 300px; background-color: orange; margin-left: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-4 { float: right; width: 320px; background-color: orange; margin-right: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}



#columna2 { float: right; width: 300px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna3 { float: right; width: 300px; background-color: Gainsboro; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

/* tablas diseño web */
#table-1 { float: left; margin-left: 80px; margin-top: 10px; }

#table-2 { float: right; margin-right: 80px; margin-top: 10px; }



/* sitemap */
#contenido-sitemap { float: left; width: 1000px; margin-top: 10px; }

#columna1-sitemap { float: left; width: 1000px; background-color: Gainsboro;
-moz-border-radius: 100px 100px; /* Redondeado */
-webkit-border-radius: 100px 100px; /* Redondeado */}

/* margin-top*/

#margen-superior { margin-top: 10px; }

/* pie */
#pie { float: left; width: 1000px; }

#pie-izq { float: left; width: 700px; }

.pie-izq { color: gray; font-size: 70%; }


#pie-der { float: right; width: 200px; }

.pie-der { color: gray; font-size: 70%; }

/* Contenido-votaciones */

#columna1-votaciones { float: left; width: 1000px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

/* Contenido clientes */
.naranja { color: orange; }

/* Contenido clientes Botones Menu Editar */
.boton_publicar , .boton_vista_previa , .boton_opciones { font-size: 10px; }


wysiwyg.js

Código [Seleccionar]

// Botones del menu Editor
$(".boton_publicar").button(); $(".boton_vista_previa").button();

$(".negrita").button(); $(".cursiva").button(); $(".tachado").button(); $(".subrayar").button();

$(".maquetacion").button();

$(".color").button();

$(".lista_con_vinetas").button(); $(".lista_numerada").button();

$(".alinear_izquierda").button(); $(".centrar").button(); $(".alinear_derecha").button(); $(".justificado").button();

$(".h1").button(); $(".h2").button(); $(".h3").button(); $(".h4").button(); $(".h5").button(); $(".h6").button();

$(".insertar_enlace").button(); $(".eliminar_enlace").button();

$(".hr").button();

$(".insertar_imagen").button();

$(".boton_opciones").button();
// End Botones del menu Editor

// ContentEditable cabecera
$("#contenedor").get(0).contentEditable = "true";
// End ContentEditable cabecera

// Negrita
$('#negrita').click(function(){
document.execCommand('bold',false,null);
return false;
});
// End Negrita

// Cursiva
$('#cursiva').click(function(){
document.execCommand('italic',false,null);
return false;
});
// End Cursiva

// Tachado
$('#tachado').click(function(){
document.execCommand('strikethrough',false,null);
return false;
});
// End Tachado

// Subrayar
$('#subrayar').click(function(){
document.execCommand('underline',false,null);
return false;
});
// End Subrayar







// Maquetacion
// calendar.gif
// End maquetacion

// Color
$('#color').click(function(){
var color = prompt("Introduzca el nombre del color deseado buscando los colores en ingles en la siguiente direccion: http://es.wikipedia.org/wiki/Colores_web#Tabla_de_colores","");
document.execCommand('ForeColor',false,color);
return false;
});
// End color








// Lista con viñetas
$('#lista_con_vinetas').click(function(){
document.execCommand('InsertUnorderedList',false,"newUL");
return false;
});
// End Lista con viñetas

// Lista Numerada
$('#lista_numerada').click(function(){
document.execCommand('InsertOrderedList',false,"newOL");
return false;
});
// End Lista Numerada

// Alinear a la izquierda, centrar, alinear a la derecha, justificado
$('#alinear_izquierda').click(function(){
document.execCommand('JustifyLeft',false,null);
return false;
});
$('#centrar').click(function(){
document.execCommand('JustifyCenter',false,null);
return false;
});
$('#alinear_derecha').click(function(){
document.execCommand('JustifyRight',false,null);
return false;
});
// End alinear a la izquierda, centrar, alinear a la derecha, justificado

// h1,h2,h3,h4,h5,h6
$('#h1').click(function(){
document.execCommand('FontSize',false,1);
return false;
});
$('#h2').click(function(){
document.execCommand('FontSize',false,2);
return false;
});
$('#h3').click(function(){
document.execCommand('FontSize',false,3);
return false;
});
$('#h4').click(function(){
document.execCommand('FontSize',false,4);
return false;
});
$('#h5').click(function(){
document.execCommand('FontSize',false,5);
return false;
});
$('#h6').click(function(){
document.execCommand('FontSize',false,6);
return false;
});
// End h1,h2,h3,h4,h5,h6

// Insertar enlace, eliminar enlace
$('#insertar_enlace').click(function(){
var linkURL = prompt("Introduzca la URL en este enlace:","http://");
document.execCommand('CreateLink',false,linkURL);
return false;
});
$('#eliminar_enlace').click(function(){
document.execCommand('Unlink',false,null);
return false;
});
// End Insertar enlace, eliminar enlace

// hr
$('#hr').click(function(){
document.execCommand('inserthorizontalrule',false,null);
return false;
});
// End hr

// Insertar imagen
$('#insertar_imagen').click(function(){
var imgSrc = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
if(imgSrc != null){
document.execCommand('insertimage',false, imgSrc);
}
return false;

});
// End Insertar imagen







// Vista previa
$('.boton_vista_previa').click(function(){

//var theForm = document.getElementById("contenedor");
theForm2 = document.getElementById('contenedor').innerHTML;
theForm2.submit();

});
//



aqui al final esta el problema^^^^^^^^^^^^^^
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits

tecasoft

#5
27 Marzo 2013, 21:51 PM
alguien que pueda hecharle un vistazo  :(
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits

#!drvy

#6
28 Marzo 2013, 01:11 AM
@tecasoft, bien por utilizar [code] pero por favor utiliza el lenguaje indicado: [code=php] [code=javascript] [code=html4strict] [code=css]

Y pon solo el código conflictivo. Lo que pones (editor.php.. estilos_clientes.css)...  es codigo que no sirve para ver tu problema (requiere login...)


Saludos

tecasoft

#7
28 Marzo 2013, 19:00 PM
no te entendi mucho pero me parece que ahora si que lo he puesto con el numero de linea.

Estaba pensando en enviarlo x medio de <hidden o campo oculto, pero no se como hacerlo o si es la forma correcta...AHORA ESTA MODIFICADO EL ARCHIVO DE ABAJO

pasar el codigo html siguiente que suelta "theForm2" mediante un input via post o se deberia pasar via ftp?¿?o como para visualizarlo, no guardarlo, en una web independiente:

piensa que para editor.php carga una pagina web y esa tiene que tener "vista previa" y un boton para "guardar" la web que se administra.

wysiwyg.js

Código (js) [Seleccionar]


// Vista previa
$('.boton_vista_previa').click(function(){

//var theForm = document.getElementById("contenedor");
theForm2 = document.getElementById('contenedor').innerHTML;

form_editor.submit();

});
//



editor.php

Código (php) [Seleccionar]

<html>
<head>

<meta charset="utf-8">
<title>Tecasoft.com | Editor</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />

<link rel="StyleSheet" type="text/css" href="css/estilos_clientes.css">

</head>
<body>

<div id="editor_contenido">

<form action="editor12.php" method="post" target="_blank" name="form_editor">

<a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a>&nbsp;&nbsp;&nbsp;

<input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar">&nbsp;&nbsp;&nbsp;
<input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa">&nbsp;&nbsp;&nbsp;

<a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a>&nbsp;
<a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a>&nbsp;
<a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a>&nbsp;
<a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a>&nbsp;

<img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion">&nbsp;

<a id="color" href=""><img src="imagenes_clientes/check-green.gif" alt="Color" title="Color" class="color"></a>&nbsp;

<a id="lista_con_vinetas" href=""><img src="imagenes_clientes/Text-List-Bullets-32.png" alt="Lista con viñetas" title="Lista con viñetas" width="20" height="20" class="lista_con_vinetas"></a>&nbsp;
<a id="lista_numerada" href=""><img src="imagenes_clientes/Text-List-Numbers-32.png" alt="Lista numerada" title="Lista numerada" width="20" height="20" class="lista_numerada"></a>&nbsp;

<a id="alinear_izquierda" href=""><img src="imagenes_clientes/Text-Align-Left-32.png" alt="Alinear a la izquierda" title="Alinear a la izquierda" width="20" height="20" class="alinear_izquierda"></a>&nbsp;
<a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a>&nbsp;
<a id="alinear_derecha" href=""><img src="imagenes_clientes/Text-Align-Right-32.png" alt="Alinear a la derecha" title="Alinear a la derecha" width="20" height="20" class="alinear_derecha"></a>&nbsp;

<a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a>&nbsp;
<a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a>&nbsp;
<a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a>&nbsp;
<a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a>&nbsp;
<a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a>&nbsp;
<a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a>&nbsp;

<a id="insertar_enlace" href=""><img src="imagenes_clientes/Textfield-Add-32.png" alt="Insertar enlace" title="Insertar enlace" width="20" height="20" class="insertar_enlace"></a>&nbsp;
<a id="eliminar_enlace" href=""><img src="imagenes_clientes/Textfield-Delete-32.png" alt="Eliminar enlace" title="Eliminar enlace" width="20" height="20" class="eliminar_enlace"></a>&nbsp;

<a id="hr" href=""><img src="imagenes_clientes/Text-Horizontalrule-32.png" alt="Barra horizontal" title="Barra horizontal" width="20" height="20" class="hr"></a>&nbsp;

<a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a>&nbsp;

<input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones">

</form>


<hr>
</div>


<div id="contenedor">
<center>

<div id="cabecera">

<div id="logo">

<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>

</div>

<div id="anexo">

<img src="imagenes_clientes/flag-spain.png">&nbsp;&nbsp;<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Spanish (Cambiar ▼)</a>

</div>

</div>

<!-- Menu navegador -->

<div id="navegador">






</div>

<!-- El contenido central -->

<div id="contenido">

<h1 class="naranja">Inicie Sesión</h1>

<form action="login.php" method="post" name="form1">

<label for="usuario">Usuario:</label>
<input type="text" name="usuario" id="tv_3" class="tv_box text ui-widget-content ui-corner-all">
&nbsp;&nbsp;&nbsp;
<label for="contrasena">Contraseña:</label>
<input type="password" name="contrasena" id="tv_4" class="tv_box text ui-widget-content ui-corner-all"><br><br>



<input type="button" class="tv_sim" value="1">
<input type="button" class="tv_sim" value="2">
<input type="button" class="tv_sim" value="3">
<input type="button" class="tv_sim" value="4">
<input type="button" class="tv_sim" value="5">
<input type="button" class="tv_sim" value="6">
<input type="button" class="tv_sim" value="7">
<input type="button" class="tv_sim" value="8">
<input type="button" class="tv_sim" value="9">
<input type="button" class="tv_sim" value="0">

<input type="button" id="backspace" value="←">
<br>

<!-- Cambia a mayusculas y minusculas -->
<input type="button" id="caps" value="Bloq.Mayus">
<!-- End -->

<input type="button" class="tv_let" value="q">
<input type="button" class="tv_let" value="w">
<input type="button" class="tv_let" value="e">
<input type="button" class="tv_let" value="r">
<input type="button" class="tv_let" value="t">
<input type="button" class="tv_let" value="y">
<input type="button" class="tv_let" value="u">
<input type="button" class="tv_let" value="i">
<input type="button" class="tv_let" value="o">
<input type="button" class="tv_let" value="p">
<br>
<input type="button" class="tv_let" value="a">
<input type="button" class="tv_let" value="s">
<input type="button" class="tv_let" value="d">
<input type="button" class="tv_let" value="f">
<input type="button" class="tv_let" value="g">
<input type="button" class="tv_let" value="h">
<input type="button" class="tv_let" value="j">
<input type="button" class="tv_let" value="k">
<input type="button" class="tv_let" value="l">
<input type="button" class="tv_let" value="ñ">
<br>
<input type="button" class="tv_let" value="z">
<input type="button" class="tv_let" value="x">
<input type="button" class="tv_let" value="c">
<input type="button" class="tv_let" value="v">
<input type="button" class="tv_let" value="b">
<input type="button" class="tv_let" value="n">
<input type="button" class="tv_let" value="m">

<input type="button" class="tv_sim" value="-">
<input type="button" class="tv_sim" value="_">
<input type="button" class="tv_sim" value="@">
<input type="button" class="tv_sim" value="#">


<br><br>
<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
&nbsp;&nbsp;&nbsp;
<input type="submit" class="boton" value="Iniciar sesión">
</form>
</div>

<!-- Pie Pagina -->

<div id="pie">

<hr>

<div id="pie-izq">

<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a>
<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
<span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
<span class="pie-izq">Hora: </span>


</div>

<div id="pie-der">

<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>


</div>

<br><br>

</div>


</center>

</div>

<script type="text/javascript" >

$(".tv_sim").button();
$(".tv_let").button();
$("#backspace").button();
$("#caps").button();
$(".boton").button();
</script>

<script type="text/javascript" src="js/wysiwyg.js"></script>

</body>
</html>

http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
Imprimir
Ir Arriba Páginas1
Acciones del Usuario