tag:blogger.com,1999:blog-48969675099051262582024-03-12T23:30:35.450-03:00Friki BloggeoProgramación web y desktop a la cartaAnonymoushttp://www.blogger.com/profile/11061221423117158186noreply@blogger.comBlogger196125tag:blogger.com,1999:blog-4896967509905126258.post-90695163253904414062017-08-19T21:24:00.001-03:002017-08-19T21:35:25.818-03:00Aplicaciones de una página (Single Page App) con Angular CLI Version 4<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGiFm8bLGTcJUWMKMR1p7ljmJjNytDs3SbeaWemA0aw6tDnHFt7GVtOLF4KKT0xhpu3GNxIn8XFEd0yBq3l786e20qsb6kbC1AOnVHrKj54NVffKSkyGZuH4smHiPYVEUF79ClyRpBRE/s1600/angular_boilerplate_header+2.jpg" imageanchor="1"><img border="0" data-original-height="297" data-original-width="1170" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGiFm8bLGTcJUWMKMR1p7ljmJjNytDs3SbeaWemA0aw6tDnHFt7GVtOLF4KKT0xhpu3GNxIn8XFEd0yBq3l786e20qsb6kbC1AOnVHrKj54NVffKSkyGZuH4smHiPYVEUF79ClyRpBRE/s640/angular_boilerplate_header+2.jpg" width="640" /></a></div>
<br />
En estos días, me he encontrado con un problema bastante grande, y es que para las personas que estábamos acostumbrados a utilizar el framework <b><a href="https://angularjs.org/" target="_blank">AngularJS</a> </b>o como muchos le llaman, Angular 1, nos hemos topado con la gran sorpresa de que las versiones siguientes de dicho framework no se parecen ni en la mas mínima parte a la sintaxis de programación a este, y es que según nos enteramos, esto se debe a que a no es un continuación del framework sino, un framework totalmente nuevo, diferente y con un nuevo concepto en la programación. En particular, yo he sido uno de los que me ha costado migrar ya que estaba acostumbrado a la versión inicial, y por falta de tiempo, no me había adentrado a la programación de componentes, sin embargo, nuestro papel como desarrolladores es estar siempre a la vanguardia con lo nuevo.<br />
<br />
Uno de los usos mas comunes que solía dar al framework <b><a href="https://angularjs.org/" target="_blank">AngularJS</a></b> es la maravillosa manera en la que maneja los datos con su <i>doble binding</i> y en particular, las aplicaciones de una sola pagina con el <i>Routing </i>de AngularJS que en realidad, me vi obligado a investigar de que manera trabaja este concepto en el nuevo framework de Angular, sin embargo, me tope con que <b>no se encuentra en la Red mucha información en español </b>con respecto a estos temas en particular, y no me quedo de otra que leer blogs y <a href="https://angular.io/docs" target="_blank">documentación en ingles</a>, que ahora me gustaría compartirles, sin mas que añadir, empecemos con el tutorial.<br />
<br />
Antes de comenzar, es necesario saber que este tutorial cuenta con los siguientes recursos de software:<br />
<ol>
<li><b>Sistema Operativo Ubuntu 14.04 LTS</b></li>
<li><b>Editor de Texto <a href="https://code.visualstudio.com/download" target="_blank">Visual Studio Code</a></b></li>
<li><b>Instalación previa de <a href="https://nodejs.org/es/" target="_blank">NodeJS y NPM</a> (Gestor de paquetes de Node)</b></li>
<li><b>Navegador Chromium Version 60.0.3112.78</b></li>
<li><b><a href="https://angular.io/" target="_blank">Angular CLI Version 4</a></b></li>
</ol>
<div>
<b>Nos basaremos especialmente en la terminal de Ubuntu o en su defecto, Linux</b> para los comandos, en realidad, los recursos previamente mencionados no es que sean indispensable, excepto NodeJS y NPM, y la instalación de Angular CLI, con respecto a los recursos de hardware es irrelevante.</div>
<div>
<br /></div>
<div>
Primeramente, <b>abrimos la terminar de Ubuntu con las teclas Ctrl + Alt + T</b> <b>o en el caso de Windows, Inicio + R para abrir Ejecutar y escribes "cmd" sin comillas, y teclea en ENTER</b>, para genear un nuevo proyecto, introduce las siguientes lineas una por una</div>
<div>
<br /></div>
<pre><code>
ng new miApp
cd miApp
ng serve
</code></pre>
<br />
<br />
Los comandos anteriores <b>crea una aplicación de Angular</b>, una vez creadas<b> accedemos a su carpeta</b> y después, <b>servimos la aplicación </b>para poder visualizar los cambios que vamos haciendo en el navegador con el<i> LiveReload </i>interno que trae Angular CLI la cual por defecto, se ejecutará en <a href="http://localhost:4200/">http://localhost:4200</a>, a no ser que hayas configurado una dirección personalizada. Por favor, minimiza esta terminal, ya que mientras el servidor este corriendo, no podrás escribir mas comandos acá.<br />
<br />
Luego de esto, vamos a <b>Visual Studio Code</b> o nuestro editor de código favorito, y <b>abrimos un nuevo folder (Ctrl + KO) y buscamos nuestra carpeta creada, entramos y buscamos la carpeta "src"</b>, donde se ubica la fuente de nuestro proyecto, y hacemos click en el botón "Abrir", y te cargará la siguiente estructura o esquema de carpetas.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkmHQozw6wx925F0FiOEt8ryz4vCs3Tq0M-rGlsZnHu1rTgdV0e_jCogncIkY88E68lo_8ViOODgt9x0bd8H3P_wqbqaaivE9rR21O5HR1SdmIbDeDKROBQfK9CUYh7H-mtCq4zm_3KM/s1600/Captura+de+pantalla+de+2017-08-19+18%253A44%253A48.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="347" data-original-width="228" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkmHQozw6wx925F0FiOEt8ryz4vCs3Tq0M-rGlsZnHu1rTgdV0e_jCogncIkY88E68lo_8ViOODgt9x0bd8H3P_wqbqaaivE9rR21O5HR1SdmIbDeDKROBQfK9CUYh7H-mtCq4zm_3KM/s320/Captura+de+pantalla+de+2017-08-19+18%253A44%253A48.png" width="210" /></a></div>
<br />
<h3>
Creando los componentes que funcionaran como páginas</h3>
Abrimos un nuevo terminal, e introducimos el siguiente comando<br />
<br />
<pre><code>cd ~/miApp</code></pre>
<br />
Una vez ubicados en la carpeta de nuestro proyecto, introducimos el siguiente comando para generar los componentes<br />
<pre><code>
ng generate component inicio
ng generate component contacto
ng generate component informacion
ng generate component paginaNoEncontrada
</code></pre>
<br />
Lo que nos generará 4 componentes que fungirán como las paginas a las que accederemos mediante el<i> Routing</i>, una vez hecho esto, vamos a <b>Visual Studio Code </b>y en la barra lateral, y editamos el siguiente archivo<br />
<br />
<b>app/app.module.ts</b><br />
<br />
<pre><code>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
<b><span style="color: red;">import { RouterModule, Routes } from '@angular/router';
</span></b>
import { AppComponent } from './app.component';
import { InicioComponent } from './inicio/inicio.component';
import { ContactoComponent } from './contacto/contacto.component';
import { InformacionComponent } from './informacion/informacion.component';
import { PaginaNoEncontradaComponent } from './pagina-no-encontrada/pagina-no-encontrada.component';
<b><span style="color: red;">
const appRoutes: Routes = [
{ path: 'inicio', component: InicioComponent },
{ path: 'contacto', component: ContactoComponent },
{ path: 'informacion', component: InformacionComponent },
{ path: '',
redirectTo: '/inicio',
pathMatch: 'full'
},
{ path: '**', component: PaginaNoEncontradaComponent }
];</span></b>
@NgModule({
declarations: [
AppComponent,
InicioComponent,
ContactoComponent,
InformacionComponent,
PaginaNoEncontradaComponent
],
imports: [
BrowserModule<b><span style="color: red;">,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)</span></b>
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
</code></pre>
<br />
Ahora nos dirigimos al siguiente archivo, borramos todo lo que tenga, e introducimos el siguiente código<br />
<br />
<b>app/app.component.html</b><br />
<br />
<pre><code>
<a [routerLink]="['/inicio']">Inicio</a>
<a [routerLink]="['/contacto']">Contacto</a>
<a [routerLink]="['/informacion']">Informacion</a>
<router-outlet></router-outlet>
</code></pre>
<br />
Si ingresamos a <a href="http://localhost:4200/">http://localhost:4200</a> veremos que ya tenemos un <i>Routing</i> totalmente funcional.
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpTawrRjFuj8waB8W-fsFozTKKNpIR-NtkP-qWq0BrDz81YdaNA5HvqLPUxCnRQy5ejp-zgakBgGmLYvNIKh25bItY16avFYVt7yixtbuie0l8xAgz87kb_OGEXy-oJ0fLjVjlKg9F64A/s1600/Captura+de+pantalla+de+2017-08-19+19%253A11%253A34.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" data-original-height="152" data-original-width="334" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpTawrRjFuj8waB8W-fsFozTKKNpIR-NtkP-qWq0BrDz81YdaNA5HvqLPUxCnRQy5ejp-zgakBgGmLYvNIKh25bItY16avFYVt7yixtbuie0l8xAgz87kb_OGEXy-oJ0fLjVjlKg9F64A/s320/Captura+de+pantalla+de+2017-08-19+19%253A11%253A34.png" title="Página de Inicio" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Página de Inicio</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7qBY9BvZkxJX2UJH_KJBAZ_aDznm-gWTpXXCbE7KsK3mBiQH_eKrK71ez08fhgATvpLRY1qGdrpI3PT4ti9FMWCENaFlNXlEQKz5TdtaEkZhBqrKdB_mnr89wXgBbbWU-X3YKq-nzAg/s1600/Captura+de+pantalla+de+2017-08-19+19%253A11%253A39.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="162" data-original-width="342" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7qBY9BvZkxJX2UJH_KJBAZ_aDznm-gWTpXXCbE7KsK3mBiQH_eKrK71ez08fhgATvpLRY1qGdrpI3PT4ti9FMWCENaFlNXlEQKz5TdtaEkZhBqrKdB_mnr89wXgBbbWU-X3YKq-nzAg/s320/Captura+de+pantalla+de+2017-08-19+19%253A11%253A39.png" width="320" /></a></td></tr>
<tr><td class="tr-caption">Página de Contacto</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5FnZ2FTBPPyUEvD4SQ-JELJhoXbRVQWy_d5eDTzASGYZNtja9bq4PVTLGRE_NzVg0F-3dQUfjFrhMw7WhC7B1GXKslTHnwIOhMW4khQIDGo2GD6V-4U6j7UAxbuioZM5AzPLlEzdMt0/s1600/Captura+de+pantalla+de+2017-08-19+19%253A11%253A42.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="157" data-original-width="359" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5FnZ2FTBPPyUEvD4SQ-JELJhoXbRVQWy_d5eDTzASGYZNtja9bq4PVTLGRE_NzVg0F-3dQUfjFrhMw7WhC7B1GXKslTHnwIOhMW4khQIDGo2GD6V-4U6j7UAxbuioZM5AzPLlEzdMt0/s320/Captura+de+pantalla+de+2017-08-19+19%253A11%253A42.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Página de Información</td></tr>
</tbody></table>
<div style="text-align: center;">
</div>
<br />
Por supuesto, la parte de estilo y diseño es de tu parte, puedes jugar con frameworks CSS como <b>Bootstrap o Materialize</b> para hacer un diseño mas llamativo, la edición de la información en cada página debes hacerla en su respectivo archivo HTML y CSS en la carpeta correspondiente al componente. He aquí un ejemplo usando los componentes del framework CSS Bootstrap<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmr_MlVwvbMKo3JnyXBtrn1PXs3R7Jhrf8bstqv5nraE95yCWsbIW3zO59ULi1dNtANmTH63kIEEnxXWrpJVXUZByO4bdgvRYRrYgTxYmFuK9cR6lkflKf2vEdjQZD-oOBfY_UqQmZAsU/s1600/Captura+de+pantalla+de+2017-08-19+19%253A23%253A17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="178" data-original-width="1280" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmr_MlVwvbMKo3JnyXBtrn1PXs3R7Jhrf8bstqv5nraE95yCWsbIW3zO59ULi1dNtANmTH63kIEEnxXWrpJVXUZByO4bdgvRYRrYgTxYmFuK9cR6lkflKf2vEdjQZD-oOBfY_UqQmZAsU/s640/Captura+de+pantalla+de+2017-08-19+19%253A23%253A17.png" width="640" /></a></div>
<br />
<h2>
Routing con Parámetros</h2>
<br />
No podia pasar por alto este punto, ya que es una de las herramientas mas comunes que utilizamos los desarrolladores, sobre todo si trabajamos con <i>API Rest</i> o<i> Web Services</i> en general, el<i> Routing</i> con parámetros es de suma importancia para filtrar información esencial que dependa de una variable en particular. Para comenzar, abrimos nuevamente la terminar e introducimos el siguiente comando ubicados en la carpeta de nuestro proyecto<br />
<pre><code>
ng generate component detalles
</code></pre>
<br />
Una vez generado el componente, nos dirigimos a nuestro archivo <i>app.module.ts</i> y e insertamos el siguiente código.<br />
<br />
<b>app/app.module.ts</b><br />
<b><br /></b>
<br />
<pre><code>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { InicioComponent } from './inicio/inicio.component';
import { ContactoComponent } from './contacto/contacto.component';
import { InformacionComponent } from './informacion/informacion.component';
import { PaginaNoEncontradaComponent } from './pagina-no-encontrada/pagina-no-encontrada.component';
import { DetallesComponent } from './detalles/detalles.component';
const appRoutes: Routes = [
{ path: 'inicio', component: InicioComponent },
{ path: 'contacto', component: ContactoComponent },
{ path: 'informacion', component: InformacionComponent },
<b><span style="color: red;">{ path: 'inicio/:id', component: DetallesComponent },</span></b>
{ path: '',
redirectTo: '/inicio',
pathMatch: 'full'
},
{ path: '**', component: PaginaNoEncontradaComponent }
];
@NgModule({
declarations: [
AppComponent,
InicioComponent,
ContactoComponent,
InformacionComponent,
PaginaNoEncontradaComponent,
DetallesComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
</code></pre>
<br />
Ahora, nos dirigimos al siguiente archivo, y editamos<br />
<br />
<b>app/detalles/detalles.component.ts</b><br />
<pre><code>
import { Component, OnInit } from '@angular/core';
<b><span style="color: red;">import {ActivatedRoute} from "@angular/router";
</span></b>
@Component({
selector: 'app-detalles',
templateUrl: './detalles.component.html',
styleUrls: ['./detalles.component.css']
})
export class DetallesComponent implements OnInit {
<b><span style="color: red;"> id: String;
</span></b> constructor(<b><span style="color: red;">private route: ActivatedRoute</span></b>) {
<b><span style="color: red;">this.route.params.subscribe(
params => this.id = params.id
);</span></b>
}
ngOnInit() {
}
}
</code></pre>
<br />
Nos dirigimos al siguiente archivo, borramos todo lo que tenga e insertamos el siguiente código<br />
<br />
<b>app/detalles/detalles.component.html</b><br />
<pre><code>
<p>
El id es {{id}}
</p>
</code></pre>
<br />
Ahora, si intentas ingresar a una dirección al estilo de <a href="http://localhost:4200/inicio/3">http://localhost:4200/inicio/3</a>, nos daría el siguiente resultado<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFo1sw18zvrRcGQXdoguirdpHha06gHYot6mEVMdIarXksg3k54I0AMlGj6C4tYrDibGzPRIpuFCHDtdADjs3AZuetBQsOPP7W6RlRmAHCETPLPMQfFkd05jLumMmOAP1ET9xv-DRbxuo/s1600/Captura+de+pantalla+de+2017-08-19+19%253A45%253A10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="193" data-original-width="362" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFo1sw18zvrRcGQXdoguirdpHha06gHYot6mEVMdIarXksg3k54I0AMlGj6C4tYrDibGzPRIpuFCHDtdADjs3AZuetBQsOPP7W6RlRmAHCETPLPMQfFkd05jLumMmOAP1ET9xv-DRbxuo/s320/Captura+de+pantalla+de+2017-08-19+19%253A45%253A10.png" width="320" /></a></div>
Si tu deseo es enlazar a cierta pagina con cualquier Id (por ejemplo, una Id correspondiente a la entrada de un post, en el caso de los blogs), debes hacerlo con insertando el link donde corresponda de la siguiente manera<br />
<pre><code>
<a [routerLink]="['/inicio', 3]"/>Entrada con Id 3</a>;
</code></pre>
<br />
<b>Con esto, ya estas completamente preparado para seguir haciendo tus aplicaciones de una sola página y desempeñarte tan bien como la hacias con AngularJS.
</b>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com3tag:blogger.com,1999:blog-4896967509905126258.post-74877488686049277192017-01-15T14:13:00.000-03:002017-08-19T21:38:02.498-03:00Subir imagenes al servidor usando un Web Services API REST<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1iOqxNlnamVjIh-L3tVg8o4_T6VkinxV4vzCQP5ciORvHAVeNi8zy7wICKV_Iauxmbh40H0WOV8IiUp2o8JB08OZ66yg3ekCYo_xR0nXy4Lvs2iMT2Owe8C4b0ggQ11hW9VLCet38LA/s1600/screencapture-frikibloggeo-esy-es-1484499574743.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1iOqxNlnamVjIh-L3tVg8o4_T6VkinxV4vzCQP5ciORvHAVeNi8zy7wICKV_Iauxmbh40H0WOV8IiUp2o8JB08OZ66yg3ekCYo_xR0nXy4Lvs2iMT2Owe8C4b0ggQ11hW9VLCet38LA/s640/screencapture-frikibloggeo-esy-es-1484499574743.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Interfaz visual del servidor de imagenes</td></tr>
</tbody></table>
Desde hace rato que me surgía esta duda y es que los API Rest actualmente son la manera de trabajar la web, ya que nos ofrecen infinitas herramientas y recursos para un trabajo grupal y de optimizacion, pero, en vista de que los web services son archivos textuales que nos sirve el servidor en formato JSON o XML, parece un poco complicado subir una imagen a través de un API ya que una imagen no es un texto, o si?
Si no has leído mis entradas anteriores te invito a leerlas para que te empapes mas de lo que hablare en esta.
<br />
<br />
<ul>
<li><a href="http://frikibloggeo.blogspot.com/2017/01/crear-un-web-service-api-rest-con-php-y.html">Crear un Web Service API Rest con PHP y MySQL</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2017/01/consumir-un-web-services-api-rest-con.html">Consumir un Web Services API Rest con AngularJS</a></li>
</ul>
<br />
Luego de dar lectura a las dos entradas anteriores, y entender en que consiste la creación y consumo de un web services, podemos proseguir. En este caso, vamos a crear un servicio completo de subida de imágenes al servidor usando esta metodología de trabajo y entendiendo ciertas características del mismo.
Primero, entendiendo que si vamos a subir una imagen al servidor haciendo uso de un REST API, es necesario que la imagen sea un texto, sino, como envías una imagen en un objeto de este estilo, y se preguntaran, en serio se puede hacer esto? codificar una imagen a texto? Y la verdad es que si, se puede, y de esta herramienta tan preciada haremos uso hoy.<br />
<br />
Antes de comenzar, cabe destacar que al final del post dejare un demo y un link para descargar los archivos.
Tenemos 4 archivos esenciales que se basan en la siguiente estructura, cabe acotar que no son los únicos archivos incluidos dentro del directorio puesto a que tengo incluida también ciertas librerías de diseño y dinamismo, entre ellas angularJS y Materialize para CSS, pero, en el siguiente esquema, solo nos centraremos en los archivos que modificaremos, el resto de los archivos podrán encontrarlos en el enlace de descarga del proyecto completo
<br />
<br />
<br />
<ul>
<li>css
<ul>
<li>custom.css</li>
</ul>
</li>
<li>js
<ul>
<li>custom.js</li>
</ul>
</li>
<li>upload</li>
<li>index.html</li>
<li>server.php</li>
</ul>
<h6>
<b>css/custom.css</b></h6>
<br />
Este código no requiere mucha explicación, aunque haremos uso del framework de diseño Materialize, necesitaremos definir los siguientes estilos para ciertos elementos
<br />
<br />
<br />
<pre><code>body {
background-color: #fefefe;
}
#imgCont {
background:#eeeeee;
width:auto;
height:300px;
padding: 5px 5px 5px 5px;
border: 1px solid #cccccc;
margin-top:10px;
overflow: auto;
}
#imgCont img {
width:90px;
border:1px solid #bbbbbb;
margin-right:5px;
transition:all ease .2s;
-webkit-transition:all ease .2s;
}
#imgCont img:hover {
opacity:.8;
transition:all ease .2s;
-webkit-transition:all ease .2s;
}</code></pre>
<h6>
<b>css/custom.js</b></h6>
<br />
Aquí empieza la función, si bien no podemos enviar una imagen como tal a un servicio web, si lo podemos hacer si codificamos la imagen, en este caso, haremos uso de base64, la cual es una codificación que tiene la capacidad de convertir cualquier dato definido a nivel de bytes en un formato seguro de transportar por Internet como lo son los caracteres ASCII, es decir, no solo sirve para codificar imágenes, sirve para codificar cualquier archivo, música, vídeos, documentos, o simplemente, cualquier cadena de texto o carácter que se represente en bytes, es decir, puede transformar todo lo que sea recurso digital. En nuestro controlador de imagen en angular simplemente definimos la función <span style="font-family: "courier new" , "courier" , monospace;">encodeImageFileAsURL();</span> la cual se encarga de hacer todo el trabajo de codificación, y luego la cadena es enviada al web services a través de un objeto.
<br />
<br />
<br />
<pre><code> var app = angular.module('crud',[]);
// Controlador principal de nuestra pagina
app.controller('mainCtrl', function($scope,$http) {
$scope.dominio = "http://localhost/imagenes/";
$scope.message = 'Ejemplo';
$scope.subtitle = "Subir una imagen haciendo uso de API REST";
$scope.imageJSON = {};
$scope.enlaces = {};
angular.element(document).ready(function () {
$scope.get();
});
// La funcion post() que hace la solicitud para publicar un nuevo elemento
$scope.post = function() {
$http.post("server.php", $scope.imageJSON)
.then(function (response){
console.log(response);
Materialize.toast(response.data.statusMessage, 4000);
if(response.data.data != null) {
$scope.cargarImagen(response.data.data);
}
$scope.get();
},
function(response) {
// Aqui va el codigo en caso de error
});
}
$scope.get = function() {
$http.get("server.php")
.then(function (response){
console.log(response);
$scope.imagenes = response.data.data;
},
function(response) {
// Aqui va el codigo en caso de error
});
}
$scope.cargarImagen = function(ruta) {
var container = document.getElementById('imgTest');
var newImage = document.getElementById('imagen');
newImage.src = ruta;
container.style.width = 'auto';
container.style.height = 'auto'
container.innerHTML = newImage.outerHTML;
$scope.enlaces.link = $scope.dominio + ruta;
$scope.enlaces.html = "<a href='"+ $scope.dominio + ruta +"'>"+$scope.dominio + ruta+"</a>";
$scope.enlaces.foros = "[IMG]"+$scope.dominio + ruta+"[/IMG]"
}
$scope.encodeImageFileAsURL = function() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
$scope.imageJSON.encodedImage = srcData;
$scope.post();
}
fileReader.readAsDataURL(fileToLoad);
}
}
});</code></pre>
<h6>
<b>server.php</b></h6>
<br />
Este archivo trabaja del lado del servidor, en este caso apache, el archivo recibe el texto de la imagen codificada, y luego la pasa a la función <span style="font-family: "courier new" , "courier" , monospace;">save_base64_image();</span>, la cual, no hace mas que analizar la cadena enviada y mediante el uso de herramientas de decodificacion y escritura en el servidor, crea la imagen en el directorio<b> upload</b> del mismo, almacenando asi una imagen con una extensión, y creando la <span style="background-color: white;">URL</span> especifica del mismo.
<br />
<br />
<br />
<pre><code><?php
header("Access-Control-Allow-Origin: *");
// Permite la ejecucion de los metodos
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
switch ($_SERVER['REQUEST_METHOD']) {
case 'GET':
$directorio = opendir("./upload"); //ruta actual
$contador = 0;
while ($archivo = readdir($directorio)) //obtenemos un archivo y luego otro sucesivamente
{
if (!is_dir($archivo))//verificamos si es o no un directorio
{
$listado[$contador] = $archivo;
}
$contador++;
}
$listado = array_values($listado);
if(count($listado)!=0) {
print_json(200, true, $listado);
} else {
print_json(200, "No existen elementos", null);
}
break;
case 'POST':
$content = file_get_contents("php://input");
$array = json_decode($content, true);
$validar = validate($array['encodedImage']);
if($validar==1) {
$imagen = save_base64_image($array['encodedImage'], "upload/IMG_" . strtoupper(md5($array['encodedImage'])));
if($imagen!=null) {
print_json(200, "Completado", $imagen);
} else {
print_json(200, "Este archivo ya existe", null);
}
} else {
print_json(200, "Extension invalida", null);
}
break;
default:
print_json(405, 'Metodo no permitido', null);
break;
}
function validate($string_base64) {
$array = explode(",", $string_base64);
if( ($array[0] == "data:image/jpeg;base64") || ($array[0] == "data:image/gif;base64") || ($array[0] == "data:image/png;base64") ) {
return 1;
} else {
return 0;
}
}
function save_base64_image($base64_image_string, $output_file_without_extentnion, $path_with_end_slash="" ) {
//usage: if( substr( $img_src, 0, 5 ) === "data:" ) { $filename=save_base64_image($base64_image_string, $output_file_without_extentnion, getcwd() . "/application/assets/pins/$user_id/"); }
//
//data is like: data:image/png;base64,asdfasdfasdf
$splited = explode(',', substr( $base64_image_string , 5 ) , 2);
$mime=$splited[0];
$data=$splited[1];
$mime_split_without_base64=explode(';', $mime,2);
$mime_split=explode('/', $mime_split_without_base64[0],2);
if(count($mime_split)==2)
{
$extension=$mime_split[1];
if($extension=='jpeg')$extension='jpg';
//if($extension=='javascript')$extension='js';
//if($extension=='text')$extension='txt';
$output_file_with_extentnion.=$output_file_without_extentnion.'.'.$extension;
}
if(file_exists($output_file_with_extentnion)) {
return null;
} else {
file_put_contents( $path_with_end_slash . $output_file_with_extentnion, base64_decode($data) );
return $output_file_with_extentnion;
}
}
function print_json($status, $mensaje, $data) {
header("HTTP/1.1 $status $mensaje");
header("Content-Type: application/json; charset=UTF-8");
$response['statusCode'] = $status;
$response['statusMessage'] = $mensaje;
$response['data'] = $data;
echo json_encode($response, JSON_PRETTY_PRINT);
}
?></code></pre>
<h6>
<b>index.html</b></h6>
Esta sera la pagina principal, donde se encuentra toda la interaccion con el usuario, y donde se embeden todos los archivos necesarios para el funcionamiento.
<br />
<br />
<br />
<pre><code><!DOCTYPE html>
<html lang="es" ng-app="crud" >
<head>
<meta charset="UTF-8">
<title>Rest API Visual Client</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Incluimos el CND de Materialize CSS -->
<link rel="stylesheet" href="css/materialize.min.css">
<!-- Nuestro CSS personalizado -->
<link rel="stylesheet" href="css/custom.css">
<!-- Incluimos el CND de AngularJS -->
<script src="js/angular.min.js"></script>
<!-- Incluimos el CND de la libreria jQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body class="container" ng-controller="mainCtrl">
<div class="row">
<div class="col s12">
<h1>{{message}}</h1>
<p>{{subtitle}}</p>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="row">
<div class="col s12">
<h6><small>Solo JPG, PNG, GIF</small></h6>
<input id="inputFileToLoad" type="file"/>
<button class="btn" ng-click="encodeImageFileAsURL()">Subir</button>
</div>
<div class="col s12">
<div id="imgCont">
<img ng-click="cargarImagen('upload/' + x)" ng-repeat="x in imagenes" src="upload/{{x}}" title="{{x}}" alt="{{x}}">
</div>
</div>
<div class="input-field col s12">
<input id="Link" type="text" placeholder="Enlace directo" class="validate" readonly ng-value="enlaces.link" ng-model="enlaces.link">
</div>
<div class="input-field col s12">
<input id="HTML" type="text" class="validate" placeholder="Codigo HTML" readonly ng-value="enlaces.html" ng-model="enlaces.html">
</div>
<div class="input-field col s12">
<input id="Forum" type="text" class="validate" placeholder="Codigo para foros" readonly ng-value="enlaces.foros" ng-model="enlaces.foros">
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div id="imgTest" class="center-align">
<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Esperando imagen</p>
<img id="imagen" width="100%" alt="">
</div>
</div>
</div>
<!-- Nuestro codigo JavaScript personal -->
<script src="js/custom.js"></script>
<!-- Incluimos el CND de Materialize JS -->
<script src="js/materialize.min.js"></script>
</body>
</html></code></pre>
<br />
Esto es todo, para entender mejor, les voy a dejar una demo y el link de descarga en <a href="https://github.com/aimtone/Image-Server-REST-API" target="_blank">Github</a> para que lo tengan en su computador<br />
<br />
<a class="btn waves-effect" href="http://frikibloggeo.esy.es/imageserver">Demo</a> <a class="btn waves-effect" href="https://github.com/aimtone/Image-Server-REST-API/archive/master.zip">Descargar</a>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com4tag:blogger.com,1999:blog-4896967509905126258.post-79786401401249363172017-01-08T23:07:00.000-03:002018-07-12T14:30:43.202-04:00Consumir un Web Services API Rest con AngularJS<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SEUo6S_4kghlXtPZ1hZYkPa9vTDxwWgFAofZQbAbd2dwqdV-OyqOSRrqtG_uz-zk0rjVGRTOe15UHYtc08ZZS3Hv2M4eIffG9O7bmABBdYHYKCyIeqajAj0CfDO-R8WP_kmqswQbRjY/s1600/API-Using-PHP.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SEUo6S_4kghlXtPZ1hZYkPa9vTDxwWgFAofZQbAbd2dwqdV-OyqOSRrqtG_uz-zk0rjVGRTOe15UHYtc08ZZS3Hv2M4eIffG9O7bmABBdYHYKCyIeqajAj0CfDO-R8WP_kmqswQbRjY/s640/API-Using-PHP.jpg" width="640" /></a></div>
<blockquote class="tr_bq">
<br />
<h5>Actualización <small>12 de Julio de 2018</small></h5>
<p>En vista de que algunas personas me comentaron que no funcionaba este tutorial en Windows, quiero aclarar que cuando lo realice, lo trabaje en Ubuntu, distribución GNU/Linux, por lo tanto, no me di cuenta de los errores que pudiera generar en Windows, esto ha sido corregido, y el código ha sido actualizado para funcionar en cualquier plataforma.</p>
</blockquote>
Como lo prometido es deuda y quiero saldar esta deuda con ustedes, ayer mas o menos a esta misma hora hice publica una entrada sobre como <a href="http://frikibloggeo.blogspot.com/2017/01/crear-un-web-service-api-rest-con-php-y.html">Crear un Web Service API Rest con PHP y MySQL</a> en el que prometí traer pronto como consumir dicho servicio y he aquí el tutorial, por eso, si no has visto el tutorial anterior, te recomiendo leerlo antes de empezar con este, créeme, tendrás una mejor comprensión del mismo y así vamos al ritmo.<br />
<br />
Tal cual mencione el dia de ayer, los API Rest o Web Service no son mas que archivos en formato JSON (JavaScript Object Notation) o XML (eXtended Markup Language) que nos sirven información con respecto a una entidad en una base de datos haciendo uso de los métodos HTTP (GET, POST, PUT y DELETE), justo ayer, hacíamos las pruebas básicas del API Rest creado con la aplicación de tipo extensión de Chrome Insomnia, pero, eso es solo para efectos de pruebas, valga la redundancia.<br />
<br />
Los Web Service API Rest son usualmente consumidos desde JavaScript en el cliente, usando librerías como jQuery o el framework AngularJS, por efectos de facilidad y ademas, de visibilidad, usare AngularJS en este tutorial específicamente.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2OE6JsXGJwUfiu23fJIwjHqiLTNtj-02MfuKmnBQGE5eDAaJg_QQsYr30um0Fxg_h2MDCHUcm7ypar7u_W2ZGEgv7QFagUVdlznLM0LBm_2q2bONwmCNOKbmOmmdDCTtyYl0LBA75PI/s1600/screencapture-localhost-api-1483930147073+%25281%2529.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2OE6JsXGJwUfiu23fJIwjHqiLTNtj-02MfuKmnBQGE5eDAaJg_QQsYr30um0Fxg_h2MDCHUcm7ypar7u_W2ZGEgv7QFagUVdlznLM0LBm_2q2bONwmCNOKbmOmmdDCTtyYl0LBA75PI/s640/screencapture-localhost-api-1483930147073+%25281%2529.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Aspecto de nuestro API Rest Visual Client</td></tr>
</tbody></table>
<br />
<br />
Ahora, recordemos la estructura que llevabamos anteriormente, donde teniamos completado el Web Service<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQDDYmP6p53uHRUCPN9Rs2e6AS1VFYtDKpMC2yD22AYwkGlDniaP40x0wOJqckySXQLbIl9EPC0ofAporYYeOey-JWk4vKVrsKNAcN5HKzlkyWADGjSDQdF4R65pKL6fFzLCtDleiIsLY/s1600/Captura+de+pantalla+de+2017-01-07+21%253A20%253A13.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQDDYmP6p53uHRUCPN9Rs2e6AS1VFYtDKpMC2yD22AYwkGlDniaP40x0wOJqckySXQLbIl9EPC0ofAporYYeOey-JWk4vKVrsKNAcN5HKzlkyWADGjSDQdF4R65pKL6fFzLCtDleiIsLY/s1600/Captura+de+pantalla+de+2017-01-07+21%253A20%253A13.png" /></a></div>
Esta no es mas que la estructura básica del back-end donde podemos encontrar con los archivos de Web Services y que explique en el tutorial anterior.<br />
<br />
Habíamos quedado pendiente con los archivos de la carpeta public_html, donde podemos encontrar el archivo index.html que sera el archivo de nuestra pagina principal y su carpeta <i>parent</i> sera la carpeta del Front-end específicamente.<br />
<br />
Todo lo que este en la carpeta public_html pertenece única y exclusivamente a código estructura y maquetado del cliente, mientras que lo que este fuera de ella, pertenece al código que corre en el servidor, por lo tanto, hoy nos enfocaremos específicamente en dicha carpeta ya que haremos un cliente visual para el consumo del Web Services que realizamos previamente.<br />
<br />
Antes de comenzar, quiero acotar que voy a dejar todos los archivos del proyecto en un enlace para descargar al final, asi que no se preocupen, presten atencion al tutorial y luego, hacen lo que deseen con el codigo.<br />
<br />
Se ubican dentro de la carpeta public_html y crean el siguiente directorio<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOlEji6hSyl4rY5hmEGwIXFCHKbchs_C6QGJNh8wKKEL-HheX-nC70cOLlUbRHo3gfnus-pAAlR-OCXJ61xd67fiAzukpHN4uocHbDXZYJk3gcBW59sK5vJJmQjfId43FD05ocx0LyFww/s1600/Captura+de+pantalla+de+2017-01-08+22%253A10%253A46.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOlEji6hSyl4rY5hmEGwIXFCHKbchs_C6QGJNh8wKKEL-HheX-nC70cOLlUbRHo3gfnus-pAAlR-OCXJ61xd67fiAzukpHN4uocHbDXZYJk3gcBW59sK5vJJmQjfId43FD05ocx0LyFww/s1600/Captura+de+pantalla+de+2017-01-08+22%253A10%253A46.png" /></a></div>
Donde tenemos los archivos básicos de todo proyecto web.<br />
<br />
Es importante destacar, que ahora que tenemos mas archivos, lógicamente vamos a tener mas URL's a donde ir, entonces, antes de empezar, en el archivo .htaccess que ya tenemos creado, vamos a agregar las siguientes lineas para controlar estas direcciones<br />
<br />
<pre><code># Acortar URL
RewriteRule ^([a-zA-Z]+)/([a-zA-Z0-9-.]+)$ public_html/$1/$2
RewriteRule ^([a-zA-Z]+)/([a-zA-Z]+)/([a-zA-Z0-9-.]+)$ public_html/$1/$2/$3</code></pre>
<br />
Esto con el fin de que los usuarios comunes no puedan ver el ingresar directamente a la carpeta public_html desde su navegador si no que mas bien, nos genere una URL mas estilizada y amigable.<br />
<br />
Una vez realizado esto, empezamos a crear nuestro API Rest Visual Client (Como lo he llamado).<br />
<br />
Para empezar, en el archivo index pegaramos el siguiente codigo<br />
<br />
<br />
<h6>
<b>core/public_html/index.html</b></h6>
<br />
<pre><code><!DOCTYPE html>
<html lang="es" ng-app="crud" >
<head>
<meta charset="UTF-8">
<title>Rest API Visual Client</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Incluimos el CND de Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!-- Nuestro CSS personalizado -->
<link rel="stylesheet" href="css/custom.css">
<!-- Incluimos el CND de AngularJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<!-- Incluimos el CND de Angular Route -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<!-- Incluimos el CND de la libreria jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<nav>
<div class="nav-wrapper blue">
<a href="#!/" class="brand-logo">Friki Bloggeo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!/">Home</a></li>
<li><a href="#!/usuario">Usuario</a></li>
</ul>
</div>
</nav>
<div class="container">
<!-- ng-view renderiza nuestras views y las muestra en el index -->
<div ng-view></div>
</div>
<!-- Nuestro codigo JavaScript personal -->
<script src="js/custom.js"></script>
<!-- Incluimos el CND de Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>
</html></code></pre>
<br />
Al igual que el tutorial anterior, no hare mucho enfasis en explicar los codigos ya que los mismos estan documentados. Continuamos.<br />
<br />
Bien, hasta ahora tenemos solo nuestra pagina básica donde llamaremos las vistas o templates. Entonces, para continuar vamos a agregar los siguientes códigos a nuestros templates
<br />
<br />
<h6>
<b>core/public_html/templates/home.html</b></h6>
<br />
<pre><code>
<div class="row">
<div class="col s6">
<h1>{{message}}</h1>
<p>{{subtitle}}</p>
</div>
</div></code></pre>
<br />
<br />
<h6>
<b>core/public_html/templates/usuario.html</b></h6>
<br />
<pre><code>
<div class="row">
<div class="col s6">
<h1>{{message}}</h1>
<p>{{subtitle}}</p>
</div>
</div>
<div class="row">
<div class="col s4">
<form>
<div class="row">
<div class="input-field col s12">
<input required id="Usuario" type="text" class="validate" ng-value="nuevo.Usuario" ng-model="nuevo.Usuario">
<label for="Usuario">Usuario</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input required id="Clave" type="password" class="validate" ng-value="nuevo.Clave" ng-model="nuevo.Clave">
<label for="Clave">Clave</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input required id="Estatus" type="text" class="validate" ng-value="nuevo.Status" ng-model="nuevo.Status">
<label for="Estatus">Estatus</label>
</div>
</div>
<div class="row">
<div class="col-s4" ng-if="nuevo.Id == null">
<button class="btn waves-effect blue" ng-click="post()">Submit</button>
</div>
<div class="col-s4" ng-if="nuevo.Id != null">
<button class="btn waves-effect blue" ng-click="put(nuevo.Id)">Submit</button>
</div>
</div>
</form>
</div>
<div class="col s8">
<input type="text" ng-model="search" placeholder="Buscar">
<table class="highlight responsive-table">
<thead>
<tr>
<th>ID</th>
<th>Usuario</th>
<th>Clave</th>
<th>Estatus</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody ng-if="lista.length != null">
<tr ng-click="get(x.Id)" ng-repeat="x in lista | filter : search">
<td>{{x.Id}}</td>
<td>{{x.Usuario}}</td>
<td>{{x.Clave}}</td>
<td>{{x.Status}}</td>
<td><button class="btn btn-small waves-effect red" ng-click="delete(x.Id)">eliminar</button></td>
</tr>
</tbody>
<tbody ng-if="lista.length == null">
<tr>
<td colspan="4">No hay datos dispobibles</td>
</tr>
</tbody>
</table>
</div>
</div></code></pre>
<br />
Bien, nos restan tan solo dos archivos, el custom.css y custom.js los cuales contienen codigo personalizado, cada uno en su respectivo lenguaje, pero basicamente, custom.css es tu estilo personal asi que no hare ningun codigo para ello, continuamos con el siguiente archivo.
<br />
<h6>
<b>core/public_html/js/custom.js</b></h6>
<br />
<pre><code> var app = angular.module('crud',['ngRoute']);
// Configuracion de las rutas y sus respectivas plantillas
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'templates/home.html',
controller : 'mainCtrl'
})
.when('/usuario', {
templateUrl : 'templates/usuario.html',
controller : 'usuario'
})
});
// Controlador principal de nuestra pagina
app.controller('mainCtrl', function($scope) {
$scope.message = 'Friki Bloggeo';
$scope.subtitle = "Ejemplo de consumo de un API Rest con AngularJS";
});
// Controlador de la entidad Usuario donde se incluiran cada una de sus funciones
app.controller('usuario', function($scope,$http) {
$scope.message = 'Friki Bloggeo';
$scope.subtitle = "Gestion de Usuario";
// Al cargar la pagina, ejecutamos la funcion get() para rellenar la tabla
angular.element(document).ready(function () {
$scope.get("");
});
// La funcion get() que hace la solicitud para obtener los datos
$scope.get = function(id){
// Si la Id esta en blanco, entonces la solicitud es general
if(id=="") {
$http.get("api/usuario").then(function (response) {
$scope.lista = response.data.data;
Materialize.toast(response.data.statusMessage, 4000);
}, function(response) {
// Aqui va el codigo en caso de error
});
// Si la Id no esta en blanco, la solicitud se hace a un elemento especifico
} else {
$http.get("api/usuario/" + id).then(function (response) {
$scope.nuevo = response.data.data[0];
Materialize.toast(response.data.statusMessage, 4000);
}, function(response) {
// Aqui va el codigo en caso de error
});
}
}
// La funcion post() que hace la solicitud para publicar un nuevo elemento
$scope.post = function() {
$http.post("api/usuario", $scope.nuevo)
.then(function (response){
Materialize.toast(response.data.statusMessage, 4000);
$scope.nuevo = null;
$scope.get("");
},
function(response) {
// Aqui va el codigo en caso de error
});
}
// La funcion put() que hace la solicitud para modificar un elemento especifico
$scope.put = function(id) {
$http.put("api/usuario/" + id, $scope.nuevo)
.then(
function (response){
Materialize.toast(response.data.statusMessage, 4000);
$scope.nuevo = null;
$scope.get("");
},
function(response) {
// Aqui va el codigo en caso de error
});
}
// La funcion delete() que hace la solicitud para eliminar un elemeto esepecifico
$scope.delete = function(id) {
$http.delete("api/usuario/" + id)
.then(
function (response){
console.log(response);
Materialize.toast(response.data.statusMessage, 4000);
$scope.nuevo = null;
$scope.get("");
},
function (response){
// Aqui va el codigo en caso de error
}
);
}
});
</code></pre>
<br />
Con esto, ya tenemos listo nuestro cliente visual, y ya podremos empezar a crear cuantas templates o views deseemos para consumir cada tabla especifica. Ademas, dejo el archivo del proyecto (con archivos script locales) para su uso.<br />
<br />
<br />
<a class="btn waves-effect blue" href="http://frikibloggeo.esy.es/proyectos/api/#!/">Demo</a>
<a class="btn waves-effect blue" href="https://sites.google.com/site/anthonyjmedinaf/archivos/api_rest.zip">Descargar - 1.1 MB</a>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com6tag:blogger.com,1999:blog-4896967509905126258.post-56629263343552060412017-01-07T23:46:00.000-03:002018-08-26T13:51:09.521-03:00Crear un Web Service API Rest con PHP y MySQL<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD44QM1bowGHlxSDYaKUf4pJQf5esOZI0pj-BRg6asUY_RhWhq3PfAbSYtJ58E2Y-Guk8odoXxgtqwRs6Jb-3RqaeGvfkGlNYrJymRHrsKhpFSWTDX7roGHpw8MyI0cE2AoPOFq2HQWvk/s1600/API-Using-PHP.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD44QM1bowGHlxSDYaKUf4pJQf5esOZI0pj-BRg6asUY_RhWhq3PfAbSYtJ58E2Y-Guk8odoXxgtqwRs6Jb-3RqaeGvfkGlNYrJymRHrsKhpFSWTDX7roGHpw8MyI0cE2AoPOFq2HQWvk/s640/API-Using-PHP.jpg" width="640" /></a></div>
<br />
<blockquote class="tr_bq">
<br />
<h5>
Actualización <small>12 de Julio de 2018</small></h5>
En vista de que algunas personas me comentaron que no funcionaba este tutorial en Windows, quiero aclarar que cuando lo realice, lo trabaje en Ubuntu, distribución GNU/Linux, por lo tanto, no me di cuenta de los errores que pudiera generar en Windows, esto ha sido corregido, y el código ha sido actualizado para funcionar en cualquier plataforma.</blockquote>
Los API Rest son en la actualidad la nueva manera de trabajar los sistemas web, los mismos se encargan de servir la información que luego sera consumida por algún cliente, usualmente usando alguna librería JavaScript como <b>jQuery</b> o <b>AngularJS.</b><br />
<br />
Los Web Services no son mas que archivos en formato JSON que sirven los datos de una base de datos de una manera mas dinámica y apreciable, estos proporcionan las acciones que desde tiempo remotos trabajan las paginas web dinámicas, el tipo CRUD (Create-Read-Update-Delete) son ahora manejados de una forma mas sencilla usando un Web Services API Rest y los métodos HTTP.<br />
<br />
De seguro si, alguna vez al escuchado el típico método POST o Método GET, de los cuales haremos uso en este post, además de los no tan mencionados pero ya bastante conocidos método PUT y DELETE.<br />
<br />
<br />
Ahora, que necesitamos saber antes de empezar? Presentamos esta información sumamente importante antes de continuar creando el Web Services.<br />
<h4>
Métodos HTTP</h4>
<table class="striped">
<thead>
<tr>
<th>Método</th>
<th>Aplicaron</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">GET</td>
<td>GET /api/usuario</td>
<td>Obtiene todos los elementos de la entidad Usuario</td>
</tr>
<tr>
<td>GET /api/usuario/1</td>
<td>Obtiene el elemento con Id 1 de la entidad Usuario</td>
</tr>
<tr>
<td>POST</td>
<td>POST api/usuario</td>
<td>Publica un nuevo elemento de la entidad Usuario</td>
</tr>
<tr>
<td>PUT</td>
<td>PUT api/usuario/1</td>
<td>Modifica el elemento con Id 1 de la entidad Usuario</td>
</tr>
<tr>
<td>DELETE</td>
<td>DELETE api/usuario/1</td>
<td>Elimina el elemento con Id 1 de la entidad Usuario</td>
</tr>
</tbody>
</table>
<br />
<h4>
Códigos de Cabecera HTTP</h4>
Los códigos de cabecera HTTP definen el status actual de una pagina o documento con respecto a la solicitud realizada, de seguro que hemos visto el tipico error 404, en este tutorial haremos uso de los mostrados con posterioridad, sin embargo, te dejo este articulo de <a href="https://es.wikipedia.org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP">Wikipedia</a> que te ayudara a comprender mejor de que trata.
<br />
<br />
<table class="striped">
<thead>
<tr>
<th>Código</th>
<th>Definición</th>
<th>Uso o Aplicaron</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
<td>OK</td>
<td>Lo usaremos para cuando la solicitud se realiza correctamente, sin importar si su estatus es verdadero o falso</td>
</tr>
<tr>
<td>201</td>
<td>Created</td>
<td>Se aplicara cuando para cada entidad se cree un nuevo elemento</td>
</tr>
<tr>
<td>204</td>
<td>No Content</td>
<td>Se usara para cuando la entidad no tiene elementos</td>
</tr>
<tr>
<td>404</td>
<td>Not Found</td>
<td>Se usara para cuando se solicita un elemento que no existe en la base de datos</td>
</tr>
<tr>
<td>405</td>
<td>Method Not Allowed</td>
<td>Se usara por defecto para cuando el método solicitado no coincida con la URL o sea un método distinto a GET, POST, PUT y DELETE</td>
</tr>
</tbody>
</table>
<br />
<h4>
Postman o Insomnia</h4>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzPVihMBd814C6Lgops_jqw4oqOOoFg6bQ71M4AcXeKj3uepuE8jm8abCS33wc4y4guqA6Y5S7HIBtUjkLAPgr0LGz403wibGfs9eVCfES3dC9ZGUtcKudGtJacA-94t3zn-vbYZNZCeM/s1600/Captura+de+pantalla+de+2017-01-07+20%253A59%253A24.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzPVihMBd814C6Lgops_jqw4oqOOoFg6bQ71M4AcXeKj3uepuE8jm8abCS33wc4y4guqA6Y5S7HIBtUjkLAPgr0LGz403wibGfs9eVCfES3dC9ZGUtcKudGtJacA-94t3zn-vbYZNZCeM/s400/Captura+de+pantalla+de+2017-01-07+20%253A59%253A24.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Interfaz principal de Insomnia</td></tr>
</tbody></table>
Para efectos de prueba haremos uso de una extensión para Chrome como aplicacion, entre ellas podemos mencionar dos herramientas realmente muy amigables como <a href="https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop">Postman</a> o <a href="https://chrome.google.com/webstore/detail/insomnia-rest-client/gmodihnfibbjdecbanmpmbmeffnmloel">Insomnia</a>, yo en lo particular, sugiero el uso de Insomia. Recuerden que necesitamos hacer uso de los mismos ya que el navegador por defecto ejecuta solamente el metodo GET, para firefox, puedes hacer uso de la extensión <a href="https://addons.mozilla.org/es/firefox/addon/firebug/" target="_blank">Firebug</a>.<br />
<h4>
JSON y XML</h4>
Los estándares JSON y XML son con peculiaridad los lenguajes usados para servir datos desde un Web Services. Los lenguajes son equivalente, con la única diferencia de que su sintaxis tienen su particularidad. He aqui algunos ejemplos.
<br />
Ejemplo de JSON (JavaScript Object Notation)
<br />
<pre><code>
{
"statusCode": 200,
"statusMessage": "OK",
"data": [
{
"Id": "1",
"Usuario": "admin",
"Clave": "21232f297a57a5a74389",
"Status": "1"
}
]
}
</code></pre>
<br />
Ejemplo de XML (eXtended Markup Language)
<br />
<pre><code>
<?xml version="1.0" encoding="UTF-8" ?>
<statusCode>200</statusCode>
<statusMessage>OK</statusMessage>
<data>
<Id>1</Id>
<Usuario>admin</Usuario>
<Clave>21232f297a57a5a74389</Clave>
<Status>1</Status>
</data>
</code></pre>
<br />
Como podemos ver, de ambas formas se sirve la información correctamente, aunque para efectos del tutorial, haremos uso de JSON específicamente, ya que en resumen, es mucho mas legible que XML, aunque el uso del uno u otro es irrelevante.
<br />
<br />
No haré mucho énfasis en explicar el código para crear el Web Services ya que el código mismo esta documentado, esta sera el directorio de la aplicaron.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLoMOglOXaAiU2zL1qcmFNxvkRNDNkmGz2ITYqngmpluXZAvJrFipELSuHKs38AVyzekNI5pjZbsGWz9WaCeNjDnxEucY6M_mv598yfMSemhBqM5sYw81IGZDVDY-Awd9fz5nLFKbMgFc/s1600/Captura+de+pantalla+de+2017-01-07+21%253A20%253A13.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLoMOglOXaAiU2zL1qcmFNxvkRNDNkmGz2ITYqngmpluXZAvJrFipELSuHKs38AVyzekNI5pjZbsGWz9WaCeNjDnxEucY6M_mv598yfMSemhBqM5sYw81IGZDVDY-Awd9fz5nLFKbMgFc/s1600/Captura+de+pantalla+de+2017-01-07+21%253A20%253A13.png" /></a></div>
Crea el directorio tal cual ves en la imagen en tu servidor y agrega los siguientes códigos proporcionados a continuación<br />
<br />
Antes de empezar, vamos a nuestro PhpMyAdmin para crear nuestra base de datos, en mi caso, la llame Api, y ejecuta el siguiente código<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h6>
<b>api.sql</b></h6>
<pre><code>
CREATE TABLE IF NOT EXISTS `usuario` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`Usuario` varchar(20) NOT NULL,
`Clave` varchar(20) NOT NULL,
`Status` tinyint(20) NOT NULL,
PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
</code></pre>
<br />
<h6>
<b>core/config.php</b></h6>
<pre><code>
<?php
/*
* En este archivo se definiran la información de configuracion del API,
* variables, constantes y funciones requeridas para el resto de los archivos
*/
// Dirección del servidor de Base de datos
define("DB_HOST", "localhost");
// Nombre de usuario de Base de datos
define("DB_USER", "root");
// Clave de usuario de Base de datos
define("DB_PASS", "root");
// Nombre de la tabla sobre la cual se trabajara
define("DB_NAME", "api");
?>
</code></pre>
<br />
<h6>
<b>core/iModel.php</b></h6>
<pre><code>
<?php
// Declarar la interfaz 'iModel'
// Define cada una de las funciones que el model.php debe especificar
interface iModel
{
// GET : Solicitar un elemento
public function get();
// POST : Publicar un nuevo elemento
public function post();
// PUT: Modificar un elemento
public function put();
// DELETE: Eliminar un elemento
public function delete();
}
?>
</code></pre>
<br />
<h6>
<b>core/db_model.php</b></h6>
<pre><code>
<?php
// Incluimos el archivo de configuración el cual posee las credenciales de conexión
include 'config.php';
// Se crea la clase de conexión y ejecución de consultas
class db_model {
// Variable de conexion
public $conn;
// La función constructora crea y abre la conexión al momento de instanciar esta clase
function __construct() {
$this->conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); // Los parametros de la funcion mysqli() son las constantes previamente declaradas en el archivo config.php
}
// Funcion para obtener un array de resultados
// Solo se usara para las consultas de tipo SELECT
function get_query($sql) {
// Lee la cadena SQL recibida y ejecuta la consulta
$result = $this->conn->query($sql);
// Hace el rrecorrido por el array de datos y lo guarda en la variable $rows
while ($rows[] = $result->fetch_assoc());
// Cierra la consulta
$result->close();
// Retorna el resultado obtenido
return $rows;
}
// Funcion para hacer cambios dentro de la base de datos
// Solo se usara para las consultas de tipo INSERT, UPDATE Y DELETE
function set_query($sql) {
// Lee la cadena SQL recibida y ejecuta la consulta
$result = $this->conn->query($sql);
// Retorna el resultado
return $result;
}
// La función destructora cierra la conexión previamente abierta en el constructor
function __destruct() {
$this->conn->close();
}
}
?>
</code></pre>
<br />
<h6>
<b>model.php</b></h6>
<pre><code>
<?php
// Se incluye el archivo de conexion de base de datos
include 'core/db_model.php';
// Se incluye la interfaz de Modelo
include 'core/iModel.php';
// Se crea la clase que ejecuta llama a las funciones de ejecución para interactuar con la Base de datos
// Esta clase extiende a la clase db_model en el archivo db_model.php (hereda sus propiedades y metodos)
// Esta clase implementa la interfaz iModel (Enmascara cada una de las funciones declaradas)
class generic_class extends db_model implements iModel {
// Ya que la clase es generica, es importante poseer una variable que permitira identificar con que tabla se trabaja
public $entity;
// Almacena la informacion que sera enviada a la Base de datos
public $data;
// Esta funcion se activara al utilizar el metodo GET
// Envia por defecto el parametro Id cuyo valor sera 0 hasta que se modifique
function get($id = 0) {
/*
* Si el valor del parametro Id es igual a 0, se solicitaran todos los elementos
* ya que no se ha solicitado un elemento especifico
*/
if($id == 0) {
return $this->get_query(sprintf("
SELECT
*
FROM
%s",
$this->entity
)
);
// Si el valor del parametro Id es diferente a 0, se solicitara solo y unicamente el elemento cuyo Id sea igual al parametro recibido
} else {
return $this->get_query(sprintf("
SELECT
*
FROM
%s
WHERE
Id = %d",
$this->entity,
$id
)
);
}
}
// Esta funcion sera llamada al momento de usar el metodo POST
function post() {
return $this->set_query(sprintf("
INSERT INTO
%s
%s",
$this->entity,
$this->data
)
);
}
// Esta funcion sera llamada al momento de usar el metodo PUT
function put() {
return $this->set_query(sprintf("
UPDATE
%s
SET
%s
WHERE
Id = %d",
$this->entity,
$this->data,
$this->Id
)
);
}
// Esta funcion sera llamada al momento de usar el metodo DELETE
function delete() {
return $this->set_query(sprintf("
DELETE FROM
%s
WHERE
Id = %d",
$this->entity,
$this->Id
)
);
}
}
?>
</code></pre>
<br />
<h6>
<b>controller.php</b></h6>
<pre><code>
<?php
// Permite la conexion desde cualquier origen
header("Access-Control-Allow-Origin: *");
// Permite la ejecucion de los metodos
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
// Se incluye el archivo que contiene la clase generica
include 'model.php';
// Se toma la URL solicitada y se guarda en un array de datos
// Por ejemplo si la URL solicitada es http://localhost/api/usuario
// $_SERVER['REQUEST_URI'] imprime "/api/usuario"
// La funcion explode() crea un array de la URL de la siguiente forma
/*
Array
(
[0] =>
[1] => api
[2] => usuario
)
*/
// Por ejemplo si la URL solicitada es http://localhost/api/usuario/1
// $_SERVER['REQUEST_URI'] imprime "/api/usuario/1"
// La funcion explode() crea un array de la URL de la siguiente forma
/*
Array
(
[0] =>
[1] => api
[2] => usuario
[3] => 1
)
*/
// Esto nos ayuda a identificar cuando se esta solicitando la URL general o un elemento especifico
$array = explode("/", $_SERVER['REQUEST_URI']);
// Obtener el cuerpo de la solicitud HTTP
// En nuestro caso, el cuerpo solo sera enviado en peticiones de tipo POST y PUT, en el cual enviaremos el objeto JSON a registrar o modificar
$bodyRequest = file_get_contents("php://input");
/* Este ciclo rrecorre el array previamente creado y si hay algun valor en blanco lo elimina del array
Esto con el fin de controlar cuando la URL se enviar en estilo http://localhost/api/usuario/
Si bien, se esta haciendo uso del "/" al final, no se esta enviando ningun parametro de Id
Sin embargo, el array se crea de la siguiente forma
Array
(
[0] =>
[1] => api
[2] => usuario
[3] =>
)
Ya que la ultima pocision esta vacia, si lo permitieramos asi, nos arrojaria un error ya que no haria la
Solicitud de manera correcta con un dato que esta vacio, por lo que si la URL es enviada del forma, se asume
que se esta realizando una solicitud general al estilo http://localhost/api/usuario
*/
foreach ($array as $key => $value) {
if(empty($value)) {
unset($array[$key]);
}
}
/* Analiza la ultima pocision del array creado previamente, si el valor analizado es mayor que 0
significa que el caracter enviado es un numero, por lo tanto, reconocemos que la solicitud se esta
haciendo a un Id especifico de tipo http://localhost/api/usuario/1, pero de no ser mayor que 0, reconocemos que el ultimo elemento del array
es solo el nombre de la entidad, por lo tanto, reconocemos que se esta haciendo una solicitud general
de tipo http://localhost/api/usuario
*/
if(end($array)>0) {
// De ser el valor numerico, crea dos variables que contienen el Id solicitado y la entidad solicitada
$id = $array[count($array)];
$entity = $array[count($array) - 1];
} else {
// De ser el valor de tipo string, solo crea la variable de la entidad solicitada
$entity = $array[count($array)];
}
// Variable que guarda la instancia de la clase generica
$obj = get_obj();
// Se pasa a la entidad el valor de la entidad con la que actualmente se esta trabajando
$obj->entity = $entity;
// Analiza el metodo usado actualmente de los cuatro disponibles: GET, POST, PUT, DELETE
switch ($_SERVER['REQUEST_METHOD']) {
case 'GET':
// Acciones del Metodo GET
// Si la variable Id existe, solicita al modelo el elemento especifico
if(isset($id)) {
$data = $obj->get($id);
// Si no existe, solicita todos los elementos
} else {
$data = $obj->get();
}
// Elimina el ultimo elemento del array $data, ya que usualmente, suele traer dos elementos, uno con la informacion, y otro NULL el cual no necesitamos
array_pop($data);
// Si la cantidad de elementos que trae el array de $data es igual a 0 entra en este condicional
if(count($data)==0) {
// Si la variable Id existe pero el array de $data no arroja resultado, significa que elemento no existe
if(isset($id)) {
print_json(404, "Not Found", null);
// Pero si la variable Id existe y no trae $data, ya que no buscamos un elemento especifico, significa que la entidad no tiene elementos que msotrar
} else {
print_json(204, "Not Content", null);
}
// Si la cantidad de elementos del array de $data es mayor que 0 entra en este condicional
} else {
// Imprime la informacion solicitada
print_json(200, "OK", $data);
}
break;
case 'POST':
// Acciones del Metodo POST
/* Analiza si existe la variable Id, ya que la URL solicita por POST solo puede ser de estilo
http://localhost/api/usuario no habria por que existir un Id ya que se esta registrando un
nuevo elemento y el Id es autogenerado, si el Id no existe, entra en esta condicional */
if(!isset($id)) {
// Decodifica el cuerpo de la solicitud y lo guarda en un array de PHP
$array = json_decode($bodyRequest, true);
// Renderiza la informacion obtenida que luego sera guardada en la Base de datos
$obj->data = renderizeData(array_keys($array), array_values($array));
// Ejecuta la funcion post() que se encuentra en la clase generica
$data = $obj->post();
// Si la respuesta es correcta o es igual a true entra en este condicional
if($data) {
// Si la Id generada es diferente de 0 se creo el elemento y entra aqui
if($obj->conn->insert_id != 0) {
// Se consulta la Id autogenerada para hacer un callBack
$data = $obj->get($obj->conn->insert_id);
// Si la variable $data es igual a 0, significa que el elemento no ha sido creado como se suponia
if(count($data)==0) {
print_json(201, false, null);
// Si la variable $data es diferente de 0, el elemento ha sido creado y manda la siguiente respuesta
} else {
array_pop($data);
print_json(201, "Created", $data);
}
// Si el Id generada es igual a 0, el elemento no ha sido creado y manda la siguiente respuesta
} else {
print_json(201, false, null);
}
// Si la respuesta es false, se supone que el elemento no ha sido registrado, y entra en este condicional
} else {
print_json(201, false, null);
}
// En tal caso de que exista la variable Id, imprimira el mensaje del que el metodo solicitado no es correcto
} else {
print_json(405, "Method Not Allowed", null);
}
break;
case 'PUT':
// Acciones del Metodo PUT
if(isset($id)) {
// Consulta primeramente que en realidad exista un elemeto con el Id antes de modificar
$info = $obj->get($id);
array_pop($info);
// Si la info recibida es diferente de 0, el elemento existe, por lo tanto procede a modificar
if(count($info)!=0) {
$array = json_decode($bodyRequest, true);
$obj->data = renderizeData(array_keys($array), array_values($array));
$obj->Id = $id;
$data = $obj->put();
if($data) {
$data = $obj->get($id);
if(count($data)==0) {
print_json(200, false, null);
} else {
array_pop($data);
print_json(200, "OK", $data);
}
} else {
print_json(200, false, null);
}
// Si la info recibida es igual a 0, el elemento no existe y no hay nada para modificar
} else {
print_json(404, "Not Found", null);
}
} else {
print_json(405, "Method Not Allowed", null);
}
break;
case 'DELETE':
if(isset($id)) {
$info = $obj->get($id);
if(count($info)==0) {
print_json(404, "Not Found", null);
} else {
$obj->Id = $id;
$data = $obj->delete();
if($data) {
array_pop($info);
if(count($info)==0) {
print_json(404, "Not Found", null);
} else {
print_json(200, "OK", $info);
}
} else {
print_json(200, false, null);
}
}
} else {
print_json(405, "Method Not Allowed", null);
}
break;
default:
// Acciones cuando el metodo no se permite
// En caso de que el Metodo Solicitado no sea ninguno de los cuatro disponible, envia la siguiente respuesta
print_json(405, "Method Not Allowed", null);
break;
}
// ---------------------- Funciones controladoras ------------------------------- //
// Esta funcion crea la instancia de la clase generica y la retorna
function get_obj() {
$object = new generic_class;
return $object;
}
// Esta funcion renderiza la informacion que sera enviada a la base de datos
function renderizeData($keys, $values) {
$str = "";
switch ($_SERVER['REQUEST_METHOD']) {
case 'POST':
# code...
foreach ($keys as $key => $value) {
if($key == count($keys) - 1) {
$str = $str . $value . ") VALUES (";
foreach ($values as $key => $value) {
if($key == count($values) - 1) {
$str = $str . "'" . $value . "')";
} else {
$str = $str . "'" . $value . "',";
}
}
} else {
if($key == 0) {
$str = $str . "(" . $value . ",";
} else {
$str = $str . $value . ",";
}
}
}
return $str;
break;
case 'PUT':
foreach ($keys as $key => $value) {
if($key == count($keys) - 1) {
$str = $str . $value . "='" . $values[$key] . "'";
} else {
$str = $str . $value . "='" . $values[$key] . "',";
}
}
return $str;
break;
}
}
// Esta funcion imprime las respuesta en estilo JSON y establece los estatus de la cebeceras HTTP
function print_json($status, $mensaje, $data) {
header("HTTP/1.1 $status $mensaje");
header("Content-Type: application/json; charset=UTF-8");
$response['statusCode'] = $status;
$response['statusMessage'] = $mensaje;
$response['data'] = $data;
echo json_encode($response, JSON_PRETTY_PRINT);
}
?>
</code></pre>
<br />
<h6>
<b>.htaccess</b></h6>
Ahora, solo nos queda modificar el archivo .htaccess para poder acceder a las URL sin errores, recuerden que para que esto funcione, el mod_rewrite de Apache debe estar activado, de otra manera, todo el trabajo que has hecho, no serviría de nada.
<br />
<pre><code>
# Se establece la ruta como el archivo principal o pagina principal
DirectoryIndex public_html/index.html
RewriteEngine On
# Para metodo GET, POST, PUT
RewriteRule ^api/([a-zA-Z]+)$ controller.php
RewriteRule ^api/([a-zA-Z]+)/$ controller.php
# Para metodo GET por Id y metodo DELETE
RewriteRule ^api/([a-zA-Z]+)/([0-9]+)$ controller.php
RewriteRule ^api/([a-zA-Z]+)/([0-9]+)/$ controller.php
# Expresiones regulares
## Alfanumericos | ([a-zA-Z0-9]+)
## Numericos | ([0-9]+)
## Caracteres | ([a-zA-Z]+)
</code></pre>
<br />
<h4>
Probando el Web Service</h4>
Como ya habiamos mencionado, probaremos el Web Services con la Extension Insomnia de Chrome, lo cual nos otorgara los siguiente resultados<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQoY9sQfs7hq9qE9aC-U_C982LG4-HIra_0qvB10D_V4GWGqx9ICre0s0YqkGlIHTimN0NXua_KrTNInXlzpJlMNQ7we6mzbdXrivABLmxbWGIxDGiwKgltMeASrJOLYMZ2oZZzU4mrcc/s1600/Captura+de+pantalla+de+2017-01-07+22%253A53%253A40.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQoY9sQfs7hq9qE9aC-U_C982LG4-HIra_0qvB10D_V4GWGqx9ICre0s0YqkGlIHTimN0NXua_KrTNInXlzpJlMNQ7we6mzbdXrivABLmxbWGIxDGiwKgltMeASrJOLYMZ2oZZzU4mrcc/s640/Captura+de+pantalla+de+2017-01-07+22%253A53%253A40.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">GET api/usuario</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5V5xVrFVZemB4Si-BpENMIqQJ-zV2kHTxaHebfjwJ5hzaqEDmQ5ovtkJ_Rh99wGjXykxuOYIYvCuvAiwf2CsttyN8Cmx_GvzYbbekgQDI2z3qt030pc9XxzXd0Ilwd57TEzK09IcDCGw/s1600/Captura+de+pantalla+de+2017-01-07+22%253A54%253A30.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5V5xVrFVZemB4Si-BpENMIqQJ-zV2kHTxaHebfjwJ5hzaqEDmQ5ovtkJ_Rh99wGjXykxuOYIYvCuvAiwf2CsttyN8Cmx_GvzYbbekgQDI2z3qt030pc9XxzXd0Ilwd57TEzK09IcDCGw/s640/Captura+de+pantalla+de+2017-01-07+22%253A54%253A30.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">POST api/usuario</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil__24iMzN-i2C39KdDob8s4XMMkQYJPtcyww70HzLVVD0xEXunm6fk4UqeNpoddhy3Ryn32AZcVtroHSFfm2DEoUneodlljWJoMi8nszSSyZoaTZ2A7mdpnIYPDlcPY99RlhslH4Pc9A/s1600/Captura+de+pantalla+de+2017-01-07+22%253A54%253A49.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil__24iMzN-i2C39KdDob8s4XMMkQYJPtcyww70HzLVVD0xEXunm6fk4UqeNpoddhy3Ryn32AZcVtroHSFfm2DEoUneodlljWJoMi8nszSSyZoaTZ2A7mdpnIYPDlcPY99RlhslH4Pc9A/s640/Captura+de+pantalla+de+2017-01-07+22%253A54%253A49.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">GET api/usuario</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI_w1yIPjCXOoy0SyUYYFGGgUT9udUYWomoA6h4BKVrYy_4P3PJ7jer-Ky88HtuYwadYs3qpCWkzAogCMBEYCT6LoIRAwFTsST1pJVaWr27O9r0nenc6nwnPlCoSt5V3kxgF3WlMlHQBk/s1600/Captura+de+pantalla+de+2017-01-07+22%253A54%253A57.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI_w1yIPjCXOoy0SyUYYFGGgUT9udUYWomoA6h4BKVrYy_4P3PJ7jer-Ky88HtuYwadYs3qpCWkzAogCMBEYCT6LoIRAwFTsST1pJVaWr27O9r0nenc6nwnPlCoSt5V3kxgF3WlMlHQBk/s640/Captura+de+pantalla+de+2017-01-07+22%253A54%253A57.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">GET api/usuario/7</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEafH4dMh1ZUlj8IEQv6uAq7TQcECk6Qw0QYGj6r9YAlaV9ZRgWgbHkKwDMZDyiQFGccFBBhVwGcP-CMqDSSctDzbIMaVQhXAgoRNi0PyBol_H1Kxg5cGKeOwxKtVR8NMCaxIH8P8JFYI/s1600/Captura+de+pantalla+de+2017-01-07+22%253A55%253A37.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEafH4dMh1ZUlj8IEQv6uAq7TQcECk6Qw0QYGj6r9YAlaV9ZRgWgbHkKwDMZDyiQFGccFBBhVwGcP-CMqDSSctDzbIMaVQhXAgoRNi0PyBol_H1Kxg5cGKeOwxKtVR8NMCaxIH8P8JFYI/s640/Captura+de+pantalla+de+2017-01-07+22%253A55%253A37.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">PUT api/usuario/7</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbRK-B-296weUJ6bFv-EH5Uk4_YsEET-fGqHnJO-FwNO7g_ew1iSzRZq8lDAWQ_AnDrw2sO-5SJrPd5bT8EKjJceuYYbEoAFfmfCUxCfrAfc2voT6e0qMPn5Icdq39jPFrIb4U1ml2bpM/s1600/Captura+de+pantalla+de+2017-01-07+22%253A56%253A06.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbRK-B-296weUJ6bFv-EH5Uk4_YsEET-fGqHnJO-FwNO7g_ew1iSzRZq8lDAWQ_AnDrw2sO-5SJrPd5bT8EKjJceuYYbEoAFfmfCUxCfrAfc2voT6e0qMPn5Icdq39jPFrIb4U1ml2bpM/s640/Captura+de+pantalla+de+2017-01-07+22%253A56%253A06.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DELETE api/usuario/1</td></tr>
</tbody></table>
Luego de crear este Web Services, puedes crear cuantas tablas en la base de datos desees, y en la URL solo debes cambiar el nombre de la entidad por el nombre de la tabla en la base de datos. Olvidaba mencionarle que el archivo index.html dentro de la carpeta public_html sera la pagina principal del proyecto, en donde crearemos en front-end del mismo y donde se haran las solicitudes HTTP mediante el uso de la Librería jQuery o AngularJS.
Estén atentos que hare una segunda parte de este tutorial explicando como consumir un API RestFul desde el cliente con JavaScript.
<br />
<br />
<a class="btn waves-effect" href="http://frikibloggeo.esy.es/proyectos/api/api/usuario">Demo</a>
<br />
<br />
Segunda Parte: <a href="http://frikibloggeo.blogspot.com/2017/01/consumir-un-web-services-api-rest-con.html" target="_blank">Consumir un Web Services API Rest con AngularJS</a>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com6tag:blogger.com,1999:blog-4896967509905126258.post-89815991339109423142017-01-02T19:18:00.001-03:002017-01-08T00:04:51.910-03:00Incluir contenido de un archivo JSON con Ajax de JQuery<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqeZ1kwGLdg8jjs9Lm-RDIYkmkmdQ82Fewpl0lfAjZfH-STJO8iUWzG6-BZstjMrnZYyJUNoU6yQm4qhNuTJAyKFNY11P-TZgZNRoxSbKRnR8IkDHHkRTXhYiVtHyZiwLtSo-l9j0MqPc/s1600/JSON-mini.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqeZ1kwGLdg8jjs9Lm-RDIYkmkmdQ82Fewpl0lfAjZfH-STJO8iUWzG6-BZstjMrnZYyJUNoU6yQm4qhNuTJAyKFNY11P-TZgZNRoxSbKRnR8IkDHHkRTXhYiVtHyZiwLtSo-l9j0MqPc/s640/JSON-mini.jpg" width="640" /></a></div>
<br />
Ahora que esta de moda las API Rest en todo el medio de la Internet, es necesario innovar, y es que en eso pasamos nuestra vida los programadores, innovando e innovando, y como no ser así, si nuestra carrera en eso consiste. Las API Rest si no han escuchado antes el termino son un método de programacion que despeja por completo la relacion que hay entre un servidor y el cliente, llamese navegador.
<br />
<br />
Aunque este es un tema mas profundo y del cual hablare mas completo en una entrada futura, hoy solo quiero mencionar y enseñarles como mostrar datos de un Archivo JSON en una pagina común, mediante el uso de Ajax de jQuery para la funcionalidad asincrona que requiere este estilo de programacion.
<br />
<br />
A continuación, vamos a crear esta simple estructura para empezar nuestro proyecto.
<br />
<pre><code>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="row">
<div class="row col s12">
<div id="post">
</div>
</div>
</div>
<!-- Agregamos la libreria de jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</body>
</html>
</code></pre>
<br />
Este es el código básico que necesitamos para empezar, pero aun no tenemos nada, antes que nada debemos añadir la función que cargara las entradas, pero de donde?
<br />
Crearemos un archivo JSON, yo lo voy a llamar <b>file.json</b> y tendrá la siguiente estructura
<br />
<br />
<pre><code>[
{
"Titulo" : "Conociendo sobre los efectos de transiciones CSS3",
"Categoria" : "CSS",
"Fecha" : "03-01-2017",
"Hora" : "14:55",
"Permalink" : "https://frikibloggeo.blogspot.com/2017/01/conociendo-sobre-los-efectos-de.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est ipsam nesciunt? Inventore distinctio hic iusto totam officia sed, veniam eum corporis, repellendus repudiandae, debitis voluptas quos, alias neque porro?"
},
{
"Titulo" : "Menu contextual sencillo con HTML5, CSS3 y JavaScript (jQuery)",
"Categoria" : "JavaScript",
"Fecha" : "25-12-2015",
"Hora" : "17:06",
"Permalink" : "https://frikibloggeo.blogspot.com/2015/12/menu-contextual-sencillo-con-html5-css3.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas illo esse animi adipisci quia non tempore vero. Voluptatibus modi nesciunt ducimus quibusdam rerum, fugiat quo mollitia facilis, qui quidem veritatis."
},
{
"Titulo" : "Crear tu propio sistema de comentarios con MySQL y PHP",
"Categoria" : "PHP",
"Fecha" : "09-06-2016",
"Hora" : "14:14",
"Permalink" : "https://frikibloggeo.blogspot.com/2014/06/crear-tu-propio-sistema-de-comentarios.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quas, ea, recusandae laudantium non dolor ad repellat commodi sint? Fugit, voluptas minus aspernatur iste eius atque aliquid recusandae magnam, sunt."
}
]<code></code></code></pre>
<br />
Como ya habrás podido notar, un JSON no es mas que un array estructurado mediante un estandar establecido que se puede leer de una manera mas sencilla que cualquier array convencional en cualquier lenguaje, particularmente, en el ejemplo, tenemos un array de JSON cuya longitud presenta 3 objetos, los cuales contienen cierta información sobre entradas de un blog cualquiera como son el titulo, fecha, hora, etc.<br />
<br />
Si bien, mirar y leer datos de un archivo JSON ya es humanamente legible por decirlo de alguna manera, no es todavía suficientemente humanamente legible, por el uso de corchetes, comas, llaves, puntos, comillas, etc. Y es que JSON no ha sido creado para ser leído por humanos, ha sido creado para ser consumido por humanos mediante el uso de herramientas con jQuery, AngularJS, PHP, entre muchos otros frameworks y lenguajes.
<br />
<br />
Ahora, que hacemos con este pedazo de JSON?<br />
<br />
Bien, a la estructura HTML anteriormente creada, justo debajo de la CDN de jQuery, pegamos el siguiente codigo <br />
<pre><code>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "file.json",
type: "GET",
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function() {
$('#post').html("Cargando post, por favor, espere");
},
success: function(response) {
$('#post').html("");
$.each(response, function(i, post) {
$('#post').append(
"<h5 class='row col s12'><a href='"+post.Permalink+"'>"+post.Titulo+"</a></h5>"
+ "<div class='meta row col s6'>"
+ "<span class='chip'>Autor: <b>"+post.Autor+"</b></span>"
+ "<span class='chip'>Fecha: <b>"+post.Fecha+"</b></span>"
+ "<span class='chip'>Hora: <b>"+post.Hora+"</b></span>"
+ "<span class='chip'>Categoria: <b>"+post.Categoria+"</b></span>"
+ "</div>"
+ "<p class='row col s12'>"+post.Contenido+"</p>"
);
});
}
});
});
</script>
</code></pre>
<br />
Donde podemos observar, tenemos un script cuyo ejecución es realizada al iniciar la pagina mediante el uso de la función <span style="font-family: "courier new" , "courier" , monospace;">$('document').ready();</span> de jQuery, dentro de ella llamamos a la función <span style="font-family: "courier new" , "courier" , monospace;">$.ajax();</span>, la cual nos hace un llamado a nuestro archivo JSON que anteriormente creamos, enviando una serie de parámetros necesarios para la lectura del mismo, una vez hecho el llamado, la función <span style="font-family: "courier new" , "courier" , monospace;">success</span> de jQuery imprime el <b>callback</b> de la manera mas humanamente legible dentro de nuestro documento HTML.<br />
<br />
Que tenemos hasta ahora?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0O6jzPJLHCR8M5uo4mYzctbRs_Vj0kNYMZI9hcX1nMwvHCEvLJLf5DaVm2LP400IA3P9hksCO2SpYODytYT8Np3H6GUO1mUjIq-RR_HzGQNezKOYV9ZOl05gRjQ8cCXiaUxtFi2_Aos/s1600/Captura+de+pantalla+de+2017-01-02+18%253A35%253A00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0O6jzPJLHCR8M5uo4mYzctbRs_Vj0kNYMZI9hcX1nMwvHCEvLJLf5DaVm2LP400IA3P9hksCO2SpYODytYT8Np3H6GUO1mUjIq-RR_HzGQNezKOYV9ZOl05gRjQ8cCXiaUxtFi2_Aos/s320/Captura+de+pantalla+de+2017-01-02+18%253A35%253A00.png" width="320" /></a></div>
<br />
Bien, pasamos de tener un documento en blanco a tener un pagina cargada con post, pero un poco aburrido esos estilos predeterminados?<br />
<br />
Que tal si añadimos un poco de magia con materialize? Simplemente, agrega este código de la CDN justo antes de cerrar la etiqueta <span style="font-family: "courier new" , "courier" , monospace;"></head>
</span><br />
<br />
<pre><code><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"></code></pre>
<br />
Eso es todo, mira que bonito se ve ahora, aqui te dejo el codigo completo y una demo del mismo en <a href="https://plnkr.co/" rel="nofollow" target="_blank">Plunkr</a><br />
<br />
<pre><code><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Post</title>
<!-- Agregamos la hoja de Estilos de Materialize (Opcional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="row">
<div class="row col s12">
<div id="post">
</div>
</div>
</div>
<!-- Agregamos la libreria de jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Agregamos la libreria de Materialize (Opcional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<!-- Script que se ejecuta al iniciar la pagina y carga los posts a la misma -->
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "file.json",
type: "GET",
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function() {
$('#post').html("Cargando post, por favor, espere");
},
success: function(response) {
$('#post').html("");
$.each(response, function(i, post) {
$('#post').append(
"<h5 class='row col s12'><a href='"+post.Permalink+"'>"+post.Titulo+"</a></h5>"
+ "<div class='meta row col s6'>"
+ "<span class='chip waves-effect'>Autor: <b>"+post.Autor+"</b></span>"
+ "<span class='chip waves-effect'>Fecha: <b>"+post.Fecha+"</b></span>"
+ "<span class='chip waves-effect'>Hora: <b>"+post.Hora+"</b></span>"
+ "<span class='chip waves-effect'>Categoria: <b>"+post.Categoria+"</b></span>"
+ "</div>"
+ "<p class='row col s12'>"+post.Contenido+"</p>"
);
});
}
});
});
</script>
</body>
</html></code></pre>
<br />
<a class="btn waves-effect" href="https://embed.plnkr.co/Ndn551/" target="_blank">DEMO</a>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com7San Felipe, Yaracuy, Venezuela10.3401921 -68.745306410.3401921 -68.7453064 10.3401921 -68.7453064tag:blogger.com,1999:blog-4896967509905126258.post-71623041166803251412017-01-02T13:57:00.001-03:002017-01-08T23:41:13.135-03:00Conociendo sobre los efectos de transiciones CSS3<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCtO9aXDu6IQYPVYj7tQF36MASAZL5uvtZX_-Ivtt8hl2zO9BGyv04OoIt1KfoB_sRigxsx0ypV9YqDZyXV8w1bBO3QXXYxFxk6g1Xz_KIbPjDfDgOm0BdJA_FmiKeRvm_3lPeeIwPPM4/s1600/1451310150325_4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCtO9aXDu6IQYPVYj7tQF36MASAZL5uvtZX_-Ivtt8hl2zO9BGyv04OoIt1KfoB_sRigxsx0ypV9YqDZyXV8w1bBO3QXXYxFxk6g1Xz_KIbPjDfDgOm0BdJA_FmiKeRvm_3lPeeIwPPM4/s640/1451310150325_4.jpg" width="640" /></a></div>
<br />
Las transiciones CSS proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.<br />
<br />
Para aplicar una transición a un elemento tenemos que utilizar la propiedad <b><span style="font-family: "courier new" , "courier" , monospace;">transition</span></b>. Aunque está propiedad ya la podemos considerar un estándar, es recomendable el uso de prefijos para que funcione en versiones antiguas de los navegadores. Antes de comenzar, explicaremos brevemenete los navegadores que sorportan este efecto actualmente<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<table class="striped" style="text-align: center;">
<tbody>
<tr>
<td>Propiedad</td>
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjLocq-BC39Zil2E1pOdWrF3UgI9OO_bnNjzAHjQ7Ulo9aFvKCgk07eB8CTwlxxgtdxnzWZ_ReS2yA1rZ7X9mZdV4jsTNkHkiBBdw86rVVj8S4HZq60E1HZBSMsX3U8U7l9aFV1k7hkM/s1600/appicns-Chrome-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjLocq-BC39Zil2E1pOdWrF3UgI9OO_bnNjzAHjQ7Ulo9aFvKCgk07eB8CTwlxxgtdxnzWZ_ReS2yA1rZ7X9mZdV4jsTNkHkiBBdw86rVVj8S4HZq60E1HZBSMsX3U8U7l9aFV1k7hkM/s1600/appicns-Chrome-icon.png" /></a></td>
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNGOjeBQfMEwaVnhvMEZ9XePF_d4rGbJ6RbMa5yrBH-Mrv6-Rzqrfmy14pfUmp82HAw9kK-TO_yhFpj7yW4F7ehinCsXh9kK2yDeDAkyhxVBXcCo4Nd0P21b-7yzCyrTJ2T0jcP9SmBg/s1600/internet-explorer-xl.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNGOjeBQfMEwaVnhvMEZ9XePF_d4rGbJ6RbMa5yrBH-Mrv6-Rzqrfmy14pfUmp82HAw9kK-TO_yhFpj7yW4F7ehinCsXh9kK2yDeDAkyhxVBXcCo4Nd0P21b-7yzCyrTJ2T0jcP9SmBg/s1600/internet-explorer-xl.png" /></a></td>
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9wAS_LnU96weRiqTT4GjfgUsQZG996p7zTHhVW-xUbJhxtbvSVjXIoUx03ZPMPS6sViHpN0kwOLXU8Jce3sKA3o-FOkScbWZHvsREQ9oC6NgrnSwfgtU5kLBblrKqOIM8BGs-0rlA3gg/s1600/firefox_80695.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9wAS_LnU96weRiqTT4GjfgUsQZG996p7zTHhVW-xUbJhxtbvSVjXIoUx03ZPMPS6sViHpN0kwOLXU8Jce3sKA3o-FOkScbWZHvsREQ9oC6NgrnSwfgtU5kLBblrKqOIM8BGs-0rlA3gg/s1600/firefox_80695.png" /></a></td>
<td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ARRe_3eF__zjDghqwX_bfZpz5Ojfnhfh0gb8CoTGHB5awtROllH49ay7N14R4ZxKXQrbeqXEy6TvyHH-DdR-HtrSleytDc-2gFAIh5TIQh5_yJpgf4D3CmfPat1UivsXnvQ_PKPcY5Y/s1600/safari_64x64.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ARRe_3eF__zjDghqwX_bfZpz5Ojfnhfh0gb8CoTGHB5awtROllH49ay7N14R4ZxKXQrbeqXEy6TvyHH-DdR-HtrSleytDc-2gFAIh5TIQh5_yJpgf4D3CmfPat1UivsXnvQ_PKPcY5Y/s1600/safari_64x64.png" /></a></td>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsMF5cQ4BKNLjjpPoq9HrYolrlXy9xafir4W5a9djuCvovRPkAY3ejT21LFJs9VDAbYr8N9k6Ca6oj3bUUJJSnyUf2zzwFAtnT7VouxCdogW5ZTpLo5oqkbolRlxhHYC3iLdL-8EBgtA/s1600/imgingest-2931747717003084095.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsMF5cQ4BKNLjjpPoq9HrYolrlXy9xafir4W5a9djuCvovRPkAY3ejT21LFJs9VDAbYr8N9k6Ca6oj3bUUJJSnyUf2zzwFAtnT7VouxCdogW5ZTpLo5oqkbolRlxhHYC3iLdL-8EBgtA/s1600/imgingest-2931747717003084095.png" /></a></div>
</td></tr>
<tr>
<td><div style="text-align: left;">
transition</div>
</td>
<td>26.0
4.0 -webkit-</td>
<td>10.0</td>
<td>16.0
4.0 -moz-</td>
<td>6.1
3.1 -webkit-</td>
<td>12.1
10.5 -o-</td>
</tr>
<tr>
<td><div style="text-align: left;">
transition-delay</div>
</td>
<td>26.0
4.0 -webkit-</td>
<td>10.0</td>
<td>16.0
4.0 -moz-</td>
<td>6.1
3.1 -webkit-</td>
<td>12.1
10.5 -o-</td>
</tr>
<tr>
<td><div style="text-align: left;">
transition-duration</div>
</td>
<td>26.0
4.0 -webkit-</td>
<td>10.0</td>
<td>16.0
4.0 -moz-</td>
<td>6.1
3.1 -webkit-</td>
<td>12.1
10.5 -o-</td>
</tr>
<tr>
<td><div style="text-align: left;">
transition-property</div>
</td>
<td>26.0
4.0 -webkit-</td>
<td>10.0</td>
<td>16.0
4.0 -moz-</td>
<td>6.1
3.1 -webkit-</td>
<td>12.1
10.5 -o-</td>
</tr>
<tr>
<td><div style="text-align: left;">
transition-timing-function</div>
</td>
<td>26.0
4.0 -webkit-</td>
<td>10.0</td>
<td>16.0
4.0 -moz-</td>
<td>6.1
3.1 -webkit-</td>
<td>12.1
10.5 -o-</td>
</tr>
</tbody></table>
<br />
<br />
<h4>
Como usar las transiciones de CSS3</h4>
Para crear un efecto de transición de CSS3 debes especificar dos cosas<br />
<ul>
<li>La propiedad CSS</li>
<li>La duración de efecto</li>
</ul>
<blockquote>
Nota: Si no agregas la duración, el efecto no tendrá lugar ya que el valor por defecto es 0</blockquote>
<br />
Ejemplo:<br />
<br />
Tenemos un pequeño <b><span style="font-family: "courier new" , "courier" , monospace;">div</span></b> color rojo cuyo tamaño original es <b><span style="font-family: "courier new" , "courier" , monospace;">100px</span></b> y al poner el mouse sobre el, el evento <b><span style="font-family: "courier new" , "courier" , monospace;">hover</span></b> amplia su propiedad <b><span style="font-family: "courier new" , "courier" , monospace;">width</span></b> a <b><span style="font-family: "courier new" , "courier" , monospace;">300px</span></b><br />
<br />
<div id="box-example-1">
</div>
<style>
#box-example-1 {
width: 100px;
height: 100px;
background: red;
-o-transition: width 2s; /* Safari */
-moz-transition: width 2s; /* Safari */
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
#box-example-1:hover {
width: 300px;
}
</style>
<br />
<pre><code>
#box {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
-o-transition: width 2s; /* Opera */
-moz-transition: width 2s; /* Mozilla */
-webkit-transition: width 2s; /* Safari y Chrome */
}
#box:hover {
width: 300px;
}
</code></pre>
<br />
<br />
Usar una sola propiedad no es limitante, por lo que en el siguiente ejemplo, se puede observar como se aplica dos efectos por separado a un mismo <b><span style="font-family: "courier new" , "courier" , monospace;">div</span></b>.
<br />
<br />
<div id="box-example-2">
</div>
<style>
#box-example-2 {
width: 100px;
height: 100px;
background: red;
-o-transition: width 2s, height 4s; /* Safari */
-moz-transition: width 2s, height 4s; /* Safari */
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
#box-example-2:hover {
width: 300px;
height:300px;
}
</style>
<br />
<pre><code>
#box {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
-o-transition: width 2s, height 4s; /* Opera */
-moz-transition: width 2s, height 4s; /* Mozilla */
-webkit-transition: width 2s, height 4s; /* Safari y Chrome */
}
#box:hover {
width: 300px;
height:300px;
}
</code></pre>
<br />
<br />
<h4>
Curva de Transición</h4>
<br />
Además de la propiedad y la duración, podemos añadir la curva que tendrá la transición al momento de hacer el efecto, para esto contamos con la propiedad <b><span style="font-family: "courier new" , "courier" , monospace;">transition-timing-function</span></b><br />
<br />
Dicha propiedad cuenta con los siguientes valores:<br />
<ul>
<li><b>ease</b> - Transición lenta al inicio, un poco mas rápido a mediados de la misma, y finaliza con lentitud</li>
<div class="ease" id="box-example-3">
</div>
<pre><code>#box {
width: 100px;
height: 100px;
background: red;
transition: width ease 2s;
-o-transition: width ease 2s; /* Opera */
-moz-transition: width ease 2s; /* Mozilla */
-webkit-transition: width ease 2s;
}
#box:hover {
width: 300px;
}</code></pre>
<li><b>linear</b> - Transición con efecto unifome</li>
<div class="linear" id="box-example-3">
</div>
<pre><code>#box {
width: 100px;
height: 100px;
background: red;
transition: width linear 2s;
-o-transition: width linear 2s; /* Opera */
-moz-transition: width linear 2s; /* Mozilla */
-webkit-transition: width linear 2s;
}
#box:hover {
width: 300px;
}</code></pre>
<li><b>ease-in</b> - Transición lenta solo al inicio </li>
<div class="ease-in" id="box-example-3">
</div>
<pre><code>#box {
width: 100px;
height: 100px;
background: red;
transition: width ease-in 2s;
-o-transition: width ease-in 2s; /* Opera */
-moz-transition: width ease-in 2s; /* Mozilla */
-webkit-transition: width ease-in 2s;
}
#box:hover {
width: 300px;
}</code></pre>
<li><b>ease-out</b> - Transición lenta solo al final </li>
<div class="ease-out" id="box-example-3">
</div>
<pre><code>#box {
width: 100px;
height: 100px;
background: red;
transition: width ease-out 2s;
-o-transition: width ease-out 2s; /* Opera */
-moz-transition: width ease-out 2s; /* Mozilla */
-webkit-transition: width ease-out 2s;
}
#box:hover {
width: 300px;
}</code></pre>
<li><b>ease-in-out</b> - Transición con inicio y final lento </li>
<div class="ease-in-out" id="box-example-3">
</div>
<pre><code>#box {
width: 100px;
height: 100px;
background: red;
transition: width ease-in-out 2s;
-o-transition: width ease-in-out 2s; /* Opera */
-moz-transition: width ease-in-out 2s; /* Mozilla */
-webkit-transition: width ease-in-out 2s;
}
#box:hover {
width: 300px;
}</code></pre>
<li><b>cubic-bezier(n,n,n,n)</b> - El usuario define los valores de la curva</li>
</ul>
<br />
<style>
#box-example-3 {
width: 100px;
height: 100px;
background: red;
color:white;
font-weight:bold;
-o-transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
transition: width ease 2s;
}
#box-example-3:hover {
width: 300px;
}
.ease {
transition-timing-function: ease;
}
.linear {
transition-timing-function: linear;
}
.ease-in {
transition-timing-function: ease-in;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in-out {
transition-timing-function: ease-in-out;
}
</style>
<br />
<h4>
Transición + Transformación (transition + tranform)</h4>
<style>
#box-example-4 {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
#box-example-4:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
</style>
<br />
<div id="box-example-4">
</div>
<pre><code>#box {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
-o-transition: width 2s, height 2s, -o-transform 2s; /* Opera */
-moz-transition: width 2s, height 2s, -moz-transform 2s; /* Mozilla */
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari y Chorme */
}
#box:hover {
width: 300px;
height: 300px;
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); /* Safari y Chrome */
-webkit-transform: rotate(180deg); /* Safari y Chrome */
transform: rotate(180deg);
}</code></pre>
<br />
Dar un útil uso de estas transiciones que nos otorga CSS3 depende de ti, esto es tan solo un preámbulo para obtener conocimientos de como usar la misma, pero tu creatividad te puede llevar al limite de lo imposible.<br />
<br />
<b>Ref: w3School.com</b>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com4tag:blogger.com,1999:blog-4896967509905126258.post-18465687845826928342016-07-24T11:19:00.000-04:002016-07-24T11:32:55.412-04:00El Patrón Modelo-Vista-Controlador y Programación Orientada a Objetos en PHP Profesional<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfAmHPcRE_HfYY1Owlr98zh4wQMFqkexlrR0VKEhwgPlFcSYJh2LDiyARgI72e9fy_G0vYouvkbqKzeQcHGbIk5CmViSM99gY3snnlBwT72R28jhVrEJa4k-zVDH_zOXf337rCpffeKw/s1600/caf004e464681fa19458d6c1f8412fe1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfAmHPcRE_HfYY1Owlr98zh4wQMFqkexlrR0VKEhwgPlFcSYJh2LDiyARgI72e9fy_G0vYouvkbqKzeQcHGbIk5CmViSM99gY3snnlBwT72R28jhVrEJa4k-zVDH_zOXf337rCpffeKw/s640/caf004e464681fa19458d6c1f8412fe1.jpg" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Para los que constantemente han visitado este blog entrada tras entrada sabrán del gran esfuerzo que hago por volver aquí, quizás no con tanta frecuencia como quisiera porque entre el trabajo y los estudios, no me queda mucho tiempo al día, mas sin embargo, no me olvido de lo que me gusta hacer realmente y de compartir mis conocimientos, y todo lo que por este medio se pueda expresar para los seguidores de <b>Friki</b>.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Disculpen lo confianzudo, puesto a que sigo otros blog de la misma temática que el mio y son un poco mas técnicos y mas al punto de lo que desean exponer, mas sin embargo, a mi persona, le aburre ser técnico y todo cuadriculado, y solo espero crear un 'clima' de confianza <i>usuario-administrador</i> si se pudiera llamar de alguna manera con el fin de que al entrar al blog se sientan motivados a seguir aprendiendo de una manera como tal, explicativa, comprensible usando el tipico metodo de explicar las cosas <i>con manzanas y peras</i>
</div>
<br />
<div style="text-align: justify;">
<span style="font-style: italic;"><br /></span></div>
<div style="text-align: justify;">
Continuando con lo que vengo a exponer hoy, que ya veniamos hablando en anteriores entradas las cuales invito a ver, para que tengan una idea de lo que va a tratar este tutorial</div>
<br />
<div style="text-align: justify;">
<br /></div>
-<a href="http://frikibloggeo.blogspot.com/2015/06/programacion-orientada-objetos-y-la.html">Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Introducción</a>
<br />
-<a href="http://frikibloggeo.blogspot.com/2015/08/programacion-orientada-objetos-y-la.html">Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Programando
</a>
<br />
<br />
<div style="text-align: justify;">
No hace falta adentrarnos mas en explicaciones de lo que es el patrón MVC y la POO en PHP, así que vamos al grano, en los tutoriales anteriores explique los mismos, y realice un ejercicio práctico más sin embargo, fue algo sumamente básico y que aun contiene ciertos elementos que pueden ser mejorados separando aun mas la lógica del negocio de la interfaz, y optimizando el uso de los códigos de cada lenguaje de programación, el tutorial a continuación, representa la programación en capas con MVC y POO en PHP.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Como ya sabemos, el patrón MVC (Modelo-Vista-Controlador) es una arquitectura de software, un modo de programar cualquier tipo de programa y páginas web que separa la lógica del negocio de la interfaz del usuario, cumpliendo cada capa una función específica
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- <b>Modelo</b>: representa la lógica de negocios. Es el encargado de acceder de forma directa a los datos actuando como “intermediario” con la base de datos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- <b>Vista</b>: es la encargada de mostrar la información al usuario de forma gráfica y “humanamente legible”.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- <b>Controlador</b>: es el intermediario entre la vista y el modelo. Es quien controla las interacciones del usuario solicitando los datos al modelo y entregándolos a la vista para que ésta, lo presente al usuario, de forma “humanamente legible”.
</div>
<div style="text-align: justify;">
<br /></div>
<h1>
¿Cómo funciona el MVC?</h1>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrx0JqgpiSRTA9w2x5sl-_t0cewSoffcsclO3gx38PTLUecBXvAydHFf0Vjm9eq0MtFU0RhSjgkoePsdVc_akb41coJ2eyg85NBukVrlcixX6dFHUztFQ4tfQyG9C-paXgfhs5JSN4yQ/s1600/mvc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrx0JqgpiSRTA9w2x5sl-_t0cewSoffcsclO3gx38PTLUecBXvAydHFf0Vjm9eq0MtFU0RhSjgkoePsdVc_akb41coJ2eyg85NBukVrlcixX6dFHUztFQ4tfQyG9C-paXgfhs5JSN4yQ/s640/mvc.png" width="476" /></a></div>
<br />
<div style="text-align: justify;">
El funcionamiento básico del patrón MVC, puede resumirse en:
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
• El <b>usuario</b> realiza una petición</div>
<div style="text-align: justify;">
• El <b>controlador</b> captura el evento (puede hacerlo mediante un manejador de eventos – handler -, por ejemplo)</div>
<div style="text-align: justify;">
• Hace la llamada al modelo/modelos correspondientes (por ejemplo, mediante una llamada de retorno – callback -) efectuando las modificaciones pertinentes sobre el modelo</div>
<div style="text-align: justify;">
• El <b>modelo</b> será el encargado de interactuar con la base de datos, ya sea en forma directa, con una capa de abstracción para ello, un Web Service, etc. y retornará esta información al controlador</div>
<div style="text-align: justify;">
• El <b>controlador</b> recibe la información y la envía a la vista</div>
<div style="text-align: justify;">
• La <b>vista</b>, procesa esta información pudiendo hacerlo desde el enfoque que veremos en este libro, creando una capa de abstracción para la lógica (quien se encargará de procesar los datos) y otra para el diseño de la interfaz gráfica o GUI. La lógica de la vista, una vez procesados los datos, los “acomodará” en base al diseño de la GUI - layout – y los entregará al usuario de forma “humanamente legible”.</div>
<br />
<div style="text-align: justify;">
Ahora que ya sabemos esto, es el momento de programar. Se creara un registro de usuarios que contara con el registro de datos así como la modificación, consulta y eliminacion del usuario, en pocas palabras, la gestión de usuario.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para comenzar, vamos a crear en nuestro servidor, ya sea local o externo, una carpeta llamada 'mvc' en el cual, crearemos los siguientes directorios
</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqFWcUyyRmu2COuzXTeusxAyZtS7LOO5WUWU8qcbn4wT2hybJPt8O1acPgmZtBSfuXVMqLHKP3-SzKrsa1dRMPKcOWkPZwX_t2QggeINw46Hs1AFad-1Mrz-5XshPAavWpiaFyLcjpiAo/s1600/dir.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqFWcUyyRmu2COuzXTeusxAyZtS7LOO5WUWU8qcbn4wT2hybJPt8O1acPgmZtBSfuXVMqLHKP3-SzKrsa1dRMPKcOWkPZwX_t2QggeINw46Hs1AFad-1Mrz-5XshPAavWpiaFyLcjpiAo/s200/dir.png" width="161" /></a></div>
<div style="text-align: justify;">
<b>core</b>: el propósito de este directorio, será almacenar todas aquellas clases, <i>helpers, utils, decorators</i>, etc, que puedan ser reutilizados en otros módulos de la aplicación (aquí solo crearemos el de usuarios), es decir, todo aquello que pueda ser considerado “núcleo” del sistema.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>site_media</b>: será el directorio exclusivo para nuestros diseñadores. En él, organizadamente, nuestros diseñadores podrán trabajar libremente, creando los archivos estáticos que la aplicación requiera.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>usuarios</b>: este, será el directorio de nuestro módulo de usuarios. En él, almacenaremos los archivos correspondientes al modelo, la lógica de la vista y el controlador, exclusivos del módulo de usuarios.
</div>
<h2>
</h2>
<h1>
El Modelo</h1>
<br />
Archivo <b>./core/db_abstract_model.php</b>
<br />
<br />
<div style="text-align: justify;">
Este archivo contiene todos los métodos de consulta los cuales nos permitirán conectarnos con la base de datos y extraer los datos, valga la redundancia que necesitemos según nuestra consulta SQL
</div>
<div style="text-align: justify;">
<br /></div>
<pre><code><?php
abstract class DBAbstractModel {
private static $db_host = 'localhost';
private static $db_user = 'root';
private static $db_pass = 'root';
protected $db_name = 'mvc';
protected $query;
protected $rows = array();
private $conn;
public $mensaje = 'Hecho';
# métodos abstractos para ABM de clases que hereden
abstract protected function get();
abstract protected function set();
abstract protected function edit();
abstract protected function delete();
# los siguientes métodos pueden definirse con exactitud y
# no son abstractos
# Conectar a la base de datos
private function open_connection() {
$this->conn = new mysqli(self::$db_host, self::$db_user,
self::$db_pass, $this->db_name);
}
# Desconectar la base de datos
private function close_connection() {
$this->conn->close();
}
# Ejecutar un query simple del tipo INSERT, DELETE, UPDATE
protected function execute_single_query() {
if($_POST) {
$this->open_connection();
$this->conn->query($this->query);
$this->close_connection();
} else {
$this->mensaje = 'Metodo no permitido';
}
}
# Traer resultados de una consulta en un Array
protected function get_results_from_query() {
$this->open_connection();
$result = $this->conn->query($this->query);
while ($this->rows[] = $result->fetch_assoc());
$result->close();
$this->close_connection();
array_pop($this->rows);
}
}
?></code></pre>
<br />
<br />
Archivo <b>./usuarios/model.php</b><br />
<br />
<div style="text-align: justify;">
Este archivo representa la clase de la entidad usuario, contiene todos los métodos y propiedades del usuario así como las consultas SQL que nos servirán para gestionar sus datos.
</div>
<div style="text-align: justify;">
<br /></div>
<pre><code><?php
# Importar modelo de abstracción de base de datos
require_once('../core/db_abstract_model.php');
class Usuario extends DBAbstractModel {
############################### PROPIEDADES ################################
public $nombre;
public $apellido;
public $email;
private $clave;
protected $id;
################################# MÉTODOS ##################################
# Traer datos de un usuario
public function get($user_email='') {
if($user_email != '') {
$this->query = "
SELECT id, nombre, apellido, email, clave
FROM usuarios
WHERE email = '$user_email'
";
$this->get_results_from_query();
}
if(count($this->rows) == 1) {
foreach ($this->rows[0] as $propiedad=>$valor) {
$this->$propiedad = $valor;
}
$this->mensaje = 'Usuario encontrado';
} else {
$this->mensaje = 'Usuario no encontrado';
}
}
# Crear un nuevo usuario
public function set($user_data=array()) {
if(array_key_exists('email', $user_data)) {
$this->get($user_data['email']);
if($user_data['email'] != $this->email) {
foreach ($user_data as $campo=>$valor) {
$$campo = $valor;
}
$this->query = "
INSERT INTO usuarios
(nombre, apellido, email, clave)
VALUES
('$nombre', '$apellido', '$email', '$clave')
";
$this->execute_single_query();
$this->mensaje = 'Usuario agregado exitosamente';
} else {
$this->mensaje = 'El usuario ya existe';
}
} else {
$this->mensaje = 'No se ha agregado al usuario';
}
}
# Modificar un usuario
public function edit($user_data=array()) {
foreach ($user_data as $campo=>$valor) {
$$campo = $valor;
}
$this->query = "
UPDATE usuarios
SET nombre='$nombre',
apellido='$apellido'
WHERE email = '$email'
";
$this->execute_single_query();
$this->mensaje = 'Usuario modificado';
}
# Eliminar un usuario
public function delete($user_email='') {
$this->query = "
DELETE FROM usuarios
WHERE email = '$user_email'
";
$this->execute_single_query();
$this->mensaje = 'Usuario eliminado';
}
# Método constructor
function __construct() {
$this->db_name = 'mvc';
}
# Método destructor del objeto
function __destruct() {
unset($this);
}
}
?></code></pre>
<br />
<br />
<h1>
La Vista</h1>
Archivo <b>./site_media/html/usuario_template.html</b>
<br />
<br />
<div style="text-align: justify;">
Esta representa la plantilla HTML general donde se mostraran cada uno de los formularios solicitados por el usuario así como mensajes de confirmacion, esta sera la interfaz mostrada al usuario, lo unico con lo que el usuario podrá interactuar en este caso.</div>
<br />
<div style="text-align: justify;">
<br /></div>
<pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/mvc/site_media/css/base_template.css">
<title>ABM de Usuarios: {subtitulo}</title>
</head>
<body>
<div id="cabecera">
<h1>Administrador de usuarios</h1>
<h2>{subtitulo}</h2>
</div>
<div id="menu">
<a href="/mvc/{VIEW_SET_USER}" title="Nuevo usuario">Agregar usuario</a>
<a href="/mvc/{VIEW_GET_USER}" title="Buscar usuario">Buscar/editar usuario</a>
<a href="/mvc/{VIEW_DELETE_USER}" title="Borrar usuario">Borrar usuario</a>
</div>
<div id="mensaje">
{mensaje}
</div>
<div id="formulario">
{formulario}
</div>
</body>
</html></code></pre>
<br />
<br />
Archivo <b>./site_media/html/usuario_agregar.html
</b><br />
<br />
<div style="text-align: justify;">
Este y los siguientes 3 archivos corresponden a los formularios que solicitara el usuario para realizar una función cualquiera, estos formularios serán mostrados en la plantilla general sustituyendo la linea {formulario} por el código presente en el archivo según sea el caso
</div>
<div style="text-align: justify;">
<br /></div>
<pre><code><form id="alta_usuario" action="{SET}" method="POST">
<div class="item_requerid">E-mail</div>
<div class="form_requerid"><input type="text" name="email" id="email"></div>
<div class="item_requerid">Clave</div>
<div class="form_requerid"><input type="password" name="clave" id="clave"></div>
<div class="item_requerid">Nombre</div>
<div class="form_requerid"><input type="text" name="nombre" id="nombre"></div>
<div class="item_requerid">Apellido</div>
<div class="form_requerid"><input type="text" name="apellido" id="apellido"></div>
<div class="form_button"><input type="submit" name="enviar" id="enviar" value="Agregar"></div>
</form></code></pre>
<br />
<br />
Archivo <b>./site_media/html/usuario_borrar.html</b><br />
(formulario para eliminar un usuario identificado por su e-mail)
<br />
<br />
<pre><code><form id="alta_usuario" action="{DELETE}" method="POST">
<div class="item_requerid">E-mail</div>
<div class="form_requerid"><input type="text" name="email" id="email"></div>
<div class="form_button"><input type="submit" name="enviar" id="enviar" value="Eliminar"></div>
</form></code></pre>
<br />
<br />
Archivo <b>./site_media/html/usuario_buscar.html</b><br />
(archivo que permite buscar un usuario por su e-mail para luego mostrarlo en el formulario de edición, ya sea para editarlo o solo para ver sus datos)
<br />
<br />
<pre><code><form id="alta_usuario" action="{GET}" method="GET">
<div class="item_requerid">E-mail</div>
<div class="form_requerid"><input type="text" name="email" id="email"></div>
<div class="form_button"><input type="submit" id="enviar" value="Buscar"></div>
</form></code></pre>
<br />
<br />
Archivo <b>./site_media/html/usuario_modificar.html</b><br />
(archivo para visualizar los datos de un usuario y modificarlos)
<br />
<br />
<pre><code><form id="alta_usuario" action="{EDIT}" method="POST">
<div class="item_requerid">E-mail</div>
<div class="form_requerid"><input type="text" name="email" id="email" value="{email}" readonly></div>
<div class="item_requerid">Nombre</div>
<div class="form_requerid"><input type="text" name="nombre" id="nombre" value="{nombre}"></div>
<div class="item_requerid">Apellido</div>
<div class="form_requerid"><input type="text" name="apellido" id="apellido" value="{apellido}"></div>
<div class="form_button"><input type="submit" name="enviar" id="enviar" value="Guardar"></div>
</form></code></pre>
<br />
<br />
Archivo <b>./site_media/css/base_template.css</b><br />
(hoja de estilos en cascada)
<br />
<br />
<pre><code>body {
margin: 0px 0px 0px 0px;
background-color: #ffffff;
color: #666666;
font-family: sans-serif;
font-size: 12px;
}
#cabecera {
padding: 6px 6px 8px 6px;
background-color: #6699FF;
color: #ffffff;
}
#cabecera h1, h2 {
margin: 0px 0px 0px 0px;
}
#menu {
background-color: #000000;
color: #ffffff;
padding: 4px 0px 4px 0px;
}
#menu a {
width: 100px;
background-color: #000000;
padding: 4px 8px 4px 8px;
color: #f4f4f4;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
#menu a:hover {
background-color: #6699FF;
color: #ffffff;
}
#mensaje {
margin: 20px;
border: 1px solid #990033;
background-color: #f4f4f4;
padding: 8px;
color: #990033;
font-size: 15px;
font-weight: bold;
text-align: justify;
}
#formulario {
margin: 0px 20px 10px 20px;
border: 1px solid #c0c0c0;
background-color: #f9f9f9;
padding: 8px;
text-align: left;
}
.item_requerid {
width: 150px;
height: 22px;
padding-right: 4px;
font-weight: bold;
float: left;
clear: left;
text-align: right;
}
.form_requerid {
height: 22px;
float: left;
clear: right;
}
input {
border: 1px solid #c0c0c0;
}
.form_button {
padding-top: 15px;
margin-left: 154px;
clear: both;
}
#enviar {
padding: 5px 10px 5px 10px;
border: 2px solid #ffffff;
background-color: #000000;
color: #ffffff;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
#enviar:hover {
background-color: #6699FF;
}</code></pre>
<br />
Archivo <b>./usuarios/view.php</b><br />
(Lógica de la vista)
<br />
<br />
<pre><code><?php
$diccionario = array(
'subtitle'=>array(
VIEW_SET_USER=>'Crear un nuevo usuario',
VIEW_GET_USER=>'Buscar usuario',
VIEW_DELETE_USER=>'Eliminar un usuario',
VIEW_EDIT_USER=>'Modificar usuario'
),
'links_menu'=>array(
'VIEW_SET_USER'=>MODULO.VIEW_SET_USER.'/',
'VIEW_GET_USER'=>MODULO.VIEW_GET_USER.'/',
'VIEW_EDIT_USER'=>MODULO.VIEW_EDIT_USER.'/',
'VIEW_DELETE_USER'=>MODULO.VIEW_DELETE_USER.'/'
),
'form_actions'=>array(
'SET'=>'/mvc/'.MODULO.SET_USER.'/',
'GET'=>'/mvc/'.MODULO.GET_USER.'/',
'DELETE'=>'/mvc/'.MODULO.DELETE_USER.'/',
'EDIT'=>'/mvc/'.MODULO.EDIT_USER.'/'
)
);
function get_template($form='get') {
$file = '../site_media/html/usuario_'.$form.'.html';
$template = file_get_contents($file);
return $template;
}
function render_dinamic_data($html, $data) {
foreach ($data as $clave=>$valor) {
$html = str_replace('{'.$clave.'}', $valor, $html);
}
return $html;
}
function retornar_vista($vista, $data=array()) {
global $diccionario;
$html = get_template('template');
$html = str_replace('{subtitulo}', $diccionario['subtitle'][$vista],
$html);
$html = str_replace('{formulario}', get_template($vista), $html);
$html = render_dinamic_data($html, $diccionario['form_actions']);
$html = render_dinamic_data($html, $diccionario['links_menu']);
$html = render_dinamic_data($html, $data);
// render {mensaje}
if(array_key_exists('nombre', $data) && array_key_exists('apellido', $data) && $vista==VIEW_EDIT_USER) {
$mensaje = 'Editar usuario '.$data['nombre'].' '.$data['apellido'];
} else {
if(array_key_exists('mensaje', $data)) {
$mensaje = $data['mensaje'];
} else {
$mensaje = 'Datos del usuario:';
}
}
$html = str_replace('{mensaje}', $mensaje, $html);
print $html;
}
?></code></pre>
<br />
<h1>
El Controlador</h1>
<br />
Archivo <b>./usuarios/controller.php</b>
<br />
<b><br /></b>
<br />
<pre><code><?php
require_once('constants.php');
require_once('model.php');
require_once('view.php');
function handler() {
$event = VIEW_GET_USER;
$uri = $_SERVER['REQUEST_URI'];
$peticiones = array(SET_USER, GET_USER, DELETE_USER, EDIT_USER,VIEW_SET_USER, VIEW_GET_USER, VIEW_DELETE_USER,VIEW_EDIT_USER);
foreach ($peticiones as $peticion) {
$uri_peticion = MODULO.$peticion.'/';
if(strpos($uri, $uri_peticion) == true ) {
$event = $peticion;
}
}
$user_data = helper_user_data();
$usuario = set_obj();
switch ($event) {
case SET_USER:
$usuario->set($user_data);
$data = array('mensaje'=>$usuario->mensaje);
retornar_vista(VIEW_SET_USER, $data);
break;
case GET_USER:
$usuario->get($user_data);
$data = array(
'nombre'=>$usuario->nombre,
'apellido'=>$usuario->apellido,
'email'=>$usuario->email
);
retornar_vista(VIEW_EDIT_USER, $data);
break;
case DELETE_USER:
$usuario->delete($user_data['email']);
$data = array('mensaje'=>$usuario->mensaje);
retornar_vista(VIEW_DELETE_USER, $data);
break;
case EDIT_USER:
$usuario->edit($user_data);
$data = array('mensaje'=>$usuario->mensaje);
retornar_vista(VIEW_GET_USER, $data);
break;
default:
retornar_vista($event);
}
}
function set_obj() {
$obj = new Usuario();
return $obj;
}
function helper_user_data() {
$user_data = array();
if($_POST) {
if(array_key_exists('nombre', $_POST)) {
$user_data['nombre'] = $_POST['nombre'];
}
if(array_key_exists('apellido', $_POST)) {
$user_data['apellido'] = $_POST['apellido'];
}
if(array_key_exists('email', $_POST)) {
$user_data['email'] = $_POST['email'];
}
if(array_key_exists('clave', $_POST)) {
$user_data['clave'] = $_POST['clave'];
}
} else if($_GET) {
if(array_key_exists('email', $_GET)) {
$user_data = $_GET['email'];
}
}
return $user_data;
}
handler();
?></code></pre>
<br />
Archivo <b>./usuarios/constants.php</b><br />
<br />
Este archivo contiene todas las constantes del módulo y no se le debería agregar ningún dato que no fuese una constante.
<br />
<br />
<pre><code><?php
const MODULO = 'usuarios/';
# controladores
const SET_USER = 'set';
const GET_USER = 'get';
const DELETE_USER = 'delete';
const EDIT_USER = 'edit';
# vistas
const VIEW_SET_USER = 'agregar';
const VIEW_GET_USER = 'buscar';
const VIEW_DELETE_USER = 'borrar';
const VIEW_EDIT_USER = 'modificar';
?></code></pre>
<h1>
Archivo Adiciones</h1>
<b>Script SQL</b><br />
<br />
En el DBMS phpMyAdmin o cualquier otro, vamos a crear una base de datos cuyo nombre será 'mvc' en la cual crearemos la siguiente tabla
<br />
<br />
<pre><code>SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
CREATE TABLE IF NOT EXISTS `usuarios` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(20) NOT NULL,
`apellido` varchar(20) NOT NULL,
`email` varchar(50) NOT NULL,
`clave` varchar(8) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;</code></pre>
<br />
<br />
Archivo <b>./.htaccess</b><br />
<br />
Este archivo debe estar ubicado en la raíz del sistema, es decir, dentro de la carpeta 'mvc' directamente, vas a crear dicho archivo el cual contendrá la siguiente lineas
<br />
<br />
<pre><code>RewriteEngine on
RewriteRule ^usuarios/ usuarios/controller.php</code></pre>
<br />
Es importante tener el mod_rewrite de apache activo para que pueda funcionar el archivo .htaccess y las direcciones URL del sistema como tal, pues, si este no esta activo, no va a funcionar correctamente el flujo de los archivos ni de la información<br />
<br />
Aqui dejo un tutorial bastante bueno en tal caso de que no lo tengas activo<br />
<br />
<a href="http://www.galisteocantero.com/activar-modulo-mod_rewrite-de-apache-en-linux-y-windows/" target="_blank">Activar módulo mod_rewrite de Apache en Linux y Windows</a><br />
<br />
Este tema aun tiene mucha tela que cortar, mas sin embargo, me limitare a responder solamente las dudas en los comentarios con el fin de no hacer este tutorial mas largo.
A programar chicos!<br />
<br />
<i>ref: Bahit, Eugenia. MVC y POO en PHP. </i>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com4tag:blogger.com,1999:blog-4896967509905126258.post-46433330580232570682015-12-25T18:36:00.000-03:002015-12-25T20:15:10.685-03:00Menú contextual sencillo con HTML5, CSS3 y JavaScript (jQuery)<script>
function interpretar(valor) {
interprete = window.open('', 'Interprete de Codigo', '');
interprete.document.write(valor);
}
</script>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbztgVGE05j-41TbkNJ_c2q8cO84j8pn1YmAoSqe5sMgSfH0Hr17oXBsXmuKgxG6DDZMrmyDW1cOmapeZj4-2SU9cU9D7_lcVtVLmOJAttWi4d70XzYXVFe-XQEaVIOVryydZMCCPpuk/s1600/Captura+de+pantalla+de+2015-12-25+16%253A11%253A49.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbztgVGE05j-41TbkNJ_c2q8cO84j8pn1YmAoSqe5sMgSfH0Hr17oXBsXmuKgxG6DDZMrmyDW1cOmapeZj4-2SU9cU9D7_lcVtVLmOJAttWi4d70XzYXVFe-XQEaVIOVryydZMCCPpuk/s1600/Captura+de+pantalla+de+2015-12-25+16%253A11%253A49.png" /></a></div>
<br />
Un menú contextual es una lista de comando alternativos que aparece al hacer clic sobre el botón secundario del mouse sobre un elemento especifico. Esta mostrará ciertas funciones que se pueden hacer con dicho elemento, es de suma importancia en los sistemas operativos pues mejorar la navegabilidad del usuario en el mismo, no es posible mencionar algún sistema operativo que no cuente con ellos.<br />
<br />
Así como existen menúes contextuales para los sistemas operativos, es posible también que existan en la web, por supuesto, lleva cierto trabajo, a diferencia de lo que implicaría programar estos en IDE's como Visual Studio para .NET o C# o incluso NetBeans para Java, que son trabajados de forma mas visual. Programarlos requiere del uso de 3 lenguajes sumamente sencillos, y que todo programador web debe conocer, HTML, CSS y JavaScript, específicamente hablando, del framework jQuery que tanta gracia ha proporcionado a la internet.<br />
<br />
Antes de comenzar, te dejo una <a href="#" onclick="interpretar(document.getElementById('contenedor').value)">demo</a> por acá<br />
<br />
<textarea id="contenedor" style="display:none;" name="text" rows="11" cols="78">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu Contextual</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
/*
* Autor: Anthony Medina
* Email: anthonyjmedinaf@gmail.com
* Blog: http://frikibloggeo.blogspot.com
*/
function mostrarMenu(event, id, menu_id) {
var posX, posY, span; // Declaracion de variables
posX = event.pageX; // Obtenemos pocision X del cursor
posY = event.pageY; // Obtenemos pocision Y del cursor
// Hacemos aparecer el menu contextual
$('#' + menu_id).fadeIn('fast');
// Flecha que indica submenues
span = $('#' + menu_id + " span");
span.html("»");
// Editando el codigo CSS para ciertos elementos
span.css({float: 'right',marginRight: '12px'});
$('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
$('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
$('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
}
function ocultarMenu(menu_id) {
$('#' + menu_id).fadeOut('fast');
}
</script>
<style type="text/css">
* {
margin:0 auto;
padding:0 auto;
}
#outer-wrapper {
background:transparent;
position:absolute;
width:100%;
height:100%;
}
ul#menu-contextual {
display:none;
background:white;
font-family:Verdana, Arial, "Times New Roman", sans-serif;
font-size:12px;
color:black;
border:1px solid #CCC;
box-shadow:5px 5px 0px rgba(0,0,0,.1);
-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
}
ul#menu-contextual ul {
display:none;
background:white;
font-family:Verdana, Arial, "Times New Roman", sans-serif;
font-size:12px;
color:black;
border:1px solid #CCC;
padding:2px 9px 2px 2px;
box-shadow:5px 5px 0px rgba(0,0,0,.1);
-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
}
ul#menu-contextual li:hover {
background:#CCC;
word-wrap:break-word;
}
ul#menu-contextual li:hover > ul {
display:block;
}
.separador {
border-bottom:1px solid #ccc;
}
</style>
</head>
<body>
<div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">Para visualizar el menú contextual, haz clic secundario sobre cualquier area de la ventana
</div>
<ul id="menu-contextual" oncontextmenu="return false;">
<li>Paginas de Busqueda<span></span>
<ul>
<li onclick="location.href='http://google.com'">Google</li>
<li onclick="location.href='http://yahoo.com'">Yahoo!</li>
<li onclick="location.href='http://bing.com'">Bing</li>
</ul>
</li>
<li class="separador">Redes Sociales<span></span>
<ul>
<li onclick="location.href='http://facebook.com'">Facebook</li>
<li onclick="location.href='http://twitter.com'">Twitter</li>
<li onclick="location.href='http://googleplus.com'">Google Plus</li>
</ul>
</li>
<li onclick="window.history.forward()">Adelante</li>
<li onclick="window.history.back()">Atras</li>
<li>Favoritos<span></span>
<ul>
<li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
<li onclick="location.href='http://blogger.com'">Blogger</li>
<li onclick="location.href='http://gmail.com'">Gmail</li>
</ul>
</li>
</ul>
</body>
</html>
</textarea>
<br>
<span style="font-size: large;">Codigo HTML</span><br />
<span style="font-size: large;"><br /></span>
Este código debe ser introducido entre las etiquetas <body> ... </body> de la pagina.<br />
<br />
<pre><code>
<div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">
<span class="Apple-tab-span" style="white-space: pre;"> </span></div>
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul id="menu-contextual" oncontextmenu="return false;">
<span class="Apple-tab-span" style="white-space: pre;"> </span><li>Paginas de Busqueda<span></span>
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://google.com'">Google</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://yahoo.com'">Yahoo!</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://bing.com'">Bing</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul>
<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li class="separador">Redes Sociales<span></span>
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://facebook.com'">Facebook</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://twitter.com'">Twitter</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://googleplus.com'">Google Plus</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul>
<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="window.history.forward()">Adelante</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="window.history.back()">Atras</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li>Favoritos<span></span>
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://blogger.com'">Blogger</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span><li onclick="location.href='http://gmail.com'">Gmail</li>
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul>
<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<span class="Apple-tab-span" style="white-space: pre;"> </span>
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul>
</code></pre>
<br />
Si pueden observar, la sección del menú contextual tiene la misma estructura que tiene un menú desplegable, en este caso vertical, la única diferencia seria en este caso aplicarle correctamente los estilos CSS para que este se ajuste al diseño de los menúes contextuales que vemos en los sistemas operativos como Windows o cualquier otro<br />
<br />
<span style="font-size: large;">Codigo CSS</span><br />
<span style="font-size: large;"><br /></span>
<br />
<pre><code>
* {
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin:0 auto;
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding:0 auto;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>#outer-wrapper {
<span class="Apple-tab-span" style="white-space: pre;"> </span>background:transparent;
<span class="Apple-tab-span" style="white-space: pre;"> </span>position:absolute;
<span class="Apple-tab-span" style="white-space: pre;"> </span>width:100%;
<span class="Apple-tab-span" style="white-space: pre;"> </span>height:100%;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>ul#menu-contextual {
<span class="Apple-tab-span" style="white-space: pre;"> </span>display:none;
<span class="Apple-tab-span" style="white-space: pre;"> </span>background:white;
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-family:Verdana, Arial, "Times New Roman", sans-serif;
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-size:12px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>color:black;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border:1px solid #CCC;
<span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>ul#menu-contextual ul {
<span class="Apple-tab-span" style="white-space: pre;"> </span>display:none;
<span class="Apple-tab-span" style="white-space: pre;"> </span>background:white;
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-family:Verdana, Arial, "Times New Roman", sans-serif;
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-size:12px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>color:black;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border:1px solid #CCC;
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding:2px 9px 2px 2px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>ul#menu-contextual li:hover {
<span class="Apple-tab-span" style="white-space: pre;"> </span>background:#CCC;
<span class="Apple-tab-span" style="white-space: pre;"> </span>word-wrap:break-word;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>ul#menu-contextual li:hover > ul {
<span class="Apple-tab-span" style="white-space: pre;"> </span>display:block;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>.separador {
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom:1px solid #ccc;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
</code></pre>
<br />
Hasta ahora no tenemos mas que un menú desplegable oculto dentro de nuestra pagina, que es necesario ser mostrado al oprimir el clic secundario de nuestro mouse, y que aparezca justamente en sitio de la pantalla donde hemos hecho el clic, esta magia la hacemos con lo siguiente<br />
<br />
<span style="font-size: large;">Codigo JS</span><br />
<span style="font-size: large;"><br /></span>
<br />
<pre><code>
/*
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Autor: Anthony Medina
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Email: anthonyjmedinaf@gmail.com
<span class="Apple-tab-span" style="white-space: pre;"> </span> * Blog: http://frikibloggeo.blogspot.com
<span class="Apple-tab-span" style="white-space: pre;"> </span>*/
<span class="Apple-tab-span" style="white-space: pre;"> </span>function mostrarMenu(event, id, menu_id) {
<span class="Apple-tab-span" style="white-space: pre;"> </span>var posX, posY, span; // Declaracion de variables
<span class="Apple-tab-span" style="white-space: pre;"> </span>posX = event.pageX; // Obtenemos pocision X del cursor
<span class="Apple-tab-span" style="white-space: pre;"> </span>posY = event.pageY; // Obtenemos pocision Y del cursor
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Hacemos aparecer el menu contextual
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#' + menu_id).fadeIn('fast');
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Flecha que indica submenues
<span class="Apple-tab-span" style="white-space: pre;"> </span>span = $('#' + menu_id + " span");
<span class="Apple-tab-span" style="white-space: pre;"> </span>span.html("»");
<span class="Apple-tab-span" style="white-space: pre;"> </span>// Editando el codigo CSS para ciertos elementos
<span class="Apple-tab-span" style="white-space: pre;"> </span>span.css({float: 'right',marginRight: '12px'});
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>function ocultarMenu(menu_id) {
<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#' + menu_id).fadeOut('fast');
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
</code></pre>
<br />
Y no olviden, lo mas importante, colocar esta pequeña linea justo debajo del <head> de la página web.<br />
<br />
<pre><code>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</code></pre>
<br />
Por último, les dejo el código completo para mayor facilidad<br />
<br />
<br />
<pre><code>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu Contextual</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
/*
* Autor: Anthony Medina
* Email: anthonyjmedinaf@gmail.com
* Blog: http://frikibloggeo.blogspot.com
*/
function mostrarMenu(event, id, menu_id) {
var posX, posY, span; // Declaracion de variables
posX = event.pageX; // Obtenemos pocision X del cursor
posY = event.pageY; // Obtenemos pocision Y del cursor
// Hacemos aparecer el menu contextual
$('#' + menu_id).fadeIn('fast');
// Flecha que indica submenues
span = $('#' + menu_id + " span");
span.html("»");
// Editando el codigo CSS para ciertos elementos
span.css({float: 'right',marginRight: '12px'});
$('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
$('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
$('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
}
function ocultarMenu(menu_id) {
$('#' + menu_id).fadeOut('fast');
}
</script>
<style type="text/css">
* {
margin:0 auto;
padding:0 auto;
}
#outer-wrapper {
background:transparent;
position:absolute;
width:100%;
height:100%;
}
ul#menu-contextual {
display:none;
background:white;
font-family:Verdana, Arial, "Times New Roman", sans-serif;
font-size:12px;
color:black;
border:1px solid #CCC;
box-shadow:5px 5px 0px rgba(0,0,0,.1);
-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
}
ul#menu-contextual ul {
display:none;
background:white;
font-family:Verdana, Arial, "Times New Roman", sans-serif;
font-size:12px;
color:black;
border:1px solid #CCC;
padding:2px 9px 2px 2px;
box-shadow:5px 5px 0px rgba(0,0,0,.1);
-ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
-khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
}
ul#menu-contextual li:hover {
background:#CCC;
word-wrap:break-word;
}
ul#menu-contextual li:hover > ul {
display:block;
}
.separador {
border-bottom:1px solid #ccc;
}
</style>
</head>
<body>
<div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">
</div>
<ul id="menu-contextual" oncontextmenu="return false;">
<li>Paginas de Busqueda<span></span>
<ul>
<li onclick="location.href='http://google.com'">Google</li>
<li onclick="location.href='http://yahoo.com'">Yahoo!</li>
<li onclick="location.href='http://bing.com'">Bing</li>
</ul>
</li>
<li class="separador">Redes Sociales<span></span>
<ul>
<li onclick="location.href='http://facebook.com'">Facebook</li>
<li onclick="location.href='http://twitter.com'">Twitter</li>
<li onclick="location.href='http://googleplus.com'">Google Plus</li>
</ul>
</li>
<li onclick="window.history.forward()">Adelante</li>
<li onclick="window.history.back()">Atras</li>
<li>Favoritos<span></span>
<ul>
<li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
<li onclick="location.href='http://blogger.com'">Blogger</li>
<li onclick="location.href='http://gmail.com'">Gmail</li>
</ul>
</li>
</ul>
</body>
</html>
</code></pre>
<br />
Eso es todo.Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com4tag:blogger.com,1999:blog-4896967509905126258.post-43029766714907131322015-08-15T14:57:00.000-03:002015-08-15T14:58:59.084-03:00Microsoft WebMatrix 3: El editor de código para programación web gratuito que lo tiene todo<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5YGaDNlTL7poAjAvHzgzZf1i_NKhgOKXDvUhxmPHv3sOoSFtohDHOwsSxxzxsMK-snQlhCP2ainDVRiEr1_gZzzG2NoqFpFMhD1sX9DzZMDKgwBaOqN1CmQxqtDIl71SeyoQpTHTubfw/s1600/650_1200.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5YGaDNlTL7poAjAvHzgzZf1i_NKhgOKXDvUhxmPHv3sOoSFtohDHOwsSxxzxsMK-snQlhCP2ainDVRiEr1_gZzzG2NoqFpFMhD1sX9DzZMDKgwBaOqN1CmQxqtDIl71SeyoQpTHTubfw/s640/650_1200.jpg" width="640" /></a></div>
<div>
<br /></div>
<div style="text-align: justify;">
Para los que aun no lo conocen, hoy les vengo a presentar una herramienta grandiosa, desarrollada por Microsoft, y para la comodidad de todos los programadores, les presento a WebMatrix 3.</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
<b>Microsoft WebMatrix 3</b> es un editor de código de programación para la web, nos ofrece la facilidad de crear proyectos dentro de nuestro servidor con un gran entorno de desarrollo bastante cómodo, o en lo personal, así lo sentí, por tal motivo, ahora le considero mi favorito, desplazando al Adobe Dreamweaver, que no por esto, deja de ser una de las mas excelentes herramientas de programación web, basicamente, ambas son lo mismo, sin embargo, lo que me ha gustado de WebMatrix es su ligereza, va al punto, no tiene mas que lo que requerimos, a diferencia de Dreamweaver que esta lleno de menues digamos que no innecesarios, puesto a que realizan una función, pero si de opciones que jamas en nuestra vida llegariamos a usar. </div>
</div>
<div>
<a name='more'></a></div>
<div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
WebMatrix nos ofrece la comodidad de crear paginas en diferentes formatos<b> (html, php, asp, entreo otros) </b>con un así como edición de codigo JavaScript u hojas de estilos CSS y su excelente complementación con bases de datos MySQL, que es de lo que mas me ha gustado al momento de usarlo, puedes gestionar tus bases de datos desde el propio programa, cosa que hace mucho mas cómodo y menos tedioso el ir de aquí hasta allá para visualizar lo que estas haciendo.</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Su interfaz es simple, vistosa y pura, no se necesita ser un experto para aprender a usarla, por eso, en lo personal, recomiendo WebMatrix antes que cualquier otro editor de codigos para paginas web, sin embargo, como todo lo que tiene que ver con Microsoft, WebMatrix solo esta disponible para Windows, supongo que esa es una de las desventajas, pero por lo que resta, es perfecto.</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
<b>Descargar WebMatrix 3</b> | <a href="http://www.microsoft.com/web/webmatrix/" target="_blank">Servidor de Windows</a></div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-38396701974072474992015-08-14T23:44:00.000-03:002016-07-24T11:29:16.700-04:00Programación Orientada a Objetos en VB.NET con base de datos Access 2010<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfdVHvZTM1fR25W8xRFjRmDZe8QwxlRBID_59XJEmKJzGLrbsh86RyzKJBOMAkDUJN-xz2L83p59uGgXicUIQvCsPiLzM20lTdIkwenwKkNuxqFyNclxBH4QqB18Zx7H9ttlp033K7dU/s1600/VIsual-Studio-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfdVHvZTM1fR25W8xRFjRmDZe8QwxlRBID_59XJEmKJzGLrbsh86RyzKJBOMAkDUJN-xz2L83p59uGgXicUIQvCsPiLzM20lTdIkwenwKkNuxqFyNclxBH4QqB18Zx7H9ttlp033K7dU/s400/VIsual-Studio-logo.png" width="400" /></a></div>
<br />
<br />
Entrada Relacionada: <a href="http://frikibloggeo.blogspot.com/2016/07/mvc-y-poo-en-php-profesional.html" target="_blank">El Patrón Modelo-Vista-Controlador y Programación Orientada a Objetos en PHP Profesional</a><br />
<br />
Como bien es sabido, la Programación orientada a objetos es una metodología de programación la cual se basa en modelar el mundo real y ha ganado importancia significativa en los últimos tiempos, en este tipo de programación se trabaja con objetos en el sistema que interactuan unos con otros. No es para nada difícil de entender si sabemos reconocer cuales son cada una de esas entidades que forman parte de un problema a resolver. Sin mas a que ahondar, continuamos con un breve ejemplo sobre el cual ya hemos venido trabajando en tutoriales anteriores, como la programación orientada a objetos en PHP, que es básicamente lo mismo, pero para efectos de este tutorial, usaremos el maravilloso Visual Studio y su VB.NET
Tenemos la clase "persona", objeto de la vida real que en nuestro caso, tiene una cédula de identidad (Numero de identificación único), nombres, apellidos, edad y sexo, y las funciones de la misma serán Registrar, Modificar, Buscar y Eliminar.<br />
<br />
<b>Ahora, que ingredientes necesitamos para empezar?</b>
<br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKQuBl6pj4AoKb4yG7Oh5W9T1nHoF529myYV43SQGYTa7FgyTofYr8-nGSlieAPxKg5MyTSrYksMi-hQi9rxkMBbGdAeOj6TuKbsgfcfunox2bV7WVmILo7r6JormcKOO4-KirmDF4ww/s1600/png.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKQuBl6pj4AoKb4yG7Oh5W9T1nHoF529myYV43SQGYTa7FgyTofYr8-nGSlieAPxKg5MyTSrYksMi-hQi9rxkMBbGdAeOj6TuKbsgfcfunox2bV7WVmILo7r6JormcKOO4-KirmDF4ww/s1600/png.PNG" /></a></div>
<br />
<b>1. </b>Un formulario (frm_persona) <b>Aplicación de Windows Forms</b><br />
<b>2.</b> 5 Labels (Cedula, Nombres, Apellidos, Edad, Sexo)<br />
<b>3.</b> 5 TextBox (txt_cedula, txt_nombres, txt_apellidos, txt_edad, txt_sexo)<br />
<b>4.</b> 4 Botones (btn_registrar, btn_modificar, btn_buscar, btn_eliminar)<br />
<br />
Una vez que tengamos nuestro formulario armado de la siguiente manera, proseguimos con lo siguiente:<br />
<br />
<span style="font-size: large;">Crear y conectar a la base de datos</span><br />
<span style="font-size: large;"><br /></span>
Vamos a Microsoft Office Access 2010 <b>(funciona para Access 2007 o 2013) </b>y creamos una nueva base de datos, a la cual llamaremos <b>bd.accdb </b>y<b> </b>contendra dentro de ella la tabla<b> persona. </b>Su ubicación será la carpeta "Debug" de tu proyecto la cual se genera a la hora de compilarlo, sus estructura quedará de la siguiente manera.<br />
<br />
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsXofIdIggz64rm-NmwmNvbS0sXh_W-qDGOnV8aAfPlrrWGzPrn0F0k-k3LWtNWQKRYOWcTpGabDtLjVv10BXoBq3KG9TcuGZovtmaqkz2VaGXDt_dWrHSKx2esnyZ_GbK78Jc-4ukbc/s1600/bd.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsXofIdIggz64rm-NmwmNvbS0sXh_W-qDGOnV8aAfPlrrWGzPrn0F0k-k3LWtNWQKRYOWcTpGabDtLjVv10BXoBq3KG9TcuGZovtmaqkz2VaGXDt_dWrHSKx2esnyZ_GbK78Jc-4ukbc/s320/bd.PNG" width="320" /></a></div>
<br />
<br />
Una vez realizado esto, volvemos a nuestro Visual Studio, y vamos al menu <b>Proyecto > Agregar Modulo </b>y agregamos un nuevo modulo el cual llamaremos <b>conexion.vb</b>, borra todo el codigo que pueda haber, y copia y pega el siguiente.<br />
<br />
<pre><code>Module conexion
Public conn As New OleDb.OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=<b><span style="color: red;">bd.accdb</span></b>;Persist Security Info=False")
Public cmd As New OleDb.OleDbCommand
Public dr As OleDb.OleDbDataReader
Public sql As String
Public Sub conectarse()
Try
conn.Open()
Catch ex As Exception
If ex.ToString.Contains("No se pudo encontrar") Then
MsgBox("La base de datos a la que intentas conectar no se encuentra en el directorio, por favor, verifica e intenta nuevamente", MsgBoxStyle.Critical, "Error")
End If
End Try
End Sub
End Module</code></pre>
<br />
El texto en Rojo será el nombre de nuestra base de datos solamente, siempre y cuando este dentro de la carpeta "Debug", si este archivo no se encuentra allí, debes colocar la ruta entera de su respectiva ubicación, yo personalmente recomiendo trabajar con los archivos dentro de la carpeta del proyecto en cuestión.<br />
<br />
<span style="font-size: large;">Crear el Modulo de Funciones</span><br />
<span style="font-size: large;"><br /></span>
Crearemos un nuevo modulo en donde se introducirán ciertas funciones que se suponen, deberían ser usadas en todo el proyecto, y por tal motivo, se globaliza de tal modo, en este caso, el modulo se llamara <b>funciones.vb</b> y solo contendrá el siguiente código<br />
<br />
<pre><code>Module funciones
Public Sub campoVacio(ByRef cadena As TextBox, ByRef campo As String)
MsgBox("El campo de " + campo + " esta vacio")
cadena.Select()
End Sub
End Module</code></pre>
<br />
<span style="font-size: large;">Crear la clase del Objeto</span><br />
<span style="font-size: large;"><br /></span>
Ahora, es momento de crear el codigo de la clase, objeto o entidad "<b>persona</b>'<br />
<br />
Nos dirigimos al menu Proyecto > Agregar clase, con esto agregaremos una nueva clase al proyecto, la cual, debemos nombrar como <b>persona.vb, </b>y la misma contendra el siguiente codigo<br />
<br />
<br />
<pre><code>Public Class persona
Public Property cedula As String
Public Property nombres As String
Public Property apellidos As String
Public Property edad As Integer
Public Property sexo As String
Public Sub registrarPersona(cedula, nombres, apellidos, edad, sexo)
cmd.CommandType = CommandType.Text
cmd.Connection = conn
sql = "INSERT INTO persona(cedula,nombres,apellidos,edad,sexo) VALUES ('" & cedula.ToString.ToUpper & "','" & nombres.ToString.ToUpper & "','" & apellidos.ToString.ToUpper & "','" & edad & "','" & sexo.ToString.ToUpper & "')"
cmd.CommandText = sql
Try
cmd.ExecuteNonQuery()
MsgBox("Registro Exitoso", MsgBoxStyle.Information, "Enhorabuena")
Catch ex As Exception
If ex.ToString.Contains("valores duplicados") Then
MsgBox("El numero de identificacion ya esta registrado", MsgBoxStyle.Information, "Información")
ElseIf ex.ToString.Contains("No coinciden los tipos de datos") Then
MsgBox("El valor introducido no es un dato valido", MsgBoxStyle.Critical, "Error")
Else
MsgBox(ex.ToString)
End If
End Try
End Sub
Public Sub modificarPersona(cedula, nombres, apellidos, edad, sexo)
cmd.CommandType = CommandType.Text
cmd.Connection = conn
sql = "UPDATE persona SET nombres = '" & nombres.ToString.ToUpper & "', apellidos = '" & apellidos.ToString.ToUpper & "', edad = '" & edad.ToString.ToUpper & "', sexo = '" & sexo.ToString.ToUpper & "' WHERE cedula = '" & cedula & "'"
cmd.CommandText = sql
Try
cmd.ExecuteNonQuery()
MsgBox("Modificado con éxito", MsgBoxStyle.Information, "Enhorabuena")
Catch ex As Exception
If ex.ToString.Contains("No coinciden los tipos de datos") Then
MsgBox("El valor introducido no es un dato valido", MsgBoxStyle.Critical, "Error")
Else
MsgBox(ex.ToString)
End If
End Try
End Sub
Public Sub buscarPersona(cedula As Object, ByRef cmp_cedula As TextBox, ByRef cmp_nombres As TextBox, ByRef cmp_apellidos As TextBox, ByRef cmp_edad As TextBox, ByRef cmp_sexo As TextBox, ByRef btn_registrar As Button, ByRef btn_modificar As Button, ByRef btn_eliminar As Button)
cmd.Connection = conn
cmd.CommandType = CommandType.Text
sql = "SELECT * FROM persona WHERE cedula = '" & cedula & "'"
cmd.CommandText = sql
Try
dr = cmd.ExecuteReader()
If dr.HasRows Then
btn_eliminar.Enabled = True
btn_modificar.Enabled = True
btn_registrar.Enabled = False
cmp_cedula.Enabled = False
While dr.Read()
cmp_cedula.Text = dr(0).ToString.ToUpper
cmp_nombres.Text = dr(1).ToString.ToUpper
cmp_apellidos.Text = dr(2).ToString.ToUpper
cmp_edad.Text = dr(3).ToString.ToUpper
cmp_sexo.Text = dr(4).ToString.ToUpper
End While
Else
btn_eliminar.Enabled = False
btn_modificar.Enabled = False
btn_registrar.Enabled = True
cmp_cedula.Enabled = True
MsgBox("No hay ningún usuario registrado con la cedula consultada", MsgBoxStyle.Critical, "Usuario no registrado")
End If
dr.Close()
Catch ex As Exception
MsgBox(ex.ToString)
End Try
End Sub
Public Sub eliminarPersona(cedula)
cmd.CommandType = CommandType.Text
cmd.Connection = conn
sql = "DELETE FROM persona WHERE cedula = '" & cedula & "'"
cmd.CommandText = sql
Try
cmd.ExecuteNonQuery()
MsgBox("Eliminado con éxito", MsgBoxStyle.Information, "Enhorabuena")
Catch ex As Exception
ex.ToString()
End Try
End Sub
End Class
<code><pre></pre>
</code></code></pre>
<span style="font-size: large;">Establecer las funcionalidades</span><br />
<span style="font-size: large;"><br /></span>
Lo que tenemos hasta ahora, no es mas que un monto de codigo "independiente" y una ventana con un formulario que no hace absolutamente nada, pero ahora, llego el tiempo de la acción. Nos vamos a dirigir hasta nuestro formulario en su vista de codigo, borramos cualquier codigo autogenerado y pegamos lo siguiente<br />
<br />
<br />
<pre><code>Public Class frm_persona
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
conectarse()
Me.btn_modificar.Enabled = False
Me.btn_eliminar.Enabled = False
End Sub
Private Sub btn_registrar_Click(sender As Object, e As EventArgs) Handles btn_registrar.Click
Dim nueva_persona As New persona
If txt_cedula.Text = "" Then
campoVacio(txt_cedula, "cedula")
ElseIf txt_nombres.Text = "" Then
campoVacio(txt_nombres, "nombres")
ElseIf txt_apellidos.Text = "" Then
campoVacio(txt_apellidos, "apellidos")
ElseIf txt_edad.Text = "" Then
campoVacio(txt_edad, "edad")
ElseIf txt_nombres.Text = "" Then
campoVacio(txt_sexo, "sexo")
Else
nueva_persona.registrarPersona(txt_cedula.Text, txt_nombres.Text, txt_apellidos.Text, txt_edad.Text, txt_sexo.Text)
End If
End Sub
Private Sub btn_buscar_Click(sender As Object, e As EventArgs) Handles btn_buscar.Click
Dim buscar_persona As New persona
If txt_cedula.Text = "" Then
campoVacio(txt_cedula, "cedula")
Else
buscar_persona.buscarPersona(txt_cedula.Text, txt_cedula, txt_nombres, txt_apellidos, txt_edad, txt_sexo, btn_registrar, btn_modificar, btn_eliminar)
End If
End Sub
Private Sub btn_eliminar_Click(sender As Object, e As EventArgs) Handles btn_eliminar.Click
Dim eliminar_persona As New persona
If txt_cedula.Text = "" Then
campoVacio(txt_cedula, "cedula")
Else
If MsgBox("Estás seguro que deseas eliminar a esta persona", MsgBoxStyle.YesNo, "Mensaje de confirmación") = MsgBoxResult.Yes Then
eliminar_persona.eliminarPersona(txt_cedula.Text)
End If
End If
End Sub
Private Sub btn_modificar_Click(sender As Object, e As EventArgs) Handles btn_modificar.Click
Dim modificar_persona As New persona
If txt_cedula.Text = "" Then
campoVacio(txt_cedula, "cedula")
ElseIf txt_nombres.Text = "" Then
campoVacio(txt_nombres, "nombres")
ElseIf txt_apellidos.Text = "" Then
campoVacio(txt_apellidos, "apellidos")
ElseIf txt_edad.Text = "" Then
campoVacio(txt_edad, "edad")
ElseIf txt_nombres.Text = "" Then
campoVacio(txt_sexo, "sexo")
Else
modificar_persona.modificarPersona(txt_cedula.Text, txt_nombres.Text, txt_apellidos.Text, txt_edad.Text, txt_sexo.Text)
modificar_persona.buscarPersona(txt_cedula.Text, txt_cedula, txt_nombres, txt_apellidos, txt_edad, txt_sexo, btn_registrar, btn_modificar, btn_eliminar)
End If
End Sub
End Class
</code></pre>
<br />
Con esto realizado, no queda mas que probar el programa, pulsando la tecla F5 o yendo al menú <b>Compilar > Generar Nombre de tu Proyecto</b>, y probar como funcionan cada una de las funciones, es importante recalcar en que analizar un poco cada código no estaría de mas, el secreto de todo buen programador es entender todas y cada una de las lineas presentes en su proyecto, sin mas que agregar, espero hayan disfrutado el tutorial, suerte.Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-40441253885683094782015-08-13T13:59:00.000-03:002016-07-24T11:29:43.520-04:00Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Programando<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6hajXRTjwfpxowBSQk81RXq_y-ZpNV76gLn81SsMPEiBwuuy1IbSc34znk73802GR-W1v3fSSO9qfe1V39ooO6FiuYnoC4gQ8sBDeXxFpBuj6HWBQh-O3bGyCifOJPQ6c3g1qd3SW3EM/s1600/php_development.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6hajXRTjwfpxowBSQk81RXq_y-ZpNV76gLn81SsMPEiBwuuy1IbSc34znk73802GR-W1v3fSSO9qfe1V39ooO6FiuYnoC4gQ8sBDeXxFpBuj6HWBQh-O3bGyCifOJPQ6c3g1qd3SW3EM/s320/php_development.gif" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b>Tutorial anterior </b>: <a href="http://frikibloggeo.blogspot.com/2015/06/programacion-orientada-objetos-y-la.html" target="_blank">Programación Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Introducción</a><br />
<br />
<b>Entrada Relacionada</b>: <a href="http://frikibloggeo.blogspot.com/2016/07/mvc-y-poo-en-php-profesional.html" target="_blank">El Patrón Modelo-Vista-Controlador y Programación Orientada a Objetos en PHP Profesional</a><br />
<br />
<h3>
Crear la base de datos</h3>
Nos dirigimos a nuestro <a href="http://localhost/phpmyadmin">phpMyAdmin</a> para crear la base de datos, si no tienes un servidor aun instalado, deberás <a href="http://frikibloggeo.blogspot.com/2011/12/como-crear-un-servidor-local-localhost.html">crear un servidor local en tu computador</a> para poder acceder, una vez dentro de phpMyAdmin, creamos una nueva base de datos llamada "<b>personas</b>", en la cual, introduciremos la siguiente tabla mendiante una consulta SQL<br />
<br />
<pre><code>
CREATE TABLE `persona` (
`cedula` INT( 10 ) NOT NULL ,
`nombres` VARCHAR( 50 ) NOT NULL ,
`apellidos` VARCHAR( 50 ) NOT NULL ,
`altura` DOUBLE NOT NULL ,
PRIMARY KEY ( `cedula` )
) ENGINE = MYISAM ;
</code></pre>
<h3>
Creando el archivo de conexión</h3>
Programamos el archivo de conexion, donde crearemos la funcion <b>conexion()</b> con la finalidad de conectarnos a la base de datos, valga la redundancia, debes sustituir cada una de las credenciales usadas en el código por la que tu hayas escrito a la hora de asignar el nombre de usuario y contraseña a tu MySQL<br />
<b><br /></b>
<b>conexion.php
</b>
<br />
<pre><code>
<?php
function conexion() {
global $conexion;
$conexion = mysql_connect("localhost","root","root") or die ("conexion fallida");
mysql_select_db("personas",$conexion) or die ("No existe la tabla");
}
?>
</code></pre>
<br />
Una vez realizado esto, podemos continuar programa el Modelo, la Vista y el controlador de la clase Persona en el mismo orden
<br />
<h3>
Creando el Modelo</h3>
Antes de comenzar, es importante hacer enfasis en que el modelo no es mas que plasmar en manera de codigo lo que una clase de manera grafica representa (siempre y cuando hagas el diagrama de clases de tu proyecto), un ejemplo muy sencillo, tenemos la siguiente clase representada graficamente en el siguiente elemento
<br />
<br />
<table align="center" border="1">
<tbody>
<tr>
<th>persona</th>
</tr>
<tr>
<td>+ cedula: integer<br />
+ nombres: string<br />
+ apellidos: string<br />
+ altura: double</td>
</tr>
<tr>
<td>+ registrarAsociado()</td>
</tr>
</tbody></table>
<br />
Como explicamos anteriormente en el articulo pasado, tenemos la clase persona, cuyas propiedades o atributos son su cedula, nombres, apellidos y altura, y el metodo o función a realizar, es registrarlo en la base de datos. Ahora, <b>como hacemos esto?</b>, basandonos en el elemento o entidad "persona", comenzamos a programar el modelo de la clase<br />
<b><br /></b>
<b>modelo_persona.php</b>
<br />
<a name='more'></a><br />
<pre><code>
<?php
class persona {
public $cedula;
public $nombres;
public $apellidos;
public $altura;
public function registrarPersona() {
$sql = sprintf("INSERT INTO
persona(
cedula,
nombres,
apellidos,
altura
)
VALUES('%s','%s','%s','%s')",
$this->cedula,
$this->nombres,
$this->apellidos,
$this->altura);
$query = mysql_query($sql);
if(!$query)
echo "<script>alert('Fallo de registro');location: history.back(-2);</script>";
else
echo "<script>alert('Registro exitoso');location.href='controlador_persona.php';</script>";
}
}
?>
</code></pre>
<br />
<h3>
Creando la vista</h3>
La vista es la representacion visual de la clase, es el formulario o interfaz que interactua directamente con el usuario que desea registrar una nueva persona, en este caso.
<b>vista_persona.php
</b>
<br />
<pre><code>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>persona</title>
</head>
<body>
<form action="controlador_persona.php" method="POST">
<table>
<tr>
<th colspan="2">Persona</th>
</tr>
<tr>
<th>Cedula</th>
<td><input type="number" required name="cedula"></td>
</tr>
<tr>
<th>Nombres</th>
<td><input type="text" required name="nombres"></td>
</tr>
<tr>
<th>Apellidos</th>
<td><input type="text" required name="apellidos"></td>
</tr>
<tr>
<th>Altura</th>
<td><input type="text" required name="altura"></td>
</tr>
<tr>
<td colspan="2" align="right"><button type="submit" name="registrarPersona">Registrar Persona</button></td>
</tr>
</table>
</form>
</body>
</html>
</code></pre>
<br />
<h3>
Creando el controlador</h3>
El controlador controla precisamente el flujo de los datos entre la vista y el modelo, valga la redundancia, es como un puente que comunica ambas capas, pues, son independientes una de otra.
<b>controlador_persona.php
</b>
<br />
<pre><code>
<?php
include("conexion.php");
conexion();
include("modelo_persona.php");
if(isset($_POST['registrarPersona'])) {
$registrarPersona = new persona;
$registrarPersona -> cedula = $_POST["cedula"];
$registrarPersona -> nombres = $_POST["nombres"];
$registrarPersona -> apellidos = $_POST["apellidos"];
$registrarPersona -> altura = $_POST["altura"];
$registrarPersona -> registrarPersona();
} else {
header("location: vista_persona.php");
}
?>
</code></pre>
<br />
Una vez realizado esto, cada dato introducido será guardado en la tabla de nuestra base de datos, es de suma importancia aclarar que este es un tutorial muy básico para la gran expansibilidad de la programación en MVC, mas que una enseñanza, se pretende inculcar la lógica de programación, que a la final, es lo mas esencial que debe tener un programador, si como programadores tenemos la posibilidad de manejarnos con la lógica, ten por seguro que no importa cual sea el lenguaje de programación que estés usando, te irá excelente tanto con uno como con otro. Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-32444287213783277752015-06-03T14:27:00.001-03:002016-07-24T11:30:06.947-04:00Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Introducción<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs50ugbNOSeDwM4Soqv5JPoVd3awELDNh0NWeP331SU8HCcv3Lztr9bY6ThtYi1gX0aqLwkP-UdqOUP1JkY9XrDD9kl7XzAAg-c556k1xpBoig8nauXhgSuEtrmNjX7CatXrixLCiD848/s1600/php_development.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs50ugbNOSeDwM4Soqv5JPoVd3awELDNh0NWeP331SU8HCcv3Lztr9bY6ThtYi1gX0aqLwkP-UdqOUP1JkY9XrDD9kl7XzAAg-c556k1xpBoig8nauXhgSuEtrmNjX7CatXrixLCiD848/s320/php_development.gif" /></a></div>
<br />
<b>Entrada Relacionada:</b> <a href="http://frikibloggeo.blogspot.com/2016/07/mvc-y-poo-en-php-profesional.html" target="_blank">El Patrón Modelo-Vista-Controlador y Programación Orientada a Objetos en PHP Profesional</a><br />
<br />
<h1>
Introducción a la POO</h1>
La POO es un paradigma de programación (o técnica de programación) que utiliza objetos e interacciones en el diseño de un sistema.
<br />
<h3>
Elementos de la POO</h3>
La POO está compuesta por lo siguiente elementos basicos
<br />
<br />
<b>Clase</b>: Una clase es un modelo que se utiliza para crear objetos que comparten un mismo comportamiento, estado e identidad.
<br />
<blockquote>
<b>Metáfora</b><br />
Persona es la metáfora de una clase (la abstracción de Juan, Pedro, Ana y María), cuyo comportamiento puede ser caminar, correr, estudiar, leer, etc. Puede estar en estado despierto, dormido, etc. Sus características (propiedades) pueden ser el color de ojos,
color de pelo, su estado civil, etc.</blockquote>
<pre><code>
class Persona {
# Propiedades
# Métodos
}
</code></pre>
<b>Objeto</b>: Es una entidad provista de métodos o mensajes a los cuales responde (comportamiento); atributos con valores concretos (estado); y propiedades (identidad).
<br />
<a name='more'></a><pre><code>
$persona = new Persona();
/*
El objeto, ahora, es $persona,
que se ha creado siguiendo el modelo de la clase Persona
*/
</code></pre>
<b>Metodos</b>: Es el algoritmo asociado a un objeto que indica la capacidad de lo que éste puede hacer.
<br />
<pre><code>
function caminar() {
#...
}
</code></pre>
<b>Atributos o Propiedades</b>: Las propiedades y atributos, son variables que contienen datos asociados a un objeto.
<br />
<pre><code>
$nombre = 'Juan';
$edad = '25 años';
$altura = '1,75 mts';
</code></pre>
<br />
<b>Tutorial siguiente</b>: <a href="http://frikibloggeo.blogspot.com/2015/08/programacion-orientada-objetos-y-la.html" target="_blank">Programacion Orientada a Objetos y la estructura Modelo-Vista-Controlador en PHP Básico - Programando</a>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-9467615799538825002015-06-03T13:36:00.002-03:002015-06-03T13:48:13.387-03:00Bootstrap 3, el manual oficial<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF7xAGgHfLjnSNJA9tkrkCtVFA_wx6QxIcphXi3ZrUhKQfYES9PvSHofxFottbZncupUfsgCtrubM3_iDWbwtClrj4I1WZYA0acz4qp6sCkYyIhbx1BJvU97_qw-hH0HBKhGFdKdln03Q/s1600/bootstrap3-manual-oficial-1024x535.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF7xAGgHfLjnSNJA9tkrkCtVFA_wx6QxIcphXi3ZrUhKQfYES9PvSHofxFottbZncupUfsgCtrubM3_iDWbwtClrj4I1WZYA0acz4qp6sCkYyIhbx1BJvU97_qw-hH0HBKhGFdKdln03Q/s320/bootstrap3-manual-oficial-1024x535.jpg" /></a></div>
Seamos honestos, la mayoría de los programadores no saben diseñar. En Itechnode hemos tratado el tema del diseño responsivo, pasando de ser una tendencia a ya ser obligatorio en todo sitio web que pretenda perdurar en el tiempo y ya que un programador por el hecho de trabajar con un ordenador no lo puede saber todo, les hemos facilitado unas excelentes plantillas realizadas con bootstrap pero lo ideal es que lo aprendamos, he aquí un excelente libro web.
<br />
<h1>
El Diseño Web</h1>
El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y video.
<br />
<h1>
¿Que es Bootstrap?</h1>
En la actualidad muchos sitios web están elaborando su diseño en Bootstrap, ¿Qué es Bootstrap? Pues en pocas palabras es el framework de Twitter que permite crear interfaces web con CSS y Javascript que adaptan la interfaz dependiendo del tamaño del dispositivo en el que se visualice de forma nativa, es decir, automáticamente se adapta al tamaño de un ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se denomina diseño adaptativo o Responsive Design y está muy de moda.
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNZLOiaqXtvachSCGz-clTOG416c2VUzyDRAXmc0s8s9S5nomdqEKVYhC-pwyqJpZEcSZdGyVSr6X3CfESwKtFaCK1F1TFSt3JbTGyl3IVpP0ZuCR3G-ClN50Kgi-X43YdRsUeTzuEhvI/s1600/Twitter-Bootstrap-Logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNZLOiaqXtvachSCGz-clTOG416c2VUzyDRAXmc0s8s9S5nomdqEKVYhC-pwyqJpZEcSZdGyVSr6X3CfESwKtFaCK1F1TFSt3JbTGyl3IVpP0ZuCR3G-ClN50Kgi-X43YdRsUeTzuEhvI/s320/Twitter-Bootstrap-Logo.jpg" /></a></div>
<a name='more'></a><h1>
Importancia de Boostrap</h1>
Si eres programador no tiene nada de malo no tener tino para el diseño, ni tiene nada de malo no querer hacer un diseño responsivo sin utilizar Plantillas. A decir verdad, no hay necesidad de re-descubrir el hilo negro. Recuerda el principio KISS (Keep it Simple, Stupid!). La gran mayoría de programadores deberían simple y sencillamente usar Bootstrap, por alguna razón el sentido común no es tan común en el mundo de la programación y Bootstrap elimina esas frustraciones. Lo que diseñes con Bootstrap se ve bien en todos los navegadores (incluyendo IE7) y en todos los dispositivos móviles.
<br />
<h1>
Bootstrap 3, el manual oficial</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuQcFYJjx4fG_jPBDilyGaUYydkluovo0VHixAcU4YPAos19KYUYQ8tq4goAUqCM99jHhwb5tA5tUgoWXvZ5jnhNUeB7qnQy8uvMnHgHoaxVvrFlIeYwcMgwvZfHSKihMCIPy8M_bQWmQ/s1600/libroweb-Bootstrap-3-el-manual-oficial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuQcFYJjx4fG_jPBDilyGaUYydkluovo0VHixAcU4YPAos19KYUYQ8tq4goAUqCM99jHhwb5tA5tUgoWXvZ5jnhNUeB7qnQy8uvMnHgHoaxVvrFlIeYwcMgwvZfHSKihMCIPy8M_bQWmQ/s320/libroweb-Bootstrap-3-el-manual-oficial.jpg" /></a></div>
<table>
<tbody>
<tr>
<td><br />
<li>Titulo</li>
</td>
<td>Bootstrap 3, el manual oficial</td>
</tr>
<tr>
</tr>
<tr>
<td><br />
<li>Autor</li>
</td>
<td>Mark Otto, Jacob Thornton</td>
</tr>
<tr>
</tr>
<tr>
<td><br />
<li>Traduc</li>
</td>
<td>Javier Eguiluz</td>
</tr>
<tr>
</tr>
<tr>
<td><br />
<li>Tipo</li>
</td>
<td>Libro Online</td>
</tr>
<tr>
</tr>
<tr>
<td><br />
<li>Link</li>
</td>
<td><a href="http://librosweb.es/bootstrap_3/">http://librosweb.es/bootstrap_3/</a></td>
</tr>
<tr>
</tr>
</tbody></table>
<br />
<b>Creditos: </b> <a href="http://itechnode.com/bootstrap-3-el-manual-oficial" target="_blank">Bootstrap 3, el manual oficial (iTechNode)</a>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com1tag:blogger.com,1999:blog-4896967509905126258.post-47242187053094398212015-06-03T12:17:00.000-03:002015-06-03T13:37:02.937-03:00Validaciones esenciales en Javascript paras tus formularios de HTML<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vp-idRI-cMt9smJitj7_kgQt0AhoEv9vxzn5qlHHxDo88pCJa5MJeFfId5gPw_bKdd4WLVbE7rcaGOIAGLZXPRydmtiJh0FXCRUDMGmrcbEm7AqW1gUDaQvjVioZ36EECAH-bSXv6WY/s1600/Top-5-Online-JavaScript-Editors-You-Probably-Know-Already.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vp-idRI-cMt9smJitj7_kgQt0AhoEv9vxzn5qlHHxDo88pCJa5MJeFfId5gPw_bKdd4WLVbE7rcaGOIAGLZXPRydmtiJh0FXCRUDMGmrcbEm7AqW1gUDaQvjVioZ36EECAH-bSXv6WY/s320/Top-5-Online-JavaScript-Editors-You-Probably-Know-Already.jpg" /></a></div>
<h1>
Todas las letras a mayusculas</h1>
Validacion sumamente esencial, por ejemplo, para cuando quieres llevar el control de todo lo que ingresa a la base de datos, mantener la uniformidad te ayuda en cuanto a la mejor lectura.
<br />
<pre class="prettyprint"><code>
function aMayusculas(campo) {
var x = document.getElementById(campo).value;
document.getElementById(campo).value = x.toUpperCase();
}
</code></pre>
<br />
Luego para llamarla en un campo de texto
<br />
<pre class="prettyprint"><code>
<input type="text" name="ejemplo1" id="ejemplo1" onkeyup="aMayusculas(document.getElementById('ejemplo1').name)" />
</code></pre>
<h1>
Solo Numeros</h1>
Muy util para campos de texto donde el usuario solo se le permite introducir numeros, como campos de moneda, enteros o numeros de telefonos. Es una de las validaciones mas sencillas pero mas utiles de Javascript
<br />
<pre class="prettyprint"><code>
function esNumero(campo) {
var x = document.getElementById(campo).value;
if (isNaN(x)) {
document.getElementById(campo).value = "";
}
}
</code></pre>
<br />
Luego para llamarla en un campo de texto
<br />
<pre class="prettyprint"><code>
<input type="text" name="ejemplo1" id="ejemplo1" onkeyup="esNumero(document.getElementById('ejemplo1').name)" />
</code></pre>
<h1>
Solo Letras</h1>
Asi como hay campos donde solo puede introducirse numeros, existen campos en los que estos serian incoherentes, como campos de nombres, apellidos, profesion, etc. Recordemos que es mejor prevenir que lamentar, y es mejor prevenir y controlar lo que escribe el usuario antes de lamentar una base de datos llena de basura.
<br />
<pre class="prettyprint"><code>
function soloLetras(e){
key = e.keyCode || e.which;
tecla = String.fromCharCode(key).toLowerCase();
letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
especiales = "8-37-39-46";
tecla_especial = false
for(var i in especiales){
if(key == especiales[i]){
tecla_especial = true;
break;
}
}
if(letras.indexOf(tecla)==-1 && !tecla_especial){
return false;
}
}
</code></pre>
<br />
Luego para llamarla en un campo de texto
<br />
<pre class="prettyprint"><code>
<input type="text" name="ejemplo1" id="ejemplo1" onkeypress="return soloLetras(event)" />
</code></pre>
<h1>
Mascaras esenciales para campos de texto</h1>
Existen ademas diferentes campos los cuales tienen una formato único y que es es sin duda, irreversible, pero que a su vez, pueden presentar diferentes formas dependiendo del gusto del usuario, pero siempre, con un mismo resultado. Para evitar la falta de uniformidad del dato, es necesario usar mascaras pues garantizan que el dato introducido presente el mismo diseño y limite al usuario al mismo.
<a name='more'></a>
<br />
<pre class="prettyprint"><code>
var telefono = new Array(4, 3, 2, 2); // Patron para telefono
var cuenta_bancaria = new Array(4, 4, 2, 10); // Patron para Cuent Bancaria
var cedula = new Array(1, 10); // Patron para Numero de Cedula
var RIF = new Array(1, 8, 1); // Patron para Registro de Informacion Fiscal
var fecha new Array(2, 2, 4); // Patron para Fecha (dd/mm/aaaa)
function mascara(d,sep,pat,nums){
if(d.valant != d.value){
val = d.value;
largo = val.length;
val = val.split(sep);
val2 = '';
for(r=0;r<val.length;r++){
val2 += val[r];
}
if(nums){
for(z=0;z<val2.length;z++){
if(isNaN(val2.charAt(z))){
letra = new RegExp(val2.charAt(z), "g");
val2 = val2.replace(letra, "");
}
}
}
val = '';
val3 = new Array();
for(s=0; s<pat.length; s++){
val3[s] = val2.substring(0, pat[s]);
val2 = val2.substr(pat[s]);
}
for(q=0;q<val3.length; q++){
if(q ==0){
val = val3[q];
}
else{
if(val3[q] != ""){
val += sep + val3[q];
}
}
}
d.value = val;
d.valant = val;
}
}
</code></pre>
<br />
Para llamar a la mascara de telefono en un campo de texto, se usa el siguiente codigo
<br />
<pre class="prettyprint"><code>
<input placeholder="Ej: 9999-999-99-99" type="text" pattern='\d{4}[\-]\d{3}[\-]\d{2}[\-]\d{2}' onkeyup="mascara(this,'-',telefono,true)" name="telefono" maxlength="14"/>
</code></pre>
<br />
Para llamar a la mascara de numero de cuenta bancaria en un campo de texto, se usa el siguiente codigo
<br />
<pre class="prettyprint"><code>
<input placeholder="Ej: 9999-9999-99-9999999999" type="text" pattern='\d{4}[\ ]\d{4}[\ ]\d{2}[\ ]\d{10}' onkeyup="mascara(this,' ',cuenta_bancaria,true)" maxlength="23" name="numero_de_cuenta">
</code></pre>
Para llamar a la mascara de numero de cuenta bancaria en un campo de texto, se usa el siguiente codigo
<br />
<pre class="prettyprint"><code>
<input placeholder="Ej: 9999-9999-99-9999999999" type="text" pattern='\d{4}[\ ]\d{4}[\ ]\d{2}[\ ]\d{10}' onkeyup="mascara(this,' ',cuenta_bancaria,true)" maxlength="23" name="numero_de_cuenta">
</code></pre>
Para llamar a la mascara de cedula de identidad en un campo de texto, se usa el siguiente codigo
<br />
<pre class="prettyprint"><code>
<input type="text" id="cedula" onkeyup="mascara(this,'-',cedula,false)" name="cedula" placeholder="Ej.: V-00000000">
</code></pre>
Para llamar a la mascara de Registro de Informacion Fiscal (RIF) en un campo de texto, se usa el siguiente codigo
<br />
<pre class="prettyprint"><code>
<input type="text" id="RIF" onkeyup="mascara(this,'-',RIF,false)" name="RIF" placeholder="Ej.: V-00000000-0">
</code></pre>
Para llamar a la mascara de fecha en un campo de texto, se usa el siguiente codigo
<br />
<pre class="prettyprint"><code>
<input type="text" id="fecha" onkeyup="mascara(this,'/',fecha,false)" name="fecha" placeholder="dd/mm/aaaa">
</code></pre>
Con todas estas validaciones, la uniformidad, vistosidad y buen uso de tu base de datos estará garantizada.Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com3tag:blogger.com,1999:blog-4896967509905126258.post-28495193313919082622014-06-09T02:44:00.004-04:002015-02-28T12:40:49.424-03:00Crear tu propio sistema de comentarios con MySQL y PHP<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMmF-uC0oUjQQcwHRIWJ87rsIagLsgw8OmsBRLPsvAALo6S94NVvDyn9h9Pq3wAzUv7Shx01282R9H7hmvmP4qNn-JVE48VgfGdjDOp24hLAHcCVxWhSxPyvK3yvtndQD0ZMwu_ds1nXI/s1600/Captura.PNG" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMmF-uC0oUjQQcwHRIWJ87rsIagLsgw8OmsBRLPsvAALo6S94NVvDyn9h9Pq3wAzUv7Shx01282R9H7hmvmP4qNn-JVE48VgfGdjDOp24hLAHcCVxWhSxPyvK3yvtndQD0ZMwu_ds1nXI/s1600/Captura.PNG" height="180" width="640" /></a></div>
<br />
<br />
Son las 1:47 de la madrugada y y desvelado trabajando en esta publicación que he querido traerles y que se que les sera muy útil pues, poco a poco te ayudará a independizarte un poco o de despertar en ti esos deseos de saber mas sobre como trabajar con bases de datos, las cuales si no existieran, el mundo de la Internet fuera nulo, aburrido y sin nada nuevo que ver. Para esta ocasión, he realizado un pequeño formulario,<b> trabajado con HTML y CSS para darle tan llamativo aspecto, con PHP y MySQL para conexión y consultas a bases de datos y PHPMyAdmin para gestión de las mismas</b>, de manera que antes de comenzar a realizar este tutorial recomiendo<a href="http://frikibloggeo.blogspot.com/2011/12/como-crear-un-servidor-local-localhost.html" target="_blank"> instalar un localhost en tu computador</a>, o bien, si tienes un servidor externo también funciona, sin embargo; trabajar con un servidor local seria lo preferible.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAcAtD8sJfcF34iRxKY_lN3bcu3oGF1r_yN0ovx2DcfVLyWUeXyo0lT5YW1dMfVIMKh0RCo43EbY9j6b7QEnGtpP3iV6GhhIONCPP9ydZ_WOq4eGmrPPc1cbPzwqvROCzpOZ9D6Ql1F6Q/s1600/Formulario+de+comentarios.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAcAtD8sJfcF34iRxKY_lN3bcu3oGF1r_yN0ovx2DcfVLyWUeXyo0lT5YW1dMfVIMKh0RCo43EbY9j6b7QEnGtpP3iV6GhhIONCPP9ydZ_WOq4eGmrPPc1cbPzwqvROCzpOZ9D6Ql1F6Q/s1600/Formulario+de+comentarios.png" height="640" width="390" /></a><br />
<br />
Ingresa a PHPMyAdmin en tu computador, luego ve a Importar > pestaña SQL y pega el siguiente código<br />
<h3>
Archivo SQL</h3>
<pre class="prettyprint"><code>-- phpMyAdmin SQL Dump
-- version 2.10.3
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tiempo de generación: 09-06-2014 a las 05:52:30
-- Versión del servidor: 5.0.51
-- Versión de PHP: 5.2.6
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Base de datos: `comentarios`
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `comentarios`
--
CREATE TABLE `comentarios` (
`ip` int(11) NOT NULL auto_increment,
`usuario` varchar(20) NOT NULL,
`email` varchar(50) NOT NULL,
`website` varchar(1000) NOT NULL,
`comentario` varchar(3000) NOT NULL,
`fecha` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
PRIMARY KEY (`ip`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1305 ;
--
-- Volcar la base de datos para la tabla `comentarios`
--
INSERT INTO `comentarios` VALUES (1303, 'Formatos', 'formatos@formatos.com', '', '<b>Texto en negrita</b><br />\r\n<i>Texto en cursiva</i><br />\r\n<u>Texto subrayado</u><br />\r\n<strike>Texto Tachado</strike><br />\r\n<span style="color: #3d85c6;">Texto en color</span><br />\r\n<span style="background-color: yellow;">Texto con color de fondo</span><br />\r\n<a href="http:/#">Link</a><br />\r\n<blockquote class="tr_bq">\r\nCita</blockquote>\r\n<div class="separator" style="clear: both; text-align: center;">\r\n<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBaT5C7n4tz4LflY6vUj1du-cbLX8uwl1wVbpEPfSPk09UoTnKR8zP-zdw2yHstkVYdVlKIonndNLgjtxip2QMnvnLf2fAqCt2pR63uCppbDb00jNSayT7npKpjlviBdSS02BOJ8bF0c/s1600/flores_rojas_08.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBaT5C7n4tz4LflY6vUj1du-cbLX8uwl1wVbpEPfSPk09UoTnKR8zP-zdw2yHstkVYdVlKIonndNLgjtxip2QMnvnLf2fAqCt2pR63uCppbDb00jNSayT7npKpjlviBdSS02BOJ8bF0c/s320/flores_rojas_08.jpeg" /></a></div>\r\n<h1>\r\nEncabezado 1</h1>\r\n<h1>\r\n</h1>\r\n<h2>\r\nEncabezado 2</h2>\r\n<h2>\r\n</h2>\r\n<h3>\r\nEncabezado 3</h3>\r\n<h3>\r\n</h3>\r\n<h4>\r\nEncabezado 4</h4>\r\n<h4>\r\n<marquee>Texto desplazable</marquee>\r\n</h4>\r\n<audio controls="" src="https://sites.google.com/site/anthonyjmedinaf/archivos/Eagles%20-%20Hotel%20California.mp3">Hotel California - Eagles</audio><br />\r\n<br />\r\n<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/_V5o392WOzw" width="100%"></iframe>', '2014-06-09 01:08:20');
INSERT INTO `comentarios` VALUES (1304, 'Anthony', 'nthny21@hotmail.com', '', 'Este es un <b>comentario</b>, almacenado en una base de datos MySQL y mostrado en esta página a través de una consulta ', '2014-06-09 01:19:38');
</code></pre>
<br />
El código presenta dos ejemplos de comentarios el cual podras visualizar con mejoras mas adelante, crea el siguiente archivo de formato .php, donde localhost sera la direccion del servidor, si trabajas con servidor local, lo mas probable es que tengas que dejarla igual, usuario es tu nombre de usuario, password tu contraseña, y el nombre de la base de datos donde deseamos guardar los comentarios, en nuestro caso, "comentarios".<br />
<a name='more'></a><br />
<h3>
conexion.php</h3>
<pre class="prettyprint"><code><?php
$conexion = mysqli_connect("localhost","usuario","password","comentarios");
if (!$conexion) {
die("Error de conexión (".mysqli_connect_errno().")".mysqli_connect_error());
}
?></code></pre>
<br />
Es momento de crear el archivo principal, donde se ubicará el formulario de contacto y se publicaran los comentarios.<br />
<h3>
form.php</h3>
<pre class="prettyprint"><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario de comentarios</title>
<style type="text/css">
form ::-webkit-scrollbar {
width: 8px;
}
form ::-webkit-scrollbar-button {
background:#003;
}
form ::-webkit-scrollbar-track {
background:#EEE;
}
form ::-webkit-scrollbar-thumb {
background:#003;
}
form {
clear:both;
width:74%;
}
#datos {
float:left;
}
input[type=text] {
display:block;
padding:9.4px 4px 9.3px 45px;
font-family:"Raleway", Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:300;
border:#CCC 1px solid;
color:#CCC;
margin:9px 1px 9px 8px;
transition:all ease-in-out .3s;
clear:inherit;
}
input[type=text]:hover {
color:#666;
border:#666 1px solid;
box-shadow:2px 2px 2px #EEE,-2px -2px 2px #EEE;
}
input[type=text].nombre {
background:#FFF url(imagenes/user.png) no-repeat;
border-radius:2px 18px 0px 2px;
}
input[type=text].email {
background:#FFF url(imagenes/email.png) no-repeat;
}
input[type=text].website {
background:#FFF url(imagenes/web.png) no-repeat;
border-radius:2px 0px 0px 2px;
}
textarea.comentario {
clear:both;
width:444px;
display:block;
padding:8px 11px 8px 11px;
font-family:"Raleway", Arial, Helvetica, sans-serif;
font-size:18px;
border:#CCC 1px solid;
border-radius:18px 2px 2px 0px;
color:#CCC;
margin:9px 1px 9px 1px;
transition:all ease-in-out .3s;
float:left;
resize:none;
}
textarea.comentario:hover {
color:#666;
box-shadow:2px 2px 2px #EEE,-2px -2px 2px #EEE;
border:#666 1px solid;
}
input[type=submit] {
width:99.4%;
clear:both;
background:#FFF;
display:block;
padding:8px 11px 8px 11px;
font-family:"Raleway", Arial, Helvetica, sans-serif;
font-size:18px;
border:#CCC 1px solid;
border-radius:0px 0px 18px 18px;
color:#CCC;
margin:9px 1px 9px 1px;
transition:all ease-in-out .3s;
}
input[type=submit]:hover {
color:#666;
box-shadow:2px 2px 2px #EEE,-2px -2px 2px #EEE;
border:#666 1px solid;
}
#comentarios {
display:block;
width:70%;
padding:4px 4px 4px 12px;
font-family:'Raleway',sans-serif;
}
#comentarios:hover {
}
#comentarios a {
color:#FFF;
text-decoration:none;
transition:all ease-out .3s;
}
#comentarios a:hover {
color:#EEE;
}
#comentarios .user {
clear:both;
padding:4px 9px 4px 9px;
margin:4px 0px 4px 4px;
float:left;
width:30%;
background:#003;
border-radius:4px 0px 0px 4px;
font-weight:bold;
color:#FFF;
}
#comentarios .comment {
border:1px solid #003;
margin:4px 4px 4px 0px;
padding:18px 9px 18px 9px;
float:left;
width:61%;
border-radius:0px 4px 4px 0px;
}
#comentarios .comment a {
transition:all ease-in .2s;
color:#999;
}
#comentarios .comment img {
width:93%;
border:7px solid #FFF;
box-shadow:2px 2px 4px #003;
}
#comentarios .comment a:hover {
font-weight:bold;
}
.tiempo {
text-align:right;
text-transform:uppercase;
font-size:10px;
}
</style>
</head>
<body>
<?php
include('comentarios.php');
?><br/><br/><br/>
<form action="enviar.php" method="post">
<textarea class="comentario" name="comentario" cols="29" rows="6" aria-required="true" ></textarea>
<div id="datos">
<input type="text" size="20" name="usuario" class="nombre" placeholder="Nombre de usuario" required="required" autocomplete="off" />
<input type="text" size="20" name="email" class="email" placeholder="Correo eléctronico" required="required" autocomplete="off"/>
<input type="text" size="20" name="website" class="website" placeholder="Sitio web" autocomplete="off" />
</div>
<input type="submit" value="Enviar" name="enviar"/>
</form>
</body>
</html>
</code></pre>
<br />
Este archivo (enviar.php) es de suma importancia, pues; es el que a la final validará los datos y establecerá el contacto con MySQL para enviar los datos ingresados en el formulario a cada fila y columna de la base de datos.<br />
<h3>
enviar.php</h3>
<pre class="prettyprint"><code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
</head>
<body>
<?php
// Llamamos al archivo de conexión a la base de datos
require("conexion.php");
//Creamos las variables con los nombres de los campos del formulario
$usuario = $_POST["usuario"];
$email = $_POST["email"];
$website = $_POST["website"];
$comentario = $_POST["comentario"];
// Codigo de insercion a la base de datos
$insertar = mysqli_query($conexion,"INSERT INTO comentarios (usuario, email, website, comentario) VALUES ('$usuario','$email','$website','$comentario')");
if (!$insertar) {
echo "Error al guardar";
} else {
echo "Guardado con éxito";
}
mysqli_close($conexion);
?>
<br/>
<a href="form.php">ver comentarios</a>
</body>
</html>
</code></pre>
<br />
y finalmente, creamos el siguiente archivo, recuerda sustituir nuevamente los datos del usuario de MySQL como lo pide el código, de manera que se puedan conectar mutuamente.<br />
<h3>
comentarios.php</h3>
<pre class="prettyprint"><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Comentarios</title>
</head>
<body>
<?php
// Se conecta al SGBD
if(!($conexion = mysql_connect("localhost", "usuario", "password")))
die("Error: No se pudo conectar");
// Selecciona la base de datos
if(!mysql_select_db("comentarios", $conexion))
die("Error: No existe la base de datos");
// Sentencia SQL: muestra todo el contenido de la tabla "books"
$sentencia = "SELECT * FROM comentarios";
// Ejecuta la sentencia SQL
$resultado = mysql_query($sentencia, $conexion);
if(!$resultado)
die("Error: no se pudo realizar la consulta");
echo "<div id='comentarios'>";
while($fila = mysql_fetch_assoc($resultado))
{
echo "<div class='user'>";
echo "<a href='" . $fila['website'] . "'>" . $fila['usuario'] . "</a><br/> <div class='tiempo'>" . $fila['fecha'] . "</div>";
echo "</div>";
echo "<div class='comment'>";
echo $fila['comentario'] . '<br/>';
echo "</div>";
}
echo "</div><br/>";
// Libera la memoria del resultado
mysql_free_result($resultado);
// Cierra la conexión con la base de datos
mysql_close($conexion);
?>
</body>
</html>
</code></pre>
<pre class="prettyprint"><code>
</code></pre>
Esto ha sido todo; puedes descargarte también los archivos, y trabajarlos directamente.<br />
<h1 style="text-align: center;">
<a href="http://adf.ly/pPKYH">Descargar archivos</a></h1>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com49tag:blogger.com,1999:blog-4896967509905126258.post-34122978204237323332014-06-08T09:54:00.000-04:002014-06-09T02:45:21.886-04:00Como compilar un programa en C y C++ en GNU/Linux<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PApTqoSx4GaGeoAyzN8zLo0dG46rGQP46DBKcuPgGYhNoB_K6BrC6qD1T0mEoaNp5E1bAl_DPaLPmD4fL-UMaf6rfPQq7gmIkR7-av5ZF5XC1Jj-NaGahz4_LdJ4tSDF6wa5yFTS6-o/s1600/linux-distros-1152x8641.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PApTqoSx4GaGeoAyzN8zLo0dG46rGQP46DBKcuPgGYhNoB_K6BrC6qD1T0mEoaNp5E1bAl_DPaLPmD4fL-UMaf6rfPQq7gmIkR7-av5ZF5XC1Jj-NaGahz4_LdJ4tSDF6wa5yFTS6-o/s1600/linux-distros-1152x8641.jpg" height="281" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Cada vez son mas los programadores que se prefieren las plataformas basadas en GNU/Linux (Ubuntu, Debian, Fedora, SUSE, Mint, Canaima, entre otros) para hacer sus trabajos de programación,<i> yo personalmente uso Ubuntu</i>, ya que sin ofender al resto, me parece el mas cómodo para trabajar, GNU/Linux ofrece entre su centro de software poderosos IDES de programación para diferentes lenguajes, incluso; hay una version de NetBeans y Eclipse para programar en Java, idéntica a la de Windows, por lo que <b>no hay motivos ni tampoco excusas para no migrar de sistema operativo que te ofrezca mayores libertades que Windows</b>. Los programadores en C o C++ que trabajan en GNU/Linux programan directamente en el bloc de notas que viene con el sistema operativo, llamado Gedit, aunque no es un IDE de programación como tal, es de mucha ayuda para programar en los cientos de lenguaje de programación que pueden existir, pues, lo principal es la coloracion de los elementos del lenguaje que evita o disminuye equivocaciones.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ya una vez terminado su programa en C o C++, el programador se encuentra con que no puede ejecutarlo, no hay ningún botón automatizado que te accione un compilador, como es el caso de DevC++, IDE de programación en C++ para Windows, sin embargo, no es para desanimarte, mas bien, es para motivarte por aprender algo nuevo, no basta con que un boton automatico haga el trabajo que deberías hacer tu como buen programador. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Para comenzar necesitamos tener las librerías GCC y G++ instaladas en nuestro computador,</b> GCC para compilar archivos .c y G++ para compilar archivos .cpp, si no lo tienes instalado, accede a la terminal, una vez allí dentro veras algo como:</div>
<br />
<pre><code>usuario@Usuario-PC:~$
</code></pre>
<br />
Pega las siguientes lineas luego del símbolo dolar ($)<br />
<br />
<pre><code>sudo apt-get install gcc g++</code></pre>
<br />
<b></b><br />
<a name='more'></a><b>La terminal solicitará tu contraseña de root</b>, una vez realizado esto, las librerías comenzaran a instalarse de manera automática. Esta es la forma rápida, pero también, hay una forma mas gráfica, accediendo al centro de software de tu sistema operativo, introduce <b>gcc</b> y <b>g++</b> en el buscador, y descargarlas desde allí.<br />
<br />
Ya una vez que tienes tus librerías instaladas es hora de programar, supongamos que tengo los siguiente archivo.<br />
<h3>
programa.c</h3>
<pre class="prettyprint lang-js"><code>#include<stdio.h>
int main() {
printf("Hola Mundo\n");
return 0;
}</code></pre>
<h3>
programa.cpp</h3>
<pre class="prettyprint lang-js"><code>#include<iostream>
using namespace std;
int main() {
cout << "Hola Mundo" << endl;
return 0;
}</code></pre>
<br />
Los dos programas mostrados anteriormente, no son mas que el clásico <b>"Hola Mundo"</b> pero en version C (programa.c) y C++ (programa.cpp) que necesitan ser compilados, yo recomiendo al programador guardar los archivos en su carpeta personal, sencillo, es mas fácil de compilar y las lineas en la terminal serán mucho mas sencillas y cortas.<br />
<h3>
Compilar en C y C++</h3>
Para compilar se utiliza el siguiente formato<br />
<br />
<pre><code>(gcc o g++) ruta_del_archivo -o nombre_del_programa</code></pre>
<br />
Todo esto debe hacerse desde la terminal, tomando como ejemplo los programas anteriores, p<b>ara compilar el archivo en C</b> debes usar el siguiente código<br />
<br />
<pre><code>gcc programa.c -o programa_en_C</code></pre>
<br />
<b>y de este modo para C++
</b><br />
<br />
<pre><code>g++ programa.cpp -o programa_en_C++</code></pre>
<br />
Una vez conseguido compilar y si la terminal no muestra ningún error de sintaxis, desde la misma terminal y para ejecutar tu programa debes hacerlo de la siguiente manera<br />
<br />
<pre><code>./nombre_del_programa</code></pre>
<br />
<b>En nuestro caso</b><br />
<pre><code>./programa_en_C</code></pre>
<br />
o<br />
<pre><code>./programa_en_C++</code></pre>
<br />
La compilación de cualquiera de esos dos programas debería mostrar en la terminal lo siguiente<br />
<pre><code>Hola Mundo</code></pre>
<br />
Ni mas ni menos, esto es todo lo que debes saber para empezar a programar en C o C++ en las plataformas basadas en GNU/Linux.Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-77318905433102745702014-06-07T14:26:00.002-04:002014-06-08T09:58:58.196-04:00[7] Como crear tu pagina web HTML5/CSS3 desde cero - Extras y mejoras<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s640/html5-and-css3.jpg" /></a></div>
<br />
<b>Publicaciones relacionadas: </b><br />
<div class="separator" style="clear: both;">
</div>
<ul>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3.html" target="_blank">[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3_3.html" target="_blank">[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/4-como-crear-tu-pagina-web-html5css3.html" target="_blank">[4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/5-como-crear-tu-pagina-web-html5css3.html" target="_blank">[5] Como crear tu pagina web HTML5/CSS3 desde cero - La barra lateral</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/6-como-crear-tu-pagina-web-html5css3.html" target="_blank">[6] Como crear tu pagina web HTML5/CSS3 desde cero - El pie de página</a></li>
</ul>
<br />
<div style="text-align: justify;">
Hasta que por fin llegó el día del último tutorial, los abandoné estos 2 últimos días puesto que estaba trabajando en algunas mejoras que le hice a la pagina web con la que estamos trabajando. Podría decirse que me esmeré lo suficiente para traerles en este tutorial un contenido de calidad, y comentarles ademas, que mejoras se les pueden hacer muchas, infinidades, así que no te quedes con solo lo que hoy te daré, también, estaré dejando los archivos y recursos de la página listos para que los descarguen, y así trabajen de manera directa sobre el archivo que llevo yo en mi computador.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Antes de empezar a mostrar codigos, solo quiero comentar que este tutorial no se trata mas que de dar estilos extras a lo que ya llevamos de manera que luzca mucho mejor, eso es lo que queremos, ademas, tambien hablarles un poco sobre ciertas y nuevas etiquetas que trajo consigo el HTML5 y que serán aplicables en tu blog. Comenzamos</div>
<div style="text-align: justify;">
<br /></div>
<h2>
Elemento Dialog</h2>
<div style="text-align: justify;">
La etiqueta <b><dialog></b> no es mas que un elemento que te permite mostrar una conversación entre dos individuos, en esta era de las redes sociales, como <b>facebook, twitter, whatsapp o BBM</b> puede llegar a ser muy útil y mucho mas divertido para los usuarios.</div>
<h4 style="text-align: justify;">
Codigo HTML (Ejemplo)<a name='more'></a></h4>
<pre><code> <dialog>
<dt id="p1">Samuel</dt>
<dd id="m1">Knock, Knock.<time>Hace 9 minutos</time></dd>
<dt id="p2">Eric</dt>
<dd id="m2">Quien está allí?<time>Hace 8 minutos</time></dd>
<dt id="p1">Samuel</dt>
<dd id="m1">Justo.<time>Hace 4 minutos</time></dd>
<dt id="p2">Eric</dt>
<dd id="m2">Cual Justo?<time>Hace 3 minutos</time></dd>
<dt id="p1">Samuel</dt>
<dd id="m1">Justo a tiempo para la cena!<time>Hace 1 minuto</time></dd>
</dialog></code></pre>
<h4>
Codigo CSS</h4>
<br />
<pre><code> dialog {
width:100%;
color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
}
dialog dt {
clear:both;
width:54%;
font-family:"Arial", Gadget, sans-serif;
font-size:11px;
text-transform:uppercase;
font-weight:bold;
padding:2px 4px 2px 4px;
border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-radius:9px 9px 0px 0px;
-webkit-border-radius:9px 9px 0px 0px;
-moz-border-radius:9px 9px 0px 0px;
-o-border-radius:9px 9px 0px 0px;
-ms-border-radius:9px 9px 0px 0px;
}
dialog dd {
clear:both;
width:54%;
font-size:14px;
padding:2px 4px 2px 4px;
margin-left:0px;
margin-bottom:13px;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-radius:0px 0px 9px 9px;
-webkit-border-radius:0px 0px 9px 9px;
-moz-border-radius:0px 0px 9px 9px;
-o-border-radius:0px 0px 9px 9px;
-ms-border-radius:0px 0px 9px 9px;
}
dialog dt#p1 {
background: linear-gradient(#EEE, #CCC);
background: -webkit-linear-gradient(#EEE, #CCC);
background: -moz-linear-gradient(#EEE, #CCC);
background: -o-linear-gradient(#EEE, #CCC);
background: -ms-linear-gradient(#EEE, #CCC);
box-shadow:2px 0px 4px #333;
-webkit-box-shadow:2px 0px 4px #333;
-moz-box-shadow:2px 0px 4px #333;
-o-box-shadow:2px 0px 4px #333;
-ms-box-shadow:2px 0px 4px #333;
}
dialog dt#p2 {
background: linear-gradient(#666, #333);
background: -webkit-linear-gradient(#666, #333);
background: -moz-linear-gradient(#666, #333);
background: -o-linear-gradient(#666, #333);
background: -ms-linear-gradient(#666, #333);
text-align:right;
color:#EEE;
float:right;
box-shadow:-2px 0px 4px #333;
-webkit-box-shadow:-2px 0px 4px #333;
-moz-box-shadow:-2px 0px 4px #333;
-o-box-shadow:-2px 0px 4px #333;
-ms-box-shadow:-2px 0px 4px #333;
}
dialog dd#m1 {
background: linear-gradient(#CCC, #EEE);
background: -webkit-linear-gradient(#CCC, #EEE);
background: -moz-linear-gradient(#CCC, #EEE);
background: -o-linear-gradient(#CCC, #EEE);
background: -ms-linear-gradient(#CCC, #EEE);
box-shadow:2px 2px 4px #333;
-webkit-box-shadow:2px 2px 4px #333;
-moz-box-shadow:2px 2px 4px #333;
-o-box-shadow:2px 2px 4px #333;
-ms-box-shadow:2px 2px 4px #333;
}
dialog dd#m1 time {
display:block;
font-family:"Arial", Gadget, sans-serif;
font-size:8px;
text-transform:uppercase;
padding:3px 0px 3px 0px;
text-align:right;
}
dialog dd#m2{
background: linear-gradient(#333, #666);
background: -webkit-linear-gradient(#333, #666);
background: -moz-linear-gradient(#333, #666);
background: -o-linear-gradient(#333, #666);
background: -ms-linear-gradient(#333, #666);
text-align:right;
float:right;
color:#EEE;
box-shadow:-2px 2px 4px #333;
-webkit-box-shadow:-2px 2px 4px #333;
-moz-box-shadow:-2px 2px 4px #333;
-o-box-shadow:-2px 2px 4px #333;
-ms-box-shadow:-2px 2px 4px #333;
}
dialog dd#m2 time {
display:block;
font-family:"Arial", Gadget, sans-serif;
font-size:8px;
text-transform:uppercase;
padding:3px 0px 3px 0px;
text-align:left;
}
</code></pre>
<br />
Hemos definido una clase para cada persona del elemento, de manera que el dialogo se divida en dos tipos de burbujas como se muestra en la imagen
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-taVHkQp0EqhMCTxjW5SwUVEJybSyqssgH0wNKYdx92_s8-0aAXF3buYbdol_DOsW9NTS0Z09-v_VcEn_pOxqRAgWCDeK2x0lKlA0DnFgG6d49t4cXILAGt3M8uSjp8Bjuu9fOGbmxvM/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-taVHkQp0EqhMCTxjW5SwUVEJybSyqssgH0wNKYdx92_s8-0aAXF3buYbdol_DOsW9NTS0Z09-v_VcEn_pOxqRAgWCDeK2x0lKlA0DnFgG6d49t4cXILAGt3M8uSjp8Bjuu9fOGbmxvM/s1600/Captura.PNG" height="241" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<h2>
Elemento Figure y Figcaption</h2>
<div class="separator" style="clear: both; text-align: left;">
Las etiquetas <b><figure></b> y <b><figcaption></b> no es mas que una representación de una imagen con una leyenda, texto informativo o un subtitulo si así prefiere llamarlos, dentro de <figure> deberá ir todo el contenido que deseas introducir, y dentro de <b><figcaption> </b>el texto informativo, recordemos que la etiqueta <b><figcaption></b> debe abrir y cerrar dentro las las etiquetas <b><figure>...</figure></b></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<h4>
Codigo HTML</h4>
<pre><code><figure>
<img src="imagenes/adn.jpg" />
<figcaption>El ADN en los seres humanos</figcaption>
</figure></code></pre>
<br />
<h4>
Codigo CSS</h4>
<br />
<pre><code> figure {
background:#999;
padding-left:7px;
padding-right:7px;
border:1px solid #CCC;
border-radius:4px 4px 4px 4px;
box-shadow:2px 2px 4px #333;
}
figure figcaption {
font-size:13px;
text-align:center;
color:#333;
padding:2px 2px 2px 2px;
}
</code></pre>
<br />
y tenemos esto<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMW3uQyhnRW6aBB5x1KnGlCwZmP9qOZbi9JxdxZVkk_j6GtPuyYJIySE85HVTytkb5QRpGpTSc1ujhIVJhzmxWXzmNAQyi1HvLWIc3Khy0JflR3pqAlUzVBJLIuVjbsBHxpn2qfNZPt8A/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMW3uQyhnRW6aBB5x1KnGlCwZmP9qOZbi9JxdxZVkk_j6GtPuyYJIySE85HVTytkb5QRpGpTSc1ujhIVJhzmxWXzmNAQyi1HvLWIc3Khy0JflR3pqAlUzVBJLIuVjbsBHxpn2qfNZPt8A/s1600/Captura.PNG" height="232" width="320" /></a></div>
<br />
<h2>
Elemento Mark</h2>
Podría llamarse una sustitución del SPAN, y muestra simplemente un texto resaltado<br />
<br />
<h4>
Codigo HTML (ejemplo)</h4>
<pre><code><mark>Texto resaltado</mark></code></pre>
<h4>
Codigo CSS</h4>
<br />
<pre><code> mark {
background:linear-gradient(#EEE, #CCC);
font-size:16px;
padding:2px 2px 2px 2px;
box-shadow:2px 2px 4px #333, -2px -2px 4px #333;
}</code></pre>
Y así quedaría<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_hyphenhyphenPF5CAH2l_Ik-hAbwWv4oBYYnvBxjLpcKvpOAgIoU-_-qXVyBVQ4OLt1QtK4WHgi5lvTu2sWSQa4_LLImbKbDfW5jTXE2NbOa8XVYz8Xh5vyoiUBuqJZfGbbRMKGXu5hhYcbdxfUg/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_hyphenhyphenPF5CAH2l_Ik-hAbwWv4oBYYnvBxjLpcKvpOAgIoU-_-qXVyBVQ4OLt1QtK4WHgi5lvTu2sWSQa4_LLImbKbDfW5jTXE2NbOa8XVYz8Xh5vyoiUBuqJZfGbbRMKGXu5hhYcbdxfUg/s1600/Captura.PNG" /></a></div>
<br />
<h2>
Elemento Details/Summary</h2>
<br />
Al hacer clic sobre el elemento, despliega una sección que mostrará todo contenido que introduzca dentro de el<br />
<h4>
Codigo HTML (ejemplo)</h4>
<pre><code> <details>
<summary>Muestrame/Ocultame</summary>
<p>Texto u elementos que se mostrarán al hacer clic sobre el elemento</p>
</details></code></pre>
<h4>
Codigo CSS</h4>
<pre><code> details {
background:linear-gradient(#EEE, #CCC);
font-family:'Raleway', sans-serif;
font-size:14px;
padding:4px 4px 4px 8px;
color:#333;
border-radius:4px 4px 4px 4px;
box-shadow:2px 2px 4px #333;
}
details summary {
font-weight:bold;
font-size:18px;
padding:4px 2px 4px 8px;
transition:all ease-out .3s;
}</code></pre>
<br />
y así se vera
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmvHotOV1byZLxt2N_tCVR_en1XXU8oHjSGsob2vmGy6_i4e9i4R2NKYEgMa4wmOt3VtTXhILAuIsqBM-ysy0H48bectgHLjQlJADjmEDZGt6LXaKBCeabRyLYXdG9JchZZu_O-FaKwEs/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmvHotOV1byZLxt2N_tCVR_en1XXU8oHjSGsob2vmGy6_i4e9i4R2NKYEgMa4wmOt3VtTXhILAuIsqBM-ysy0H48bectgHLjQlJADjmEDZGt6LXaKBCeabRyLYXdG9JchZZu_O-FaKwEs/s400/Captura.PNG" /></a></div>
<br />
Hay gran cantidad de nuevos elementos en HTML5 como la integración de audio y vídeo sin necesidad de usar <b>flash player</b> u otro, sin embargo, hasta aqui llego este tutorial, solo fue una pequeña muestra de algunas mejoras que he hecho, espero que les haya gustado la serie de tutoriales, y hasta la próxima.
<br />
<br />
<h2 style="text-align: center;">
<a href="http://adf.ly/pMwqy" target="_blank"><b>Descargar archivos y recursos</b></a></h2>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com6tag:blogger.com,1999:blog-4896967509905126258.post-8193025399963465312014-06-05T14:51:00.000-04:002014-06-08T09:59:53.631-04:00[6] Como crear tu pagina web HTML5/CSS3 desde cero - El pie de página<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s640/html5-and-css3.jpg" /></a></div>
<br />
<b>Publicaciones relacionadas: </b><br />
<div class="separator" style="clear: both;">
</div>
<ul>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3.html" target="_blank">[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3_3.html" target="_blank">[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/4-como-crear-tu-pagina-web-html5css3.html" target="_blank">[4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/5-como-crear-tu-pagina-web-html5css3.html" target="_blank">[5] Como crear tu pagina web HTML5/CSS3 desde cero - La barra lateral</a></li>
</ul>
<div style="text-align: justify;">
Ya estamos casi finalizando la serie de tutoriales sobre <b>como crear tu propia pagina web HTML5 y CSS3 </b>de una manera muy sencilla, y llegamos al sexto y penúltimo tutorial; el pie de pagina, ultimo pero elemento no menos importante, pues puede ser muy útil si usas tu creatividad, el pie de pagina de una sitio web no debe ir muy recargado, solo debe contener información complementaria de dicho sitio, el usuario que visita un portal sabe que para obtener información sobre tu sitio como derechos de autor, incluso redes sociales o quien administra la pagina, se dirige hasta el pie de pagina sin rodeos, es por esto; que debemos mantener el estándar y no salirnos de los parámetros pues puede ser bastante incomodo para quien visualiza.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Añade el siguiente código entre las etiquetas <b><footer>...</footer></b> de tu pagina web
</div>
<div style="text-align: justify;">
<br /></div>
<pre class="prettyprint lang-js"><code>
<a href="#">Friki Bloggeo</a> &copy; Copyright 2014. Diseño y edición por <a href="#">Anthony Medina</a>
</code></pre>
<br />
Y se debe visualizar de este modo<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74m6ypBuhrCKPRVZeioc5s406sSGpS-ibyJpL52QjXwdkAc9zKyNyA-lNT4anenpYeQcLmIg5MGhtlTH_Z-Il97SXMJRDlXmkgLGLHfhMB_gvsEc13tt1Ndmmr4ROKSjR4B47Twax6I0/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74m6ypBuhrCKPRVZeioc5s406sSGpS-ibyJpL52QjXwdkAc9zKyNyA-lNT4anenpYeQcLmIg5MGhtlTH_Z-Il97SXMJRDlXmkgLGLHfhMB_gvsEc13tt1Ndmmr4ROKSjR4B47Twax6I0/s640/Captura.PNG" /></a></div>
<br />
<div style="text-align: justify;">
Simple, sencillo y al grano, no muestra mas que un mensaje de derechos de autor, y creador, autor del blog o pagina web, sin embargo, no tiene que ser asi, muchas personas le agregan el logotipo, quizás, secciones del menu que no pueden mostrar el menu principal, enlaces a redes sociales, todo eso queda a gusto de cada quien.
Añade los siguientes estilos CSS
</div>
<div style="text-align: justify;">
<br /></div>
<pre class="prettyprint lang-js"><code>
body footer a {
text-decoration:none;
color:#CCC;
transition:all ease-out .2s;
}
body footer a:hover {
text-decoration:underline;
color:#EEE;
}
</code></pre>
<br />
Y debe quedar de este modo
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRe-evh9oCZ7J9YT14icmYKQUh81sIGPsNDk-A7Kf4STlOhYUun1y_JbjKsaajGIChUFqjqyKJmm-1qNtbZ71jLZeULD72-54h70cZYmXKJrdArQa2YJgjNjl0E-4FBN7J-9Z5BRdnL_k/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRe-evh9oCZ7J9YT14icmYKQUh81sIGPsNDk-A7Kf4STlOhYUun1y_JbjKsaajGIChUFqjqyKJmm-1qNtbZ71jLZeULD72-54h70cZYmXKJrdArQa2YJgjNjl0E-4FBN7J-9Z5BRdnL_k/s640/Captura.PNG" /></a></div>
<br />
<div style="text-align: justify;">
Un cambio sencillo, nada especial. Como comenté en el tutorial anterior, en el próximo y ultimo tutorial estaré dejando un link de descarga de un archivo comprimido que contendrá el código fuente de esta pagina que hemos estado haciendo y ademas, los recursos usados como las imágenes. </div>
<br />
<b>Siguiente parte: <a href="http://frikibloggeo.blogspot.com/2014/06/6-como-crear-tu-pagina-web-html5css3_7.html">Extras y mejoras</a>
</b>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com1tag:blogger.com,1999:blog-4896967509905126258.post-42324373257690861692014-06-05T13:59:00.000-04:002014-06-05T14:54:10.596-04:00[5] Como crear tu pagina web HTML5/CSS3 desde cero - La barra lateral<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" height="320" width="640" /></a></div>
<br />
<b>Publicaciones relacionadas: </b><br />
<div class="separator" style="clear: both;">
</div>
<ul>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3.html" target="_blank">[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3_3.html">[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/4-como-crear-tu-pagina-web-html5css3.html">[4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido</a></li>
</ul>
<div style="text-align: justify;">
Continuamos con la serie de tutoriales y <b>ya casi estamos en la recta final,</b> este tutorial será bastante corto puesto a que ya hemos pasado la mayor parte, sin desacreditar a la barra lateral, también fundamental pues allí estarán ciertos elementos que son necesarios y que destacan en tu blog o pagina web.</div>
<div style="text-align: justify;">
<br /></div>
Copia y pega el siguiente código entre las etiquetas <b><aside>...</aside></b> de tu pagina
<br />
<pre class="prettyprint lang-js"><code>
<div id="widget">
<h2>Iniciar sesión</h2>
<div class="wcontenido">
<form name="login" id="login">
<input type="text" name="user" value="Usuario" size="21"><br>
<input type="password" name="pass" value="Contraseña" size="21"><br>
<input type="button" name="button" value="Login">
</form>
</div>
<h2>Disclaimer</h2>
<div class="wcontenido">
El contenido presente en este portal está protegido por una licencia de Creative Commons, el cual aprueba su uso, modificación y distribución avisando previamente al dueño del mismo y acreditando al final de la publicación.<a href="#">link</a> <span>hola</span>
</div>
</div>
</code></pre>
Hasta ahora se verá algo así<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpgBUEDIv_eLbCtgIk7LMtOGcb5REXnqPfWLwGQNTiQZf2Z95Fu6bVpvtF-rPbipQYYXn14ZNkzmUYgOD2XrPj7Hiy9K3nyrqDsqG6x2g68nqFgkEPEOZiXyM2s3UjAo3CnZKcNVSjo_k/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpgBUEDIv_eLbCtgIk7LMtOGcb5REXnqPfWLwGQNTiQZf2Z95Fu6bVpvtF-rPbipQYYXn14ZNkzmUYgOD2XrPj7Hiy9K3nyrqDsqG6x2g68nqFgkEPEOZiXyM2s3UjAo3CnZKcNVSjo_k/s1600/Captura.PNG" height="320" width="209" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Añade los siguientes estilos CSS
<br />
<pre class="prettyprint lang-js"><code>
body aside #widget {
padding-bottom:18px;
font-family:'Raleway',sans-serif;
}
body aside h2 {
width:78%;
float:right;
text-align:right;
font-size:21px;
}
body aside .wcontenido {
clear:both;
text-align:left;
text-align:justify;
padding-left:4%;
padding-right:4%;
font-size:16px;
}
body aside .wcontenido form {
text-align:center;
}
body aside .wcontenido form input[type=text] {
border:1px solid #2a2e31;
background-color:#2d3035;
color:#bcbcbc;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
padding:7px 12px;
/*MEJORAS
box-shadow:3px 3px 8px #333;
-webkit-box-shadow:3px 3px 8px #333;
-moz-box-shadow:3px 3px 8px #333;
-o-box-shadow:3px 3px 8px #333;
-ms-box-shadow:3px 3px 8px #333; */
}
body aside .wcontenido form input[type=text]:hover {
border:1px solid #FFF;
transition:all ease-in .3s;
}
body aside .wcontenido form input[type=password] {
border:1px solid #2a2e31;
background-color:#2d3035;
color:#bcbcbc;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
padding:7px 12px;
/*MEJORAS
box-shadow:3px 3px 8px #333;
-webkit-box-shadow:3px 3px 8px #333;
-moz-box-shadow:3px 3px 8px #333;
-o-box-shadow:3px 3px 8px #333;
-ms-box-shadow:3px 3px 8px #333; */
}
body aside .wcontenido form input[type=text]:password {
border:1px solid #FFF;
transition:all ease-in .3s;
}
body aside .wcontenido form input[type=button] {
position:relative;
left:-6px;
border:1px solid #FFF;
background:#666;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 );
color:#FFF;
cursor: pointer;
/*MEJORAS
margin-left:-49px;
border-radius:0px 15px 15px 0px;
padding:5px 14px 5px 14px;
*/
}
body aside .wcontenido form input[type=button]:hover{
background:#000;
transition:all ease-in .3s;
}
body aside .wcontenido form label {
font-weight:bold;
font-size:10px;
}
</code></pre>
<br />
y ya tendremos algo mas o menos vistoso.
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRnIGQexJco4usnrXIhWiopxiXdFVnGoEDhdo2eSVUmEy2sbV2Eu1YbouaTxJFiJUWtfpdNcwtSOROfRUpq3kiZ68c0RU-bsDyCPLHM8zg6qyX3YlBPSK6vXRlTjZCRobkKRZ1Kd4hA1k/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRnIGQexJco4usnrXIhWiopxiXdFVnGoEDhdo2eSVUmEy2sbV2Eu1YbouaTxJFiJUWtfpdNcwtSOROfRUpq3kiZ68c0RU-bsDyCPLHM8zg6qyX3YlBPSK6vXRlTjZCRobkKRZ1Kd4hA1k/s640/Captura.PNG" /></a></div>
<br />
<div style="text-align: justify;">
Mas adaptado a la anchura del sidebar, cabe destacar que he añadido algunas mejoras a la página como un fondo de madera, y unas cositas mas, eso va por tu parte, cuando finalice el ultimo tutorial, el numero 7 el cual se trata de extras y mejoras, estaré dejando el archivo que hemos creado a lo largo disponible para descargar, para que tu mismo revises y modifiques el portal a tu gusto.
Hasta el siguiente tutorial
<br />
<br />
<b>Siguiente parte: <a href="http://frikibloggeo.blogspot.com/2014/06/6-como-crear-tu-pagina-web-html5css3.html#more">El pie de página</a></b></div>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-74637859097416418332014-06-04T13:02:00.000-04:002014-06-05T14:15:42.170-04:00[4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" height="320" width="640" /></a></div>
<br />
<b>Publicaciones relacionadas: </b>
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3.html" target="_blank">[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3_3.html">[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú</a></li>
</ul>
<div style="text-align: justify;">
<b>¡Enhorabuena!</b> Hasta donde hemos llegado, es tiempo de una de las partes mas importantes dentro de un blog o pagina web, el contenido, la razón y el por que de que todos los usuarios visiten tu portal, es por esto que en esta parte tenemos que ser creativos,<b> llamar la atención</b>, jugar con colores, mostrar al usuario lo que quiere ver sin recargas ni rodeos. Para empezar, copia y pega el siguiente trozo de código dentro de las etiquetas
</div>
<pre class="prettyprint lang-js"><div style="text-align: justify;">
</div>
<code> <div id="atitulo"><a href="#">Aqui debe ir el titulo de contenido a mostrar</a></div>
<div id="ainfo">Publicado el dia <div class="fecha"><a href="#">20/10/2011</a></div> por <div class="autor"><a href="#">Anthony Medina</a></div> en <div class="ubicacion"><a href="#">San Felipe, Venezuela</a></div>
</div>
<img src="imagenes/Moviles_Doolphy_6151.png"/>
<div id="acontenido">
<!-- Empieza publicacion -->
Aqui ira el contenido el cual contendrá sus estilos propios, esto es un ejemplo de como se verá el <span>texto resaltado</span> y este es el ejemplo de como se verá un <a href="#">link</a>.
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<pre>Esto es un mensaje con pre</pre>
<code>Esto es un mensaje con code</code>
<pre contenteditable="true"><code>esto es un mensaje pre-code, mientras mas largo se hace menos cabe en la seccion por lo tanto debo darle estilos, ademas, esta caja contiene un atributo el cual permite editar su contenido a tu gusto</code></pre>
<blockquote>Esta en una cita</blockquote>
<table>
<th>Titulo 1</th>
<th>Titulo 2</th>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
<tr>
<td>Dato 3</td>
<td>Dato 4</td>
</tr>
</table>
<!-- Termina Publicación -->
</div>
</code></pre>
<br />
Hasta ahora, que llevamos<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghV829gC9qoxAHQJ6Rj_GEzpl2x04lJqGNfQGZ0ijsGg4y95Hu2mqdnGcfgLFEa6LzAuHFE8FkztA9qKCDadD_FM2BXn1c72y7Sb71ORY-JumFugB0gdAv8F9fmOzT4JhfKrEZhkaSodw/s1600/T%25C3%25ADtulo+de+la+p%25C3%25A1gina.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghV829gC9qoxAHQJ6Rj_GEzpl2x04lJqGNfQGZ0ijsGg4y95Hu2mqdnGcfgLFEa6LzAuHFE8FkztA9qKCDadD_FM2BXn1c72y7Sb71ORY-JumFugB0gdAv8F9fmOzT4JhfKrEZhkaSodw/s1600/T%25C3%25ADtulo+de+la+p%25C3%25A1gina.png" height="640" width="324" /></a></div>
<br />
<div style="text-align: justify;">
Podemos observar que dentro del código anterior se encuentran etiquetas fundamentales que tienen la necesidad de obtener estilos que se adapten al diseño del blog, entre ellas <b>h1, h2, h3, h4, h5, h6, pre, code, blockquote, table, th, td, tr</b>, entre otras; son etiquetas que a menudo se usan al momento de escribir un post en un blog, incluso se pueden usar para paginas web en todas las secciones, no precisamente tienen que ser usadas en el contenido.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ahora, necesitamos los estilos para estas etiquetas, los cuales, los colocaremos en el principio pues estas no son etiquetas hijas, si no que seran universales.</div>
<div style="text-align: justify;">
<br /></div>
<pre><code>
h1 {
font-family:'Raleway',sans-serif;
font-size:24pxpx;
}
h2 {
background:#EEE;
border:1px #333333 solid;
font-family:'Raleway',sans-serif;
font-size:30px;
color:#333;
font-weight:bold;
margin-top:14px;
margin-left:-31px;
padding-left:48px;
padding-right:9px;
margin-right:-9px;
box-shadow:#333 2px 2px 8px;
}
h3 {
font-family:'Raleway',sans-serif;
font-size:18px;
}
h4 {
font-family:'Raleway',sans-serif;
font-size:16px;
}
h5 {
font-family:'Raleway',sans-serif;
font-size:14px;
}
h6 {
font-family:'Raleway',sans-serif;
font-size:12px;
}
blockquote {
width:61%;
background:url(imagenes/iconos/1401872257_left_quote.png) no-repeat;
font-style:italic;
border:1px #CCC dashed;
padding:7px 7px 7px 133px;
}
span {
background:#CCC;
color:#333;
padding-left:3px;
padding-right:3px;
}
pre {
width:98%;
border:1px #CCC dashed;
background:#EEE;
color:#333;
font-size:14px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
padding:7px 7px 7px 7px;
box-shadow:#333 2px 2px 4px;
overflow:auto;
max-height:110px;
}
code {
width:100%;
font-family:"Lucida Console", Monaco, monospace;
}
table {
width:70%;
}
th {
text-align:center;
background:#CCC;
color:#333;
border:1px #333 solid;
text-transform:capitalize;
padding:2px 2px 2px 2px;
box-shadow:#333 2px 2px 4px;
}
td {
background:#FFF;
color:#333;
padding:2px 2px 2px 2px;
border:1px #333 solid;
box-shadow:#333 2px 2px 4px;
}
</code></pre>
<br />
<div style="text-align: justify;">
Aun faltan los estilos para lo que serian en este caso, secciones dentro de la sección article, como el titulo, los datos o información de la publicación, y los estilos predeterminados para las imágenes que se coloquen dentro de la misma. A continuación, pega los siguientes estilos debajo de las lineas CSS de la etiqueta <b>article</b></div>
<div style="text-align: justify;">
</div>
<pre><code>
body section article #atitulo {
background:#EEE;
border:1px #333333 solid;
font-family:'Raleway',sans-serif;
font-size:36px;
font-weight:bold;
text-align:left;
margin-top:14px;
margin-left:-44px;
padding-left:48px;
padding-right:9px;
margin-right:-9px;
box-shadow:#333 2px 2px 8px;
}
body section article #atitulo a {
text-decoration:none;
color:#333;
transition:all ease-in-out .3s;
}
body section article #atitulo a:hover {
color:#CCC;
}
body section article #ainfo {
padding:10px 10px 10px 10px;
font-family:'Raleway',sans-serif;
font-size:12px;
}
body section article #ainfo a {
text-decoration:none;
color:#FFF;
padding-left:21px;
font-weight:bold;
transition:all ease-in-out .3s;
}
body section article #ainfo a:hover {
color:#333;
}
body section article #ainfo .fecha {
display:inline;
background:url(imagenes/iconos/1401857434_calendar_alt_fill.png) no-repeat;
width:auto;
}
body section article #ainfo .autor {
display:inline;
background:url(imagenes/iconos/1401857300_user.png) no-repeat;
width:auto;
}
body section article #ainfo .ubicacion {
display:inline;
background:url(imagenes/iconos/1401857387_map_pin_fill.png) no-repeat;
width:auto;
}
body section article img {
width:98%;
border:#FFF 4px solid;
box-shadow:3px 3px 7px #333333;
margin-top:2%;
transition:all ease-in .4s;
}
body section article img:hover {
opacity:.8;
}
body section article #acontenido {
padding-top:8px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:17px;
}
body section article #acontenido a {
text-decoration:none;
color:#EEE;
transition:all ease-out .3s;
}
body section article #acontenido a:hover {
color:#FFF;
}
</code></pre>
<div style="text-align: justify;">
Pero espera, aun falta. <b>Toma el las lineas de CSS pertenecientes a la etiqueta article</b> y sustitúyelo por este</div>
<pre><div style="text-align: justify;">
</div>
<code> display:block;
width:95%;
height:auto;
margin:0 auto;
margin-top:5px;
margin-bottom:5px;
padding-left:5px;
padding-right:5px;
font-size:19px;
color:#CCC;
text-align:justify;
</code></pre>
<br />
Para cuando haya hecho lo anterior, tu sección deberá lucir de esta manera
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp9tcmWocuLIz0PhWeKUHNiaCSFq3mFWORw5R-wgYuWxznD52a3h98mAiRHxFc34KpCdFFc-ZhRXVT6QZXLBiLSe6L3PiYFTNozcurl9t3wfkCtgaFW6OsmhPbnJPZ51fDf_3PNFOgD3k/s1600/T%C3%ADtulo+de+la+p%C3%A1gina.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp9tcmWocuLIz0PhWeKUHNiaCSFq3mFWORw5R-wgYuWxznD52a3h98mAiRHxFc34KpCdFFc-ZhRXVT6QZXLBiLSe6L3PiYFTNozcurl9t3wfkCtgaFW6OsmhPbnJPZ51fDf_3PNFOgD3k/s1600/T%C3%ADtulo+de+la+p%C3%A1gina.png" height="640" width="342" /></a></div>
<br />
<div style="text-align: justify;">
Mucho mejor <b>¿No crees?. </b>Esto ha sido todo por este tutorial, nos vemos en el siguiente, en el cual estaremos hablando un poco sobre la barra lateral.<br />
<br />
<b style="text-align: start;">Siguiente parte: <a href="http://frikibloggeo.blogspot.com/2014/06/5-como-crear-tu-pagina-web-html5css3.html">La barra lateral</a></b></div>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com1tag:blogger.com,1999:blog-4896967509905126258.post-54264726167825496732014-06-03T15:07:00.002-04:002014-06-05T14:15:53.661-04:00[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" height="320" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Publicaciones relacionadas: </b></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración</a></li>
<li><a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3.html" target="_blank">[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera</a></li>
</ul>
<br />
<div style="text-align: justify;">
Continuando con la serie de tutoriales sobre <a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">como realizar una pagina web en lenguaje HTML5/CSS3</a>, y una vez terminada <a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3.html" target="_blank">la cabecera</a>, continuamos con la segunda sección, una de las mas importantes pues será el que llevara a los usuarios a cada pagina dentro de tu blog o pagina web, un sitio web sin menú es como comerse un huevo cocido sin sal, es una expresión muy popular acá en mi país, hermanos. Pero en fin, les muestro la estructura del menú, el cual debe incluirse entre la etiqueta <b><nav>...</nav> </b>del sitio
</div>
<div style="text-align: justify;">
<br /></div>
<pre class="prettyprint lang-js"><div style="text-align: justify;">
</div>
<code> <ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Blogs</a>
<ul>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Joomla!</a></li>
<li><a href="#">Blogia</a></li>
</ul>
</li>
<li><a href="#">Programación</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">VB.NET</a></li>
</ul>
</li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Generadores</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</code></pre>
<br />
Por los momentos se vería algo así<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilcPovBfgtWcoO5PzwE-grpfVt9FxVJ-v-pry3kWlaTuntVUUTlq3kq9ZG9N9EyxWX2_ncjpNORTZfMWvMH9WMit2TpjrAIGpQUOXfj7bvfZdiM-QJ0199DCxseVkfAjMlPk1A1GUUIoc/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilcPovBfgtWcoO5PzwE-grpfVt9FxVJ-v-pry3kWlaTuntVUUTlq3kq9ZG9N9EyxWX2_ncjpNORTZfMWvMH9WMit2TpjrAIGpQUOXfj7bvfZdiM-QJ0199DCxseVkfAjMlPk1A1GUUIoc/s400/Captura.PNG" /></a></div>
<br />
<div style="text-align: justify;">
E<b>s importante que sustituyamos el tamaño automático de la sección NAV en los estilos CSS, estableciéndole un limite de 28 píxeles,</b> de manera que este no se agrande a mas de ese punto, recurre a los estilos CSS de la etiqueta NAV y cambia el <b>height:auto;</b> por <b>height:28px;</b>.
Una vez realizado esto, pega el siguiente codigo CSS dentro de los estilos.
</div>
<div style="text-align: justify;">
<br /></div>
<pre class="prettyprint lang-js"><code>
body nav ul#menu {
width:100%;
height:auto;
}
body nav ul#menu a {
text-decoration:none;
color:#FFF;
transition:all ease-in .3s;
}
body nav ul#menu a:hover {
color:#2d3035;
}
body nav ul#menu li {
float:left;
margin: 0% 2%;
margin-top:2px;
list-style:none;
transition:all ease-in-out .7s;
padding-left:7px;
padding-right:7px;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-o-border-radius:10px 10px 10px 10px; /* Opera */
-ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
}
body nav ul#menu li:hover {
background:#EEE;
color:#2d3035;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-o-border-radius:10px 10px 10px 10px; /* Opera */
-ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
}
body nav ul#menu ul {
background:rgba(0, 0, 0, 0.8) url('') no-repeat fixed;
display:none;
position:absolute;
width:18%;
padding: 5px 5px 5px 18px;
margin: 0;
margin-top:2px;
border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px; /* Chrome y Safari */
-moz-border-radius:0px 0px 10px 10px; /* Firefox */
-o-border-radius:0px 0px 10px 10px; /* Opera */
-ms-border-radius:0px 0px 10px 10px; /* Internet Explorer */
}
body nav ul#menu ul li {
width:89%;
margin:2% 0%;
margin-top:2px;
margin-bottom:0px;
}
body nav ul#menu li:hover ul {
display:block;
}
</code><pre></pre>
<pre></pre>
</pre>
Y así es como se verá después de aplicarlos
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIe_ZrYGe1dVMx6BNEX57BubBf9FsiI4Fn9nl6sI39UD3ORrAdwj8jyn5g_RDD4h7wFwyL2BmAYiB7LcPEhCvIqOpn6vmiSbZusleNN6QejFN5nDinOXb0k4YkmNp2E3sLBKn3Fjod0xs/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIe_ZrYGe1dVMx6BNEX57BubBf9FsiI4Fn9nl6sI39UD3ORrAdwj8jyn5g_RDD4h7wFwyL2BmAYiB7LcPEhCvIqOpn6vmiSbZusleNN6QejFN5nDinOXb0k4YkmNp2E3sLBKn3Fjod0xs/s1600/Captura.PNG" height="24" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPoXozkcHFDNgnTCwcA_SJq8aFh2G1WNjn7yBKveRcgFu2xo8onwCVXTkACTFy6c0Cx3hHUQp7LmZfAkyHXbOxmT6SqLM5OwJ9oH0pzbDrB4g1hNEq4VPAZK3nJUCskvdzXkkx5vQ0Nc/s1600/Sin+t%25C3%25ADtulo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPoXozkcHFDNgnTCwcA_SJq8aFh2G1WNjn7yBKveRcgFu2xo8onwCVXTkACTFy6c0Cx3hHUQp7LmZfAkyHXbOxmT6SqLM5OwJ9oH0pzbDrB4g1hNEq4VPAZK3nJUCskvdzXkkx5vQ0Nc/s1600/Sin+t%25C3%25ADtulo.png" height="144" width="640" /></a></div>
<br />
Hasta el siguiente tutorial, si tienes alguna duda, pregúntame. Siempre a la orden.<br />
<br />
<b>Siguiente parte: <a href="http://frikibloggeo.blogspot.com/2014/06/4-como-crear-tu-pagina-web-html5css3.html">El contenido</a></b>Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-59063814278114361152014-06-02T15:27:00.000-04:002014-06-05T14:16:06.326-04:00[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpegVQoi9hky6-8TMB60pY28uFziFIJLq0_F_hI8ETMX7ePCosvCwhGjZwK70QwZbuclQ3X5GZ0NeZCsrkaWXZJDNCpnsHffS78gZ0viHVgxS2Jfx4YLRN7Co7EB3XMX5-azmPPmw7luQ/s1600/html5-and-css3.jpg" height="320" width="640" /></a></div>
<br />
<b>Publicación relacionada</b>: <a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración</a><br />
<br />
<div style="text-align: justify;">
Continuando con la serie de tutoriales sobre <b>como crear tu propia pagina HTML5/CSS3</b>, hoy traigo el siguiente, la segunda parte en el que estaremos hablando de la cabecera de la pagina, después de ver el <a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">tutorial sobre la estructuración del sitio</a>. Antes de comenzar, quiero mostrar quiero mostrar el código HTML y CSS de la sección de la pagina que nos compete en este tutorial, en este caso; <b>la cabecera
</b></div>
<div style="text-align: justify;">
<br /></div>
<pre class="prettyprint lang-js"><code>/* Código CSS para la cabecera */
body header {
display:block;
background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
width:88%;
height:auto;
margin:0 auto;
padding-top:29px;
padding-bottom:29px;
font-size:48px;
color:#FFF;
text-align:center;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-o-border-radius:10px 10px 10px 10px; /* Opera */
-ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
<!-- Código HTML --> }
...
<header>
Yo soy la cabecera
</header>
...</code></pre>
<br />
<div style="text-align: justify;">
Si te cuesta entender el código anterior, quizás; es necesario que le eches un vistazo al <a href="http://frikibloggeo.blogspot.com/2014/06/1-como-crear-tu-pagina-web-html5css3.html" target="_blank">tutorial anterior</a>.
Pero, en fin, continuando con lo que deseamos hacer, indaguemos e imaginemos un poco <b>¿Que lleva la cabecera de una pagina web o un blog?</b> No existen reglas que nos establezcan que poner o que no poner en una cabecera, sin embargo, siempre es recomendable no recargarla demasiado, en mi caso, <b>yo no le pondría mas que el titulo, la descripción, un cuadro de búsqueda, y quizás, unos cuantos botones de suscripción a redes como facebook, twitter y las fuentes RSS</b>. Agregamos los elementos antes mencionados con el siguiente código.</div>
<a name='more'></a><br />
<br />
<pre class="prettyprint lang-js"><code> <header>
<div id="hcontenido">
<div class="titulo">Friki Bloggeo</div>
<div class="descripcion">Tutoriales de programación web y desktop</div>
</div>
<div id="busqueda">
<form name="search" id="search">
<input type="text" value="Busqueda..." size="20"/>
<input type="button" value="Ir" name="buscar"/>
</form>
</div>
<div id="suscripciones">
<a href="#facebook"><img src="imagenes/rss/1401747768_facebook.png"></a><a href="#facebook"><img src="imagenes/rss/1401747781_twitter.png"></a><a href="#facebook"><img src="imagenes/rss/1401747789_rss.png"></a>
</div>
</header>
</code></pre>
<br />
Hasta el momento llevamos esto
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DkifMQ1gh92f2TszDd9tRJrBwCHqTt1i0111pvxguJECfUQA3t1MB7b00j8hJRu5P3RrT2V_9Ct-jsAAOL3sHaCMDvglWMdtORzlV8EgR92dNMRiAsxA8oTvNQ_Y_fhocdftOfDHDR4/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DkifMQ1gh92f2TszDd9tRJrBwCHqTt1i0111pvxguJECfUQA3t1MB7b00j8hJRu5P3RrT2V_9Ct-jsAAOL3sHaCMDvglWMdtORzlV8EgR92dNMRiAsxA8oTvNQ_Y_fhocdftOfDHDR4/s400/Captura.PNG" /></a></div>
<br />
<div style="text-align: justify;">
Exagerado, grotesto, estrámbotico y ordinario, pero viene la magia, viene el que todo lo puede, los estilos CSS que son de manera literal, el alma de las paginas web. Aplicamos los siguientes estilos CSS
</div>
<div style="text-align: justify;">
<br /></div>
<pre class="prettyprint lang-js"><code> body header #hcontenido {
width:70%;
padding-bottom:14px;
float:left;
}
body header #hcontenido .titulo {
text-transform:capitalize;
text-align:left;
padding-left:19px;
font-family:'Raleway',sans-serif;
}
body header #hcontenido .descripcion {
text-transform:capitalize;
text-align:left;
padding-left:19px;
font-family:'Raleway',sans-serif;
font-size:16px;
}
body header #busqueda {
float:left;
width:30%;
}
body header #busqueda input[type=text] {
border:1px solid #2a2e31;
background-color:#2d3035;
color:#bcbcbc;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
padding:7px 12px;
}
body header #busqueda input[type=text]:hover {
border:1px solid #FFF;
transition:all ease-in .3s;
}
body header #busqueda input[type=button] {
position:relative;
left:-6px;
border:1px solid #FFF;
background:#666;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 );
color:#FFF;
cursor: pointer;
}
body header #busqueda input[type=button]:hover{
background:#000;
transition:all ease-in .3s;
}
body header #suscripciones {
display:block;
clear:both;
width:auto;
height:auto;
margin-left:66%;
}
body header #suscripciones a {
padding-left:7px;
padding-right:7px;
}
body header #suscripciones a img:hover {
opacity:0.6;
transition:all ease-in-out .3s;
}</code></pre>
<br />
y pasamos a esto
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmad_0BDtte8E76AnOQpV2lusD62o-rYX49pk5NBjpYXlzF36n10iofDbzj6p2o3WWKVM_rLj4EZ5riwN4u7j0Uq5l_Lyaz3Kh-ewnctYRhyphenhyphenDCax_xtAMLDBNrLyZXmGIAXTofBIM7MI/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmad_0BDtte8E76AnOQpV2lusD62o-rYX49pk5NBjpYXlzF36n10iofDbzj6p2o3WWKVM_rLj4EZ5riwN4u7j0Uq5l_Lyaz3Kh-ewnctYRhyphenhyphenDCax_xtAMLDBNrLyZXmGIAXTofBIM7MI/s400/Captura.PNG" /></a></div>
<br />
Para la fuente del titulo use la fuente "Raleway" de google fonts, si desean usarla solo agreguen este codigo justo antes de <b></head></b><br />
<b><br /></b>
<pre class="prettyprint lang-js"><code><link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'></code></pre>
<pre class="prettyprint lang-js"><code>
</code></pre>
<div style="text-align: justify;">
Recuerda que esto solo es una representación de una cabecera, tu puedes personalizarla a tu gusto, aquí no doy mas que herramientas de enseñanzas, esto es todo por este tutorial, si tienes alguna duda, pregúntame, con gusto responderé. Nos vemos en la próxima parte.<br />
<br />
<b>Parte 3: <a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3_3.html" target="">El Menú desplegable</a></b></div>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com5tag:blogger.com,1999:blog-4896967509905126258.post-38903156257812559532014-06-01T19:28:00.002-04:002014-06-05T14:58:12.040-04:00[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UJK4cQf8XP7O8823psj5GxyvlMT0yg1OynhPAFPoovyum5DXe5jCEkZbaQjhYRLViz-KMOaTBcC7107_QiTwPg6U9xuHXrt2Hawxor4gtvJGx653Gr4b3Q7kK4rrj9giJ5AvPx0sQAw/s1600/html5-and-css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UJK4cQf8XP7O8823psj5GxyvlMT0yg1OynhPAFPoovyum5DXe5jCEkZbaQjhYRLViz-KMOaTBcC7107_QiTwPg6U9xuHXrt2Hawxor4gtvJGx653Gr4b3Q7kK4rrj9giJ5AvPx0sQAw/s1600/html5-and-css3.jpg" height="320" width="640" /></a></div>
<br />
<div style="text-align: justify;">
HTML5 ha dado mucho de que hablar desde la fecha de su lanzamiento por las inmensas mejoras y novedades que este trajo consigo, tanto así, que ahora es mucho mas fácil para un nuevo "programador" aprender la codificación mas rápida, aunque los navegadores aceptan el uso de HTML5 hay algunas personas que prefieren usar el HTML antiguo para programar quizás por miedo a que algo salga mal por incompatibilidad, quizás si, quizás no, <b>pero nunca esta de mas actualizarse</b>. Cabe destacar que este tutorial lo dividiré 7 en partes, <b>La estructuración, <a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3.html" target="_blank">la cabecera</a>, <a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3_3.html" target="_blank">el menú</a>, <a href="http://frikibloggeo.blogspot.com/2014/06/4-como-crear-tu-pagina-web-html5css3.html" target="_blank">el contenido</a>, <a href="http://frikibloggeo.blogspot.com/2014/06/5-como-crear-tu-pagina-web-html5css3.html" target="_blank">la barra lateral</a>, <a href="http://frikibloggeo.blogspot.com/2014/06/6-como-crear-tu-pagina-web-html5css3.html#more" target="_blank">el pie de pagina</a> y extras</b>. La verdad, no me quiero extender mucho en la introducción a este tutorial pues, ya en sí, es bastante largo. Solo me queda decirle que indica.</div>
<div style="text-align: justify;">
<h2>
Estructuración inicial de la página</h2>
</div>
<div style="text-align: justify;">
Antes de iniciar, me gustaría comentarle que este punto es un muy importante, <b>pues significo la mas grande mejora que nos trajo la nueva versión de HTML</b> pues nos hace mas fácil la vida otorgándoles nombres propios a las regiones que usamos usualmente en paginas web o blogs. El siguiente código es un pequeño ejemplo de como se estructuraba una pagina web en HTML versión antigua usando DIV con identificadores</div>
<pre class="prettyprint lang-js"><code><!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título de la página</title>
</head>
<body>
<div id="header">
</div>
<div id="menu">
</div>
<div id="contenedor">
<div id="contenido">
</div>
<div id="barralateral">
</div>
</div>
<div id="piedepagina">
</div>
</body>
</html>
</code></pre>
<a name='more'></a><br />
Podemos observar que tenemos varias secciones identificadas como <i>header</i>, <i>menu</i>, <i>contenedor</i>, <i>contenido</i>,<i>barra lateral, y piedepagina</i>, pero esto ya no será mas con HTML5 pues ya estas secciones tiene su propia etiqueta identificadas como <i><b>header</b></i> para la cabecera, <i><b>nav</b></i> para el menu, <i>section</i> para el contenido y dentro de ella, <b><i>article</i></b> para un articulo cualquiera, <b><i>aside</i></b> para la barra lateral y <b><i>footer</i></b> para el pie de pagina. <b>A continuación, se muestra la nueva estructuración en HTML5
</b><br />
<pre class="prettyprint lang-js"><code><!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título de la página</title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<div id="contenedor">
<section>
<article>
</article>
</section>
<aside>
</aside>
</div>
<footer>
</footer>
</body>
</html>
</code></pre>
<h1>
Dar estilos a las secciones con CSS</h1>
<div style="text-align: justify;">
Antes de dar estilo a la página, necesitamos visualizar cada una de las secciones, lo que haremos es colocar una linea de texto dentro de cada una de ellas con el fin de poder hacerlas visibles con el siguiente código.</div>
<pre class="prettyprint lang-js"><code><!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título de la página</title>
</head>
<body>
<header>
Yo soy la cabecera
</header>
<nav>
Yo soy el menú
</nav>
<div id="contenedor">
<section>
<article>
Yo soy un articulo
</article>
</section>
<aside>
Yo soy la barra lateral
</aside>
</div>
<footer>
Yo soy el pie de página
</footer>
</body>
</html>
</code></pre>
<div style="text-align: justify;">
</div>
Hasta el momento no tienes más que esto<br />
<br />
<pre class="prettyprint lang-js">Yo soy la cabecera
Yo soy el menú
Yo soy un articulo
Yo soy la barra lateral
Yo soy el pie de página</pre>
No se ve mas que las secciones sin estilos, fuera de lugar pues todas se muestran en bloques, cosa que no deseamos que ocurra ni con la sección, ni con la barra lateral, o con cualquier otro, dependiendo del estilo que desees darle, va con tu personalidad, veamos la siguiente hoja de estilos, la cual debes colocar encima del <b></head></b> de tu página<br />
<pre class="prettyprint lang-js"><code> <style type="text/css">
/* Hoja de estilos */
body {
background:#EEE url('') no-repeat fixed;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
}
body header {
display:block;
background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
width:88%;
height:auto;
margin:0 auto;
padding-top:29px;
padding-bottom:29px;
font-size:48px;
color:#FFF;
text-align:center;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-o-border-radius:10px 10px 10px 10px; /* Opera */
-ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
}
body nav {
display:block;
background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
width:88%;
height:auto;
margin:0 auto;
margin-top:5px;
font-size:19px;
color:#FFF;
text-align:center;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-o-border-radius:10px 10px 10px 10px; /* Opera */
-ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
}
body #contenedor {
display:block;
width:88%;
margin:0 auto;
}
body section {
display:block;
float:left;
background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
width:69%;
height:auto;
margin-top:5px;
font-size:19px;
color:#FFF;
text-align:center;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-o-border-radius:10px 10px 10px 10px; /* Opera */
-ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
}
body section article {
display:block;
background:rgba(255, 255, 255, 0.6) url('') no-repeat fixed;
width:95%;
height:auto;
margin:0 auto;
margin-top:5px;
margin-bottom:5px;
padding-left:5px;
padding-right:5px;
font-size:19px;
color:#000;
text-align:justify;
border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px; /* Chrome y Safari */
-moz-border-radius:5px 5px 5px 5px; /* Firefox */
-o-border-radius:5px 5px 5px 5px; /* Opera */
-ms-border-radius:5px 5px 5px 5px; /* Internet Explorer */
}
body aside {
display:block;
float:left;
background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
width:30%;
height:auto;
margin-top:5px;
margin-left:1%;
font-size:19px;
color:#FFF;
text-align:center;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-o-border-radius:10px 10px 10px 10px; /* Opera */
-ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
}
body footer {
display:block;
clear:both;
background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
width:88%;
height:auto;
margin:0 auto;
margin-top:44px;
font-size:19px;
color:#FFF;
text-align:center;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-o-border-radius:10px 10px 10px 10px; /* Opera */
-ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
}
</style></code></pre>
<br />
<br />
<div style="text-align: justify;">
De la pagina aburrida y fea que teníamos antes, pasamos a esto con el código CSS anterior.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIO_MXQaxImVPASrhtam_tN6QixBkzQQFcYSzNnHCpvIg2wp997Hc5vo1Im2VLVWuL5pJSZLNhYzKBzGMtR6vX2LzozjVeKxND4QEyP4keoe_-e-GEBU910ViII4ekK36Wv2LvoqwF-SI/s1600/Captura.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIO_MXQaxImVPASrhtam_tN6QixBkzQQFcYSzNnHCpvIg2wp997Hc5vo1Im2VLVWuL5pJSZLNhYzKBzGMtR6vX2LzozjVeKxND4QEyP4keoe_-e-GEBU910ViII4ekK36Wv2LvoqwF-SI/s1600/Captura.PNG" height="316" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div>
<b>Recuerda que no tienes que usar precisamente este modelo de pagina que te estoy mostrando, es solo una representación de como se estructura correctamente una pagina web</b>, aunque si puedes usar esta como base si eso deseas, modificar a tu gusto, ahora, pasemos a la explicación de cada propiedad que se uso en el código CSS,</div>
<br />
<t r="">
</t>
<br />
<table border="0">
<tbody>
<tr>
<td><div style="text-align: center;">
<b style="background-color: #f1c232;">Propiedad</b></div>
</td>
<td><div style="text-align: center;">
<b style="background-color: #6fa8dc;">Descripción</b></div>
</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">background</span><span class="pun" style="color: #666600;">:#</span><span class="pln">EEE url</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">''</span><span class="pun" style="color: #666600;">)</span><span class="pln"> no</span><span class="pun" style="color: #666600;">-</span><span class="pln">repeat fixed</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td><td>Define el color de fondo se una sección, si se colocara una sección sobre otra, sin establecer ningún color de fondo a la superpuesta, esta simplemente sera invisible, por lo que se vera el color de fondo de la sección subpuesta, permite colocar colores en códigos hexadecimales, escritos en inglés, o rgba, como también, la url de una imagen, <i>no-repeat</i> permite que la imagen no se repita, y <i>fixed</i> la ajusta a la sección.</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">font</span><span class="pun" style="color: #666600;">-</span><span class="pln">family</span><span class="pun" style="color: #666600;">:</span><span class="str" style="color: #008800;">"Trebuchet MS"</span><span class="pun" style="color: #666600;">,</span><span class="pln"> </span><span class="typ" style="color: #660066;">Arial</span><span class="pun" style="color: #666600;">,</span><span class="pln"> </span><span class="typ" style="color: #660066;">Helvetica</span><span class="pun" style="color: #666600;">,</span><span class="pln"> sans</span><span class="pun" style="color: #666600;">-</span><span class="pln">serif</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td>
<td>Fuente de la sección</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">font</span><span class="pun" style="color: #666600;">-</span><span class="pln">size</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">14px</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td>
<td>Tamaño de la fuente</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">display</span><span class="pun" style="color: #666600;">:</span><span class="pln">block</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td>
<td>Muestra las secciones una encima de otra, en bloques</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">width</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">88</span><span class="pun" style="color: #666600;">%;</span></code></pre>
</td>
<td>Establece el ancho de la sección, es recomendable siempre trabajar en porcentaje</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">height</span><span class="pun" style="color: #666600;">:</span><span class="kwd" style="color: #000088;">auto</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td>
<td>Establece el alto de la sección, es recomendable que su valor siempre sea automático.</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">margin</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">0</span><span class="pln"> </span><span class="kwd" style="color: #000088;">auto</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td>
<td>Centra la sección, para que se vea en el medio sin importar la resolucion del computador</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code>padding</code></pre>
</td>
<td>(<i>-top, -right, -left, -bottom</i>)Establece los margenes internos de la sección</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">border</span><span class="pun" style="color: #666600;">-</span><span class="pln">radius</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pun" style="color: #666600;">;</span><span class="pln">
</span><span class="pun" style="color: #666600;">-</span><span class="pln">webkit</span><span class="pun" style="color: #666600;">-</span><span class="pln">border</span><span class="pun" style="color: #666600;">-</span><span class="pln">radius</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pun" style="color: #666600;">;</span><span class="pln"> </span><span class="com" style="color: #880000;">/* Chrome y Safari */</span><span class="pln">
</span><span class="pun" style="color: #666600;">-</span><span class="pln">moz</span><span class="pun" style="color: #666600;">-</span><span class="pln">border</span><span class="pun" style="color: #666600;">-</span><span class="pln">radius</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pun" style="color: #666600;">;</span><span class="pln"> </span><span class="com" style="color: #880000;">/* Firefox */</span><span class="pln">
</span><span class="pun" style="color: #666600;">-</span><span class="pln">o</span><span class="pun" style="color: #666600;">-</span><span class="pln">border</span><span class="pun" style="color: #666600;">-</span><span class="pln">radius</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pun" style="color: #666600;">;</span><span class="pln"> </span><span class="com" style="color: #880000;">/* Opera */</span><span class="pln">
</span><span class="pun" style="color: #666600;">-</span><span class="pln">ms</span><span class="pun" style="color: #666600;">-</span><span class="pln">border</span><span class="pun" style="color: #666600;">-</span><span class="pln">radius</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pln"> </span><span class="lit" style="color: #006666;">10px</span><span class="pun" style="color: #666600;">;</span><span class="pln"> </span><span class="com" style="color: #880000;">/* Internet Explorer */</span></code></pre>
</td>
<td>Establece bordes redondeados para las secciones</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">text</span><span class="pun" style="color: #666600;">-</span><span class="pln">align</span><span class="pun" style="color: #666600;">:</span><span class="pln">center</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td>
<td>Alinea el texto a la derecha</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="kwd" style="color: #000088;">float</span><span class="pun" style="color: #666600;">:</span><span class="pln">left</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td>
<td>Alinea la sección a la izquierda, en este caso</td>
</tr>
<tr>
<td><pre class="prettyprint lang-js prettyprinted" style="background: rgb(250, 248, 240); border: 1px solid rgb(136, 136, 136); overflow: auto; padding: 2px; white-space: pre-wrap;"><code><span class="pln">clear</span><span class="pun" style="color: #666600;">:</span><span class="pln">both</span><span class="pun" style="color: #666600;">;</span></code></pre>
</td>
<td>Permite que una sección no se superponga sobre anteriores secciones flotantes, en este caso, no se suba encima del contenido y la barra lateral.</td>
</tr>
</tbody></table>
<br />
<div>
<a href="http://frikibloggeo.blogspot.com/2014/06/2-como-crear-tu-pagina-web-html5css3.html"><b>Parte 2: La Cabecera</b></a></div>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-47882057579324316372014-05-29T15:00:00.001-04:002014-05-29T15:25:58.547-04:00Crear tu propia versión móvil de tu página web o blog<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT5j8pa-gQ0hi7mi0RCfHew430jCjhVhQRXPKkKviu08D4jPo1IA1aTQmZsmnN5prAkRAzLfcnBZJFcQUvz4n76lj5P7sQBX6XLVpON_IDu-3Ni3vLxqiCiQU1ntcNd3_h_eWC40NcmW0/s1600/Moviles_Doolphy_6151.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT5j8pa-gQ0hi7mi0RCfHew430jCjhVhQRXPKkKviu08D4jPo1IA1aTQmZsmnN5prAkRAzLfcnBZJFcQUvz4n76lj5P7sQBX6XLVpON_IDu-3Ni3vLxqiCiQU1ntcNd3_h_eWC40NcmW0/s1600/Moviles_Doolphy_6151.png" height="384" width="640" /></a></div>
<b><br /></b>
<b>Los smartphones y tablets han venido ganando terreno alrededor de los últimos años</b> en cuanto al uso de Internet móvil, para muchas personas es indispensable, y como no serlo, si existen millones de aplicaciones que te hacen la vida mucho mas fácil, <b>desde conectarte a internet hasta realizar transacciones bancarias sin tener que ir al banco</b>, por ejemplo. Por esta razón, muchas personas han optado por adquirir un dispositivo móvil que puedan llevar a cualquier lugar, valga la redundancia.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Anteriormente, realice una publicación sobre como <a href="http://frikibloggeo.blogspot.com/2014/05/ajustar-tu-blog-o-pagina-para-que-se.html" target="_blank"><b>ajustar tu blog o pagina web a la resolucion del dispositivo en el que se visualiza</b></a>, muy útil herramienta que les ayudará a que los usuarios obtengan una mejor impresión de tu sitio o blog, no obstante; está publicación es muy parecida aunque con una pequeña o gran diferencia, depende de como lo quieras ver. La anterior publicación simplemente consiste en adaptar los estilos CSS al tamaño de la pantalla del dispositivo, esta se trata de crear dos hojas de estilos, y que el navegador aplique cada una de estas dependiendo de la resolución, reconociendo si la pagina se esta visualizando de un computador o de un movil. Ejemplo sencillo:</div>
<div style="text-align: justify;">
<br /></div>
Así es como se vería este blog en <b>computadores
</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4o4I4vjJ4zgXraIiq8ko2KqqO3ZF2fOw5x9OjSOqDYbYSVjQ33imexG3ZXyYw6ebIKJWjbd3LDjH05qKB0g6gOzRfssDUCs_Ozbfqn8Vp1NMSl3IvUY1N9PEcjFRAs-MEBA8_H58tok4/s1600/frikiresolc.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4o4I4vjJ4zgXraIiq8ko2KqqO3ZF2fOw5x9OjSOqDYbYSVjQ33imexG3ZXyYw6ebIKJWjbd3LDjH05qKB0g6gOzRfssDUCs_Ozbfqn8Vp1NMSl3IvUY1N9PEcjFRAs-MEBA8_H58tok4/s1600/frikiresolc.PNG" height="196" width="400" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Así es como se vería este blog en <b>móviles</b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSOWtsrNfJ-zB5DTKkr8PyL2RQx30Tp8q-WaQDpFOC-wH4hS4IkipuVictgZa_FpqXHKX6kgWYn4DywTFgL8KRBqYvpGoga0FuNkoEzB2ipxc20vf7MBDYZwpn-8woLP3xAneTNf6_8n4/s1600/Screenshot_2014-05-29-13-39-43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSOWtsrNfJ-zB5DTKkr8PyL2RQx30Tp8q-WaQDpFOC-wH4hS4IkipuVictgZa_FpqXHKX6kgWYn4DywTFgL8KRBqYvpGoga0FuNkoEzB2ipxc20vf7MBDYZwpn-8woLP3xAneTNf6_8n4/s1600/Screenshot_2014-05-29-13-39-43.png" height="320" width="90" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9C-tRlJFCw7lP4a1l3zQ9llw_y5mB5qQ_oXLxSDux9SGPXc8TwKQ5vru7E5rvFq6Gwb4r6Jh57EHAiUrdobx9mHosLaWW_dkNWmMl8rRPyQMLAFA3Nj1At4AuWdhq8quPUnWvljkfVKc/s1600/Screenshot_2014-05-29-13-40-07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9C-tRlJFCw7lP4a1l3zQ9llw_y5mB5qQ_oXLxSDux9SGPXc8TwKQ5vru7E5rvFq6Gwb4r6Jh57EHAiUrdobx9mHosLaWW_dkNWmMl8rRPyQMLAFA3Nj1At4AuWdhq8quPUnWvljkfVKc/s1600/Screenshot_2014-05-29-13-40-07.png" height="320" width="91" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhHuUhC6Jq15PgHiMFnRi0jzyyvyVJkepPmPildT72w63kDCq9dzyqv8RymBC0ro9vxVlm9gXYvvKa3x_rkBsMn-AWfymLLr16M0GDQsq3bYRrPG1VLcK2TPw_I5njdvEDF9pnW0A8rE/s1600/Screenshot_2014-05-29-13-40-12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhHuUhC6Jq15PgHiMFnRi0jzyyvyVJkepPmPildT72w63kDCq9dzyqv8RymBC0ro9vxVlm9gXYvvKa3x_rkBsMn-AWfymLLr16M0GDQsq3bYRrPG1VLcK2TPw_I5njdvEDF9pnW0A8rE/s1600/Screenshot_2014-05-29-13-40-12.png" height="320" width="96" /></a></div>
<a name='more'></a><br />
<div style="text-align: justify;">
Si bien, por ejemplo, <b>en plataformas como blogger te crea un versión móvil automáticamente</b>, muy pocas o ninguna vez se adapta al estilo que llevas en tu versión de escritorio o web, dando la impresión de que son dos paginas diferentes, ademas, <b>una gran ventaja es que puedes poner la publicidad de adsense en la versión móvil</b>, <b>cosa que no muestra la versión automatizada de blogger</b>, con este truco; te mostrare a crear la versión móvil adaptando los estilos. Antes de empezar, te sugiero entrar a tu blog o sitio web de tu navegador,<b> mira lo que es necesario y lo que es innecesario, recuerda que las personas en móviles solo quieren ver lo que necesitan ver,</b> no es necesario que recargues la versión móvil con todos los gadgets o widgets que presentas en la version web, pues; ademas de que se ve demasiado tedioso se hace mas lenta al cargar.</div>
<div style="text-align: justify;">
<br /></div>
<b>A continuación, realiza el siguiente paso:</b><br />
<br />
<b>1) </b>Ubícate dentro de la sección "<b>Plantilla</b>" de tu blog, y justo, donde se muestra una captura la versión móvil automática de blogger, hay debajo de esta un botón con un engranaje, haz clic allí y marca la opción "<b>No mostrar la plantilla para tu ordenador en los dispositivos móviles</b>", y guarda. Una vez hecho esto, retiraras la prioridad de establecer la plantilla automática en móviles.<br />
<br />
<div style="text-align: justify;">
<b>2)</b> Ve a la <b>edición HTML</b> de tu blog, y pega el siguiente código en los metatags ubicados en el <b><head></b></div>
<div style="text-align: justify;">
<br /></div>
<pre class="prettyprint lang-js"><code><meta content='width=device-width' name='viewport'/></code></pre>
<br />
<div style="text-align: justify;">
Esta linea lo que hará simplemente es reconocer el dispositivo desde el que se visualiza la pagina y la resolución de la pantalla.</div>
<div style="text-align: justify;">
<br /></div>
<b>3) </b>Creando y usando las hojas de estilos:<br />
<br />
<pre class="prettyprint lang-js"><link href='css/movil.css' media='handheld, only screen and (max-device-width: 480px)' rel='stylesheet' type='text/css'/>
<link href='css/escritorio.css' media='screen and (min-width: 481px)' rel='stylesheet' type='text/css'/>
</pre>
<br />
<div style="text-align: justify;">
En el caso de que estés creando una pagina web o un sitio de wordpress, simplemente pega este código debajo del <b><head></b> de tu pagina, sustituyendo lo que se muestra en negrita por las direcciones de las hojas de estilos para móvil o escritorio.</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
En el caso de que estés usando la plataforma blogger, todo el codigo CSS que tienes dentro de tu <b><b:skin>...</b:skin></b> córtalo y pegarlo en un documento .css y llámalo <b>escritorio.css</b>, lo puedes hacer en el bloc de notas de Windows, luego; lo subes a un servidor para obtener una dirección en linea, yo personalmente te recomiendo subirlo a Google Sites. Ademas, también crea un documento .css en el bloc de notas llamado <b>movil.css</b>, súbelo y pega la dirección que te proporcione donde corresponda.</div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Al momento de abrir tu pagina o blog en computadores, los estilos CSS de escritorio seran los otorgados a tu blog, pero si lo abres en moviles, ya se vera los estilos que le proporcionaste en la hoja de estilos movil.css.</div>
</div>
<div>
<h2>
Ocultar secciones para que se visualizen solo en una de las dos versiones</h2>
</div>
<div>
Ocurre que siempre vamos a tener secciones, como la barra lateral que esta muy recargada de gadgets, y no es recomendable que se visualice en la versión móvil, y necesitamos ocultarla pero no podemos eliminarla del blog, obvia y lógicamente, si hiciéramos esto, tampoco se mostraría en la versión de escritorio. Ten en cuenta el nombre de la sección que quieres ocultar, sea una etiqueta, clase o identificador, usaras las siguientes propiedades:</div>
<div>
<br /></div>
<div>
<b>Si es una etiqueta:</b></div>
<pre class="prettyprint lang-js"><code>seccion {
opacity:0;
position:absolute;
}</code></pre>
<div>
<b>Si es una clase:</b></div>
<pre class="prettyprint lang-js"><code>.seccion {
opacity:0;
position:absolute;
}</code></pre>
<div>
<b>Si es un identificador:</b></div>
<pre class="prettyprint lang-js"><code>#seccion {
opacity:0;
position:absolute;
}</code></pre>
<div>
<br /></div>
<div>
Esto es todo, si tienes alguna duda al respecto, no dudes en preguntar.</div>
Anthony Medinahttp://www.blogger.com/profile/06823521060136421143noreply@blogger.com0tag:blogger.com,1999:blog-4896967509905126258.post-19837183398157322272014-05-27T20:41:00.004-04:002014-05-29T15:30:57.439-04:00Ajustar tu blog o pagina para que se adapte a la resolución del dispositivo en el que se visualiza<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUs4a2oDUK1Qlr4JpaGiTTLCerbYfU_7Nzz44dtTzWdkQtv6KPUItVX-mUV9jWPQKJKlfZip6ScBJIPIopyGvsOx6KNTpvs9SQeZ7r6onwxEgigOE87yjOwbkhpDUgIp5fG5eAM7aY4-4i/s1600/ajustar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUs4a2oDUK1Qlr4JpaGiTTLCerbYfU_7Nzz44dtTzWdkQtv6KPUItVX-mUV9jWPQKJKlfZip6ScBJIPIopyGvsOx6KNTpvs9SQeZ7r6onwxEgigOE87yjOwbkhpDUgIp5fG5eAM7aY4-4i/s1600/ajustar.jpg" /></a></div>
<br />
<b>Publicación relacionada:</b> <a href="http://frikibloggeo.blogspot.com/2014/05/crear-tu-propia-version-movil-de-tu.html" target="_blank">Crear tu propia versión móvil de tu página web o blog</a><br />
<br />
<div style="text-align: justify;">
Para un blogger o una persona que desea hacer un sitio web este tuto será fundamental, puesto a que; en plena era tecnológica, donde <b>los llamados Smartphones, en primera instancia; han ganado un terreno enorme en cuanto a su porcentaje de adquisición</b>, haciendo esto que mas personas opten por acceder a la web desde ellos, y este no es mas que un ejemplo entre tantos dispositivos y resoluciones que pueden existir, por ejemplo; <b>tablets, iPods, TV's con acceso a internet, entre muchos.</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Un webmaster no se puede dar el lujo de que su pagina web quizás se pueda distorsionar, particularmente a mi, la primera vez que me ocurrió, me sentí realmente incomodo, en vista de que no podía hacer nada, pasaba horas y horas preguntándome que hacer. Estaba en la universidad, pensaba en aquello, hacía deportes, pensaba en aquello, comiendo, pensaba en aquello y cuando se me mete algo en la cabeza, hasta no resolverlo, la mente no me deja de dar vueltas, espero que a ustedes les pase lo mismo, pues es el camino al éxito. Al momento en el que los usuarios ingresen a tu portal, notaran el cambio al comparar con otros portales que quizás no se adapten a las resoluciones, se sentirán satisfechos se saber que los tomas en cuenta, ademas; de que tengas conocimientos de que existe un mundo "<i>multigadget</i>" fuera de tu computador.</div>
<a name='more'></a><br />
Primeramente, antes de mostrarle la pequeña linea de código que hace tal cosa, <b>es importante evaluar nuestro código CSS</b>, pues; dentro de este proceso, es quien da las ordenes de como debe adaptarse el estilo dependiendo del tamaño de la pantalla.<br />
<br />
Ahora, <b>supongamos que tenemos un DIV llamado <i>contenedor</i></b> con las siguientes propiedades en su estilo:<br />
<pre class="prettyprint lang-js"><code>
body #contenedor {
display:block;
background:yellow;
<b> width:991px;
</b> height: auto;
margin: 0 auto;
}
</code></pre>
<br />
<div style="text-align: justify;">
Vayamos dibujando esto en nuestra mente, hasta el momento tenemos un contenedor que se mostrará en bloque, cuyo color de fondo es amarillo, mide 991 píxeles de ancho, su altura sera automática, y estará centrado siempre en el medio de la pantalla.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Es momento de suponer, que estamos visualizando esta página web, con este contenedor en una pantalla de un Smartphone o tablet ¿Que ocurriría?</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sencillo, dudo mucho que la pantalla de un Smartphone o una tablet sobrepase los 500 píxeles de ancho, por lo tanto; el navegador crearía el scroll inferior haciendo que la pagina se vea enorme, pues; le has predefinido un ancho al contenedor que no puede ser visualizado completamente en la pantalla, y esto es lo que no queremos, la idea es que ese contenedor se vea completo en la pantalla sin necesidad de mover la pagina hacia a un lado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Ahora ¿Que seria lo correcto?, usar este tipo de valores para las propiedades de ancho o alto.</b></div>
<pre class="prettyprint lang-js"><code>
body #contenedor {
display:block;
background:yellow;
<b> width:89%;
</b> height: auto;
margin: 0 auto;
}
</code></pre>
<br />
<div style="text-align: justify;">
Al implementar el valor en porcentaje, haces que el CSS no se enfoque en una resolución exacta, si tu resolución es de 800 píxeles, tomaría el 89% de la pantalla precisamente para mostrar el contenedor, lo mismo ocurrirá para teléfonos, tablets, televisores y cualquier otro dispositivo que ingrese a ella.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>¡Pero momento!</b> eso no es todo, aun falta el código de oro, el mas preciado y el que permite reconocer desde que dispositivo ingresó el usuario. Es un código sumamente corto, te sugiero que lo coloques debajo de los metatags en tu página, que se ubican en el <b><head></b><head> de la misma</head></div>
<div>
<br /></div>
<pre class="prettyprint lang-js"><code><meta name="viewport" content="width=device-width"/></code></pre>
<br />
<div style="text-align: justify;">
Esta pequeña linea lo que realiza es detectar desde que dispositivo se ingreso al portal y cual es su resolución para adaptar los estilos CSS. Asi de sencillo, un pequeño tutorial para mis grandes amigos que se que los tenia olvidado, estoy de vuelta, y esta vez espero quedarme con ustedes, y disculpenme, todo este olvido es a causa de la universidad. ¡Saludos colegas!</div>
Anonymoushttp://www.blogger.com/profile/11061221423117158186noreply@blogger.com0